"use client";

import type { ReactNode } from "react";
import { Reveal } from "@/components/animations/reveal";
import { EyebrowMark } from "@/components/brand/eyebrow";
import { Slide } from "@/components/deck/slide";

type KpiItem = {
  value: ReactNode;
  unit?: string;
  caption: ReactNode;
};

type KpiTrioProps = {
  number: number;
  total: number;
  eyebrow: string;
  title?: ReactNode;
  items: [KpiItem, KpiItem, KpiItem];
  /** When true the first KPI gets larger size (asymmetric layout 2fr 1fr 1fr). */
  emphasizeFirst?: boolean;
};

/**
 * Three KPIs in a single row. Default symmetric. Pass emphasizeFirst to render
 * an asymmetric 2fr 1fr 1fr grid with the primary number scaled up.
 */
export function KpiTrio({
  number,
  total,
  eyebrow,
  title,
  items,
  emphasizeFirst = false,
}: KpiTrioProps) {
  const gridStyle = emphasizeFirst
    ? { gridTemplateColumns: "2fr 1fr 1fr" }
    : { gridTemplateColumns: "1fr 1fr 1fr" };

  return (
    <Slide variant="paper" number={number} total={total} align="center">
      <div className="flex flex-col gap-12">
        <Reveal direction="up" duration={0.3}>
          <EyebrowMark>{eyebrow}</EyebrowMark>
        </Reveal>

        {title && (
          <Reveal direction="up" delay={0.15} duration={0.4}>
            <h2
              className="font-display"
              style={{
                fontSize: "clamp(28px, 3.8vw, 56px)",
                lineHeight: 1.1,
                letterSpacing: "-0.01em",
                maxWidth: "1100px",
                color: "var(--ink-900)",
              }}
            >
              {title}
            </h2>
          </Reveal>
        )}

        <div className="grid items-end gap-x-8 gap-y-10" style={gridStyle}>
          {items.map((item, i) => (
            <Reveal key={i} direction="up" delay={0.35 + i * 0.15} duration={0.5}>
              <Kpi
                value={item.value}
                unit={item.unit}
                caption={item.caption}
                emphasize={emphasizeFirst && i === 0}
              />
            </Reveal>
          ))}
        </div>
      </div>
    </Slide>
  );
}

function Kpi({
  value,
  unit,
  caption,
  emphasize,
}: KpiItem & { emphasize?: boolean }) {
  return (
    <div className="flex flex-col gap-3">
      <span
        className="kpi-figure font-display"
        style={{
          fontStyle: "italic",
          fontSize: emphasize ? "clamp(72px, 10vw, 180px)" : "clamp(48px, 6.5vw, 120px)",
          color: "var(--ink-900)",
        }}
      >
        {value}
        {unit && (
          <span
            className="font-sans"
            style={{
              fontSize: emphasize ? "clamp(20px, 1.8vw, 28px)" : "clamp(14px, 1.2vw, 20px)",
              fontWeight: 600,
              color: "var(--ink-500)",
              textTransform: "uppercase",
              letterSpacing: "0.18em",
              marginLeft: 8,
            }}
          >
            {unit}
          </span>
        )}
      </span>
      <p
        style={{
          fontSize: "clamp(13px, 1.05vw, 16px)",
          lineHeight: 1.55,
          maxWidth: "360px",
          color: "var(--ink-600)",
        }}
      >
        {caption}
      </p>
    </div>
  );
}