"use client";

import * as React from "react";
import { motion } from "framer-motion";
import type { Activity } from "@/lib/api";

/**
 * Hand-rolled SVG rather than a charting library.
 *
 * Recharts/Chart.js would add ~150KB to a page that needs one stacked bar
 * chart, and most of them inject <style> at runtime, which this app's CSP
 * blocks outright. An SVG with two rects per day is a few dozen lines and has
 * neither problem.
 */
export function ActivityChart({ data }: { data: Activity }) {
  const [hover, setHover] = React.useState<number | null>(null);

  const max = Math.max(1, ...data.series.map((d) => d.n));
  const W = 100; // viewBox units — the SVG scales to its container
  const H = 32;
  const gap = 0.18;
  const bw = W / data.series.length;

  const shown = hover != null ? data.series[hover] : null;
  const totals = data.series.reduce(
    (a, d) => ({
      n: a.n + d.n,
      imported: a.imported + d.imported,
      failed: a.failed + d.failed,
    }),
    { n: 0, imported: 0, failed: 0 },
  );

  return (
    <div className="card rounded-panel p-5">
      <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
        <div>
          <h3 className="text-callout font-bold uppercase tracking-[0.9px] text-dim">
            Requests · last {data.days} days
          </h3>
          <div className="mt-1 text-[22px] font-bold tracking-[-0.6px]">
            {shown ? shown.n : totals.n}
            <span className="ml-2 text-callout font-normal text-dim">
              {shown
                ? new Date(shown.date + "T00:00:00").toLocaleDateString(undefined, {
                    weekday: "short",
                    month: "short",
                    day: "numeric",
                  })
                : "total"}
            </span>
          </div>
        </div>
        <div className="flex gap-3 text-caption text-dim">
          <Legend className="bg-accent" label={`${shown ? shown.imported : totals.imported} imported`} />
          <Legend className="bg-err" label={`${shown ? shown.failed : totals.failed} failed`} />
        </div>
      </div>

      <svg
        viewBox={`0 0 ${W} ${H}`}
        preserveAspectRatio="none"
        className="h-28 w-full overflow-visible"
        onMouseLeave={() => setHover(null)}
        role="img"
        aria-label={`Daily request volume over the last ${data.days} days`}
      >
        {data.series.map((d, i) => {
          const h = (d.n / max) * H;
          const impH = d.n ? (d.imported / d.n) * h : 0;
          const x = i * bw;
          const on = hover === i;
          return (
            <g key={d.date} onMouseEnter={() => setHover(i)}>
              {/* Full-height hit area — 3px bars are impossible to hover. */}
              <rect x={x} y={0} width={bw} height={H} fill="transparent" />
              <motion.rect
                initial={{ height: 0, y: H }}
                animate={{ height: Math.max(h, d.n ? 0.6 : 0), y: H - Math.max(h, d.n ? 0.6 : 0) }}
                transition={{ delay: Math.min(i * 0.008, 0.3), duration: 0.45, ease: "easeOut" }}
                x={x + bw * gap}
                width={bw * (1 - gap * 2)}
                rx={0.5}
                className="fill-err"
                opacity={on ? 1 : 0.75}
              />
              <motion.rect
                initial={{ height: 0, y: H }}
                animate={{ height: impH, y: H - impH }}
                transition={{ delay: Math.min(i * 0.008, 0.3), duration: 0.45, ease: "easeOut" }}
                x={x + bw * gap}
                width={bw * (1 - gap * 2)}
                rx={0.5}
                className="fill-accent"
                opacity={on ? 1 : 0.85}
              />
            </g>
          );
        })}
      </svg>

      <div className="mt-1.5 flex justify-between text-caption text-dim">
        <span>{fmt(data.series[0]?.date)}</span>
        <span>{fmt(data.series[data.series.length - 1]?.date)}</span>
      </div>
    </div>
  );
}

function Legend({ className, label }: { className: string; label: string }) {
  return (
    <span className="flex items-center gap-1.5">
      <i className={`inline-block h-2 w-2 rounded-sm ${className}`} />
      {label}
    </span>
  );
}

const fmt = (d?: string) =>
  d
    ? new Date(d + "T00:00:00").toLocaleDateString(undefined, {
        month: "short",
        day: "numeric",
      })
    : "";