import React from 'react';
import {AbsoluteFill, Easing, interpolate} from 'remotion';
import type {EditProps} from './model';

export const W = 1280, H = 720;
export const ink = '#182722', paper = '#f2f1e9';
export const progress = (f: number, a: number, b: number) =>
  interpolate(f, [a,b], [0,1], {extrapolateLeft:'clamp', extrapolateRight:'clamp'});
export const ease = (v:number) => Easing.bezier(.16,1,.3,1)(v);
export const lerp = (a:number,b:number,t:number) => a+(b-a)*t;
export const Box: React.FC<React.PropsWithChildren<{x:number;y:number;w:number;h:number;style?:React.CSSProperties}>> =
  ({x,y,w,h,style,children}) => <div style={{position:'absolute',left:x,top:y,width:w,height:h,...style}}>{children}</div>;
export const Stage: React.FC<React.PropsWithChildren> = ({children}) =>
  <AbsoluteFill style={{background:paper,color:ink,fontFamily:'Study Sans',overflow:'hidden'}}>{children}</AbsoluteFill>;
export const Camera: React.FC<React.PropsWithChildren<{amount:number;p:EditProps}>> = ({amount,p,children}) => {
  const scale=lerp(1,p.zoom,amount);
  const x=lerp(0,W/2-p.focusX*W*p.zoom,amount), y=lerp(0,H/2-p.focusY*H*p.zoom,amount);
  return <AbsoluteFill style={{transform:`translate(${x}px,${y}px) scale(${scale})`,transformOrigin:'0 0'}}>{children}</AbsoluteFill>;
};
export const Pointer = ({x,y}:{x:number;y:number}) => <svg width="28" height="36" viewBox="0 0 28 36" style={{position:'absolute',left:x,top:y,zIndex:6}}><path d="M3 2 L24 22 L15 23 L20 32 L14 35 L9 25 L3 31Z" fill={ink} stroke="white" strokeWidth="2"/></svg>;
export const Artwork = ({accent,variant=0}:{accent:string;variant?:number}) => {
  const colors=[accent,'#ba633c','#606dad','#b99036'];
  return <svg viewBox="0 0 500 320" width="100%" height="100%" aria-label="Original geometric exhibition study">
    <rect width="500" height="320" fill={variant%2?'#e6e5d7':'#e3ece6'}/>
    <circle cx="250" cy="142" r="96" fill={colors[variant%4]}/>
    <path d="M154 142H346V242H154Z" fill={ink}/>
    <circle cx="250" cy="142" r="40" fill="#f5f3e9"/>
    <path d="M55 280H445" stroke={ink} strokeWidth="2"/>
    <text x="55" y="306" fill={ink} fontFamily="Study Sans" fontSize="15" letterSpacing="3">FORM STUDY / 0{variant+1}</text>
  </svg>;
};
export const Window: React.FC<React.PropsWithChildren<{p:EditProps;header?:string}>> = ({p,header,children}) => <>
  <Box x={80} y={68} w={1120} h={584} style={{background:'#fff',border:'1px solid #c9cfc7',borderRadius:16,overflow:'hidden',boxShadow:'0 20px 65px #26392a15'}}>
    <div style={{height:52,background:'#fbfcf8',borderBottom:'1px solid #e1e5dd',display:'flex',alignItems:'center',padding:'0 25px',gap:8}}>
      {[0,1,2].map(i=><i key={i} style={{width:8,height:8,borderRadius:'50%',background:'#c0c8bf'}}/>)}
      <span style={{fontSize:14,marginLeft:24,letterSpacing:1}}>FIELD DESK</span><span style={{marginLeft:'auto',fontSize:12,color:'#627066'}}>{header??p.label}</span>
    </div>
    <div style={{position:'absolute',top:52,left:0,width:188,bottom:0,borderRight:'1px solid #e1e5dd',padding:24,fontSize:14,color:'#677268'}}>
      <div style={{fontSize:11,letterSpacing:2,marginBottom:26}}>WORKSPACE</div>
      {['Overview','Exhibition','Library'].map((s,i)=><div key={s} style={{padding:'13px 0',color:i===1?p.accent:undefined,fontWeight:i===1?700:400}}>{s}</div>)}
      <div style={{position:'absolute',bottom:24,fontSize:11}}>Original research fixture</div>
    </div>
  </Box>{children}
</>;
export const Proof = ({p,variant=0}:{p:EditProps;variant?:number}) => <Window p={p}>
  <Box x={314} y={156} w={812} h={70}><div style={{fontSize:12,letterSpacing:2,color:p.accent,marginBottom:10}}>EXHIBITION NOTES</div><div style={{fontSize:30,fontWeight:700}}>{p.result}</div></Box>
  <Box x={314} y={252} w={510} h={326}><Artwork accent={p.accent} variant={variant}/></Box>
  <Box x={852} y={262} w={268} h={288} style={{fontSize:18,lineHeight:1.7}}><b>Selected study</b><p style={{color:'#647166'}}>One motif.<br/>A clear silhouette.<br/>Space to read.</p><div style={{borderTop:'1px solid #d9dfd7',paddingTop:14,fontSize:12,letterSpacing:2}}>READY TO REVIEW</div></Box>
</Window>;
export const Title = ({text,p,reveal=1}:{text:string;p:EditProps;reveal?:number}) => <AbsoluteFill style={{background:paper,justifyContent:'center',alignItems:'center',padding:150}}>
  <div style={{fontSize:12,letterSpacing:3,color:p.accent,marginBottom:28}}>FIELDNOTES / AN ORIGINAL STUDY</div>
  <div style={{fontSize:64,fontWeight:700,letterSpacing:-2,lineHeight:1.15,textAlign:'center',maxWidth:970}}>{Array.from(text).slice(0,Math.round(Array.from(text).length*reveal)).join('')}</div>
</AbsoluteFill>;