import { useCallback, useEffect, useState } from 'react';
import {
  userProfileService,
  type AdminProfileDetail,
  type PendingProfileRow,
  type RegisteredUserRow,
} from '@/lib/user-profile-service';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { ProfileVerificationBadge } from '@/components/profile';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { FileDown, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { Textarea } from '@/components/ui/textarea';
import { Input } from '@/components/ui/input';
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Checkbox } from '@/components/ui/checkbox';
import * as XLSX from 'xlsx';
import type { ProfileVerificationStatus } from '@/components/profile/types';
import { formatIsoToDdMmYyyyHhMm } from '@/lib/vnDateFormat';
import { useAuth } from '@/contexts/AuthContext';

const VERIFICATION_LABEL_VI: Record<ProfileVerificationStatus, string> = {
  draft: 'Nháp',
  pending: 'Chờ xác minh',
  verified: 'Đã xác minh',
  rejected: 'Từ chối',
};

function formatWhen(iso: string | null | undefined): string {
  if (!iso) return '—';
  return formatIsoToDdMmYyyyHhMm(iso) || '—';
}

function academicTitleDisplay(row: RegisteredUserRow): string {
  const base = row.academicTitleLabelVi ?? '—';
  if (base === '—') return '—';
  if (row.academicTitleOther?.trim()) return `${base} — ${row.academicTitleOther.trim()}`;
  return base;
}

function rolesDisplayVi(roles: RegisteredUserRow['roles']): string {
  const map: Record<string, string> = { admin: 'QT', editor: 'HĐ', viewer: 'NĐ' };
  if (!roles.length) return '';
  return roles.map((r) => map[r] ?? r).join(', ');
}

function exportRegisteredUsersExcel(rows: RegisteredUserRow[]) {
  const sheetRows = rows.map((r) => ({
    'Họ và tên': r.fullName,
    Email: r.email,
    'Điện thoại': r.phone ?? '',
    'Ngày tạo tài khoản': formatWhen(r.createdAt),
    'Vai trò': rolesDisplayVi(r.roles),
    'Mã nhân sự': r.employeeId ?? '',
    'Đơn vị (danh mục)': r.unitCatalogName ?? '',
    'Đơn vị (nhập tay)': r.unitNameFreetext ?? '',
    'Học hàm / học vị': r.academicTitleLabelVi ?? '',
    'Khác (ghi rõ)': r.academicTitleOther ?? '',
    'Chức danh': r.jobTitle ?? '',
    'Trạng thái xác minh': VERIFICATION_LABEL_VI[r.profileVerificationStatus] ?? r.profileVerificationStatus,
  }));
  const ws = XLSX.utils.json_to_sheet(sheetRows);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Nguoi dung');
  const stamp = new Date().toISOString().slice(0, 10);
  XLSX.writeFile(wb, `tai-khoan-da-dang-ky-${stamp}.xlsx`);
}

export function AdminUserProfilesManager() {
  const { user: sessionUser } = useAuth();
  const [pending, setPending] = useState<PendingProfileRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [registry, setRegistry] = useState<RegisteredUserRow[]>([]);
  const [registryLoading, setRegistryLoading] = useState(true);
  const [detail, setDetail] = useState<AdminProfileDetail | null>(null);
  const [rejectReason, setRejectReason] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [registryError, setRegistryError] = useState('');
  const [readonlyRow, setReadonlyRow] = useState<RegisteredUserRow | null>(null);
  const [removeTarget, setRemoveTarget] = useState<RegisteredUserRow | null>(null);
  const [removeOpen, setRemoveOpen] = useState(false);
  const [removeEmailConfirm, setRemoveEmailConfirm] = useState('');
  const [removeBusy, setRemoveBusy] = useState(false);
  const [roleDraft, setRoleDraft] = useState({ admin: false, editor: false, viewer: false });
  const [rolesBusy, setRolesBusy] = useState(false);

  const loadPending = useCallback(async () => {
    setLoading(true);
    setError('');
    const res = await userProfileService.listPendingProfiles();
    if (res.success) {
      setPending(res.items);
    } else {
      setError(res.error);
    }
    setLoading(false);
  }, []);

  const loadRegistry = useCallback(async () => {
    setRegistryLoading(true);
    setRegistryError('');
    const res = await userProfileService.listRegisteredUsers();
    if (res.success) {
      setRegistry(res.items);
    } else {
      setRegistryError(res.error);
    }
    setRegistryLoading(false);
  }, []);

  useEffect(() => {
    void loadPending();
  }, [loadPending]);

  useEffect(() => {
    void loadRegistry();
  }, [loadRegistry]);

  useEffect(() => {
    if (!readonlyRow) return;
    setRoleDraft({
      admin: readonlyRow.roles.includes('admin'),
      editor: readonlyRow.roles.includes('editor'),
      viewer: readonlyRow.roles.includes('viewer'),
    });
  }, [readonlyRow]);

  const openDetail = async (userId: string) => {
    setError('');
    const res = await userProfileService.getAdminProfileDetail(userId);
    if (res.success) {
      setDetail(res.detail);
      setRejectReason('');
    } else {
      toast.error(res.error);
    }
  };

  const verify = async () => {
    if (!detail) return;
    setBusy(true);
    const v = detail.staffProfile.version;
    const res = await userProfileService.verifyProfile(detail.userId, v);
    setBusy(false);
    if (res.success) {
      toast.success('Đã xác minh hồ sơ.');
      setDetail(null);
      void loadPending();
      void loadRegistry();
    } else {
      toast.error(res.error);
      void loadPending();
      void loadRegistry();
      void openDetail(detail.userId);
    }
  };

  const reject = async () => {
    if (!detail || !rejectReason.trim()) {
      toast.error('Nhập lý do từ chối.');
      return;
    }
    setBusy(true);
    const v = detail.staffProfile.version;
    const res = await userProfileService.rejectProfile(detail.userId, v, rejectReason.trim());
    setBusy(false);
    if (res.success) {
      toast.success('Đã từ chối hồ sơ.');
      setDetail(null);
      void loadPending();
      void loadRegistry();
    } else {
      toast.error(res.error);
      void loadPending();
      void loadRegistry();
      void openDetail(detail.userId);
    }
  };

  return (
    <div className="mx-auto max-w-5xl space-y-6 p-4 md:p-6">
      <div>
        <h1 className="text-2xl font-serif font-semibold tracking-tight">Hồ sơ người dùng</h1>
        <p className="text-sm text-muted-foreground">
          Danh sách tài khoản đã đăng ký và hàng chờ xác minh hồ sơ nhân sự.
        </p>
      </div>

      <Card>
        <CardHeader className="flex flex-row flex-wrap items-start justify-between gap-3">
          <div>
            <CardTitle>Tài khoản đã đăng ký</CardTitle>
            <CardDescription>
              Xem, xuất Excel; quản trị có thể xóa vĩnh viễn tài khoản (không áp dụng tài khoản quản trị).
            </CardDescription>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button
              type="button"
              variant="secondary"
              size="sm"
              disabled={registryLoading || registry.length === 0}
              onClick={() => {
                exportRegisteredUsersExcel(registry);
                toast.success('Đã tải file Excel.');
              }}
            >
              <FileDown className="mr-1.5 h-4 w-4" />
              Xuất Excel
            </Button>
            <Button type="button" variant="outline" size="sm" onClick={() => void loadRegistry()}>
              Làm mới
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {registryLoading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin" />
              Đang tải danh sách…
            </div>
          ) : registryError ? (
            <Alert variant="destructive">
              <AlertDescription>{registryError}</AlertDescription>
            </Alert>
          ) : registry.length === 0 ? (
            <p className="text-sm text-muted-foreground">Chưa có tài khoản hoạt động.</p>
          ) : (
            <div className="overflow-x-auto rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Họ tên</TableHead>
                    <TableHead>Email</TableHead>
                    <TableHead className="whitespace-nowrap">Ngày tạo TK</TableHead>
                    <TableHead>Trạng thái HS</TableHead>
                    <TableHead className="whitespace-nowrap">Vai trò</TableHead>
                    <TableHead>Mã NS</TableHead>
                    <TableHead className="w-[1%]" />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {registry.map((r) => (
                    <TableRow key={r.userId}>
                      <TableCell className="font-medium">{r.fullName}</TableCell>
                      <TableCell className="text-muted-foreground">{r.email}</TableCell>
                      <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
                        {formatWhen(r.createdAt)}
                      </TableCell>
                      <TableCell>
                        <ProfileVerificationBadge status={r.profileVerificationStatus} />
                      </TableCell>
                      <TableCell className="text-xs text-muted-foreground">
                        {rolesDisplayVi(r.roles) || '—'}
                      </TableCell>
                      <TableCell>{r.employeeId ?? '—'}</TableCell>
                      <TableCell>
                        <Button type="button" variant="ghost" size="sm" onClick={() => setReadonlyRow(r)}>
                          Xem
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>

      {error ? (
        <Alert variant="destructive">
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      ) : null}

      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Hàng chờ xác minh</CardTitle>
            <CardDescription>Trạng thái «Chờ xác minh» từ người nộp đơn.</CardDescription>
          </div>
          <Button type="button" variant="outline" size="sm" onClick={() => void loadPending()}>
            Làm mới
          </Button>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin" />
              Đang tải hàng chờ…
            </div>
          ) : pending.length === 0 ? (
            <p className="text-sm text-muted-foreground">Không có hồ sơ chờ xử lý.</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Họ tên</TableHead>
                  <TableHead>Email</TableHead>
                  <TableHead>Mã NS</TableHead>
                  <TableHead>Gửi lúc</TableHead>
                  <TableHead />
                </TableRow>
              </TableHeader>
              <TableBody>
                {pending.map((r) => (
                  <TableRow key={r.userId}>
                    <TableCell className="font-medium">{r.fullName}</TableCell>
                    <TableCell className="text-muted-foreground">{r.email}</TableCell>
                    <TableCell>{r.employeeId ?? '—'}</TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {r.verificationSubmittedAt
                        ? formatIsoToDdMmYyyyHhMm(r.verificationSubmittedAt)
                        : '—'}
                    </TableCell>
                    <TableCell>
                      <Button type="button" variant="ghost" size="sm" onClick={() => void openDetail(r.userId)}>
                        Xem
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      <Dialog open={readonlyRow !== null} onOpenChange={(o) => !o && setReadonlyRow(null)}>
        <DialogContent className="max-h-[min(90vh,720px)] overflow-y-auto sm:max-w-xl">
          {readonlyRow ? (
            <>
              <DialogHeader>
                <DialogTitle>{readonlyRow.fullName}</DialogTitle>
                <DialogDescription>{readonlyRow.email}</DialogDescription>
                <div className="flex flex-wrap items-center gap-2 pt-1">
                  <ProfileVerificationBadge status={readonlyRow.profileVerificationStatus} />
                </div>
              </DialogHeader>
              <div className="grid gap-3 text-sm sm:grid-cols-2">
                <div>
                  <span className="text-muted-foreground">Điện thoại</span>
                  <p>{readonlyRow.phone ?? '—'}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">Ngày tạo tài khoản</span>
                  <p>{formatWhen(readonlyRow.createdAt)}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">Đơn vị (danh mục)</span>
                  <p>{readonlyRow.unitCatalogName ?? '—'}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">Đơn vị (nhập tay)</span>
                  <p>{readonlyRow.unitNameFreetext ?? '—'}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">Mã nhân sự</span>
                  <p>{readonlyRow.employeeId ?? '—'}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">Học hàm / học vị</span>
                  <p>{academicTitleDisplay(readonlyRow)}</p>
                </div>
                <div className="sm:col-span-2">
                  <span className="text-muted-foreground">Chức danh</span>
                  <p>{readonlyRow.jobTitle ?? '—'}</p>
                </div>
              </div>
              {(() => {
                const isSelf = sessionUser?.id === readonlyRow.userId;
                const adminLocked =
                  readonlyRow.policyAdminLocked || (Boolean(isSelf) && roleDraft.admin);
                return (
                  <div className="space-y-3 border-t pt-4">
                    <div>
                      <p className="text-sm font-medium">Vai trò truy cập</p>
                      <p className="text-xs text-muted-foreground">
                        Ba cột tương ứng: Quản trị · Hội đồng · Người nộp đơn (chọn ít nhất một).
                      </p>
                    </div>
                    <div className="grid grid-cols-3 gap-3">
                      <div className="flex flex-col items-center gap-2 text-center">
                        <Label htmlFor="role-admin" className="text-xs font-normal text-muted-foreground">
                          Quản trị
                        </Label>
                        <Checkbox
                          id="role-admin"
                          checked={roleDraft.admin}
                          disabled={adminLocked}
                          onCheckedChange={(v) => setRoleDraft((d) => ({ ...d, admin: v === true }))}
                          aria-label="Vai trò quản trị"
                        />
                      </div>
                      <div className="flex flex-col items-center gap-2 text-center">
                        <Label htmlFor="role-editor" className="text-xs font-normal text-muted-foreground">
                          Hội đồng
                        </Label>
                        <Checkbox
                          id="role-editor"
                          checked={roleDraft.editor}
                          onCheckedChange={(v) => setRoleDraft((d) => ({ ...d, editor: v === true }))}
                          aria-label="Vai trò hội đồng"
                        />
                      </div>
                      <div className="flex flex-col items-center gap-2 text-center">
                        <Label htmlFor="role-viewer" className="text-xs font-normal text-muted-foreground">
                          Người nộp đơn
                        </Label>
                        <Checkbox
                          id="role-viewer"
                          checked={roleDraft.viewer}
                          onCheckedChange={(v) => setRoleDraft((d) => ({ ...d, viewer: v === true }))}
                          aria-label="Vai trò người nộp đơn"
                        />
                      </div>
                    </div>
                    {readonlyRow.policyAdminLocked ? (
                      <p className="text-xs text-muted-foreground">
                        Quản trị bắt buộc: email nằm trong danh sách quản trị hiện tại trên máy chủ
                        (AUTH_ADMIN_EMAILS / mặc định).
                      </p>
                    ) : null}
                    {Boolean(isSelf) && roleDraft.admin ? (
                      <p className="text-xs text-muted-foreground">
                        Bạn không thể tự gỡ quyền Quản trị tại đây.
                      </p>
                    ) : null}
                    <Button
                      type="button"
                      size="sm"
                      className="w-full sm:w-auto"
                      disabled={rolesBusy}
                      onClick={async () => {
                        if (!roleDraft.admin && !roleDraft.editor && !roleDraft.viewer) {
                          toast.error('Chọn ít nhất một vai trò.');
                          return;
                        }
                        const uid = readonlyRow.userId;
                        setRolesBusy(true);
                        const res = await userProfileService.updateUserRoles(uid, roleDraft);
                        setRolesBusy(false);
                        if (!res.success) {
                          toast.error(res.error);
                          return;
                        }
                        toast.success('Đã cập nhật vai trò.');
                        setReadonlyRow((prev) =>
                          prev && prev.userId === uid
                            ? {
                                ...prev,
                                roles: res.roles,
                                adminFromPolicy: res.adminFromPolicy,
                                policyAdminLocked: res.policyAdminLocked,
                              }
                            : prev,
                        );
                        void loadRegistry();
                      }}
                    >
                      {rolesBusy ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Đang lưu…
                        </>
                      ) : (
                        'Lưu vai trò'
                      )}
                    </Button>
                  </div>
                );
              })()}
              {sessionUser && readonlyRow.userId !== sessionUser.id ? (
                <div className="border-t pt-4">
                  <Button
                    type="button"
                    variant="destructive"
                    size="sm"
                    onClick={() => {
                      setRemoveEmailConfirm('');
                      setRemoveTarget(readonlyRow);
                      setReadonlyRow(null);
                      setRemoveOpen(true);
                    }}
                  >
                    Xóa tài khoản khỏi CSDL
                  </Button>
                  <p className="mt-2 text-xs text-muted-foreground">
                    Dùng khi cần gỡ đăng ký để thử lại (ví dụ đăng ký OTP cùng email). Thao tác không hoàn tác.
                  </p>
                </div>
              ) : null}
            </>
          ) : null}
        </DialogContent>
      </Dialog>

      <AlertDialog
        open={removeOpen}
        onOpenChange={(o) => {
          setRemoveOpen(o);
          if (!o) {
            setRemoveEmailConfirm('');
            setRemoveTarget(null);
          }
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Xóa tài khoản vĩnh viễn?</AlertDialogTitle>
            <AlertDialogDescription asChild>
              <div className="space-y-3 text-left text-sm text-muted-foreground">
                <p>
                  Người dùng <span className="font-medium text-foreground">{removeTarget?.fullName}</span> và dữ liệu liên
                  quan tài khoản (OTP, vai trò, hồ sơ nhân sự…) sẽ bị xóa khỏi cơ sở dữ liệu khi không còn ràng buộc khác.
                </p>
                <div className="space-y-1.5">
                  <label htmlFor="remove-confirm-email" className="text-foreground">
                    Nhập đúng email để xác nhận
                  </label>
                  <Input
                    id="remove-confirm-email"
                    type="email"
                    autoComplete="off"
                    placeholder={removeTarget?.email ?? 'email@...'}
                    value={removeEmailConfirm}
                    onChange={(e) => setRemoveEmailConfirm(e.target.value)}
                  />
                </div>
              </div>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel type="button">Hủy</AlertDialogCancel>
            <Button
              type="button"
              variant="destructive"
              disabled={
                removeBusy ||
                !removeTarget ||
                removeEmailConfirm.trim().toLowerCase() !== removeTarget.email.trim().toLowerCase()
              }
              onClick={async () => {
                if (!removeTarget) return;
                setRemoveBusy(true);
                const res = await userProfileService.removeUserAccount(removeTarget.userId, removeEmailConfirm);
                setRemoveBusy(false);
                if (res.success) {
                  toast.success('Đã xóa tài khoản.');
                  setRemoveOpen(false);
                  setRemoveEmailConfirm('');
                  setRemoveTarget(null);
                  void loadRegistry();
                  void loadPending();
                } else {
                  toast.error(res.error);
                }
              }}
            >
              {removeBusy ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Đang xóa…
                </>
              ) : (
                'Xóa vĩnh viễn'
              )}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {detail ? (
        <Card>
          <CardHeader>
            <div className="flex flex-wrap items-center justify-between gap-2">
              <CardTitle>{detail.fullName}</CardTitle>
              <ProfileVerificationBadge status={detail.staffProfile.profileVerificationStatus} />
            </div>
            <CardDescription>
              {detail.email} · Phiên bản hồ sơ: {detail.staffProfile.version}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-3 text-sm sm:grid-cols-2">
              <div>
                <span className="text-muted-foreground">Điện thoại</span>
                <p>{detail.phone ?? '—'}</p>
              </div>
              <div>
                <span className="text-muted-foreground">Đơn vị (danh mục)</span>
                <p>{detail.unitCatalogName ?? detail.unitId ?? '—'}</p>
              </div>
              <div>
                <span className="text-muted-foreground">Đơn vị (tự nhập)</span>
                <p>{detail.staffProfile.unitNameFreetext ?? '—'}</p>
              </div>
              <div>
                <span className="text-muted-foreground">Mã nhân sự</span>
                <p>{detail.staffProfile.employeeId ?? '—'}</p>
              </div>
              <div>
                <span className="text-muted-foreground">Học hàm / học vị</span>
                <p>
                  {detail.staffProfile.academicTitleCode ?? '—'}
                  {detail.staffProfile.academicTitleCode === 'other'
                    ? ` — ${detail.staffProfile.academicTitleOther ?? ''}`
                    : ''}
                </p>
              </div>
              <div>
                <span className="text-muted-foreground">Chức vụ</span>
                <p>{detail.staffProfile.jobTitle ?? '—'}</p>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="reject-reason">Lý do từ chối (khi từ chối)</Label>
              <Textarea
                id="reject-reason"
                value={rejectReason}
                onChange={(e) => setRejectReason(e.target.value)}
                rows={3}
              />
            </div>

            <div className="flex flex-wrap gap-2">
              <Button type="button" onClick={() => void verify()} disabled={busy}>
                Xác minh
              </Button>
              <Button type="button" variant="destructive" onClick={() => void reject()} disabled={busy}>
                Từ chối
              </Button>
              <Button type="button" variant="outline" onClick={() => setDetail(null)}>
                Đóng
              </Button>
            </div>
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
}
