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

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

const MONO = "'JetBrains Mono', monospace";

interface AgentLogStreamProps {
  streamLines?: string[];
  agentsCount?: number;
  streamVerbs?: string[];
  terminalTitle?: string;
  backgroundColor?: string;
  headSrc?: string | null;
  headStartFrame?: number;
  // chars-per-sec for individual log lines (instant if 0)
  // and lines-per-sec controls how fast new lines spawn
  linesPerSec?: number;
}

const DEFAULT_VERBS = [
  "task assigned", "processing...", "analyzing...", "complete ✓",
  "indexing...", "deploying...", "building...", "testing ✓",
  "reviewing ✓", "syncing...", "optimizing...", "spawned",
];

const isVideo = (s: string) => /\.(mp4|mov|webm)(\?|$)/i.test(s);
const resolveStatic = (s: string) => (s.startsWith("http") ? s : staticFile(s));

function buildLines(count: number, verbs: string[]): string[] {
  const out: string[] = [];
  for (let i = 1; i <= count; i++) {
    const id = String(i).padStart(3, "0");
    const verb = verbs[i % verbs.length];
    out.push(`[agent-${id}] ${verb}`);
  }
  return out;
}

export const AgentLogStream: React.FC<AgentLogStreamProps> = ({
  streamLines,
  agentsCount = 42,
  streamVerbs,
  terminalTitle = "claude — fleet",
  backgroundColor = "#1a0b24",
  headSrc,
  headStartFrame,
  linesPerSec = 6,
}) => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();
  const t = frame / fps;

  const verbs = streamVerbs && streamVerbs.length ? streamVerbs : DEFAULT_VERBS;
  const lines = streamLines && streamLines.length ? streamLines : buildLines(agentsCount, verbs);

  // Number of lines that have appeared so far
  const visibleCount = Math.min(lines.length, Math.max(0, Math.floor((t - 0.25) * linesPerSec)));

  // Layout — terminal in the upper half, head in the lower half
  const splitY = Math.floor(height * 0.5);
  const termPadX = 40;
  const termTop = 80;
  const termBottom = splitY - 40;
  const termW = width - termPadX * 2;
  const termH = termBottom - termTop;
  const fontSize = 26;
  const lineH = Math.floor(fontSize * 1.55);
  // Reserve title bar (52) + body padding (20 top, 20 bottom)
  const bodyVisibleH = termH - 52 - 40;
  const maxVisible = Math.max(1, Math.floor(bodyVisibleH / lineH));
  // Smooth scroll once content overflows
  const scrollLines = Math.max(0, visibleCount - maxVisible);
  const scrollOffset = scrollLines * lineH;

  const chromeOp = interpolate(t, [0, 0.4], [0, 1], { extrapolateRight: "clamp" });
  const chromeScale = interpolate(t, [0, 0.4], [0.97, 1], {
    extrapolateRight: "clamp",
    easing: Easing.out(Easing.cubic),
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a14", overflow: "hidden" }}>
      {/* Terminal panel */}
      <div
        style={{
          position: "absolute",
          left: termPadX,
          top: termTop,
          width: termW,
          height: termH,
          background: "#12101a",
          borderRadius: 22,
          border: "1px solid rgba(255,255,255,0.10)",
          boxShadow: "0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)",
          overflow: "hidden",
          opacity: chromeOp,
          transform: `scale(${chromeScale})`,
          transformOrigin: "center center",
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* Title bar */}
        <div
          style={{
            height: 52,
            background: "linear-gradient(to bottom, #1f1a2a, #181424)",
            borderBottom: "1px solid rgba(255,255,255,0.06)",
            display: "flex",
            alignItems: "center",
            padding: "0 20px",
            gap: 10,
            flexShrink: 0,
          }}
        >
          <div style={{ width: 14, height: 14, borderRadius: 7, background: "#ff5f57" }} />
          <div style={{ width: 14, height: 14, borderRadius: 7, background: "#febc2e" }} />
          <div style={{ width: 14, height: 14, borderRadius: 7, background: "#28c840" }} />
          <div style={{ flex: 1, textAlign: "center", fontFamily: MONO, fontSize: 22, color: "rgba(255,255,255,0.55)" }}>
            {terminalTitle}
          </div>
          <div style={{ width: 60 }} />
        </div>
        {/* Body */}
        <div
          style={{
            flex: 1,
            padding: "20px 26px",
            fontFamily: MONO,
            fontSize,
            lineHeight: 1.55,
            color: "#a8d98a",
            overflow: "hidden",
            position: "relative",
          }}
        >
          <div
            style={{
              transform: `translateY(-${scrollOffset}px)`,
              transition: "transform 0.18s ease-out",
            }}
          >
            {lines.slice(0, visibleCount).map((ln, idx) => {
              const colored = colorize(ln);
              return (
                <div key={idx} style={{ whiteSpace: "pre" }}>{colored}</div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Lower half — talking head */}
      <div
        style={{
          position: "absolute",
          top: splitY,
          left: 0,
          right: 0,
          bottom: 0,
          background: backgroundColor,
          overflow: "hidden",
        }}
      >
        {headSrc ? (
          isVideo(headSrc) ? (
            <OffthreadVideo
              src={resolveStatic(headSrc)}
              muted
              startFrom={headStartFrame}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : (
            <Img
              src={resolveStatic(headSrc)}
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                objectPosition: "center -25px",
                display: "block",
              }}
            />
          )
        ) : null}
      </div>

      {/* Seam highlight */}
      <div
        style={{
          position: "absolute",
          top: splitY,
          left: 0,
          right: 0,
          height: 3,
          transform: "translateY(-1.5px)",
          background: "rgba(255,255,255,0.18)",
          boxShadow: "0 0 14px rgba(255,255,255,0.28)",
          pointerEvents: "none",
          zIndex: 8,
        }}
      />
    </AbsoluteFill>
  );
};

// "[agent-NNN] verb" — the bracketed agent id stays muted purple, the verb pops
// green when it ends in ✓, otherwise stays warm white.
function colorize(line: string): React.ReactNode {
  const m = line.match(/^(\[agent-\d+\])\s+(.*)$/);
  if (!m) return <span>{line}</span>;
  const [, head, rest] = m;
  const ok = /✓\s*$/.test(rest);
  return (
    <>
      <span style={{ color: "#c4a7ff" }}>{head}</span>{" "}
      <span style={{ color: ok ? "#28c840" : "rgba(232,226,245,0.85)" }}>{rest}</span>
    </>
  );
}

// Auto-extracted from Props interface — see source for authoritative types.
// Component: AgentLogStream
// 8 props detected · 1 port(s)