import React from "react";
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  Easing,
  spring,
} from "remotion";
import { loadFont as loadInter } from "@remotion/google-fonts/Inter";

loadInter("normal", { weights: ["400", "500", "600", "700", "800", "900"] });

const FONT = "'Inter', sans-serif";

interface VsCard {
  label: string;             // "Opus 4.6"
  sublabel?: string;         // "Planning model"
  value?: string | number;   // 11981 — animated count if numeric
  pill_text?: string;        // "Expensive"
  footer?: string;           // "tokens used"
  accent?: string;           // "#dc2626" red, "#16a34a" green, etc.
}

interface StatVersusProps {
  vsTitle?: string;
  vsSubtitle?: string;
  leftCard?: VsCard;
  rightCard?: VsCard;
  backgroundColor?: string;
}

const DEFAULTS_LEFT: VsCard = {
  label: "Opus 4.6", sublabel: "Planning model",
  value: 11981, pill_text: "Expensive", footer: "tokens used", accent: "#dc2626",
};
const DEFAULTS_RIGHT: VsCard = {
  label: "Sonnet 4.6", sublabel: "Coding model",
  value: 1569, pill_text: "Efficient", footer: "tokens used", accent: "#16a34a",
};

const fmtThousands = (n: number) => n.toLocaleString();
const hex2rgba = (hex: string, a: number) => {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
};

export const StatVersus: React.FC<StatVersusProps> = ({
  vsTitle = "Token cost per task",
  vsSubtitle = "Opus burns fast. Sonnet is enough.",
  leftCard,
  rightCard,
  backgroundColor = "#F4EEE0",
}) => {
  const frame = useCurrentFrame();
  const { fps, width, height, durationInFrames } = useVideoConfig();
  const left = leftCard || DEFAULTS_LEFT;
  const right = rightCard || DEFAULTS_RIGHT;

  const titleSpring = spring({ frame: frame - 2, fps, config: { mass: 0.7, damping: 14, stiffness: 180 } });
  const titleOp = interpolate(titleSpring, [0, 1], [0, 1]);
  const titleY = interpolate(titleSpring, [0, 1], [16, 0]);
  const subOp = interpolate(frame, [10, 22], [0, 1], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ backgroundColor, overflow: "hidden", fontFamily: FONT }}>
      {/* Title */}
      <div
        style={{
          position: "absolute",
          top: height * 0.18,
          left: 0, right: 0,
          textAlign: "center",
          opacity: titleOp,
          transform: `translateY(${titleY}px)`,
          color: "#1a1a1a",
          fontWeight: 800,
          fontSize: 88,
          letterSpacing: -2.5,
          padding: "0 60px",
          lineHeight: 1.05,
        }}
      >
        {vsTitle}
      </div>
      <div
        style={{
          position: "absolute",
          top: height * 0.28,
          left: 0, right: 0,
          textAlign: "center",
          opacity: subOp,
          color: "#666",
          fontWeight: 500,
          fontSize: 32,
          letterSpacing: -0.5,
        }}
      >
        {vsSubtitle}
      </div>

      {/* Cards row */}
      <div
        style={{
          position: "absolute",
          top: height * 0.38,
          left: 50, right: 50,
          display: "flex",
          alignItems: "center",
          gap: 28,
        }}
      >
        <Card frame={frame} fps={fps} dur={durationInFrames} card={left} startF={16} side="left" />
        <div style={{ fontSize: 42, fontWeight: 700, color: "#999", letterSpacing: -1 }}>vs</div>
        <Card frame={frame} fps={fps} dur={durationInFrames} card={right} startF={22} side="right" />
      </div>
    </AbsoluteFill>
  );
};

const Card: React.FC<{ frame: number; fps: number; dur: number; card: VsCard; startF: number; side: "left" | "right" }>
  = ({ frame, fps, dur, card, startF, side }) => {
  const sp = spring({ frame: frame - startF, fps, config: { mass: 0.7, damping: 14, stiffness: 180 } });
  const op = interpolate(sp, [0, 1], [0, 1]);
  const x = interpolate(sp, [0, 1], [side === "left" ? -40 : 40, 0]);
  const accent = card.accent || "#1a1a1a";

  // Animated count for numeric values
  let valueDisplay: string;
  if (typeof card.value === "number") {
    const target = card.value;
    const countT = interpolate(frame, [startF + 4, startF + Math.min(36, dur - 8)], [0, 1], {
      extrapolateLeft: "clamp", extrapolateRight: "clamp",
      easing: Easing.out(Easing.cubic),
    });
    valueDisplay = fmtThousands(Math.round(target * countT));
  } else {
    valueDisplay = String(card.value ?? "");
  }

  return (
    <div
      style={{
        flex: 1,
        background: "#ffffff",
        border: "1px solid rgba(0,0,0,0.08)",
        borderRadius: 18,
        padding: "26px 28px 22px 28px",
        boxShadow: "0 12px 28px rgba(0,0,0,0.08)",
        opacity: op,
        transform: `translateX(${x}px)`,
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      <div style={{ fontSize: 44, fontWeight: 700, color: "#1a1a1a", letterSpacing: -1.4, lineHeight: 1 }}>
        {card.label}
      </div>
      {card.sublabel && (
        <div style={{ fontSize: 22, color: "#888", fontWeight: 500 }}>
          {card.sublabel}
        </div>
      )}
      <div style={{ fontSize: 92, fontWeight: 800, color: accent, letterSpacing: -3, lineHeight: 1, marginTop: 12 }}>
        {valueDisplay}
      </div>
      {/* Accent rule */}
      <div style={{ height: 4, borderRadius: 2, background: hex2rgba(accent, 0.6), marginTop: 4 }} />
      {card.pill_text && (
        <div style={{ marginTop: 10 }}>
          <span
            style={{
              display: "inline-block",
              padding: "6px 16px",
              borderRadius: 999,
              background: hex2rgba(accent, 0.15),
              color: accent,
              fontWeight: 700,
              fontSize: 22,
            }}
          >
            {card.pill_text}
          </span>
        </div>
      )}
      {card.footer && (
        <div style={{ marginTop: 8, fontSize: 20, color: "#999", fontWeight: 500 }}>
          {card.footer}
        </div>
      )}
    </div>
  );
};

// Auto-extracted from Props interface — see source for authoritative types.
// Component: StatVersus
// 5 props detected · 2 port(s)