import { useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Save, UserX, UserCheck, Check, X as XIcon, Mail, LayoutGrid, Monitor } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
import { listUsers, listRoles, createUser, updateUser, setUserActive, approveUser, rejectUser, resendUserEmail, listUserSessions, revokeUserSession, revokeAllUserSessions } from '../../services/users.js';
import { listDepartments } from '../../services/departments.js';
import { listEmployees } from '../../services/integrations.js';
import { ListView } from '../../components/ListView.jsx';
import { SearchInput } from '../../components/SearchInput.jsx';
import { Button } from '../../components/Button.jsx';
import { Field, FieldRow } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { Badge } from '../../components/Badge.jsx';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import { UserModulesDialog } from './UserModulesDialog.jsx';
import { DraftNotice } from '../../components/DraftNotice.jsx';
import { DraftMark, useGuardedClose } from '../../components/NavigationGuard.jsx';
import { useDraftForm, useUserDrafts, hasDraftFor, useReopenDraft } from '../../hooks/useDraftForm.js';
import { PasswordInput } from '../../components/PasswordInput.jsx';
import { SessionsList } from '../../components/SessionsList.jsx';
import { EmailChangeRequests } from './EmailChangeRequests.jsx';

function flatten(nodes, acc = []) {
  for (const n of nodes) { acc.push(n); if (n.children?.length) flatten(n.children, acc); }
  return acc;
}

const STATUS_COLOR = { pending_verification: 'muted', pending_approval: 'warning', active: 'success', invited: 'muted' };
const EMPTY_FORM = { name: '', email: '', roleId: '', departmentId: '', position: '', password: '', employeeId: '' };
// Nómina viene en MAYÚSCULAS: "RIERA CAJAMARCA" → "Riera Cajamarca".
const titleCase = (s) => String(s || '').toLowerCase().replace(/(^|\s)\p{L}/gu, (m) => m.toUpperCase()).trim();
const fold = (s) => String(s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim().toUpperCase();

export default function UsersPanel() {
  const { t, pushToast, openDialog } = useUi();
  const { user: currentUser, logout } = useAuth();
  const navigate = useNavigate();
  const runAction = useAction();
  const { data: users, reload } = useAsync(listUsers, []);
  const { data: roles } = useAsync(listRoles, []);
  const { data: deptTree } = useAsync(listDepartments, []);

  const canManage = ['admin', 'superadmin'].includes(currentUser?.roleCode);
  const isSuperadmin = currentUser?.roleCode === 'superadmin';
  const [modulesUser, setModulesUser] = useState(null);
  const [sessionsUser, setSessionsUser] = useState(null);
  const loadSessions = useCallback(() => listUserSessions(sessionsUser.id), [sessionsUser]);
  const revokeSession = useCallback((id) => revokeUserSession(sessionsUser.id, id), [sessionsUser]);
  const revokeAllSessions = useCallback(() => revokeAllUserSessions(sessionsUser.id), [sessionsUser]);

  const [search, setSearch] = useState('');
  const [employees, setEmployees] = useState([]);
  const [editing, setEditing] = useState(false);
  const [selected, setSelected] = useState(null);
  const [approving, setApproving] = useState(null);
  const guardedClose = useGuardedClose();
  // Borrador del usuario (nuevo o edicion). La contraseña nunca se guarda como borrador.
  const draft = useDraftForm({
    formId: selected ? 'user-edit' : 'user-new', entityId: selected?.id ?? null,
    initial: selected
      ? { name: selected.name, email: selected.email, roleId: selected.role_id, departmentId: selected.department_id || '', position: selected.position || '', password: '', editVersion: selected.edit_version }
      : EMPTY_FORM,
    label: selected ? `${t('common_edit')}: ${selected.name}` : t('user_new'), enabled: editing, exclude: ['password'],
  });
  const form = draft.values;
  const setForm = draft.setValues;
  const collaboratorRole = (roles || []).find((r) => r.code === 'collaborator');
  const approveDraft = useDraftForm({
    formId: 'user-approve', entityId: approving?.id,
    initial: { roleId: approving?.role_id || collaboratorRole?.id || '', departmentId: '', editVersion: approving?.edit_version },
    label: `${t('user_approve_title')}: ${approving?.name || ''}`, enabled: !!approving,
  });
  const approveForm = approveDraft.values;
  const setApproveForm = approveDraft.setValues;
  const pendingNew = hasDraftFor(useUserDrafts(), 'user-new', null);
  useReopenDraft({ newFormId: canManage ? 'user-new' : null, editFormId: canManage ? 'user-edit' : null, items: users, openNew: () => startNew(), openEdit: (u) => startEdit(u) });
  useReopenDraft({ editFormId: canManage ? 'user-approve' : null, items: users, openEdit: (u) => setApproving(u) });

  const deptOptions = deptTree ? flatten(deptTree).map((d) => ({ value: d.id, label: d.name })) : [];
  const roleOptions = (roles || []).map((r) => ({ value: r.id, label: r.name }));

  function startNew() {
    setSelected(null);
    setEditing(true);
    // Empleados de nómina que aún no tienen usuario (si hay fuente de nómina configurada).
    listEmployees(true).then(setEmployees).catch(() => setEmployees([]));
  }
  function pickEmployee(id) {
    const e = employees.find((x) => x.id === Number(id));
    if (!e) return setForm((f) => ({ ...f, employeeId: '' }));
    const dept = deptOptions.find((d) => fold(d.label) === fold(e.department_name));
    setForm((f) => ({ ...f, employeeId: e.id, name: titleCase(`${e.first_names} ${e.last_names}`), email: e.email || f.email, position: e.position ? titleCase(e.position) : f.position, departmentId: dept ? dept.value : f.departmentId }));
  }

  function startEdit(user) {
    if (!canManage) return;
    setSelected(user);
    setEditing(true);
  }

  async function save() {
    if (!form.name.trim() || !form.email.trim() || !form.roleId) return;
    if (!selected && !form.password) return;
    const run = () => runAction(async () => {
      if (selected) {
        await updateUser(selected.id, { name: form.name.trim(), roleId: form.roleId, departmentId: form.departmentId || null, position: form.position || null, editVersion: form.editVersion });
      } else {
        await createUser({ name: form.name.trim(), email: form.email.trim(), roleId: form.roleId, departmentId: form.departmentId || null, position: form.position || null, password: form.password, employeeId: form.employeeId || undefined });
      }
      draft.clear();
      await reload();
      setEditing(false);
      pushToast({ tone: 'success', message: t('common_saved') });
    });
    if (selected) await draft.guardSave(run); else await run();
  }

  async function toggleActive(user) {
    await runAction(async () => {
      await setUserActive(user.id, !user.is_active);
      await reload();
    });
  }

  function startApprove(user) {
    setApproving(user);
  }

  async function confirmApprove() {
    await approveDraft.guardSave(() => runAction(async () => {
      await approveUser(approving.id, { roleId: approveForm.roleId, departmentId: approveForm.departmentId || null, editVersion: approveForm.editVersion });
      approveDraft.clear();
      setApproving(null);
      await reload();
      pushToast({ tone: 'success', message: t('common_saved') });
    }));
  }

  function resendEmail(user) {
    runAction(async () => {
      await resendUserEmail(user.id);
      pushToast({ tone: 'success', message: t('user_resend_sent') });
    });
  }

  function confirmReject(user) {
    openDialog({
      tone: 'warning',
      title: t('user_reject'),
      message: t('user_reject_confirm_msg'),
      actions: [
        { label: t('common_cancel'), variant: 'standard' },
        { label: t('user_reject'), variant: 'danger', onClick: () => runAction(async () => { await rejectUser(user.id); await reload(); }) },
      ],
    });
  }

  const columns = [
    { key: 'name', label: t('common_name') },
    { key: 'email', label: t('user_email') },
    { key: 'role_name', label: t('user_role') },
    { key: 'department_name', label: t('common_department'), render: (r) => r.department_name || '—' },
    { key: 'status', label: t('common_status'), sortable: false, render: (r) => (
      <Badge color={STATUS_COLOR[r.status] || 'muted'}>{t(`user_status_${r.status}`)}</Badge>
    ) },
  ];

  if (!users) return <div className="text-muted">{t('common_loading')}</div>;

  return (
    <div>
      <div className="toolbar">
        <div className="toolbar-left">
          <SearchInput value={search} onChange={setSearch} />
        </div>
        {canManage && <Button variant="accent" icon={Plus} onClick={startNew}>{t('user_new')}{pendingNew && !editing && <DraftMark />}</Button>}
      </div>

      {canManage && <EmailChangeRequests />}
      <ListView
        columns={columns}
        rows={users}
        searchValue={search}
        getSearchHaystack={(u) => `${u.name} ${u.email} ${u.role_name} ${u.department_name || ''}`}
        getRowKey={(u) => u.id}
        onRowClick={canManage ? startEdit : undefined}
        rowActions={canManage ? (u) => {
          if (u.status === 'pending_approval') {
            return [
              { label: t('user_approve'), icon: Check, onClick: () => startApprove(u) },
              { label: t('user_reject'), icon: XIcon, danger: true, onClick: () => confirmReject(u) },
            ];
          }
          if (u.status === 'pending_verification') {
            return [
              { label: t('user_resend'), icon: Mail, onClick: () => resendEmail(u) },
              { label: t('user_reject'), icon: XIcon, danger: true, onClick: () => confirmReject(u) },
            ];
          }
          if (u.status === 'invited') {
            return [{ label: t('user_resend'), icon: Mail, onClick: () => resendEmail(u) }];
          }
          return [
            { label: t('common_edit'), onClick: () => startEdit(u) },
            ...(u.role_code !== 'superadmin' || isSuperadmin ? [{ label: t('sessions_title'), icon: Monitor, onClick: () => setSessionsUser(u) }] : []),
            ...(isSuperadmin && u.role_code !== 'superadmin' ? [{ label: t('user_modules'), icon: LayoutGrid, onClick: () => setModulesUser(u) }] : []),
            u.is_active
              ? { label: t('common_inactive'), icon: UserX, danger: true, onClick: () => toggleActive(u) }
              : { label: t('common_active'), icon: UserCheck, onClick: () => toggleActive(u) },
          ];
        } : undefined}
      />

      {modulesUser && <UserModulesDialog user={modulesUser} onClose={() => setModulesUser(null)} />}
      <DetailPopup open={!!sessionsUser} title={`${t('sessions_title')}: ${sessionsUser?.name || ''}`} onClose={() => setSessionsUser(null)} width={850} height={540}>
        {sessionsUser && <SessionsList load={loadSessions} revoke={revokeSession} revokeAll={revokeAllSessions}
          allLabel={t('sessions_close_all')} onCurrentRevoked={() => { logout(); navigate('/login'); }} />}
      </DetailPopup>

      <DetailPopup open={editing} title={selected ? t('common_edit') : t('user_new')} onClose={() => guardedClose(draft, () => setEditing(false))} width={560} height={500}>
        <DraftNotice draft={draft} />
        {!selected && employees.length > 0 && (
          <Field label={t('user_from_payroll')} dirty={draft.isFieldDirty('employeeId')}>
            <ComboBox options={[{ value: '', label: '—' }, ...employees.map((e) => ({ value: e.id, label: `${e.last_names} ${e.first_names} · ${e.identification}${e.position ? ` · ${e.position}` : ''}` }))]} value={form.employeeId} onChange={pickEmployee} />
          </Field>
        )}
        <FieldRow>
          <Field label={t('common_name')} dirty={draft.isFieldDirty('name')}>
            <input className="input" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} autoFocus />
          </Field>
          <Field label={t('user_email')} dirty={draft.isFieldDirty('email')}>
            <input className="input" type="email" value={form.email} disabled={!!selected} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} />
          </Field>
        </FieldRow>
        <FieldRow>
          <Field label={t('user_role')} dirty={draft.isFieldDirty('roleId')}>
            <ComboBox options={roleOptions} value={form.roleId} onChange={(v) => setForm((f) => ({ ...f, roleId: v }))} />
          </Field>
          <Field label={t('common_department')} dirty={draft.isFieldDirty('departmentId')}>
            <ComboBox options={[{ value: '', label: '—' }, ...deptOptions]} value={form.departmentId} onChange={(v) => setForm((f) => ({ ...f, departmentId: v }))} />
          </Field>
        </FieldRow>
        <FieldRow>
          <Field label={t('user_position')} dirty={draft.isFieldDirty('position')}>
            <input className="input" value={form.position} onChange={(e) => setForm((f) => ({ ...f, position: e.target.value }))} />
          </Field>
          {!selected && (
            <Field label={t('user_password')} dirty={draft.isFieldDirty('password')}>
              <PasswordInput value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} />
            </Field>
          )}
        </FieldRow>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
          <Button variant="standard" onClick={() => { draft.discard(); setEditing(false); }}>{t('common_cancel')}</Button>
        </div>
      </DetailPopup>

      <DetailPopup open={!!approving} title={t('user_approve_title')} onClose={() => guardedClose(approveDraft, () => setApproving(null))} width={420} height={340}>
        <DraftNotice draft={approveDraft} />
        <FieldRow>
          <Field label={t('user_role')} dirty={approveDraft.isFieldDirty('roleId')}>
            <ComboBox options={roleOptions} value={approveForm.roleId} onChange={(v) => setApproveForm((f) => ({ ...f, roleId: v }))} />
          </Field>
          <Field label={t('common_department')} dirty={approveDraft.isFieldDirty('departmentId')}>
            <ComboBox options={[{ value: '', label: '—' }, ...deptOptions]} value={approveForm.departmentId} onChange={(v) => setApproveForm((f) => ({ ...f, departmentId: v }))} />
          </Field>
        </FieldRow>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="accent" icon={Check} onClick={confirmApprove}>{t('user_approve')}</Button>
          <Button variant="standard" onClick={() => { approveDraft.discard(); setApproving(null); }}>{t('common_cancel')}</Button>
        </div>
      </DetailPopup>
    </div>
  );
}