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

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

// Three-task status dashboard — each card has a label number (01/02/03), a
// title (caps bold), a progress bar, and a right-aligned status string. Cards
// fill from top-to-bottom with a stagger. The third card's title scrambles
// during its fill ("DAT6 Q" → "DATA SYNC*" → "DATA SYNCS") and its bar is
// orange until it flips green + [DONE ✓].
//
// Optional bottom caption line "// CONNECTS TO EVERY TOOL" fades in after
// the last card completes, with a scrambled "EVERY TOOL. EVERY MORNING."
// payoff line.

const SCRAMBLE_GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#@$%&*!?><[]{}+-";

interface Task {
  number?: string;         // "01", "02", etc. (auto-numbered if omitted)
  title: string;
  fillSeconds?: number;    // bar fill duration, default 0.9s
  scrambleTitle?: boolean; // scramble the title during fill (last-card feel)
  doneLabel?: string;      // default "[DONE ✓]"
  runningLabel?: string;   // default "RUNNING..."
}

interface TaskQueueProgressProps {
  tasks: Task[];               // 2–4 tasks
  taskStaggerS?: number;       // delay between task starts, default 0.9s
  accentColor?: string;        // green bar, default "#22c55e"
  runningColor?: string;       // orange bar while running, default "#D97757"
  backgroundColor?: string;    // default near-black with green tint
  borderColor?: string;        // card border, default "#1d3f2b"
  textColor?: string;          // primary white
  subColor?: string;           // muted green text, default "#4ec46e"
  captionLead?: string;        // e.g. "// CONNECTS TO EVERY TOOL"
  captionPayoff?: string;      // e.g. "EVERY TOOL.  EVERY MORNING."
}

const FONT = "'Inter', sans-serif";
const MONO = "'JetBrains Mono', monospace";

function rand(seed: number): number {
  const x = Math.sin(seed) * 43758.5453;
  return x - Math.floor(x);
}

function scramble(text: string, progress: number, seedBase: number, tick: number): string {
  // `progress` is 0..1 — fraction of letters locked in so far (left to right).
  const locked = Math.floor(text.length * progress);
  return text
    .split("")
    .map((ch, i) => {
      if (i < locked || ch === " ") return ch;
      const r = rand(i * 13.37 + seedBase + tick * 7.77);
      return SCRAMBLE_GLYPHS[Math.floor(r * SCRAMBLE_GLYPHS.length)];
    })
    .join("");
}

const TaskCard: React.FC<{
  task: Task;
  index: number;
  startFrame: number;
  fps: number;
  frame: number;
  accent: string;
  running: string;
  border: string;
  text: string;
  sub: string;
}> = ({ task, index, startFrame, fps, frame, accent, running, border, text, sub }) => {
  const fillFrames = Math.round((task.fillSeconds ?? 0.9) * fps);
  const entrance = spring({
    frame: frame - startFrame,
    fps,
    config: { mass: 0.6, damping: 16, stiffness: 180 },
  });
  const cardY = interpolate(entrance, [0, 1], [30, 0]);
  const cardOp = interpolate(frame, [startFrame - 4, startFrame + 8], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });

  const fillProgress = interpolate(frame, [startFrame + 8, startFrame + 8 + fillFrames], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });
  const done = fillProgress >= 1;
  const barColor = task.scrambleTitle && !done ? running : accent;
  const statusText = done
    ? (task.doneLabel ?? "[DONE \u2713]")
    : (task.runningLabel ?? "RUNNING...");

  const titleText = task.scrambleTitle && !done
    ? scramble(task.title, fillProgress * 0.85, index * 100, Math.floor((frame - startFrame) / 3))
    : task.title;

  return (
    <div
      style={{
        position: "relative",
        border: `1.5px solid ${border}`,
        borderRadius: 14,
        padding: "28px 36px 32px",
        background: "rgba(8, 15, 10, 0.6)",
        opacity: cardOp,
        transform: `translateY(${cardY}px)`,
        boxShadow: done ? `0 0 28px ${accent}22` : "none",
      }}
    >
      {/* Top row: number + title on left, status label on right */}
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          gap: 18,
          marginBottom: 18,
        }}
      >
        <span
          style={{
            fontFamily: MONO,
            fontSize: 20,
            color: sub,
            letterSpacing: 1,
            opacity: 0.7,
          }}
        >
          {task.number ?? String(index + 1).padStart(2, "0")}
        </span>
        <span
          style={{
            fontFamily: FONT,
            fontSize: 44,
            fontWeight: 900,
            letterSpacing: 0.5,
            color: text,
            fontVariantNumeric: "tabular-nums",
            flex: 1,
            whiteSpace: "nowrap",
            overflow: "hidden",
          }}
        >
          {titleText}
        </span>
        <span
          style={{
            fontFamily: MONO,
            fontSize: 20,
            color: done ? accent : sub,
            letterSpacing: 1.2,
            opacity: 0.9,
            whiteSpace: "nowrap",
          }}
        >
          {statusText}
        </span>
      </div>
      {/* Progress bar */}
      <div
        style={{
          position: "relative",
          height: 6,
          background: "rgba(255,255,255,0.06)",
          borderRadius: 3,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            bottom: 0,
            width: `${fillProgress * 100}%`,
            background: barColor,
            boxShadow: `0 0 18px ${barColor}88`,
            transition: "background 200ms",
          }}
        />
      </div>
    </div>
  );
};

export const TaskQueueProgress: React.FC<TaskQueueProgressProps> = ({
  tasks,
  taskStaggerS = 0.9,
  accentColor = "#22c55e",
  runningColor = "#D97757",
  backgroundColor = "#050c08",
  borderColor = "#1d3f2b",
  textColor = "#ffffff",
  subColor = "#4ec46e",
  captionLead,
  captionPayoff,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const staggerFrames = Math.round(taskStaggerS * fps);
  const startFrames = tasks.map((_, i) => i * staggerFrames + 6);

  // Last task finish frame = when the caption lead fades in
  const lastTask = tasks[tasks.length - 1];
  const lastFillFrames = Math.round((lastTask?.fillSeconds ?? 0.9) * fps);
  const lastFinishFrame = startFrames[startFrames.length - 1] + 8 + lastFillFrames;

  const leadOp = interpolate(frame, [lastFinishFrame + 4, lastFinishFrame + 18], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  const payoffProgress = interpolate(
    frame,
    [lastFinishFrame + 14, lastFinishFrame + 46],
    [0, 1],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );
  const payoffTick = Math.floor((frame - (lastFinishFrame + 14)) / 3);
  const payoffText = captionPayoff
    ? scramble(captionPayoff, payoffProgress, 999, payoffTick)
    : "";

  return (
    <AbsoluteFill
      style={{
        backgroundColor,
        padding: "80px 80px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        gap: 26,
      }}
    >
      {/* subtle outer chrome frame */}
      <div
        style={{
          position: "absolute",
          inset: 40,
          border: `1px solid ${borderColor}33`,
          borderRadius: 8,
          pointerEvents: "none",
        }}
      />
      {tasks.map((task, i) => (
        <TaskCard
          key={i}
          task={task}
          index={i}
          startFrame={startFrames[i]}
          fps={fps}
          frame={frame}
          accent={accentColor}
          running={runningColor}
          border={borderColor}
          text={textColor}
          sub={subColor}
        />
      ))}

      {(captionLead || captionPayoff) && (
        <div
          style={{
            marginTop: 28,
            fontFamily: MONO,
            color: subColor,
            opacity: leadOp,
          }}
        >
          {captionLead && (
            <div
              style={{
                fontSize: 20,
                letterSpacing: 1.2,
                opacity: 0.75,
                marginBottom: 16,
              }}
            >
              {captionLead}
            </div>
          )}
          {captionPayoff && (
            <div
              style={{
                fontFamily: FONT,
                fontSize: 72,
                fontWeight: 900,
                color: runningColor,
                letterSpacing: -1,
                lineHeight: 1.05,
                fontVariantNumeric: "tabular-nums",
              }}
            >
              {payoffText}
            </div>
          )}
        </div>
      )}
    </AbsoluteFill>
  );
};

// Auto-extracted from Props interface — see source for authoritative types.
// Component: TaskQueueProgress
// 10 props detected · 3 port(s)