import '@fontsource-variable/dm-sans/wght.css';
import '@fontsource-variable/space-grotesk/wght.css';
import React from 'react';
import {AbsoluteFill, Audio, Composition, Img, interpolate, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

type Theme = 'light' | 'dark';
const palette = {
  light: {ground:'#f8f7f4',paper:'#ffffff',ink:'#231f1b',muted:'#625b54',line:'#d8d1c8',accent:'#ac6238',shadow:'rgba(54,35,20,.16)'},
  dark: {ground:'#11100e',paper:'#211d19',ink:'#f8f4ee',muted:'#c7beb3',line:'#524940',accent:'#e0a176',shadow:'rgba(0,0,0,.42)'},
};
const body = '"DM Sans Variable", sans-serif';
const display = '"Space Grotesk Variable", sans-serif';
const fps = 30;
const duration = 630;

function Canvas({theme,children}:{theme:Theme;children:React.ReactNode}) {
  const c=palette[theme];
  return <AbsoluteFill style={{background:c.ground,color:c.ink,fontFamily:body,overflow:'hidden'}}>
    <div style={{position:'absolute',inset:0,opacity:.12,backgroundImage:`linear-gradient(${c.line} 1px,transparent 1px),linear-gradient(90deg,${c.line} 1px,transparent 1px)`,backgroundSize:'64px 64px'}} />
    <div style={{position:'absolute',width:850,height:850,right:-300,top:-340,borderRadius:'50%',background:c.accent,filter:'blur(180px)',opacity:theme==='dark'?.13:.1}} />
    {children}
  </AbsoluteFill>;
}

function Wordmark({theme}:{theme:Theme}) {return <div style={{fontFamily:display,fontWeight:700,fontSize:28,letterSpacing:-1,color:palette[theme].ink}}>compokit<span style={{color:palette[theme].accent}}>•</span></div>}

function FormCrop({theme,zoom=1.1,move=0}:{theme:Theme;zoom?:number;move?:number}) {
  const c=palette[theme];
  return <div style={{width:770,height:482,position:'relative',overflow:'hidden',border:`1px solid ${c.line}`,borderRadius:18,background:c.paper,boxShadow:`0 32px 90px ${c.shadow}`,transform:`translateY(${move}px) rotate(-1deg)`}}>
    <Img src={staticFile(`${theme}-form.png`)} style={{position:'absolute',width:1280*zoom,height:800*zoom,maxWidth:'none',left:-290*zoom,top:-177*zoom}} />
  </div>;
}

function ResultCrop({theme,width=900,height=390,scale=1.08}:{theme:Theme;width?:number;height?:number;scale?:number}) {
  const c=palette[theme];
  return <div style={{width,height,position:'relative',overflow:'hidden',border:`1px solid ${c.line}`,borderRadius:22,background:c.paper,boxShadow:`0 38px 100px ${c.shadow}`}}>
    <Img src={staticFile(`${theme}-result.png`)} style={{position:'absolute',width:1280*scale,height:800*scale,maxWidth:'none',left:-20*scale,top:-155*scale}} />
  </div>;
}

const beats = [
  {start:0,end:100,state:'form',eyebrow:'SOURCE / 01',title:'Start with your\ncomponent library.',note:'The scan begins with a real source directory.',anchor:'Choose the framework'},
  {start:100,end:265,state:'form',eyebrow:'SCAN / 02',title:'Svelte or Vue.\nYour choice.',note:'Choose the framework the directory actually uses.',anchor:'Framework selector'},
  {start:265,end:475,state:'result',eyebrow:'INDEX / 03',title:'See what\nwas found.',note:'Component and token counts come from the completed scan.',anchor:'Indexed library cards'},
  {start:475,end:630,state:'result',eyebrow:'READY / 04',title:'Your library,\nin context.',note:'These components are indexed for the next step.',anchor:'Svelte and Vue'},
] as const;

// Editorial timing for layout QA only; re-time to the licensed Cartesia waveform.
const draftCaptions = [
  {start:0,end:144,text:'Point Compokit at a Svelte or Vue component directory.'},
  {start:144,end:300,text:'It indexes the components and design tokens it finds,'},
  {start:300,end:474,text:'so your own library is ready for the next step.'},
  {start:474,end:630,text:'Start with the source you already have.'},
] as const;

function Film({theme}:{theme:Theme}) {
  const frame=useCurrentFrame(),{fps:rate}=useVideoConfig(),c=palette[theme];
  const beat=beats.find(b=>frame>=b.start&&frame<b.end)??beats[beats.length-1];
  const local=frame-beat.start;
  const reveal=spring({frame:local,fps:rate,config:{damping:200,stiffness:120}});
  const progress=Math.min(1,local/(beat.end-beat.start));
  const zoom=1.1+interpolate(progress,[0,1],[0,.035]);
  const caption=draftCaptions.find(cue=>frame>=cue.start&&frame<cue.end);
  return <Canvas theme={theme}>
    <div style={{position:'absolute',left:54,right:54,top:40,display:'flex',justifyContent:'space-between',alignItems:'center'}}><Wordmark theme={theme}/><div style={{fontSize:13,color:c.muted,letterSpacing:2,textTransform:'uppercase'}}>Product update · component scanning</div></div>
    <div style={{position:'absolute',left:54,right:54,top:125,bottom:78,display:'flex',alignItems:'center',gap:44}}>
      <div style={{width:360,transform:`translateY(${(1-reveal)*26}px)`,opacity:reveal}}>
        <div style={{fontSize:14,fontWeight:800,letterSpacing:3,color:c.accent,marginBottom:26}}>{beat.eyebrow}</div>
        <h1 style={{fontFamily:display,fontWeight:700,fontSize:54,lineHeight:1.05,letterSpacing:-2.6,whiteSpace:'pre-line',margin:0}}>{beat.title}</h1>
        <p style={{fontSize:20,lineHeight:1.4,color:c.muted,marginTop:30}}>{beat.note}</p>
        <div style={{marginTop:45,display:'flex',alignItems:'center',gap:12,color:c.accent,fontSize:13,fontWeight:800,letterSpacing:1.1,textTransform:'uppercase'}}><span style={{width:28,height:1,background:c.accent}}/>{beat.anchor}</div>
      </div>
      <div style={{position:'relative',transform:`translateX(${(1-reveal)*70}px)`,opacity:reveal}}>
        {beat.state==='result'
          ? <ResultCrop theme={theme} width={770} height={330} scale={.92+interpolate(progress,[0,1],[0,.02])}/>
          : <FormCrop theme={theme} zoom={zoom} move={-8*Math.sin(progress*Math.PI)} />}
        <div style={{position:'absolute',right:20,bottom:-21,padding:'12px 18px',border:`1px solid ${c.line}`,borderRadius:9,background:c.paper,color:c.ink,boxShadow:`0 14px 36px ${c.shadow}`,fontSize:14,fontWeight:700}}><span style={{color:c.accent,marginRight:9}}>↗</span>{beat.anchor}</div>
      </div>
    </div>
    {caption&&<div style={{position:'absolute',left:340,right:340,bottom:91,textAlign:'center',fontSize:17,lineHeight:1.28,fontWeight:700,color:c.ink,textShadow:`0 0 14px ${c.paper}`}}>{caption.text}</div>}
    <div style={{position:'absolute',bottom:36,left:54,right:54,display:'flex',alignItems:'center',gap:24}}><div style={{height:3,background:c.line,flex:1,borderRadius:3}}><div style={{height:'100%',width:`${frame/duration*100}%`,background:c.accent,borderRadius:3}}/></div><div style={{fontSize:12,letterSpacing:1.4,color:c.muted}}>REAL PRODUCT CAPTURE · SYNTHETIC LOCAL FIXTURE</div></div>
    <Audio src={staticFile('narration.wav')}/>
  </Canvas>;
}

function Poster({theme}:{theme:Theme}) {
  const c=palette[theme];
  return <Canvas theme={theme}>
    <div style={{position:'absolute',left:90,right:90,top:73,display:'flex',justifyContent:'space-between',alignItems:'center'}}><Wordmark theme={theme}/><span style={{fontSize:16,fontWeight:700,color:c.accent,letterSpacing:3}}>RELEASE NOTE / COMPONENT SCANNING</span></div>
    <div style={{position:'absolute',left:95,top:274,width:710,zIndex:2}}><div style={{fontSize:23,fontWeight:800,letterSpacing:4,color:c.accent,marginBottom:38}}>SVELTE + VUE</div><h1 style={{fontFamily:display,fontSize:108,lineHeight:.98,letterSpacing:-7,margin:0}}>Your library,<br/><span style={{color:c.accent}}>in context.</span></h1><p style={{fontSize:29,lineHeight:1.35,color:c.muted,maxWidth:610,marginTop:42}}>Scan the components and tokens you already have.</p></div>
    <div style={{position:'absolute',right:30,top:290,transform:'rotate(-3deg)'}}>
      <ResultCrop theme={theme}/>
      <div style={{position:'absolute',left:52,top:-26,padding:'13px 21px',border:`1px solid ${c.line}`,borderRadius:999,background:c.paper,boxShadow:`0 14px 40px ${c.shadow}`,fontSize:18,fontWeight:800,color:c.ink}}>01 / Component libraries</div>
      <div style={{position:'absolute',right:18,bottom:-28,padding:'14px 22px',borderRadius:12,background:c.accent,color:theme==='dark'?'#16110d':'#fff',fontSize:18,fontWeight:800,boxShadow:`0 16px 35px ${c.shadow}`}}>Real Svelte + Vue scan ↗</div>
    </div>
    <div style={{position:'absolute',left:0,right:0,bottom:0,height:205,background:c.paper,borderTop:`2px solid ${c.line}`,display:'flex',alignItems:'center',justifyContent:'space-between',gap:50,padding:'32px 95px'}}>
      <div style={{maxWidth:760}}>
        <div style={{fontSize:49,lineHeight:1.05,fontWeight:800,letterSpacing:-1.5,color:c.ink}}>SYNTHETIC LOCAL SCAN</div>
        <div style={{fontSize:27,marginTop:10,color:c.muted}}>Actual product UI · fictional source components</div>
      </div>
      <div style={{textAlign:'right',fontSize:35,lineHeight:1.1,fontWeight:800,color:c.accent}}>SVELTE + VUE<br/><span style={{fontSize:48,color:c.ink}}>1 component · 2 tokens each</span></div>
    </div>
  </Canvas>;
}

function Root(){return <>
  <Composition id="ScanLight" component={()=><Film theme="light"/>} durationInFrames={duration} fps={fps} width={1280} height={720}/>
  <Composition id="ScanDark" component={()=><Film theme="dark"/>} durationInFrames={duration} fps={fps} width={1280} height={720}/>
  <Composition id="PosterLight" component={()=><Poster theme="light"/>} durationInFrames={1} fps={fps} width={1920} height={1080}/>
  <Composition id="PosterDark" component={()=><Poster theme="dark"/>} durationInFrames={1} fps={fps} width={1920} height={1080}/>
</>}
registerRoot(Root);