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

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

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

interface Panel {
  title: string;
  lines: string[];
}

interface AgentGridProps {
  panels?: Panel[];
  columns?: number;
  backgroundColor?: string;
  defaultCps?: number;
}

const DEFAULT_PANELS: Panel[] = [
  { title: "agent-planner",  lines: ["[planner] analyzing project structure...", "[planner] breaking down into 12 tasks"] },
  { title: "agent-coder",    lines: ["[coder] implementing auth module...",      "[coder] writing API endpoints"] },
  { title: "agent-tester",   lines: ["[tester] running test suite...",            "[tester] 142 passed, 0 failed"] },
  { title: "agent-security", lines: ["[security] scanning dependencies...",       "[security] no vulns found"] },
];

// Per-tile mini-terminal that renders mac chrome + line-by-line typing.
// Lines are revealed sequentially: ~28 cps for command lines, instant for output.
const AgentTile: React.FC<{
  panel: Panel;
  startFrame: number;
  cps: number;
  width: number;
  height: number;
}> = ({ panel, startFrame, cps, width, height }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const enter = spring({ frame: frame - startFrame, fps, config: { mass: 0.7, damping: 16, stiffness: 160 } });
  const op = interpolate(enter, [0, 1], [0, 1]);
  const scale = interpolate(enter, [0, 1], [0.92, 1]);

  // Per-line schedule (in seconds, relative to tile start)
  const t = Math.max(0, (frame - startFrame) / fps);
  let cursor = 0.35;
  const meta = panel.lines.map((text) => {
    const dur = text.length / cps;
    const m = { startT: cursor, endT: cursor + dur };
    cursor += dur + 0.3;
    return m;
  });

  // Pick font sizes from the SHORTER tile dimension so single-column
  // (4-row) tiles don't end up with oversized headers eating the body.
  const baseAxis = Math.min(width / 26, height / 12);
  const fontSize = Math.max(16, Math.floor(baseAxis));
  const titleFs = Math.max(14, Math.floor(baseAxis * 0.78));
  const dotSize = Math.max(8, Math.floor(baseAxis * 0.5));

  return (
    <div
      style={{
        width,
        height,
        background: "#12101a",
        borderRadius: 18,
        border: "1px solid rgba(255,255,255,0.10)",
        boxShadow: "0 16px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06)",
        overflow: "hidden",
        opacity: op,
        transform: `scale(${scale})`,
        transformOrigin: "center center",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Title bar */}
      <div
        style={{
          height: Math.max(34, fontSize * 1.5),
          background: "linear-gradient(to bottom, #1f1a2a, #181424)",
          borderBottom: "1px solid rgba(255,255,255,0.06)",
          display: "flex",
          alignItems: "center",
          padding: `0 ${Math.floor(fontSize * 0.55)}px`,
          gap: Math.floor(dotSize * 0.6),
          flexShrink: 0,
        }}
      >
        <div style={{ width: dotSize, height: dotSize, borderRadius: "50%", background: "#ff5f57" }} />
        <div style={{ width: dotSize, height: dotSize, borderRadius: "50%", background: "#febc2e" }} />
        <div style={{ width: dotSize, height: dotSize, borderRadius: "50%", background: "#28c840" }} />
        <div
          style={{
            flex: 1,
            textAlign: "center",
            fontFamily: MONO,
            fontSize: titleFs,
            color: "rgba(255,255,255,0.5)",
            paddingRight: Math.floor(dotSize * 3),
          }}
        >
          {panel.title}
        </div>
      </div>
      {/* Body */}
      <div
        style={{
          flex: 1,
          padding: `${Math.floor(fontSize * 0.7)}px ${Math.floor(fontSize * 0.8)}px`,
          fontFamily: MONO,
          fontSize,
          lineHeight: 1.5,
          color: "#a8d98a",
        }}
      >
        {panel.lines.map((line, idx) => {
          const m = meta[idx];
          if (t < m.startT) return null;
          const charT = interpolate(t, [m.startT, m.endT], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
          const numChars = Math.floor(charT * line.length);
          const shown = line.slice(0, numChars);
          const isLast = idx === panel.lines.length - 1;
          const stillTyping = t < m.endT;
          const showCaret = isLast && (stillTyping || Math.floor(t * 2) % 2 === 0);
          return (
            <div key={idx} style={{ marginBottom: 4, whiteSpace: "pre-wrap" }}>
              {shown}
              {showCaret && (
                <span
                  style={{
                    display: "inline-block",
                    width: Math.floor(fontSize * 0.55),
                    height: fontSize,
                    background: "#a8d98a",
                    verticalAlign: "text-bottom",
                    marginLeft: 2,
                  }}
                />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export const AgentGrid: React.FC<AgentGridProps> = ({
  panels,
  columns = 1,    // 4-row vertical stack reads better at 9:16 than a 2×2 grid
  backgroundColor = "#0a0a14",
  defaultCps = 40,
}) => {
  const { width, height } = useVideoConfig();
  const list = (panels && panels.length >= 2 ? panels : DEFAULT_PANELS).slice(0, 4);
  const cols = Math.max(1, Math.min(columns, list.length));
  const rows = Math.ceil(list.length / cols);

  const outerPadX = 60;
  const outerPadTopBottom = 110;
  const gutter = 28;
  const tileW = Math.floor((width - outerPadX * 2 - gutter * (cols - 1)) / cols);
  const tileH = Math.floor((height - outerPadTopBottom * 2 - gutter * (rows - 1)) / rows);

  return (
    <AbsoluteFill style={{ backgroundColor, overflow: "hidden" }}>
      {/* Subtle radial wash */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "radial-gradient(ellipse at 50% 35%, rgba(87,206,178,0.08), transparent 60%)",
          pointerEvents: "none",
        }}
      />
      <div
        style={{
          position: "absolute",
          left: outerPadX,
          right: outerPadX,
          top: outerPadTopBottom,
          bottom: outerPadTopBottom,
          display: "grid",
          gridTemplateColumns: `repeat(${cols}, 1fr)`,
          gridAutoRows: `${tileH}px`,
          gap: gutter,
        }}
      >
        {list.map((p, i) => (
          <AgentTile
            key={i}
            panel={p}
            startFrame={4 + i * 6}
            cps={defaultCps}
            width={tileW}
            height={tileH}
          />
        ))}
      </div>
    </AbsoluteFill>
  );
};

// Auto-extracted from Props interface — see source for authoritative types.
// Component: AgentGrid
// 4 props detected · 0 port(s)