import { useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { Plus, KeyRound, Power, PowerOff, Pencil, Copy } from 'lucide-react'
import { api } from '@/lib/api'
import { ListPageShell } from '@/components/ListPageShell'
import { DataTable } from '@/components/DataTable'
import { Pagination } from '@/components/Pagination'
import { SearchBar } from '@/components/SearchBar'
import { Button } from '@/components/Button'
import { Modal } from '@/components/Modal'
import { Field, TextInput, TextArea, Checkbox } from '@/components/Field'
import { PhoneInput } from '@/components/PhoneInput'
import { useCatalogList } from '@/lib/useCatalog'
import type { PagedResult } from '@/lib/types'
import type { EmployeeRoleDto } from '@/pages/EmployeeRolesPage'

interface OrgInfo { id: string; name: string }

interface EmployeeRow {
  id: string; userId: string | null
  lastName: string; firstName: string; middleName: string | null
  position: string | null; email: string | null; phone: string | null
  roleId: string; roleName: string; isRoleSystem: boolean
  isActive: boolean; firedAt: string | null
  hasAccount: boolean; accountActive: boolean; lastLoginAt: string | null
  isOwner: boolean
}

interface EmpForm {
  id?: string
  reason: string
  lastName: string; firstName: string; middleName: string
  position: string; email: string; phone: string
  roleId: string; isActive: boolean
  retailPointIds: string[]
  createAccount: boolean; accountEmail: string
}

const blankForm = (): EmpForm => ({
  reason: '', lastName: '', firstName: '', middleName: '',
  position: '', email: '', phone: '',
  roleId: '', isActive: true,
  retailPointIds: [],
  createAccount: false, accountEmail: '',
})

/** SuperAdmin-страница: управление сотрудниками выбранной организации.
 * Использует /api/super-admin/organizations/{orgId}/employees — обходит
 * tenant-фильтр и tenant-гарды (можно править главного администратора,
 * деактивировать аккаунт, сбрасывать пароль). Каждое мутирующее действие
 * требует reason ≥10 символов и пишется в SuperAdminAuditLog. */
export function SuperAdminOrgEmployeesPage() {
  const { id: orgId } = useParams<{ id: string }>()
  const navigate = useNavigate()

  const orgQuery = useQuery({
    queryKey: ['/api/super-admin/organizations', orgId],
    queryFn: async () => (await api.get<OrgInfo>(`/api/super-admin/organizations/${orgId}`)).data,
    enabled: !!orgId,
  })

  const URL = `/api/super-admin/organizations/${orgId}/employees`
  const list = useCatalogList<EmployeeRow>(URL, { includeInactive: true })

  const roles = useQuery({
    queryKey: ['sa-employee-roles', orgId],
    queryFn: async () => {
      // Роли хранятся в tenant-scoped таблице — обходим через X-Org-Override.
      const res = await api.get<PagedResult<EmployeeRoleDto>>('/api/organization/employee-roles?pageSize=200',
        { headers: { 'X-Org-Override': orgId ?? '' } })
      return res.data.items
    },
    enabled: !!orgId,
  })

  const [form, setForm] = useState<EmpForm | null>(null)
  const [activeRow, setActiveRow] = useState<EmployeeRow | null>(null)
  const [resetFor, setResetFor] = useState<EmployeeRow | null>(null)
  const [resetReason, setResetReason] = useState('')
  const [resetResult, setResetResult] = useState<{ email: string; tempPassword: string } | null>(null)
  const [toggleConfirm, setToggleConfirm] = useState<{ row: EmployeeRow; activate: boolean; target: 'employee' | 'account' } | null>(null)
  const [toggleReason, setToggleReason] = useState('')
  const [errorMsg, setErrorMsg] = useState<string | null>(null)

  const openCreate = () => setForm(blankForm())
  const openEdit = (r: EmployeeRow) => {
    setActiveRow(r)
    setForm({
      id: r.id, reason: '',
      lastName: r.lastName, firstName: r.firstName, middleName: r.middleName ?? '',
      position: r.position ?? '', email: r.email ?? '', phone: r.phone ?? '',
      roleId: r.roleId, isActive: r.isActive,
      retailPointIds: [],
      createAccount: false, accountEmail: '',
    })
  }
  const closeForm = () => { setForm(null); setActiveRow(null) }

  const save = async () => {
    if (!form) return
    setErrorMsg(null)
    try {
      if (form.id) {
        await api.put(`${URL}/${form.id}`, {
          reason: form.reason,
          employee: {
            lastName: form.lastName, firstName: form.firstName, middleName: form.middleName || null,
            position: form.position || null, email: form.email || null, phone: form.phone || null,
            salary: null, taxNumber: null, description: null, imageUrl: null,
            roleId: form.roleId, isActive: form.isActive,
            retailPointIds: form.retailPointIds,
          },
        })
      } else {
        const res = await api.post(URL, {
          reason: form.reason,
          lastName: form.lastName, firstName: form.firstName, middleName: form.middleName || null,
          position: form.position || null, email: form.email || null, phone: form.phone || null,
          roleId: form.roleId, isActive: form.isActive,
          retailPointIds: form.retailPointIds,
          createAccount: form.createAccount,
          accountEmail: form.accountEmail || form.email || null,
        }) as { data: { generatedPassword?: string; employee: { email: string | null } } }
        if (res.data.generatedPassword && res.data.employee.email) {
          setResetResult({ email: res.data.employee.email, tempPassword: res.data.generatedPassword })
        }
      }
      closeForm()
      list.refetch()
    } catch (e) {
      const err = e as { response?: { data?: { error?: string } }, message?: string }
      setErrorMsg(err.response?.data?.error ?? err.message ?? 'Не удалось сохранить')
    }
  }

  const doReset = async () => {
    if (!resetFor) return
    setErrorMsg(null)
    try {
      const res = await api.post<{ email: string; tempPassword: string }>(
        `${URL}/${resetFor.id}/reset-password`, { reason: resetReason })
      setResetResult(res.data)
      setResetFor(null); setResetReason('')
    } catch (e) {
      const err = e as { response?: { data?: { error?: string } }, message?: string }
      setErrorMsg(err.response?.data?.error ?? err.message ?? 'Не удалось сбросить пароль')
    }
  }

  const doToggle = async () => {
    if (!toggleConfirm) return
    setErrorMsg(null)
    try {
      const path = toggleConfirm.target === 'account'
        ? `${URL}/${toggleConfirm.row.id}/account/toggle-active`
        : `${URL}/${toggleConfirm.row.id}/toggle-active`
      await api.post(path, { reason: toggleReason, isActive: toggleConfirm.activate })
      setToggleConfirm(null); setToggleReason('')
      list.refetch()
    } catch (e) {
      const err = e as { response?: { data?: { error?: string } }, message?: string }
      setErrorMsg(err.response?.data?.error ?? err.message ?? 'Не удалось')
    }
  }

  const orgName = orgQuery.data?.name ?? '…'

  return (
    <>
      <ListPageShell
        title={`Сотрудники · ${orgName}`}
        description="Полный доступ супер-администратора к сотрудникам организации. Каждое действие пишется в журнал."
        actions={
          <>
            <Button variant="secondary" onClick={() => navigate('/super-admin/organizations')}>← К организациям</Button>
            <SearchBar value={list.search} onChange={list.setSearch} />
            <Button onClick={openCreate}>
              <Plus className="w-4 h-4" /> Добавить сотрудника
            </Button>
          </>
        }
        footer={list.data && list.data.total > 0 && (
          <Pagination page={list.page} pageSize={list.data.pageSize} total={list.data.total} onPageChange={list.setPage} />
        )}
      >
        <DataTable
          rows={list.data?.items ?? []}
          isLoading={list.isLoading}
          rowKey={(r) => r.id}
          columns={[
            { header: 'ФИО', cell: (r) => (
              <div>
                <div className="font-medium flex items-center gap-2">
                  <span>{r.lastName} {r.firstName} {r.middleName ?? ''}</span>
                  {r.isOwner && (
                    <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-amber-100 text-amber-800">Главный администратор</span>
                  )}
                </div>
                {r.position && <div className="text-xs text-slate-400">{r.position}</div>}
              </div>
            )},
            { header: 'Роль', width: '160px', cell: (r) => r.roleName },
            { header: 'Email', width: '220px', cell: (r) => r.email ?? '—' },
            { header: 'Учётка', width: '140px', cell: (r) => r.hasAccount
              ? r.accountActive
                ? <span className="text-xs text-emerald-600">активна</span>
                : <span className="text-xs text-rose-600">заблокирована</span>
              : <span className="text-xs text-slate-400">нет</span> },
            { header: 'Сотрудник', width: '120px', cell: (r) => r.isActive
              ? <span className="text-xs text-emerald-600">Активен</span>
              : <span className="text-xs text-slate-400">Уволен</span> },
            { header: 'Last login', width: '120px', cell: (r) => r.lastLoginAt
              ? new Date(r.lastLoginAt).toLocaleDateString('ru') : '—' },
            { header: '', width: '180px', cell: (r) => (
              <div className="flex gap-1.5" onClick={(e) => e.stopPropagation()}>
                <button title="Редактировать" onClick={() => openEdit(r)}
                  className="p-1.5 text-blue-600 hover:bg-blue-50 rounded"><Pencil className="w-4 h-4" /></button>
                {r.hasAccount && (
                  <button title="Сбросить пароль" onClick={() => { setResetFor(r); setResetReason('') }}
                    className="p-1.5 text-amber-600 hover:bg-amber-50 rounded"><KeyRound className="w-4 h-4" /></button>
                )}
                {r.hasAccount && (
                  <button
                    title={r.accountActive ? 'Заблокировать учётку' : 'Разблокировать учётку'}
                    onClick={() => { setToggleConfirm({ row: r, activate: !r.accountActive, target: 'account' }); setToggleReason('') }}
                    className="p-1.5 text-rose-600 hover:bg-rose-50 rounded">
                    {r.accountActive ? <PowerOff className="w-4 h-4" /> : <Power className="w-4 h-4" />}
                  </button>
                )}
                <button
                  title={r.isActive ? 'Деактивировать сотрудника' : 'Активировать сотрудника'}
                  onClick={() => { setToggleConfirm({ row: r, activate: !r.isActive, target: 'employee' }); setToggleReason('') }}
                  className="p-1.5 text-slate-600 hover:bg-slate-100 rounded">
                  {r.isActive ? <PowerOff className="w-4 h-4" /> : <Power className="w-4 h-4" />}
                </button>
              </div>
            )},
          ]}
        />
      </ListPageShell>

      {/* Создание/редактирование */}
      <Modal
        open={!!form}
        onClose={closeForm}
        title={form?.id
          ? `Редактировать ${activeRow?.isOwner ? 'главного администратора' : 'сотрудника'}`
          : 'Новый сотрудник'}
        width="max-w-xl"
        footer={<>
          <Button variant="secondary" onClick={closeForm}>Отмена</Button>
          <Button onClick={save}
            disabled={!form?.lastName || !form?.firstName || !form?.roleId || (form?.reason?.trim().length ?? 0) < 10}>
            Сохранить
          </Button>
        </>}>
        {form && (
          <div className="space-y-3">
            {activeRow?.isOwner && (
              <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-2.5 py-2">
                Это главный администратор организации. SuperAdmin может менять любую роль и активность —
                но при деактивации главного администратора организация останется без владельца.
              </p>
            )}
            <Field label="Причина изменения (≥ 10 символов, в журнал)">
              <TextArea rows={2} value={form.reason} onChange={(e) => setForm({ ...form, reason: e.target.value })}
                placeholder="Например: запрос клиента №42 — повысить кассира до администратора" />
            </Field>
            <div className="grid grid-cols-2 gap-3">
              <Field label="Фамилия *">
                <TextInput value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} />
              </Field>
              <Field label="Имя *">
                <TextInput value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} />
              </Field>
              <Field label="Отчество">
                <TextInput value={form.middleName} onChange={(e) => setForm({ ...form, middleName: e.target.value })} />
              </Field>
              <Field label="Должность">
                <TextInput value={form.position} onChange={(e) => setForm({ ...form, position: e.target.value })} />
              </Field>
              <Field label="Email">
                <TextInput type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              </Field>
              <Field label="Телефон">
                <PhoneInput value={form.phone} onChange={(v) => setForm({ ...form, phone: v })} />
              </Field>
            </div>
            <Field label="Роль *">
              <select value={form.roleId} onChange={(e) => setForm({ ...form, roleId: e.target.value })}
                className="w-full h-10 rounded-md border border-slate-300 bg-white px-3 text-sm">
                <option value="">— выберите —</option>
                {roles.data?.map((r) => (
                  <option key={r.id} value={r.id}>
                    {r.name}{r.isSystem ? ' (системная)' : ''}
                  </option>
                ))}
              </select>
            </Field>
            <Checkbox label="Активен" checked={form.isActive}
              onChange={(v) => setForm({ ...form, isActive: v })} />
            {!form.id && (
              <>
                <Checkbox label="Создать учётную запись (выдать логин)"
                  checked={form.createAccount}
                  onChange={(v) => setForm({ ...form, createAccount: v })} />
                {form.createAccount && (
                  <Field label="Email учётной записи">
                    <TextInput type="email" value={form.accountEmail || form.email}
                      onChange={(e) => setForm({ ...form, accountEmail: e.target.value })}
                      placeholder="name@example.kz" />
                  </Field>
                )}
              </>
            )}
          </div>
        )}
      </Modal>

      {/* Сброс пароля */}
      <Modal open={!!resetFor} onClose={() => setResetFor(null)}
        title="Сбросить пароль"
        footer={<>
          <Button variant="secondary" onClick={() => setResetFor(null)}>Отмена</Button>
          <Button variant="danger" onClick={doReset} disabled={resetReason.trim().length < 10}>Сбросить</Button>
        </>}>
        {resetFor && (
          <div className="space-y-3">
            <p className="text-sm text-slate-700">
              Будет сгенерирован новый временный пароль для <strong>{resetFor.email ?? '—'}</strong>.
              Все активные сессии этого юзера будут оборваны.
            </p>
            <Field label="Причина (≥ 10 символов)">
              <TextArea rows={2} value={resetReason} onChange={(e) => setResetReason(e.target.value)} />
            </Field>
          </div>
        )}
      </Modal>

      {/* Результат сброса/создания — пароль one-shot */}
      <Modal open={!!resetResult} onClose={() => setResetResult(null)}
        title="Временный пароль"
        footer={<Button onClick={() => setResetResult(null)}>Готово</Button>}>
        {resetResult && (
          <div className="space-y-3">
            <p className="text-sm text-slate-700">
              Передайте логин и пароль пользователю. <strong>Этот пароль показывается один раз.</strong>
            </p>
            <Field label="Email">
              <div className="flex gap-2">
                <TextInput value={resetResult.email} readOnly />
                <Button variant="secondary" size="sm"
                  onClick={() => navigator.clipboard?.writeText(resetResult.email)}>
                  <Copy className="w-4 h-4" />
                </Button>
              </div>
            </Field>
            <Field label="Временный пароль">
              <div className="flex gap-2">
                <TextInput value={resetResult.tempPassword} readOnly className="font-mono" />
                <Button variant="secondary" size="sm"
                  onClick={() => navigator.clipboard?.writeText(resetResult.tempPassword)}>
                  <Copy className="w-4 h-4" />
                </Button>
              </div>
            </Field>
          </div>
        )}
      </Modal>

      {/* Подтверждение toggle (employee/account) */}
      <Modal open={!!toggleConfirm} onClose={() => setToggleConfirm(null)}
        title={toggleConfirm
          ? (toggleConfirm.target === 'account'
              ? (toggleConfirm.activate ? 'Разблокировать учётную запись' : 'Заблокировать учётную запись')
              : (toggleConfirm.activate ? 'Активировать сотрудника' : 'Деактивировать сотрудника'))
          : ''}
        footer={<>
          <Button variant="secondary" onClick={() => setToggleConfirm(null)}>Отмена</Button>
          <Button variant="danger" onClick={doToggle} disabled={toggleReason.trim().length < 10}>Подтвердить</Button>
        </>}>
        {toggleConfirm && (
          <div className="space-y-3">
            <p className="text-sm text-slate-700">
              {toggleConfirm.target === 'account'
                ? (toggleConfirm.activate
                    ? <>Разблокировать вход <strong>{toggleConfirm.row.email}</strong>. Юзер сможет залогиниться при следующей попытке.</>
                    : <>Заблокировать вход <strong>{toggleConfirm.row.email}</strong>. Все активные сессии оборвутся.</>)
                : (toggleConfirm.activate
                    ? <>Активировать сотрудника <strong>{toggleConfirm.row.lastName} {toggleConfirm.row.firstName}</strong>.</>
                    : <>Деактивировать сотрудника <strong>{toggleConfirm.row.lastName} {toggleConfirm.row.firstName}</strong>. Учётная запись остаётся.</>)}
            </p>
            <Field label="Причина (≥ 10 символов)">
              <TextArea rows={2} value={toggleReason} onChange={(e) => setToggleReason(e.target.value)} />
            </Field>
          </div>
        )}
      </Modal>

      <Modal open={!!errorMsg} onClose={() => setErrorMsg(null)}
        title="Ошибка"
        footer={<Button onClick={() => setErrorMsg(null)}>Понятно</Button>}>
        <p className="text-sm text-rose-700 whitespace-pre-line">{errorMsg}</p>
      </Modal>
    </>
  )
}
