import React, {type ComponentType, type CSSProperties, type ReactNode} from "react";
import {AbsoluteFill, Composition, useCurrentFrame, useVideoConfig} from "remotion";
import {BlurWords, MaskReveal, TerminalScene} from "../components.js";
import {AnchoredReveal, AppFrame, CameraRig, Connector, FadeIn, FocusPull, HighlightSweep, HypeTicker, KineticCaption, ProcessNode, RuleDraw, ScaleIn, SlamWord, SlideIn, StaggerCascade, StaggeredWords, ValueSwap} from "./index.js";

const ink = "#141414", lime = "#b6f36b";
const center: CSSProperties = {display: "flex", alignItems: "center", justifyContent: "center"};
const large: CSSProperties = {fontSize: 104, lineHeight: 1.06, fontWeight: 700, letterSpacing: "-0.055em"};
const card: CSSProperties = {background: "#fff", border: "1px solid #ddd", borderRadius: 20, padding: 32};

function Stage({children, dark = false, style}: {children: ReactNode; dark?: boolean; style?: CSSProperties}) {
  return <AbsoluteFill style={{fontFamily: "Arial, Helvetica, sans-serif", color: dark ? "#fff" : ink, background: dark ? ink : "#f7f7f5", ...center, ...style}}>{children}</AbsoluteFill>;
}
function Dashboard({compact = false, emphasizeMetric = false}: {compact?: boolean; emphasizeMetric?: boolean}) {
  return <div style={{padding: compact ? 24 : 36, display: "grid", gap: 26, color: ink}}>
    <div style={{display: "flex", justifyContent: "space-between", alignItems: "center"}}><strong style={{fontSize: 30, letterSpacing: "-0.035em"}}>Project overview</strong><span style={{background: lime, padding: "10px 18px", borderRadius: 8, fontSize: 16}}>New project +</span></div>
    <div style={{display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16}}>{[["In progress", "08"], ["Completed", "24"], ["This week", "+12%"]].map(([label, value], i) => <div key={label} style={{...card, padding: 20, background: "#fafafa", outline: emphasizeMetric && i === 2 ? `4px solid ${lime}` : undefined}}><div style={{fontSize: 16, color: "#666"}}>{label}</div><div style={{fontSize: 42, marginTop: 12, letterSpacing: "-0.05em"}}>{value}</div></div>)}</div>
    <div style={{display: "flex", height: compact ? 110 : 150, alignItems: "flex-end", gap: 14, borderBottom: "1px solid #ddd"}}>{[24, 42, 35, 68, 54, 78, 96, 74, 84, 100].map((n, i) => <div key={i} style={{flex: 1, height: `${n}%`, background: i === 9 ? lime : "#e4e5e0", borderRadius: "8px 8px 0 0"}} />)}</div>
  </div>;
}
function Icon() {
  return <div style={{width: 160, height: 160, background: lime, borderRadius: 38, ...center, boxShadow: "0 25px 60px #0002"}}><svg width="92" height="92" viewBox="0 0 92 92"><path d="M14 46 38 22 38 46 62 22 62 70 38 70 38 46 14 70Z" fill={ink} /></svg></div>;
}

export function FadeInExample() {return <Stage><FadeIn at={0.35} duration={1.1}><AppFrame width={930} height={510}><Dashboard /></AppFrame></FadeIn></Stage>;}
export function SlideInExample() {return <Stage><div style={{display: "flex", gap: 24}}>{["Plan", "Build", "Launch"].map((text, i) => <SlideIn key={text} at={0.3 + i * 0.35} from={i === 0 ? "left" : i === 2 ? "right" : "down"} distance={120} duration={1}><div style={{...card, width: 260, height: 310, display: "flex", flexDirection: "column", justifyContent: "space-between", background: i === 2 ? lime : "#fff"}}><span style={{fontSize: 26}}>0{i + 1}</span><strong style={{fontSize: 50, letterSpacing: "-0.05em"}}>{text}</strong></div></SlideIn>)}</div></Stage>;}
export function ScaleInExample() {return <Stage dark><ScaleIn at={0.4} duration={1} from={0.35}><Icon /></ScaleIn></Stage>;}
export function AnchoredRevealExample() {return <Stage><div style={{position: "relative", width: 600, height: 330}}><div style={{position: "absolute", left: 0, top: 0, padding: "18px 28px", borderRadius: 12, background: ink, color: "#fff", fontSize: 24}}>Add a scene +</div><AnchoredReveal anchor={{x: 0, y: 0}} from={0.2} at={0.7} duration={0.85} style={{position: "absolute", top: 78, left: 0}}><div style={{...card, width: 450, display: "grid", gap: 24, fontSize: 28}}><strong>Choose a starting point</strong><div>↗ Product reveal</div><div>≡ Feature walkthrough</div><div>◎ Closing frame</div></div></AnchoredReveal></div></Stage>;}
export function StaggerCascadeExample() {return <Stage><StaggerCascade at={0.3} stagger={0.22} duration={0.8} distance={36} style={{display: "grid", gap: 18, width: 820}}>{["Write the story", "Show the product", "Make the cut", "Ship the video"].map((text, i) => <div key={text} style={{...card, display: "flex", alignItems: "center", gap: 28, padding: "26px 32px", fontSize: 32}}><span style={{color: "#888"}}>0{i + 1}</span>{text}<span style={{marginLeft: "auto", color: "#62972d"}}>✓</span></div>)}</StaggerCascade></Stage>;}
export function ValueSwapExample() {return <Stage dark><div style={{textAlign: "center"}}><div style={{fontSize: 28, color: "#aaa", marginBottom: 32}}>One less step.</div><ValueSwap from="In progress" to="Published" at={1.8} duration={0.8} style={{fontSize: 100, fontWeight: 650, letterSpacing: "-0.055em", color: lime}} /></div></Stage>;}
export function StaggeredWordsExample() {return <Stage><StaggeredWords text="A better way to launch." at={0.4} stagger={0.15} duration={0.8} distance={44} style={{...large, maxWidth: 940}} /></Stage>;}
export function KineticCaptionExample() {return <Stage><FadeIn at={2.2} duration={0.8}><AppFrame width={800} height={450}><Dashboard compact /></AppFrame></FadeIn><KineticCaption text="Bring your work into focus." at={0.3} recedeAt={1.8} captionY={645} style={{fontSize: 78}} /></Stage>;}
export function SlamWordExample() {return <Stage style={{background: lime}}><SlamWord text="READY." at={0.5} size={210} /></Stage>;}
export function HypeTickerExample() {return <Stage dark><div style={{textAlign: "center"}}><div style={{fontSize: 30, color: "#aaa", marginBottom: 24}}>Minutes back in your day</div><HypeTicker value={120} at={0.4} duration={2} suffix="+" style={{fontSize: 200, fontWeight: 700, letterSpacing: "-0.07em", color: lime}} /></div></Stage>;}
export function RuleDrawExample() {return <Stage><div style={{width: 890}}><div style={{...large, marginBottom: 34}}>Make it clear.</div><RuleDraw at={0.7} duration={1.1} width={885} thickness={12} /></div></Stage>;}
export function HighlightSweepExample() {return <Stage><div style={{...large, maxWidth: 970}}>Less busywork.<br /><HighlightSweep at={1} duration={1}>More making.</HighlightSweep></div></Stage>;}
export function AppFrameExample() {return <Stage><AppFrame width={960} height={540} title="Workspace"><Dashboard /></AppFrame></Stage>;}
export function ProcessNodeExample() {const t = useCurrentFrame() / useVideoConfig().fps;return <Stage><div style={{display: "flex", gap: 26}}><ProcessNode title="Source" rows={["Screens captured", "Assets ready"]} state="success" /><ProcessNode title="Render" rows={["Sequence assembled", t > 2 ? "Frames complete" : "Frames processing"]} state={t > 2 ? "success" : "running"} /><ProcessNode title="Publish" rows={[t > 3 ? "Review complete" : "Waiting for render", t > 3 ? "Ready to share" : "Not published"]} state={t > 3 ? "success" : "idle"} /></div></Stage>;}
export function ConnectorExample() {return <Stage><Connector from={{x: 350, y: 360}} to={{x: 930, y: 360}} bend={130} at={0.3} duration={1.2} pulseDuration={1.6} color="#62972d" style={{position: "absolute", inset: 0}} /><div style={{position: "absolute", left: 100, top: 280}}><ProcessNode title="Your product" rows={["Screens + assets"]} width={250} state="success" /></div><div style={{position: "absolute", left: 930, top: 280}}><ProcessNode title="Your video" rows={["Ready to share"]} width={250} state="success" /></div></Stage>;}
export function FocusPullExample() {return <Stage><FocusPull at={1.4} duration={0.8} blur={8} dim={0.35}><AppFrame width={980} height={550}><Dashboard /></AppFrame></FocusPull><ScaleIn at={1.8} duration={0.8} style={{position: "absolute"}}><div style={{...card, padding: "38px 52px", fontSize: 52, boxShadow: "0 20px 80px #0002", letterSpacing: "-0.04em"}}>All clear. <span style={{color: "#62972d"}}>✓</span></div></ScaleIn></Stage>;}
export function CameraRigExample() {return <Stage style={{overflow: "hidden"}}><CameraRig from={{x: 640, y: 360, zoom: 1}} to={{x: 968, y: 317, zoom: 1.8}} at={1.3} duration={1.6}><div style={{position: "absolute", left: 120, top: 105}}><AppFrame width={1040} height={510}><Dashboard emphasizeMetric /></AppFrame></div></CameraRig></Stage>;}
export function BlurWordsExample() {return <Stage><BlurWords text="From idea to first frame." at={0.4} stagger={0.12} duration={0.8} style={{...large, maxWidth: 980}} /></Stage>;}
export function MaskRevealExample() {return <Stage dark><MaskReveal at={0.4} duration={1.2}><div style={{...large, maxWidth: 930}}>Show what your<br /><span style={{color: lime}}>product does.</span></div></MaskReveal></Stage>;}
export function TerminalSceneExample() {return <Stage><TerminalScene title="Video workspace" steps={[{command: "npm run studio", at: 0.4, typeSeconds: 1.1, lines: [{text: "Opening the preview…", after: 0.25}, {text: "Your first frame is ready.", after: 0.8, positive: true}]}]} style={{width: 1040, height: 420, fontSize: 30}} /></Stage>;}

export type ComponentExample = {id: string; component: ComponentType; width: number; height: number; fps: number; durationInFrames: number};
const example = (component: ComponentType, id: string): ComponentExample => ({id, component, width: 1280, height: 720, fps: 30, durationInFrames: 180});
export const componentExamples: readonly ComponentExample[] = [
  example(FadeInExample, "FadeInExample"), example(SlideInExample, "SlideInExample"), example(ScaleInExample, "ScaleInExample"),
  example(AnchoredRevealExample, "AnchoredRevealExample"), example(StaggerCascadeExample, "StaggerCascadeExample"), example(ValueSwapExample, "ValueSwapExample"),
  example(StaggeredWordsExample, "StaggeredWordsExample"), example(KineticCaptionExample, "KineticCaptionExample"), example(SlamWordExample, "SlamWordExample"),
  example(HypeTickerExample, "HypeTickerExample"), example(RuleDrawExample, "RuleDrawExample"), example(HighlightSweepExample, "HighlightSweepExample"),
  example(AppFrameExample, "AppFrameExample"), example(ProcessNodeExample, "ProcessNodeExample"), example(ConnectorExample, "ConnectorExample"),
  example(FocusPullExample, "FocusPullExample"), example(CameraRigExample, "CameraRigExample"),
  example(BlurWordsExample, "BlurWordsExample"), example(MaskRevealExample, "MaskRevealExample"), example(TerminalSceneExample, "TerminalSceneExample"),
];
export function ComponentLibraryRoot() {return <>{componentExamples.map(item => <Composition key={item.id} {...item} />)}</>;}