import { resolveErrorMessage as resolveUserErrorMessage } from "../lib/resolveErrorMessage";
import { useMemo, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { exportDashboardReimbursements } from "../api/exports";
import {
  fetchDashboardApprovalEfficiency,
  fetchDashboardOverview,
  fetchDashboardTopCategories,
  fetchDashboardTrends,
  type DashboardQuery,
} from "../api/dashboard";
import { fetchDepartments } from "../api/departments";
import { toast } from "sonner";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { downloadBlob } from "../lib/download";

function currentDateString() {
  return new Date().toISOString().slice(0, 10);
}

function monthStartString() {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-01`;
}

function toCurrency(value: string | number | null | undefined) {
  const numeric = Number(value ?? 0);
  if (!Number.isFinite(numeric)) {
    return "0.00";
  }
  return numeric.toFixed(2);
}

function resolveErrorMessage(error: unknown) {
  return resolveUserErrorMessage(error, "加载失败，请稍后重试。");
}

export function DashboardPage() {
  const { permissions, me } = useAuth();
  const canViewDashboard = hasPermission(permissions, "report.dashboard.view");

  const [dateFrom, setDateFrom] = useState(monthStartString());
  const [dateTo, setDateTo] = useState(currentDateString());
  const [departmentId, setDepartmentId] = useState("");

  const queryParams = useMemo<DashboardQuery>(
    () => ({
      dateFrom: dateFrom || undefined,
      dateTo: dateTo || undefined,
      departmentId: departmentId || undefined,
    }),
    [dateFrom, dateTo, departmentId],
  );

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

  const overviewQuery = useQuery({
    enabled: canViewDashboard,
    queryKey: ["dashboard", "overview", queryParams],
    queryFn: () => fetchDashboardOverview(queryParams),
  });

  const trendsQuery = useQuery({
    enabled: canViewDashboard,
    queryKey: ["dashboard", "trends", queryParams],
    queryFn: () => fetchDashboardTrends(queryParams),
  });

  const topCategoriesQuery = useQuery({
    enabled: canViewDashboard,
    queryKey: ["dashboard", "top-categories", queryParams],
    queryFn: () => fetchDashboardTopCategories({ ...queryParams, limit: 8 }),
  });

  const approvalEfficiencyQuery = useQuery({
    enabled: canViewDashboard,
    queryKey: ["dashboard", "approval-efficiency", queryParams],
    queryFn: () => fetchDashboardApprovalEfficiency(queryParams),
  });

  const exportMutation = useMutation({
    mutationFn: (format: "csv" | "xlsx") =>
      exportDashboardReimbursements({
        format,
        dateFrom: queryParams.dateFrom,
        dateTo: queryParams.dateTo,
        departmentId: queryParams.departmentId,
      }),
    onSuccess: (response, format) => {
      downloadBlob(response.blob, response.filename ?? `dashboard-reimbursements.${format}`);
      toast.success("导出完成");
    },
    onError: (err) => {
      toast.error(resolveUserErrorMessage(err, "导出失败"));
    },
  });

  if (!canViewDashboard) {
    return (
      <div className="space-y-4">
        <PageHeader title="仪表盘" subtitle="你当前没有看板权限，请联系管理员开通。" />
        <div className="card-std space-y-2 p-6 text-sm">
          <p className="text-zinc-700">当前用户：{me?.name ?? "-"}</p>
          <p className="text-zinc-500">所需权限：report.dashboard.view</p>
        </div>
      </div>
    );
  }

  const loading =
    overviewQuery.isLoading ||
    trendsQuery.isLoading ||
    topCategoriesQuery.isLoading ||
    approvalEfficiencyQuery.isLoading;

  const firstError =
    overviewQuery.error ??
    trendsQuery.error ??
    topCategoriesQuery.error ??
    approvalEfficiencyQuery.error ??
    departmentsQuery.error ??
    exportMutation.error;

  const trendPoints = trendsQuery.data?.points ?? [];
  const maxTrendAmount = Math.max(
    1,
    ...trendPoints.map((item) => Number(item.amount ?? 0)).filter((value) => Number.isFinite(value)),
  );

  const topCategories = topCategoriesQuery.data?.items ?? [];
  const maxCategoryAmount = Math.max(
    1,
    ...topCategories.map((item) => Number(item.amount ?? 0)).filter((value) => Number.isFinite(value)),
  );

  return (
    <div className="space-y-6">
      <PageHeader
        title="仪表盘"
        subtitle="费用概览、趋势、分类与审批效率。支持筛选与导出。"
      />

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

      <div className="card-std space-y-4 p-6">
        <div className="grid gap-3 md:grid-cols-4">
          <div className="space-y-1">
            <label className="text-xs text-zinc-600" htmlFor="dashboard-date-from">
              开始日期
            </label>
            <input
              id="dashboard-date-from"
              className="input-std"
              type="date"
              value={dateFrom}
              onChange={(event) => setDateFrom(event.target.value)}
            />
          </div>
          <div className="space-y-1">
            <label className="text-xs text-zinc-600" htmlFor="dashboard-date-to">
              结束日期
            </label>
            <input
              id="dashboard-date-to"
              className="input-std"
              type="date"
              value={dateTo}
              onChange={(event) => setDateTo(event.target.value)}
            />
          </div>
          <div className="space-y-1">
            <label className="text-xs text-zinc-600" htmlFor="dashboard-department-id">
              部门
            </label>
            <select
              id="dashboard-department-id"
              className="select-std"
              value={departmentId}
              onChange={(event) => setDepartmentId(event.target.value)}
            >
              <option value="">全部部门</option>
              {(departmentsQuery.data?.items ?? []).map((department) => (
                <option key={department.id} value={department.id}>
                  {department.name}
                </option>
              ))}
            </select>
          </div>
          <div className="flex items-end gap-2">
            <Button
              variant="secondary"
              type="button"
              disabled={exportMutation.isPending}
              onClick={() => exportMutation.mutate("csv")}
            >
              导出 CSV
            </Button>
            <Button
              variant="secondary"
              type="button"
              disabled={exportMutation.isPending}
              onClick={() => exportMutation.mutate("xlsx")}
            >
              导出 Excel
            </Button>
          </div>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-4">
        <div className="card-std p-4 space-y-1">
          <p className="text-xs text-zinc-500">报销单总数</p>
          <p className="mt-1 text-2xl font-semibold text-zinc-900">
            {loading ? "..." : overviewQuery.data?.totalCount ?? 0}
          </p>
        </div>
        <div className="card-std p-4 space-y-1">
          <p className="text-xs text-zinc-500">报销总金额</p>
          <p className="mt-1 text-2xl font-semibold text-zinc-900">
            {loading ? "..." : toCurrency(overviewQuery.data?.totalAmount)}
          </p>
        </div>
        <div className="card-std p-4 space-y-1">
          <p className="text-xs text-zinc-500">已付款金额</p>
          <p className="mt-1 text-2xl font-semibold text-zinc-900">
            {loading ? "..." : toCurrency(overviewQuery.data?.paidAmount)}
          </p>
        </div>
        <div className="card-std p-4 space-y-1">
          <p className="text-xs text-zinc-500">审批中数量</p>
          <p className="mt-1 text-2xl font-semibold text-zinc-900">
            {loading ? "..." : overviewQuery.data?.reviewingCount ?? 0}
          </p>
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <div className="card-std p-6 space-y-4">
          <h3 className="text-base font-semibold text-zinc-900">费用趋势</h3>
          {trendPoints.length ? (
            <div className="space-y-2">
              {trendPoints.map((item) => {
                const amount = Number(item.amount ?? 0);
                const width = `${Math.max(5, Math.round((amount / maxTrendAmount) * 100))}%`;
                return (
                  <div key={item.date} className="space-y-1">
                    <div className="flex items-center justify-between text-xs text-zinc-600">
                      <span>{item.date}</span>
                      <span>
                        {toCurrency(item.amount)} / {item.count} 笔
                      </span>
                    </div>
                    <div className="h-2 rounded-full bg-zinc-100">
                      <div className="h-2 rounded-full bg-primary" style={{ width }} />
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <p className="text-sm text-zinc-500">暂无趋势数据</p>
          )}
        </div>

        <div className="card-std p-6 space-y-4">
          <h3 className="text-base font-semibold text-zinc-900">费用分类 TopN</h3>
          {topCategories.length ? (
            <div className="space-y-2">
              {topCategories.map((item) => {
                const amount = Number(item.amount ?? 0);
                const width = `${Math.max(5, Math.round((amount / maxCategoryAmount) * 100))}%`;
                return (
                  <div key={item.code} className="space-y-1">
                    <div className="flex items-center justify-between text-xs text-zinc-600">
                      <span>
                        {item.name} ({item.code})
                      </span>
                      <span>
                        {toCurrency(item.amount)} / {item.count} 笔
                      </span>
                    </div>
                    <div className="h-2 rounded-full bg-zinc-100">
                      <div className="h-2 rounded-full bg-emerald-500" style={{ width }} />
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <p className="text-sm text-zinc-500">暂无分类统计</p>
          )}
        </div>
      </div>

      <div className="card-std p-6 space-y-2 text-sm">
        <h3 className="text-base font-semibold text-zinc-900">审批效率</h3>
        <p className="text-zinc-700">
          已统计通过单据：
          <span className="ml-1 font-medium text-zinc-900">
            {approvalEfficiencyQuery.data?.approvedCount ?? 0}
          </span>
        </p>
        <p className="text-zinc-700">
          平均审批耗时（小时）：
          <span className="ml-1 font-medium text-zinc-900">
            {approvalEfficiencyQuery.data?.averageHours?.toFixed(2) ?? "0.00"}
          </span>
        </p>
      </div>
    </div>
  );
}