import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { fetchDepartments } from "../api/departments";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchExpenseTypes } from "../api/expenseTypes";
import {
  createExpenseStandard,
  deleteExpenseStandard,
  fetchExpenseStandards,
  updateExpenseStandard,
  type ExpenseStandard,
  type ExpenseStandardControlMode,
  type ExpenseStandardPerUnit,
  type ExpenseStandardScopeType,
} from "../api/expenseStandards";
import { isApiError } from "../api/types";
import { PageHeader } from "../components/common/PageHeader";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { ConfirmDialog } from "../components/common/ConfirmDialog";
import { Button } from "../components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";

type FilterEnabled = "all" | "enabled" | "disabled";
type FormState = {
  expenseTypeId: string;
  name: string;
  maxAmount: string;
  perUnit: ExpenseStandardPerUnit;
  controlMode: ExpenseStandardControlMode;
  scopeType: ExpenseStandardScopeType;
  scopeKey: string;
  enabled: boolean;
  note: string;
};

const PER_UNIT_OPTIONS: Array<{ value: ExpenseStandardPerUnit; label: string }> = [
  { value: "item", label: "每项" },
  { value: "day", label: "每天" },
  { value: "trip", label: "每次" },
];

const CONTROL_MODE_OPTIONS: Array<{ value: ExpenseStandardControlMode; label: string }> = [
  { value: "warn", label: "预警" },
  { value: "block", label: "阻断" },
];

function emptyForm(expenseTypeId = ""): FormState {
  return {
    expenseTypeId,
    name: "",
    maxAmount: "",
    perUnit: "item",
    controlMode: "warn",
    scopeType: "global",
    scopeKey: "",
    enabled: true,
    note: "",
  };
}

function toForm(item: ExpenseStandard): FormState {
  return {
    expenseTypeId: item.expenseTypeId,
    name: item.name,
    maxAmount: item.maxAmount,
    perUnit: item.perUnit,
    controlMode: item.controlMode,
    scopeType: item.scopeType,
    scopeKey: item.scopeKey ?? "",
    enabled: item.enabled,
    note: item.note ?? "",
  };
}

function resolveErrorMessage(error: unknown) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return "请求失败，请稍后重试";
}

function toneClassForControlMode(mode: ExpenseStandardControlMode) {
  return mode === "block"
    ? "border-red-200 bg-red-50 text-red-700"
    : "border-amber-200 bg-amber-50 text-amber-700";
}

export function ExpenseStandardsPage() {
  const queryClient = useQueryClient();
  const [error, setError] = useState("");
  const [selectedExpenseTypeId, setSelectedExpenseTypeId] = useState("");
  const [enabledFilter, setEnabledFilter] = useState<FilterEnabled>("all");
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingItem, setEditingItem] = useState<ExpenseStandard | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm());
  const [confirmDelete, setConfirmDelete] = useState<ExpenseStandard | null>(null);

  const expenseTypesQuery = useQuery({
    queryKey: ["expense-types", "expense-standards"],
    queryFn: () => fetchExpenseTypes(),
  });

  const departmentsQuery = useQuery({
    queryKey: ["departments", "expense-standards", "active"],
    queryFn: () => fetchDepartments({ includeArchived: false }),
  });

  const standardsQuery = useQuery({
    queryKey: ["expense-standards", selectedExpenseTypeId, enabledFilter],
    queryFn: () =>
      fetchExpenseStandards({
        expenseTypeId: selectedExpenseTypeId || undefined,
        enabled:
          enabledFilter === "all"
            ? undefined
            : enabledFilter === "enabled",
      }),
  });

  useEffect(() => {
    if (!dialogOpen) {
      return;
    }

    if (editingItem) {
      setForm(toForm(editingItem));
      return;
    }

    const fallbackExpenseTypeId = selectedExpenseTypeId || expenseTypesQuery.data?.items?.[0]?.id || "";
    setForm(emptyForm(fallbackExpenseTypeId));
  }, [dialogOpen, editingItem, expenseTypesQuery.data?.items, selectedExpenseTypeId]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      const mutablePayload = {
        name: form.name.trim(),
        maxAmount: form.maxAmount.trim(),
        perUnit: form.perUnit,
        controlMode: form.controlMode,
        scopeType: form.scopeType,
        scopeKey: form.scopeType === "department" ? form.scopeKey || null : null,
        enabled: form.enabled,
        note: form.note.trim() || null,
      };

      if (editingItem) {
        return updateExpenseStandard(editingItem.id, mutablePayload);
      }

      return createExpenseStandard({
        expenseTypeId: form.expenseTypeId,
        ...mutablePayload,
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["expense-standards"] });
      setDialogOpen(false);
      setEditingItem(null);
      setError("");
      toast.success(editingItem ? "标准已更新" : "标准已创建");
    },
    onError: (error) => {
      const message = resolveErrorMessage(error);
      setError(message);
      toast.error(message);
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (standardId: string) => deleteExpenseStandard(standardId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["expense-standards"] });
      setConfirmDelete(null);
      setError("");
      toast.success("标准已停用");
    },
    onError: (error) => {
      const message = resolveErrorMessage(error);
      setError(message);
      toast.error(message);
    },
  });

  const items = standardsQuery.data?.items ?? [];
  const expenseTypeOptions = expenseTypesQuery.data?.items ?? [];
  const departmentOptions = departmentsQuery.data?.items ?? [];
  const canSubmit =
    form.expenseTypeId.trim().length > 0 &&
    form.name.trim().length > 0 &&
    form.maxAmount.trim().length > 0 &&
    (form.scopeType !== "department" || form.scopeKey.trim().length > 0);

  const selectedExpenseTypeName = useMemo(() => {
    return expenseTypeOptions.find((item) => item.id === selectedExpenseTypeId)?.name ?? "全部费用类型";
  }, [expenseTypeOptions, selectedExpenseTypeId]);

  return (
    <div className="space-y-6">
      <PageHeader
        title="费用标准管理"
        subtitle="维护费用类型的通用报销上限与 warn/block 管控模式。"
        actions={
          <Button
            type="button"
            onClick={() => {
              setEditingItem(null);
              setDialogOpen(true);
            }}
          >
            新增标准
          </Button>
        }
      />

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

      <div className="card-std space-y-4 p-6">
        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
          <div className="space-y-1">
            <Label htmlFor="expense-standard-filter-type">费用类型</Label>
            <select
              id="expense-standard-filter-type"
              className="select-std"
              value={selectedExpenseTypeId}
              onChange={(event) => setSelectedExpenseTypeId(event.target.value)}
            >
              <option value="">全部费用类型</option>
              {expenseTypeOptions.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </div>

          <div className="space-y-1">
            <Label htmlFor="expense-standard-filter-enabled">启用状态</Label>
            <select
              id="expense-standard-filter-enabled"
              className="select-std"
              value={enabledFilter}
              onChange={(event) => setEnabledFilter(event.target.value as FilterEnabled)}
            >
              <option value="all">全部</option>
              <option value="enabled">启用</option>
              <option value="disabled">停用</option>
            </select>
          </div>
        </div>

        <div className="text-sm text-zinc-500">
          当前筛选：{selectedExpenseTypeName} / {enabledFilter === "all" ? "全部状态" : enabledFilter === "enabled" ? "仅启用" : "仅停用"}
        </div>

        {standardsQuery.isLoading ? (
          <TableSkeleton rows={5} />
        ) : standardsQuery.isError ? (
          <p className="text-sm text-red-600">费用标准加载失败，请刷新页面重试。</p>
        ) : (
          <div className="rounded-lg border border-zinc-200">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>费用类型</TableHead>
                  <TableHead>标准名称</TableHead>
                  <TableHead>上限金额</TableHead>
                  <TableHead>计量单位</TableHead>
                  <TableHead>管控模式</TableHead>
                  <TableHead>适用范围</TableHead>
                  <TableHead>启用状态</TableHead>
                  <TableHead className="w-32">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {items.length ? (
                  items.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell>
                        <div className="font-medium text-zinc-900">{item.expenseTypeName ?? item.expenseTypeId}</div>
                      </TableCell>
                      <TableCell>
                        <div className="font-medium text-zinc-900">{item.name}</div>
                        <div className="text-xs text-zinc-500">{item.note || "-"}</div>
                      </TableCell>
                      <TableCell>¥{item.maxAmount}</TableCell>
                      <TableCell>{PER_UNIT_OPTIONS.find((option) => option.value === item.perUnit)?.label ?? item.perUnit}</TableCell>
                      <TableCell>
                        <span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${toneClassForControlMode(item.controlMode)}`}>
                          {item.controlMode === "block" ? "阻断" : "预警"}
                        </span>
                      </TableCell>
                      <TableCell>{item.scopeLabel}</TableCell>
                      <TableCell>{item.enabled ? "启用" : "停用"}</TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-2">
                          <Button
                            size="sm"
                            type="button"
                            variant="secondary"
                            onClick={() => {
                              setEditingItem(item);
                              setDialogOpen(true);
                            }}
                          >
                            编辑
                          </Button>
                          <Button
                            size="sm"
                            type="button"
                            variant="secondary"
                            onClick={() => setConfirmDelete(item)}
                          >
                            删除
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={8} className="py-6 text-center text-sm text-zinc-500">
                      当前筛选下暂无费用标准。
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        )}
      </div>

      <Dialog
        open={dialogOpen}
        onOpenChange={(open) => {
          setDialogOpen(open);
          if (!open) {
            setEditingItem(null);
            setError("");
          }
        }}
      >
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingItem ? "编辑费用标准" : "新增费用标准"}</DialogTitle>
            <DialogDescription>维护单条明细的金额上限，以及超标后是预警还是阻断提交。</DialogDescription>
          </DialogHeader>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-1">
              <Label htmlFor="expense-standard-type">费用类型</Label>
              <select
                id="expense-standard-type"
                className="select-std"
                value={form.expenseTypeId}
                onChange={(event) => setForm((current) => ({ ...current, expenseTypeId: event.target.value }))}
                disabled={Boolean(editingItem)}
              >
                <option value="">请选择费用类型</option>
                {expenseTypeOptions.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
            </div>

            <div className="space-y-1">
              <Label htmlFor="expense-standard-name">标准名称</Label>
              <Input
                id="expense-standard-name"
                value={form.name}
                onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
                placeholder="例如：日常交通费上限"
              />
            </div>

            <div className="space-y-1">
              <Label htmlFor="expense-standard-amount">上限金额</Label>
              <Input
                id="expense-standard-amount"
                value={form.maxAmount}
                onChange={(event) => setForm((current) => ({ ...current, maxAmount: event.target.value }))}
                placeholder="例如 100.00"
              />
            </div>

            <div className="space-y-1">
              <Label htmlFor="expense-standard-per-unit">计量单位</Label>
              <select
                id="expense-standard-per-unit"
                className="select-std"
                value={form.perUnit}
                onChange={(event) => setForm((current) => ({ ...current, perUnit: event.target.value as ExpenseStandardPerUnit }))}
              >
                {PER_UNIT_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </select>
            </div>

            <div className="space-y-1">
              <Label htmlFor="expense-standard-control-mode">管控模式</Label>
              <select
                id="expense-standard-control-mode"
                className="select-std"
                value={form.controlMode}
                onChange={(event) => setForm((current) => ({ ...current, controlMode: event.target.value as ExpenseStandardControlMode }))}
              >
                {CONTROL_MODE_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </select>
            </div>

            <div className="space-y-1">
              <Label htmlFor="expense-standard-scope-type">适用范围</Label>
              <select
                id="expense-standard-scope-type"
                className="select-std"
                value={form.scopeType}
                onChange={(event) =>
                  setForm((current) => ({
                    ...current,
                    scopeType: event.target.value as ExpenseStandardScopeType,
                    scopeKey: event.target.value === "department" ? current.scopeKey : "",
                  }))
                }
              >
                <option value="global">全局</option>
                <option value="department">指定部门</option>
              </select>
            </div>

            {form.scopeType === "department" ? (
              <div className="space-y-1">
                <Label htmlFor="expense-standard-department">部门</Label>
                <select
                  id="expense-standard-department"
                  className="select-std"
                  value={form.scopeKey}
                  onChange={(event) => setForm((current) => ({ ...current, scopeKey: event.target.value }))}
                >
                  <option value="">请选择部门</option>
                  {departmentOptions.map((item) => (
                    <option key={item.id} value={item.id}>
                      {item.name}
                    </option>
                  ))}
                </select>
              </div>
            ) : null}

            <div className="space-y-1 md:col-span-2">
              <Label htmlFor="expense-standard-note">备注</Label>
              <Input
                id="expense-standard-note"
                value={form.note}
                onChange={(event) => setForm((current) => ({ ...current, note: event.target.value }))}
                placeholder="可选填写规则说明"
              />
            </div>

            <div className="space-y-1 md:col-span-2">
              <Label htmlFor="expense-standard-enabled">启用状态</Label>
              <select
                id="expense-standard-enabled"
                className="select-std max-w-xs"
                value={form.enabled ? "true" : "false"}
                onChange={(event) => setForm((current) => ({ ...current, enabled: event.target.value === "true" }))}
              >
                <option value="true">启用</option>
                <option value="false">停用</option>
              </select>
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setDialogOpen(false)}>
              取消
            </Button>
            <Button type="button" disabled={!canSubmit || saveMutation.isPending} onClick={() => saveMutation.mutate()}>
              {saveMutation.isPending ? "保存中..." : editingItem ? "保存修改" : "创建标准"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmDialog
        open={Boolean(confirmDelete)}
        onOpenChange={(open) => {
          if (!open) {
            setConfirmDelete(null);
          }
        }}
        title="确认删除该费用标准？"
        description={confirmDelete ? `删除后会将“${confirmDelete.name}”停用，不会物理移除历史记录。` : undefined}
        confirmLabel="删除"
        variant="destructive"
        onConfirm={async () => {
          if (confirmDelete) {
            await deleteMutation.mutateAsync(confirmDelete.id);
          }
        }}
      />
    </div>
  );
}

export default ExpenseStandardsPage;