"use client";

import { useLocale } from "@/i18n/LocaleProvider";
import { Numeric } from "@/components/ui";

export interface TimelinePoint {
  date: string;
  rideRevenue: number;
  topUps: number;
  rides: number;
}

/**
 * Two-series daily bar chart: ride revenue (brand gold) vs top-ups (info blue), on a shared money
 * axis. A legend is warranted here because there genuinely are two series; the labels stay in muted
 * text (not the series color) per the design system. The daily table below is the accessible view.
 */
export function AnalyticsChart({
  points,
  currency,
}: {
  points: TimelinePoint[];
  currency: string;
}) {
  const { t } = useLocale();
  const max = Math.max(1, ...points.map((p) => Math.max(p.rideRevenue, p.topUps)));
  // Label roughly six ticks across the window, whatever its length.
  const step = Math.max(1, Math.ceil(points.length / 6));

  if (points.length === 0) {
    return <p className="text-sm text-muted">{t("an.noData")}</p>;
  }

  return (
    <div>
      {/* Legend */}
      <div className="mb-4 flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-muted">
        <span className="inline-flex items-center gap-2">
          <span className="h-2.5 w-2.5 rounded-sm bg-brand" />
          {t("an.rideRevenueSeries")}
        </span>
        <span className="inline-flex items-center gap-2">
          <span className="h-2.5 w-2.5 rounded-sm bg-info" />
          {t("an.topUpsSeries")}
        </span>
      </div>

      {/* Bars */}
      <div className="flex h-56 items-end gap-[3px] overflow-x-auto pb-1">
        {points.map((p, i) => (
          <div
            key={p.date}
            className="group flex h-full min-w-[10px] flex-1 flex-col items-center justify-end gap-1"
            title={`${p.date}\n${t("an.rideRevenueSeries")}: ${p.rideRevenue.toFixed(2)} ${currency}\n${t(
              "an.topUpsSeries",
            )}: ${p.topUps.toFixed(2)} ${currency}`}
          >
            <div className="flex h-full w-full items-end justify-center gap-[2px]">
              <span
                className="w-1/2 rounded-t-sm bg-brand transition-opacity group-hover:opacity-80"
                style={{ height: `${(p.rideRevenue / max) * 100}%` }}
              />
              <span
                className="w-1/2 rounded-t-sm bg-info transition-opacity group-hover:opacity-80"
                style={{ height: `${(p.topUps / max) * 100}%` }}
              />
            </div>
            <span className="h-3 text-[9px] text-mutedDim">
              {i % step === 0 ? shortDay(p.date) : ""}
            </span>
          </div>
        ))}
      </div>

      {/* Accessible daily table */}
      <details className="mt-4">
        <summary className="cursor-pointer text-xs text-muted hover:text-foreground">
          {t("an.date")}
        </summary>
        <div className="mt-3 overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-line text-start text-xs text-muted">
                <th className="py-2 text-start font-medium">{t("an.date")}</th>
                <th className="py-2 text-end font-medium">{t("an.rideRevenueSeries")}</th>
                <th className="py-2 text-end font-medium">{t("an.topUpsSeries")}</th>
                <th className="py-2 text-end font-medium">{t("an.rides")}</th>
              </tr>
            </thead>
            <tbody>
              {points.map((p) => (
                <tr key={p.date} className="border-b border-line/60">
                  <td className="py-2">
                    <Numeric>{p.date}</Numeric>
                  </td>
                  <td className="py-2 text-end">
                    <Numeric>{p.rideRevenue.toFixed(2)}</Numeric>
                  </td>
                  <td className="py-2 text-end">
                    <Numeric>{p.topUps.toFixed(2)}</Numeric>
                  </td>
                  <td className="py-2 text-end">
                    <Numeric>{p.rides}</Numeric>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </details>
    </div>
  );
}

/** "2026-07-24" → "07-24" for compact x-axis labels. */
function shortDay(iso: string): string {
  return iso.length >= 10 ? iso.slice(5) : iso;
}