import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import {
  applyUserImport,
  dryRunUserImport,
  type UserImportApplyResult,
  type UserImportDryRunResult,
} from "../../api/users";
import { mapApiErrorMessage } from "../../api/errorMessages";
import { isApiError } from "../../api/types";
import { downloadBlob } from "../../lib/download";
import { Button } from "../../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../../components/ui/dialog";
import { Input } from "../../components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
import { toast } from "sonner";

export interface UserImportDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onImported: () => Promise<void> | void;
}

const TEMPLATE_CSV = [
  "employeeNo,name,phone,email,departmentName,title,directManagerEmployeeNo,roles,hireDate",
  "E1001,李经理,13800000001,manager@example.com,行政部,经理,,manager,2026-03-01",
  "E1002,张三,13800000002,zhangsan@example.com,行政部,员工,E1001,employee,2026-03-15",
].join("\n");

function toCsvCell(value: string) {
  if (/[",\n\r]/.test(value)) {
    return `"${value.replace(/"/g, "\"\"")}"`;
  }
  return value;
}

function formatErrorMessage(error: unknown, fallback: string) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  return error instanceof Error ? error.message : fallback;
}

function parsePreviewFromError(error: unknown, sourceFilename: string): UserImportDryRunResult | null {
  if (!isApiError(error) || !error.details || typeof error.details !== "object") {
    return null;
  }

  const summary = "summary" in error.details ? error.details.summary : null;
  const rows = "rows" in error.details ? error.details.rows : null;
  if (!summary || !rows || !Array.isArray(rows)) {
    return null;
  }

  return {
    sourceFilename,
    summary: summary as UserImportDryRunResult["summary"],
    rows: rows as UserImportDryRunResult["rows"],
  };
}

function buildPasswordsCsv(result: UserImportApplyResult) {
  const lines = [
    "employeeNo,name,email,oneTimePassword",
    ...result.imported.map((item) =>
      [
        item.employeeNo,
        item.name,
        item.email,
        item.oneTimePassword,
      ].map(toCsvCell).join(","),
    ),
  ];
  return `\uFEFF${lines.join("\n")}`;
}

export function UserImportDialog({ open, onOpenChange, onImported }: UserImportDialogProps) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [error, setError] = useState("");
  const [dryRunResult, setDryRunResult] = useState<UserImportDryRunResult | null>(null);
  const [applyResult, setApplyResult] = useState<UserImportApplyResult | null>(null);

  useEffect(() => {
    if (open) {
      return;
    }
    setSelectedFile(null);
    setError("");
    setDryRunResult(null);
    setApplyResult(null);
  }, [open]);

  const dryRunMutation = useMutation({
    mutationFn: async () => {
      if (!selectedFile) {
        throw new Error("请先选择 CSV 或 XLSX 文件");
      }
      return dryRunUserImport(selectedFile);
    },
    onSuccess: (result) => {
      setDryRunResult(result);
      setApplyResult(null);
      setError("");
      if (result.summary.invalidRows > 0) {
        toast.error(`预检完成，存在 ${result.summary.invalidRows} 行问题`);
      } else {
        toast.success("预检通过，可以执行导入");
      }
    },
    onError: (mutationError) => {
      setError(formatErrorMessage(mutationError, "预检失败"));
      const preview = parsePreviewFromError(mutationError, selectedFile?.name ?? "users-import");
      if (preview) {
        setDryRunResult(preview);
      }
      toast.error(formatErrorMessage(mutationError, "预检失败"));
    },
  });

  const applyMutation = useMutation({
    mutationFn: async () => {
      if (!selectedFile) {
        throw new Error("请先选择 CSV 或 XLSX 文件");
      }
      return applyUserImport(selectedFile);
    },
    onSuccess: async (result) => {
      setApplyResult(result);
      setError("");
      await onImported();
      toast.success(`导入完成，成功创建 ${result.imported.length} 个账号`);
    },
    onError: (mutationError) => {
      setError(formatErrorMessage(mutationError, "导入失败"));
      const preview = parsePreviewFromError(mutationError, selectedFile?.name ?? "users-import");
      if (preview) {
        setDryRunResult(preview);
      }
      toast.error(formatErrorMessage(mutationError, "导入失败"));
    },
  });

  const summary = applyResult?.summary ?? dryRunResult?.summary ?? null;
  const canApply =
    Boolean(selectedFile) &&
    Boolean(dryRunResult) &&
    dryRunResult?.summary.invalidRows === 0 &&
    !applyResult &&
    !applyMutation.isPending;

  function handleDownloadTemplate() {
    downloadBlob(
      new Blob([`\uFEFF${TEMPLATE_CSV}`], { type: "text/csv;charset=utf-8" }),
      "users-import-template.csv",
    );
  }

  function handleDownloadPasswords() {
    if (!applyResult) {
      return;
    }
    downloadBlob(
      new Blob([buildPasswordsCsv(applyResult)], { type: "text/csv;charset=utf-8" }),
      "users-import-passwords.csv",
    );
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogTrigger asChild>
        <Button data-testid="users-import-open" type="button" variant="secondary">
          批量导入
        </Button>
      </DialogTrigger>
      <DialogContent className="max-h-[85vh] max-w-5xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>批量导入员工</DialogTitle>
          <DialogDescription>
            上传员工表，先预检，再确认导入。成功后可下载一次性密码清单。
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          <div className="grid gap-4 lg:grid-cols-[220px,1fr]">
            <div className="space-y-3">
              <Button type="button" variant="secondary" onClick={handleDownloadTemplate}>
                下载 CSV 模板
              </Button>
              <Input
                type="file"
                accept=".csv,.xlsx,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                onChange={(event) => {
                  const nextFile = event.target.files?.[0] ?? null;
                  setSelectedFile(nextFile);
                  setError("");
                  setDryRunResult(null);
                  setApplyResult(null);
                }}
              />
              <div className="text-xs text-zinc-500">
                必填列：employeeNo、name、phone、email、departmentName
              </div>
              <div className="text-xs text-zinc-500">
                选填列：title、directManagerEmployeeNo、roles、hireDate
              </div>
              {selectedFile ? (
                <div className="rounded-lg border border-zinc-200 px-3 py-2 text-xs text-zinc-600">
                  当前文件：{selectedFile.name}
                </div>
              ) : null}
            </div>

            <div className="space-y-4">
              <div className="flex flex-wrap gap-2">
                <Button
                  type="button"
                  onClick={() => dryRunMutation.mutate()}
                  disabled={!selectedFile || dryRunMutation.isPending || applyMutation.isPending}
                >
                  {dryRunMutation.isPending ? "预检中..." : "预检"}
                </Button>
                <Button
                  type="button"
                  variant="secondary"
                  onClick={() => applyMutation.mutate()}
                  disabled={!canApply}
                >
                  {applyMutation.isPending ? "导入中..." : "确认导入"}
                </Button>
                {applyResult ? (
                  <Button type="button" variant="secondary" onClick={handleDownloadPasswords}>
                    下载密码清单
                  </Button>
                ) : null}
              </div>

              {error ? (
                <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
                  {error}
                </p>
              ) : null}

              {summary ? (
                <div className="grid gap-3 md:grid-cols-3">
                  <div className="rounded-lg border border-zinc-200 p-4">
                    <div className="text-sm text-zinc-500">总行数</div>
                    <div className="mt-2 text-2xl font-semibold text-zinc-900">{summary.totalRows}</div>
                  </div>
                  <div className="rounded-lg border border-zinc-200 p-4">
                    <div className="text-sm text-zinc-500">通过行数</div>
                    <div className="mt-2 text-2xl font-semibold text-emerald-600">{summary.validRows}</div>
                  </div>
                  <div className="rounded-lg border border-zinc-200 p-4">
                    <div className="text-sm text-zinc-500">失败行数</div>
                    <div className="mt-2 text-2xl font-semibold text-red-600">{summary.invalidRows}</div>
                  </div>
                </div>
              ) : (
                <div className="rounded-lg border border-dashed border-zinc-300 px-4 py-6 text-sm text-zinc-500">
                  下载模板并上传文件后，先预检逐行结果。
                </div>
              )}
            </div>
          </div>

          {dryRunResult ? (
            <div className="space-y-4">
              <div>
                <h3 className="text-base font-semibold text-zinc-900">预检结果</h3>
                <div className="mt-1 text-sm text-zinc-500">{dryRunResult.sourceFilename}</div>
              </div>

              <div className="rounded-lg border border-zinc-200">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>行号</TableHead>
                      <TableHead>员工</TableHead>
                      <TableHead>标准化结果</TableHead>
                      <TableHead>校验结果</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {dryRunResult.rows.map((row) => (
                      <TableRow key={row.rowNumber}>
                        <TableCell>{row.rowNumber}</TableCell>
                        <TableCell>
                          <div className="font-medium text-zinc-900">{row.name || "-"}</div>
                          <div className="text-xs text-zinc-500">{row.employeeNo || "-"}</div>
                        </TableCell>
                        <TableCell className="text-sm text-zinc-600">
                          <div>{row.normalized.departmentName} · {row.normalized.title} · {row.normalized.hireDate}</div>
                          <div className="mt-1 text-xs text-zinc-500">
                            直属上级：{row.normalized.directManagerEmployeeNo || "-"} · 角色：{row.normalized.roles.join(" / ")}
                          </div>
                        </TableCell>
                        <TableCell className="text-sm">
                          {row.errors.length ? (
                            <div className="space-y-1 text-red-600">
                              {row.errors.map((item, index) => (
                                <div key={`${row.rowNumber}-${item.field}-${index}`}>
                                  {item.field}: {item.message}
                                </div>
                              ))}
                            </div>
                          ) : (
                            <span className="text-emerald-600">通过</span>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          ) : null}

          {applyResult ? (
            <div className="space-y-4">
              <div>
                <h3 className="text-base font-semibold text-zinc-900">导入成功清单</h3>
                <div className="mt-1 text-sm text-zinc-500">
                  已生成一次性密码，建议立即下载并线下发放。
                </div>
              </div>

              <div className="rounded-lg border border-zinc-200">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>员工</TableHead>
                      <TableHead>邮箱</TableHead>
                      <TableHead>一次性密码</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {applyResult.imported.map((item) => (
                      <TableRow key={item.employeeId}>
                        <TableCell>
                          <div className="font-medium text-zinc-900">{item.name}</div>
                          <div className="text-xs text-zinc-500">{item.employeeNo}</div>
                        </TableCell>
                        <TableCell>{item.email}</TableCell>
                        <TableCell className="font-mono text-sm">{item.oneTimePassword}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          ) : null}
        </div>
      </DialogContent>
    </Dialog>
  );
}