import { useCallback, useEffect, useState, useMemo } from "react";
import { zhCN } from "date-fns/locale";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Skeleton } from "@/components/ui/skeleton";
import { CalendarDays, Download } from "lucide-react";
import {
  fetchFlowStats,
  type FlowStatsResponse,
  type FlowDetailItem,
  type FlowDailyPoint,
} from "../api";
import {
  getRecentFlowRange,
  getWeeklyFlowRange,
  formatLocalDate,
  selectFlowDetails,
  type FlowSelection,
} from "../model";
import { Failure, useMobile } from "./shared";
import { DataGrid, type Column } from "./DataGrid";
import { exportToXlsx } from "./export";
import { Chart } from "./Chart";
export function FlowStatistics({ subject }: { subject: string | null }) {
  const [range, setRange] = useState(getRecentFlowRange);
  const [calendarOpen, setCalendarOpen] = useState(false);
  const [draft, setDraft] = useState<{ from: Date | undefined; to?: Date }>({
    from: new Date(`${range.start}T00:00:00`),
    to: new Date(`${range.end}T00:00:00`),
  });
  const [data, setData] = useState<FlowStatsResponse | null>(null);
  const [error, setError] = useState("");
  const [retry, setRetry] = useState(0);
  const [selection, setSelection] = useState<FlowSelection | null>(null);
  const mobile = useMobile();
  useEffect(() => {
    let active = true;
    setData(null);
    setError("");
    fetchFlowStats({ ...range, subject })
      .then((v) => {
        if (active) setData(v);
      })
      .catch((e) => {
        if (active) setError(String(e.message || e));
      });
    return () => {
      active = false;
    };
  }, [range, subject, retry]);
  const details = data && selection ? selectFlowDetails(data, selection) : [];
  const columns: Column<FlowDetailItem>[] = [
    { key: "plateNumber", label: "车牌", private: true },
    { key: "typeLabel", label: "类型" },
    { key: "date", label: "业务日期" },
    { key: "eventTime", label: "运维签章时间", width: 180 },
    { key: "submitTime", label: "建单时间", width: 180 },
    { key: "department", label: "部门" },
    { key: "manager", label: "负责人", private: true },
    { key: "customerName", label: "客户", private: true, width: 180 },
  ];
  const exportRows = (rows: FlowDetailItem[], filename: string) =>
    exportToXlsx(rows, columns, filename, "交还车明细");
  const option = useMemo(
    () => ({
      color: ["var(--blue)", "var(--orange)", "var(--indigo)"],
      textStyle: { color: "var(--label-secondary)" },
      tooltip: { trigger: "axis" },
      legend: {
        data: ["交车", "还车", "替换交车"],
        textStyle: { color: "var(--label-secondary)" },
      },
      grid: { left: 40, right: 20, bottom: 40, top: 40 },
      xAxis: {
        type: "category",
        data: data?.daily.map((d) => d.date.slice(5)) || [],
        axisLabel: { color: "var(--label-secondary)" },
        axisLine: { lineStyle: { color: "var(--separator)" } },
      },
      yAxis: {
        type: "value",
        minInterval: 1,
        axisLabel: { color: "var(--label-secondary)" },
        splitLine: { lineStyle: { color: "var(--separator)" } },
      },
      series: ["delivered", "returned", "replaced"].map((key, i) => ({
        name: ["交车", "还车", "替换交车"][i],
        type: "line",
        data: data?.daily.map((d) => d[key as "delivered"]) || [],
      })),
    }),
    [data],
  );
  return (
    <Card
      size="sm"
      className="bg-[var(--bg-tertiary)] ring-0 shadow-[var(--shadow-2)]"
    >
      <CardHeader>
        <CardTitle className="font-semibold group-data-[size=sm]/card:text-base text-[var(--label)] dark:text-[var(--cyan)]">
          交还车统计（车次）
        </CardTitle>
        <CardDescription>
          按运维签章时间统计；交车含替换交车，合计 = 交车 + 还车。
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="flex flex-wrap items-center gap-2">
          <Popover
            open={calendarOpen}
            onOpenChange={(v) => {
              setCalendarOpen(v);
              if (v)
                setDraft({
                  from: new Date(`${range.start}T00:00:00`),
                  to: new Date(`${range.end}T00:00:00`),
                });
            }}
          >
            <PopoverTrigger asChild>
              <Button variant="outline">
                <CalendarDays data-icon="inline-start" />
                {range.start} — {range.end}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-2" align="start">
              <Calendar
                mode="range"
                locale={zhCN}
                selected={draft}
                onSelect={(v) => setDraft(v || { from: undefined })}
                numberOfMonths={mobile ? 1 : 2}
                disabled={{ after: new Date() }}
              />
              <Button
                disabled={!draft.from || !draft.to}
                onClick={() => {
                  if (draft.from && draft.to)
                    setRange({
                      start: formatLocalDate(draft.from),
                      end: formatLocalDate(draft.to),
                    });
                  setCalendarOpen(false);
                }}
              >
                应用日期
              </Button>
            </PopoverContent>
          </Popover>
          <Button
            variant="ghost"
            onClick={() => setRange(getRecentFlowRange())}
          >
            近 7 天
          </Button>
          <Button
            variant="ghost"
            onClick={() => setRange(getWeeklyFlowRange())}
          >
            本周
          </Button>
          <Button
            variant="outline"
            disabled={!data?.details.length}
            onClick={() =>
              data &&
              void exportRows(
                data.details,
                `交还车-${range.start}-${range.end}`,
              )
            }
          >
            <Download data-icon="inline-start" />
            导出
          </Button>
        </div>
        {error ? (
          <Failure message={error} retry={() => setRetry((n) => n + 1)} />
        ) : !data ? (
          <Skeleton className="h-64" />
        ) : (
          <>
            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
              {(
                [
                  ["total", "合计"],
                  ["delivered", "交车"],
                  ["returned", "还车"],
                  ["replaced", "替换交车"],
                ] as const
              ).map(([key, title]) => (
                <Card
                  size="sm"
                  key={key}
                  className="bg-[var(--bg-secondary)] ring-0"
                >
                  <CardHeader>
                    <CardDescription>{title}</CardDescription>
                    <CardTitle className="text-xl font-semibold tracking-tight text-[var(--blue)] dark:text-[var(--cyan)]">
                      {key === "total" ? (
                        data.totals[key]
                      ) : (
                        <Button
                          variant="link"
                          className="h-auto p-0 text-xl font-semibold text-[var(--blue)] dark:text-[var(--cyan)]"
                          onClick={() => setSelection({ ...range, type: key })}
                        >
                          {data.totals[key]}
                        </Button>
                      )}
                    </CardTitle>
                  </CardHeader>
                </Card>
              ))}
            </div>
            <Chart option={option} label="每日交还车趋势" />
            <DataGrid
              rows={data.daily}
              label="每日交还车"
              columns={[
                { key: "date", label: "业务日期", width: 160 },
                { key: "total", label: "合计", numeric: true },
                ...(["delivered", "returned", "replaced"] as const).map(
                  (key, i) => ({
                    key,
                    label: ["交车", "还车", "替换交车"][i],
                    action: (row: FlowDailyPoint) =>
                      setSelection({ date: row.date, type: key }),
                  }),
                ),
              ]}
            />
          </>
        )}
      </CardContent>
      <Dialog open={!!selection} onOpenChange={(v) => !v && setSelection(null)}>
        <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-6xl">
          <DialogHeader>
            <DialogTitle>交还车明细</DialogTitle>
            <DialogDescription>
              {details.length} 车次 ·{" "}
              {selection &&
                ("date" in selection
                  ? selection.date
                  : `${selection.start} — ${selection.end}`)}
            </DialogDescription>
          </DialogHeader>
          <Button
            variant="outline"
            disabled={!details.length}
            onClick={() =>
              void exportRows(
                details,
                `交还车明细-${selection && "date" in selection ? selection.date : `${selection?.start}-${selection?.end}`}`,
              )
            }
          >
            导出当前明细
          </Button>
          <DataGrid rows={details} columns={columns} label="交还车明细" />
        </DialogContent>
      </Dialog>
    </Card>
  );
}