import { Fragment, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import type { TFunction } from "i18next";
import { useQuery } from "@tanstack/react-query";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Legend,
  Line,
  LineChart,
  Pie,
  PieChart,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { fetchReport, reportCsvUrl, type ReportBucket, type ReportSummary } from "./api.js";
import { qk } from "./lib/query.js";
import { formatMinutes, formatMoney } from "./lib/format.js";

// Admin Reports — the at-a-glance dashboard over the signed ledger. All numbers come
// from the server already aggregated (ledger-first; see apps/server/src/reports.ts), so
// this file is pure presentation: date-range presets, KPI cards, and a handful of
// Recharts views (entry/exit, revenue cash/card, peak hours, revenue mix, subscriptions).
// Themed to the terminal palette. Gated by report:read at the route + server.

// Terminal palette (mirrors index.css --color-term-*). Recharts wants literal colors.
const C = {
  green: "#2e8c4a", // entry / ok
  red: "#e8412b", // exit / fault
  amber: "#f2a516", // accent / cash
  cyan: "#2563c8", // payment / card
  muted: "#8a8a82",
  border: "#2a2f38",
  text: "#f2f2ee",
  panel: "#14171c",
  panel2: "#1e222a",
};

type PresetKey = "today" | "7d" | "30d" | "90d";

/** [from, to) ISO bounds + a sensible default bucket for a preset, computed in the
 *  browser's local time (the appliance IS the site, so local == site time). */
function presetRange(key: PresetKey): { from: string; to: string; bucket: ReportBucket } {
  const now = new Date();
  const to = now.toISOString();
  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  if (key === "today") return { from: startOfToday.toISOString(), to, bucket: "hour" };
  const days = key === "7d" ? 7 : key === "30d" ? 30 : 90;
  const from = new Date(now.getTime() - days * 86_400_000).toISOString();
  return { from, to, bucket: days <= 30 ? "day" : "month" };
}

export function Reports() {
  const { t } = useTranslation();
  const [preset, setPreset] = useState<PresetKey>("30d");
  const [bucketOverride, setBucketOverride] = useState<ReportBucket | null>(null);

  const range = useMemo(() => presetRange(preset), [preset]);
  const bucket = bucketOverride ?? range.bucket;

  const { data, isLoading, isError, error } = useQuery({
    queryKey: qk.report(range.from, range.to, bucket),
    queryFn: () => fetchReport(range.from, range.to, bucket),
  });

  const presets: { key: PresetKey; label: string }[] = [
    { key: "today", label: t("reports.preset.today") },
    { key: "7d", label: t("reports.preset.7d") },
    { key: "30d", label: t("reports.preset.30d") },
    { key: "90d", label: t("reports.preset.90d") },
  ];
  const buckets: ReportBucket[] = ["hour", "day", "month"];

  return (
    <div className="mx-auto max-w-6xl">
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <h1 className="mr-2 text-base font-bold uppercase tracking-widest text-term-amber">
          {t("reports.title")}
        </h1>
        <div className="flex gap-1">
          {presets.map((p) => (
            <button
              key={p.key}
              type="button"
              className={`btn btn-sm ${preset === p.key ? "btn-primary" : "btn-ghost"}`}
              onClick={() => {
                setPreset(p.key);
                setBucketOverride(null);
              }}
            >
              {p.label}
            </button>
          ))}
        </div>
        <div className="ml-2 flex items-center gap-1 text-[0.75rem] text-term-muted">
          <span>{t("reports.groupBy")}</span>
          <select
            className="select input-sm w-auto"
            value={bucket}
            onChange={(e) => setBucketOverride(e.target.value as ReportBucket)}
          >
            {buckets.map((b) => (
              <option key={b} value={b}>
                {t(`reports.bucket.${b}`)}
              </option>
            ))}
          </select>
        </div>
        <a
          className="btn btn-sm btn-ghost ml-auto"
          href={reportCsvUrl(range.from, range.to, bucket)}
          download
        >
          {t("reports.exportCsv")}
        </a>
      </div>

      {isLoading && <p className="text-term-muted">{t("common.loading")}</p>}
      {isError && (
        <p className="text-term-red">
          {t("reports.loadFailed", { error: (error as Error)?.message ?? "?" })}
        </p>
      )}
      {data && <ReportBody data={data} t={t} />}
    </div>
  );
}

function ReportBody({ data, t }: { data: ReportSummary; t: TFunction }) {
  const cur = data.currency ?? "ALL";
  const money = (m: number) => formatMoney(m, cur);
  const tot = data.totals;

  // Recharts series: label + the metrics. Keep the server's lexically-sortable bucket
  // labels; trim the date prefix off hour labels for a tighter axis.
  const series = data.series.map((p) => ({
    ...p,
    label: data.bucket === "hour" ? p.bucket.slice(11) + "h" : p.bucket,
    revenue: p.revenueMinor / 100,
    cash: p.cashMinor / 100,
    card: p.cardMinor / 100,
  }));
  const mix = [
    { name: t("reports.mix.ticket"), value: tot.ticketMinor, color: C.amber },
    { name: t("reports.mix.subSales"), value: tot.subscriptionSalesMinor, color: C.cyan },
    { name: t("reports.mix.subWindow"), value: tot.subscriptionWindowMinor, color: C.green },
  ].filter((s) => s.value > 0);
  const peakOcc = Math.max(data.occupancyStart, ...data.series.map((p) => p.occupancyEnd));
  // Stay-duration bars: "≤30m … ≤24h" + the open-ended tail.
  const stay = data.stayHistogram.map((b) => ({
    label: b.uptoMin == null ? `>24${t("reports.stay.h")}` : b.uptoMin < 60 ? `≤${b.uptoMin}${t("reports.stay.m")}` : `≤${b.uptoMin / 60}${t("reports.stay.h")}`,
    count: b.count,
  }));

  return (
    <div className="space-y-4">
      {/* KPI cards. */}
      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 xl:grid-cols-8">
        <Kpi label={t("reports.kpi.entries")} value={String(tot.entries)} accent="green" />
        <Kpi label={t("reports.kpi.exits")} value={String(tot.exits)} accent="red" />
        <Kpi label={t("reports.kpi.revenue")} value={money(tot.revenueMinor)} accent="amber" />
        <Kpi label={t("reports.kpi.payments")} value={String(tot.payments)} accent="cyan" />
        <Kpi label={t("reports.kpi.avgStay")} value={formatMinutes(tot.avgParkedMinutes)} />
        <Kpi
          label={t("reports.kpi.peakOcc")}
          value={data.capacity ? `${peakOcc} / ${data.capacity}` : String(peakOcc)}
        />
        {/* The "look closer" counters — a spike here is what the signed chain is FOR. */}
        <Kpi label={t("reports.kpi.voids")} value={String(tot.voids)} accent={tot.voids > 0 ? "amber" : undefined} />
        <Kpi label={t("reports.kpi.anomalies")} value={String(tot.anomalies)} accent={tot.anomalies > 0 ? "red" : undefined} />
      </div>

      {/* Entry / exit over time. */}
      <Panel title={t("reports.chart.flow")}>
        <ResponsiveContainer width="100%" height={260}>
          <LineChart data={series} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
            <CartesianGrid stroke={C.border} strokeDasharray="3 3" />
            <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
            <YAxis stroke={C.muted} fontSize={11} allowDecimals={false} />
            <Tooltip contentStyle={tooltipStyle} />
            <Legend wrapperStyle={{ fontSize: 12 }} />
            <Line
              type="monotone"
              dataKey="entries"
              name={t("reports.kpi.entries")}
              stroke={C.green}
              strokeWidth={2}
              dot={false}
            />
            <Line
              type="monotone"
              dataKey="exits"
              name={t("reports.kpi.exits")}
              stroke={C.red}
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </Panel>

      {/* Occupancy over time — THE parking curve: cars inside vs capacity. Step-shaped
          (occupancy only moves at entries/exits); the red line is the configured cap. */}
      <Panel title={t("reports.chart.occupancy")}>
        <ResponsiveContainer width="100%" height={220}>
          <AreaChart data={series} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
            <CartesianGrid stroke={C.border} strokeDasharray="3 3" />
            <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
            <YAxis stroke={C.muted} fontSize={11} allowDecimals={false} />
            <Tooltip contentStyle={tooltipStyle} />
            {data.capacity != null && (
              <ReferenceLine
                y={data.capacity}
                stroke={C.red}
                strokeDasharray="4 4"
                label={{ value: t("reports.capacityLine"), fill: C.red, fontSize: 11, position: "insideTopRight" }}
              />
            )}
            <Area
              type="stepAfter"
              dataKey="occupancyEnd"
              name={t("reports.chart.occupancySeries")}
              stroke={C.cyan}
              fill={C.cyan}
              fillOpacity={0.15}
              strokeWidth={2}
            />
          </AreaChart>
        </ResponsiveContainer>
      </Panel>

      <div className="grid gap-4 lg:grid-cols-2">
        {/* Revenue per bucket, stacked by tender — the drawer's cash vs the bank's card. */}
        <Panel title={t("reports.chart.revenue", { currency: cur })}>
          <ResponsiveContainer width="100%" height={240}>
            <BarChart data={series} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
              <CartesianGrid stroke={C.border} strokeDasharray="3 3" />
              <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
              <YAxis stroke={C.muted} fontSize={11} />
              <Tooltip contentStyle={tooltipStyle} formatter={(v) => money(Math.round(Number(v) * 100))} />
              <Legend wrapperStyle={{ fontSize: 12 }} />
              <Bar dataKey="cash" stackId="tender" name={t("reports.row.cash")} fill={C.amber} />
              <Bar dataKey="card" stackId="tender" name={t("reports.row.card")} fill={C.cyan} />
            </BarChart>
          </ResponsiveContainer>
        </Panel>

        {/* Revenue mix (ticket vs subscription vs window). */}
        <Panel title={t("reports.chart.mix")}>
          {mix.length === 0 ? (
            <Empty t={t} />
          ) : (
            <ResponsiveContainer width="100%" height={240}>
              <PieChart>
                <Pie
                  data={mix}
                  dataKey="value"
                  nameKey="name"
                  innerRadius={48}
                  outerRadius={80}
                  paddingAngle={2}
                >
                  {mix.map((s) => (
                    <Cell key={s.name} fill={s.color} stroke={C.panel} />
                  ))}
                </Pie>
                <Tooltip contentStyle={tooltipStyle} formatter={(v) => money(Number(v))} />
                <Legend wrapperStyle={{ fontSize: 12 }} />
              </PieChart>
            </ResponsiveContainer>
          )}
        </Panel>

        {/* Stay-duration histogram — where the ladder/up-to breakpoints should sit. */}
        <Panel title={t("reports.chart.stay")}>
          <ResponsiveContainer width="100%" height={240}>
            <BarChart data={stay} margin={{ top: 8, right: 12, bottom: 0, left: -8 }}>
              <CartesianGrid stroke={C.border} strokeDasharray="3 3" />
              <XAxis dataKey="label" stroke={C.muted} fontSize={11} />
              <YAxis stroke={C.muted} fontSize={11} allowDecimals={false} />
              <Tooltip contentStyle={tooltipStyle} />
              <Bar dataKey="count" name={t("reports.row.closed")} fill={C.green} />
            </BarChart>
          </ResponsiveContainer>
        </Panel>

        {/* Cash / card + duration + subscription breakdown (numbers). */}
        <Panel title={t("reports.chart.breakdown")}>
          <dl className="grid grid-cols-2 gap-x-6 gap-y-1.5 text-[0.8125rem]">
            <Row label={t("reports.row.cash")} value={money(tot.cashMinor)} />
            <Row label={t("reports.row.card")} value={money(tot.cardMinor)} />
            <Row label={t("reports.mix.ticket")} value={money(tot.ticketMinor)} />
            <Row label={t("reports.mix.subSales")} value={money(tot.subscriptionSalesMinor)} />
            <Row label={t("reports.mix.subWindow")} value={money(tot.subscriptionWindowMinor)} />
            <Row label={t("reports.row.closed")} value={String(tot.closedSessions)} />
            <Row label={t("reports.kpi.avgStay")} value={formatMinutes(tot.avgParkedMinutes)} />
            <Row label={t("reports.row.medianStay")} value={formatMinutes(tot.medianParkedMinutes)} />
            <Row label={t("reports.row.subActive")} value={String(data.subscriptions.active)} />
            <Row label={t("reports.row.subCars")} value={String(data.subscriptions.coveredCars)} />
          </dl>
        </Panel>
      </div>

      {/* Entries heatmap: hour × day-of-week. Weekday-vs-weekend patterns at a glance —
          the direct input for tariff windows (night rates, weekend cards, early bird). */}
      <Panel title={t("reports.chart.heatmap")}>
        <Heatmap matrix={data.entriesByDowHour} dows={t("reports.dowShort", { returnObjects: true }) as string[]} />
      </Panel>

      <p className="text-[0.6875rem] text-term-muted">
        {t("reports.footnote", { tz: data.tz })}
      </p>
    </div>
  );
}

/** Hour-of-day × day-of-week entries heatmap: pure CSS grid, amber intensity scaled to
 *  the busiest cell. Row 0 = Monday (server contract). Cell tooltip = exact count. */
function Heatmap({ matrix, dows }: { matrix: number[][]; dows: string[] }) {
  const max = Math.max(1, ...matrix.flat());
  return (
    <div className="overflow-x-auto">
      <div className="grid min-w-[560px] grid-cols-[max-content_repeat(24,1fr)] gap-px text-[0.625rem]">
        <span />
        {Array.from({ length: 24 }, (_, h) => (
          <span key={h} className="pb-0.5 text-center text-term-muted">
            {h % 3 === 0 ? h : ""}
          </span>
        ))}
        {matrix.map((row, d) => (
          <Fragment key={d}>
            <span className="pr-1.5 leading-4 text-term-muted">{dows[d]}</span>
            {row.map((v, h) => (
              <span
                key={h}
                title={`${dows[d]} ${String(h).padStart(2, "0")}:00 — ${v}`}
                className="h-4 rounded-[1px]"
                style={{ background: v === 0 ? C.panel2 : C.amber, opacity: v === 0 ? 1 : 0.25 + 0.75 * (v / max) }}
              />
            ))}
          </Fragment>
        ))}
      </div>
    </div>
  );
}

const tooltipStyle = {
  background: C.panel,
  border: `1px solid ${C.border}`,
  borderRadius: 6,
  color: C.text,
  fontSize: 12,
};

function Kpi({ label, value, accent }: { label: string; value: string; accent?: "green" | "red" | "amber" | "cyan" }) {
  const color =
    accent === "green"
      ? "text-term-green"
      : accent === "red"
        ? "text-term-red"
        : accent === "amber"
          ? "text-term-amber"
          : accent === "cyan"
            ? "text-term-cyan"
            : "text-term-text";
  return (
    <div className="rounded-term border border-term-border bg-term-panel p-2.5">
      <div className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{label}</div>
      <div className={`mt-0.5 text-lg font-bold tabular-nums ${color}`}>{value}</div>
    </div>
  );
}

function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-term border border-term-border bg-term-panel p-3">
      <h2 className="mb-2 text-[0.6875rem] uppercase tracking-wider text-term-muted">{title}</h2>
      {children}
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <>
      <dt className="text-term-muted">{label}</dt>
      <dd className="text-right tabular-nums text-term-text">{value}</dd>
    </>
  );
}

function Empty({ t }: { t: TFunction }) {
  return <p className="py-12 text-center text-[0.75rem] text-term-muted">{t("reports.noData")}</p>;
}