import { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { mapApiErrorMessage } from "../api/errorMessages";
import { createBudget, fetchBudgets, archiveBudget, type BudgetListQuery } from "../api/budgets";
import { fetchDepartments } from "../api/departments";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Card } from "../components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";

const PAGE_SIZE = 20;

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

export function BudgetsPage() {
  const queryClient = useQueryClient();
  const { permissions } = useAuth();

  const canViewBudget = hasPermission(permissions, "budget.view") || hasPermission(permissions, "budget.manage");
  const canManageBudget = hasPermission(permissions, "budget.manage");

  const [status, setStatus] = useState<"active" | "archived" | "">("active");
  const [departmentId, setDepartmentId] = useState("");
  const [page, setPage] = useState(1);

  const [code, setCode] = useState("");
  const [name, setName] = useState("");
  const [periodStart, setPeriodStart] = useState("");
  const [periodEnd, setPeriodEnd] = useState("");
  const [allocatedAmount, setAllocatedAmount] = useState("");
  const [warningThresholdPercent, setWarningThresholdPercent] = useState("80");
  const [formDepartmentId, setFormDepartmentId] = useState("");
  const [error, setError] = useState("");

  const queryInput = useMemo<BudgetListQuery>(
    () => ({
      status: status || undefined,
      departmentId: departmentId || undefined,
      page,
      pageSize: PAGE_SIZE,
    }),
    [status, departmentId, page],
  );

  const departmentsQuery = useQuery({
    enabled: canViewBudget,
    queryKey: ["departments", "budget-filter"],
    queryFn: () => fetchDepartments(),
  });

  const budgetsQuery = useQuery({
    enabled: canViewBudget,
    queryKey: ["budgets", queryInput],
    queryFn: () => fetchBudgets(queryInput),
  });

  const createMutation = useMutation({
    mutationFn: async () => {
      return createBudget({
        code: code.trim().toUpperCase(),
        name: name.trim(),
        departmentId: formDepartmentId || null,
        periodStart,
        periodEnd,
        allocatedAmount: allocatedAmount.trim(),
        warningThresholdPercent: Number(warningThresholdPercent || 80),
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["budgets"] });
      setCode("");
      setName("");
      setPeriodStart("");
      setPeriodEnd("");
      setAllocatedAmount("");
      setWarningThresholdPercent("80");
      setFormDepartmentId("");
      setError("");
    },
    onError: (mutationError) => {
      setError(resolveError(mutationError));
    },
  });

  const archiveMutation = useMutation({
    mutationFn: async (budgetId: string) => archiveBudget(budgetId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["budgets"] });
      setError("");
    },
    onError: (mutationError) => {
      setError(resolveError(mutationError));
    },
  });

  if (!canViewBudget) {
    return (
      <div className="space-y-4">
        <PageHeader title="预算管理" subtitle="你当前没有预算权限，请联系管理员开通。" />
        <Card className="p-6 text-sm text-slate-600">所需权限：budget.view 或 budget.manage</Card>
      </div>
    );
  }

  const totalPages = Math.max(1, Math.ceil((budgetsQuery.data?.total ?? 0) / PAGE_SIZE));

  return (
    <div className="space-y-6">
      <PageHeader
        title="预算管理"
        subtitle="支持预算池维护、状态筛选与归档。"
      />

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

      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">筛选条件</h3>
        <div className="grid gap-3 md:grid-cols-3">
          <select
            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
            value={status}
            onChange={(event) => {
              setStatus(event.target.value as "active" | "archived" | "");
              setPage(1);
            }}
          >
            <option value="">全部状态</option>
            <option value="active">active</option>
            <option value="archived">archived</option>
          </select>

          <select
            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
            value={departmentId}
            onChange={(event) => {
              setDepartmentId(event.target.value);
              setPage(1);
            }}
          >
            <option value="">全部部门</option>
            {(departmentsQuery.data?.items ?? []).map((department) => (
              <option key={department.id} value={department.id}>
                {department.name}
              </option>
            ))}
          </select>

          <Button
            type="button"
            variant="secondary"
            onClick={() => queryClient.invalidateQueries({ queryKey: ["budgets"] })}
          >
            刷新列表
          </Button>
        </div>
      </Card>

      {canManageBudget ? (
        <Card className="space-y-3 p-6">
          <h3 className="text-base font-semibold text-slate-900">新建预算池</h3>
          <div className="grid gap-3 md:grid-cols-3">
            <input
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              placeholder="编码（例如 BGT-2026-RD）"
              value={code}
              onChange={(event) => setCode(event.target.value)}
            />
            <input
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              placeholder="名称"
              value={name}
              onChange={(event) => setName(event.target.value)}
            />
            <select
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              value={formDepartmentId}
              onChange={(event) => setFormDepartmentId(event.target.value)}
            >
              <option value="">全局预算（不限定部门）</option>
              {(departmentsQuery.data?.items ?? []).map((department) => (
                <option key={department.id} value={department.id}>
                  {department.name}
                </option>
              ))}
            </select>
            <input
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              type="date"
              value={periodStart}
              onChange={(event) => setPeriodStart(event.target.value)}
            />
            <input
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              type="date"
              value={periodEnd}
              onChange={(event) => setPeriodEnd(event.target.value)}
            />
            <input
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              placeholder="预算总额（例如 100000.00）"
              value={allocatedAmount}
              onChange={(event) => setAllocatedAmount(event.target.value)}
            />
            <input
              className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              type="number"
              min={1}
              max={100}
              placeholder="预警阈值（%）"
              value={warningThresholdPercent}
              onChange={(event) => setWarningThresholdPercent(event.target.value)}
            />
          </div>
          <Button
            type="button"
            disabled={
              createMutation.isPending ||
              !code.trim() ||
              !name.trim() ||
              !periodStart ||
              !periodEnd ||
              !allocatedAmount.trim()
            }
            onClick={() => createMutation.mutate()}
          >
            {createMutation.isPending ? "创建中..." : "创建预算池"}
          </Button>
        </Card>
      ) : null}

      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">预算池列表</h3>

        <div className="rounded-lg border border-slate-200">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>编码</TableHead>
                <TableHead>名称</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>期间</TableHead>
                <TableHead>额度</TableHead>
                <TableHead>预警阈值</TableHead>
                <TableHead className="w-28">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {(budgetsQuery.data?.items ?? []).length ? (
                (budgetsQuery.data?.items ?? []).map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium text-slate-900">{item.code}</TableCell>
                    <TableCell>{item.name}</TableCell>
                    <TableCell>{item.status}</TableCell>
                    <TableCell>
                      {(item.periodStart ?? "-")} ~ {(item.periodEnd ?? "-")}
                    </TableCell>
                    <TableCell>
                      {item.usedAmount} / {item.allocatedAmount}
                      <div className="text-xs text-slate-500">剩余 {item.remainingAmount}</div>
                    </TableCell>
                    <TableCell>{item.warningThresholdPercent}%</TableCell>
                    <TableCell>
                      {canManageBudget && item.status !== "archived" ? (
                        <Button
                          size="sm"
                          type="button"
                          variant="secondary"
                          disabled={archiveMutation.isPending}
                          onClick={() => {
                            if (!window.confirm(`确认归档预算池 ${item.code} ?`)) return;
                            archiveMutation.mutate(item.id);
                          }}
                        >
                          归档
                        </Button>
                      ) : (
                        <span className="text-xs text-slate-400">-</span>
                      )}
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell className="py-3 text-slate-500" colSpan={7}>
                    暂无预算池
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        <div className="flex items-center justify-between text-sm">
          <span>
            第 {page} / {totalPages} 页
          </span>
          <div className="flex gap-2">
            <Button
              variant="secondary"
              type="button"
              disabled={page <= 1}
              onClick={() => setPage((current) => Math.max(1, current - 1))}
            >
              上一页
            </Button>
            <Button
              variant="secondary"
              type="button"
              disabled={page >= totalPages}
              onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
            >
              下一页
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
}