"use client";

import type { HomepageSummarySite } from "yt-dlp-transcript-common/lib/homepageSummary";
import type { Breakdown, Metric } from "yt-dlp-transcript-common/lib/homepageChart";
import { siteChartColors } from "yt-dlp-transcript-common/lib/siteColor";

// Tiny dependency-free sparkline: a soft area fill, the trend line, and a dot on
// the latest point. Avoids mounting a Recharts instance per card (mobile perf).
function Sparkline({ data, color }: { data: number[]; color: string }) {
  const w = 104;
  const h = 32;
  const max = Math.max(1, ...data);
  const n = data.length;
  const pt = (v: number, i: number) => {
    const x = n <= 1 ? w : (i / (n - 1)) * w;
    const y = h - (v / max) * (h - 3) - 1.5;
    return [x, y] as const;
  };
  const pts = data.map((v, i) => pt(v, i));
  const line = pts.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
  const area = `0,${h} ${line} ${w},${h}`;
  const [lx, ly] = pts[pts.length - 1] ?? [w, h];
  const gid = `spark-${color.replace(/[^a-z0-9]/gi, "")}`;
  return (
    <svg
      width={w}
      height={h}
      viewBox={`0 0 ${w} ${h}`}
      className="overflow-visible"
      aria-hidden
    >
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.28" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <polygon points={area} fill={`url(#${gid})`} />
      <polyline
        points={line}
        fill="none"
        stroke={color}
        strokeWidth={1.75}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
      <circle cx={lx} cy={ly} r={2} fill={color} />
    </svg>
  );
}

function SiteCard({
  site,
  metric,
  color,
  isLeader,
  bySite,
  hidden,
  onToggle,
  delay,
}: {
  site: HomepageSummarySite;
  metric: Metric;
  color: string;
  isLeader: boolean;
  bySite: boolean;
  hidden: boolean;
  onToggle: () => void;
  delay: number;
}) {
  const stat = site[metric];
  const noun = metric === "downloaded" ? "downloads" : "transcripts";
  const inner = (
    <>
      <div className={`flex items-start justify-between gap-2 ${bySite ? "pr-14" : ""}`}>
        <div className="flex items-center gap-2.5 min-w-0">
          {bySite && (
            <span
              className="mt-1 h-3 w-3 shrink-0 rounded-[3px]"
              style={{ backgroundColor: color, boxShadow: `0 0 10px ${color}` }}
            />
          )}
          <h3 className="truncate font-display text-lg font-semibold tracking-tight text-[var(--foreground)]">
            {site.siteTitle}
          </h3>
        </div>
        {isLeader && (
          <span className="shrink-0 rounded-[var(--radius)] border border-[var(--brand-soft)] bg-[var(--brand-soft)] px-2 py-0.5 font-mono text-[0.625rem] uppercase tracking-[0.1em] text-[var(--brand-strong)]">
            #1 this month
          </span>
        )}
      </div>
      {site.siteDescription && (
        <p className="line-clamp-2 text-sm leading-relaxed text-[var(--muted-foreground)]">
          {site.siteDescription}
        </p>
      )}
      <div className="mt-auto flex items-end justify-between gap-2 pt-1">
        <div className="flex flex-col gap-0.5">
          <span className="font-display text-2xl font-semibold leading-none text-[var(--foreground)] tabular-nums">
            {stat.total.toLocaleString()}
          </span>
          <span className="font-mono text-[0.625rem] uppercase tracking-[0.12em] text-[var(--faint)]">
            {noun}
            {stat.thisMonth > 0 && (
              <span className="ml-1.5 text-[var(--brand)]">
                +{stat.thisMonth.toLocaleString()} mo.
              </span>
            )}
          </span>
        </div>
        <Sparkline data={stat.last12} color={color} />
      </div>
    </>
  );

  const cardClass =
    "group relative flex flex-col gap-3 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--panel)] p-5  transition duration-200 hover:-translate-y-0.5 hover:border-[var(--border-strong)] hover:bg-[var(--panel-2)]" +
    (hidden ? " opacity-40" : "");

  return (
    <div
      className={`reveal ${cardClass}`}
      style={{ "--d": `${delay}ms` } as React.CSSProperties}
    >
      {bySite && (
        <button
          type="button"
          onClick={onToggle}
          aria-pressed={!hidden}
          title={hidden ? "Show on chart" : "Hide from chart"}
          className="absolute right-3 top-3 z-10 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--surface)] px-2 py-0.5 font-mono text-[0.625rem] uppercase tracking-[0.1em] text-[var(--muted-foreground)] transition-colors hover:border-[var(--border-strong)] hover:text-[var(--foreground)]"
        >
          {hidden ? "Show" : "Hide"}
        </button>
      )}
      <a
        href={site.siteUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="flex flex-1 flex-col gap-3"
      >
        {inner}
      </a>
    </div>
  );
}

// Responsive grid of public content sites. Card stats follow the active metric
// and the grid sorts by that metric's "this month" count. In the By-site
// breakdown the cards double as the chart legend (colored swatch + Show/Hide
// toggle that filters the matching band); colors key on each site's place in
// the unsorted `sites` list so they stay aligned with the chart — its chart
// colour (siteChartColors: its accent's hue family in the validated palette,
// else seriesColor at its index), the one homepageChartData gives its series.
export function SiteGrid({
  sites,
  metric,
  breakdown,
  hidden,
  onToggle,
}: {
  sites: HomepageSummarySite[];
  metric: Metric;
  breakdown: Breakdown;
  hidden: ReadonlySet<string>;
  onToggle: (siteId: string) => void;
}) {
  if (sites.length === 0) return null;
  const bySite = breakdown === "site";
  const chart = siteChartColors(sites);
  const colorOf = new Map(sites.map((s, i) => [s.siteId, chart[i]]));

  const ordered = [...sites].sort(
    (a, b) =>
      b[metric].thisMonth - a[metric].thisMonth ||
      b[metric].total - a[metric].total ||
      a.siteTitle.localeCompare(b.siteTitle),
  );
  const maxThisMonth = Math.max(0, ...sites.map((s) => s[metric].thisMonth));
  const leaderId =
    maxThisMonth > 0
      ? ordered.find((s) => s[metric].thisMonth === maxThisMonth)?.siteId
      : undefined;

  return (
    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
      {ordered.map((site, i) => (
        <SiteCard
          key={site.siteId}
          site={site}
          metric={metric}
          color={colorOf.get(site.siteId) ?? chart[0]}
          isLeader={site.siteId === leaderId}
          bySite={bySite}
          hidden={hidden.has(site.siteId)}
          onToggle={() => onToggle(site.siteId)}
          delay={i * 60}
        />
      ))}
    </div>
  );
}