import { useMemo, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { fetchDepartments } from "../api/departments";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  fetchReimbursementApprovalBottleneck,
  fetchReimbursementStatsSummary,
  fetchReimbursementStatsTrend,
  fetchReimbursementTopExpenseTypes,
  type ReimbursementStatsQuery,
} from "../api/reimbursements";
import { isApiError } from "../api/types";
import { PageHeader } from "../components/common/PageHeader";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";

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

function defaultDateFromString() {
  const now = new Date();
  now.setDate(1);
  now.setMonth(now.getMonth() - 2);
  return now.toISOString().slice(0, 10);
}

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 formatCurrency(value: string | number | null | undefined) {
  const numeric = Number(value ?? 0);
  return new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(
    Number.isFinite(numeric) ? numeric : 0,
  );
}

function formatAvgDays(value: number | null) {
  if (value == null) {
    return "-";
  }
  const normalized = Number(value);
  if (!Number.isFinite(normalized)) {
    return "-";
  }
  return `${normalized.toFixed(1)} 天`;
}

function formatPeriod(value: string | null) {
  if (!value) {
    return "-";
  }
  return value.length === 7 ? value : value.replace("T", " ").slice(0, 10);
}

function normalizeBarWidth(current: number, max: number) {
  if (max <= 0 || current <= 0) {
    return "0%";
  }
  return `${Math.max(8, Math.min(100, (current / max) * 100))}%`;
}

export function ReimbursementDashboardPage() {
  const queryClient = useQueryClient();
  const [dateFrom, setDateFrom] = useState(defaultDateFromString());
  const [dateTo, setDateTo] = useState(currentDateString());
  const [departmentId, setDepartmentId] = useState("");

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

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

  const summaryQuery = useQuery({
    queryKey: ["reimbursements", "stats", "summary", filters],
    queryFn: () => fetchReimbursementStatsSummary(filters),
  });

  const trendQuery = useQuery({
    queryKey: ["reimbursements", "stats", "trend", filters],
    queryFn: () => fetchReimbursementStatsTrend({ ...filters, granularity: "month" }),
  });

  const topExpenseTypesQuery = useQuery({
    queryKey: ["reimbursements", "stats", "top-expense-types", filters],
    queryFn: () => fetchReimbursementTopExpenseTypes({ ...filters, limit: 10 }),
  });

  const bottleneckQuery = useQuery({
    queryKey: ["reimbursements", "stats", "approval-bottleneck", filters],
    queryFn: () => fetchReimbursementApprovalBottleneck(filters),
  });

  const loading =
    summaryQuery.isLoading ||
    trendQuery.isLoading ||
    topExpenseTypesQuery.isLoading ||
    bottleneckQuery.isLoading;

  const firstError =
    summaryQuery.error ??
    trendQuery.error ??
    topExpenseTypesQuery.error ??
    bottleneckQuery.error ??
    departmentsQuery.error;

  const summary = summaryQuery.data;
  const trendItems = trendQuery.data?.items ?? [];
  const topExpenseTypes = topExpenseTypesQuery.data?.items ?? [];
  const bottlenecks = bottleneckQuery.data?.items ?? [];

  const maxTrendCount = Math.max(1, ...trendItems.map((item) => Number(item.count ?? 0)));
  const maxTrendAmount = Math.max(1, ...trendItems.map((item) => Number(item.amount ?? 0)));
  const maxExpenseTypeAmount = Math.max(1, ...topExpenseTypes.map((item) => Number(item.totalAmount ?? 0)));

  async function handleRefresh() {
    await queryClient.invalidateQueries({ queryKey: ["reimbursements", "stats"] });
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="报销统计分析"
        subtitle="按时间范围与部门查看报销规模、处理效率、费用结构和审批瓶颈。"
        actions={
          <Button type="button" variant="secondary" onClick={() => void handleRefresh()}>
            刷新
          </Button>
        }
      />

      {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="reimbursement-dashboard-date-from">
              开始日期
            </label>
            <input
              id="reimbursement-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="reimbursement-dashboard-date-to">
              结束日期
            </label>
            <input
              id="reimbursement-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="reimbursement-dashboard-department">
              部门
            </label>
            <select
              id="reimbursement-dashboard-department"
              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">
            <div className="rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600">
              默认窗口：近 3 个自然月
            </div>
          </div>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div className="card-std p-5">
          <div className="text-xs text-zinc-500">报销总数</div>
          <div className="mt-2 text-3xl font-semibold text-zinc-900">
            {loading ? "..." : summary?.totalCount ?? 0}
          </div>
        </div>
        <div className="card-std p-5">
          <div className="text-xs text-zinc-500">报销总金额</div>
          <div className="mt-2 text-3xl font-semibold text-zinc-900">
            {loading ? "..." : formatCurrency(summary?.totalAmount)}
          </div>
        </div>
        <div className="card-std p-5">
          <div className="text-xs text-zinc-500">平均处理天数</div>
          <div className="mt-2 text-3xl font-semibold text-zinc-900">
            {loading ? "..." : formatAvgDays(summary?.avgProcessingDays ?? null)}
          </div>
        </div>
        <div className="card-std p-5">
          <div className="text-xs text-zinc-500">待审批数</div>
          <div className="mt-2 text-3xl font-semibold text-zinc-900">
            {loading ? "..." : summary?.byStatus.reviewing.count ?? 0}
          </div>
        </div>
      </div>

      <SectionPanel
        title="报销趋势"
        description="按月观察报销数量与金额的变化，帮助判断高峰月份和支付节奏。"
      >
        {trendItems.length ? (
          <div className="grid gap-3 lg:grid-cols-2">
            {trendItems.map((item) => (
              <div key={item.period ?? "unknown"} className="rounded-2xl border border-zinc-200 bg-white p-4">
                <div className="flex items-center justify-between gap-3">
                  <div className="text-sm font-medium text-zinc-900">{formatPeriod(item.period)}</div>
                  <div className="text-xs text-zinc-500">已支付 {item.paidCount} 单</div>
                </div>
                <div className="mt-4 space-y-3">
                  <div>
                    <div className="mb-1 flex items-center justify-between text-xs text-zinc-500">
                      <span>数量</span>
                      <span>{item.count} 单</span>
                    </div>
                    <div className="h-2 rounded-full bg-zinc-100">
                      <div
                        className="h-2 rounded-full bg-zinc-900"
                        style={{ width: normalizeBarWidth(Number(item.count ?? 0), maxTrendCount) }}
                      />
                    </div>
                  </div>
                  <div>
                    <div className="mb-1 flex items-center justify-between text-xs text-zinc-500">
                      <span>金额</span>
                      <span>{formatCurrency(item.amount)}</span>
                    </div>
                    <div className="h-2 rounded-full bg-emerald-100">
                      <div
                        className="h-2 rounded-full bg-emerald-600"
                        style={{ width: normalizeBarWidth(Number(item.amount ?? 0), maxTrendAmount) }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-sm text-zinc-500">当前筛选下暂无趋势数据。</div>
        )}
      </SectionPanel>

      <div className="grid gap-6 xl:grid-cols-2">
        <SectionPanel
          title="费用类型排行"
          description="按金额查看最主要的费用类型，帮助财务快速定位结构变化。"
        >
          {topExpenseTypes.length ? (
            <div className="space-y-3">
              {topExpenseTypes.map((item, index) => (
                <div key={item.expenseTypeId} className="rounded-2xl border border-zinc-200 bg-white p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <div className="text-sm font-semibold text-zinc-900">
                        {index + 1}. {item.expenseTypeName}
                      </div>
                      <div className="mt-1 text-xs text-zinc-500">{item.count} 条报销明细</div>
                    </div>
                    <div className="text-sm font-medium text-zinc-700">{formatCurrency(item.totalAmount)}</div>
                  </div>
                  <div className="mt-3 h-2 rounded-full bg-zinc-100">
                    <div
                      className="h-2 rounded-full bg-amber-500"
                      style={{ width: normalizeBarWidth(Number(item.totalAmount ?? 0), maxExpenseTypeAmount) }}
                    />
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-sm text-zinc-500">当前筛选下暂无费用类型排行。</div>
          )}
        </SectionPanel>

        <SectionPanel
          title="审批瓶颈"
          description="观察 reviewing 中的待处理堆积情况，帮助尽快发现卡点。"
        >
          {bottlenecks.length ? (
            <div className="space-y-3">
              {bottlenecks.map((item) => {
                const isStale = item.oldestPendingDays > 3;
                return (
                  <div key={`${item.assigneeId ?? "role"}-${item.assigneeName}`} className="rounded-2xl border border-zinc-200 bg-white p-4">
                    <div className="flex items-start justify-between gap-4">
                      <div>
                        <div className="text-sm font-semibold text-zinc-900">{item.assigneeName}</div>
                        <div className="mt-1 text-xs text-zinc-500">
                          待处理 {item.pendingCount} 单
                        </div>
                      </div>
                      <div className={`text-sm font-medium ${isStale ? "text-red-600" : "text-zinc-700"}`}>
                        最长等待 {item.oldestPendingDays} 天
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-sm text-zinc-500">当前筛选下暂无审批瓶颈。</div>
          )}
        </SectionPanel>
      </div>
    </div>
  );
}