import React from 'react';
import {
  AbsoluteFill,
  Audio,
  Img,
  OffthreadVideo,
  Sequence,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

const C = {
  carbon: '#020101',
  paper: '#FDFBFA',
  red: '#DC222D',
  blue: '#2148FF',
  voltage: '#D7FF1F',
  mist: '#D8D8D4',
};

const clamp = {extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const};

const Signal = ({color = C.red, width = 320}: {color?: string; width?: number}) => {
  const frame = useCurrentFrame();
  const draw = interpolate(frame, [4, 26], [0, 1], clamp);
  return (
    <div style={{position: 'relative', width, height: 14}}>
      <div style={{position: 'absolute', top: 6, left: 0, width: width * draw, height: 2, background: color}} />
      <div style={{position: 'absolute', left: Math.max(0, width * draw - 7), top: 0, width: 14, height: 14, borderRadius: 20, background: color, opacity: draw}} />
    </div>
  );
};

const Meta = ({light = false}: {light?: boolean}) => (
  <div style={{position: 'absolute', top: 54, left: 62, right: 62, display: 'flex', justifyContent: 'space-between', color: light ? C.paper : C.carbon, fontFamily: 'IBM Plex Mono', fontSize: 16, letterSpacing: '0.13em', textTransform: 'uppercase', zIndex: 20}}>
    <span>PHASE OBJECT</span>
    <span>LOS ANGELES / 2027</span>
  </div>
);

const Intro = ({asset}: {asset: (p: string) => string}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const logoY = interpolate(frame, [0, 26], [26, 0], clamp);
  const logoOpacity = interpolate(frame, [0, 18], [0, 1], clamp);
  const detailOpacity = interpolate(frame, [18, 42], [0, 1], clamp);
  const exit = interpolate(frame, [68, 84], [0, -110], clamp);
  const node = spring({frame: frame - 10, fps, config: {damping: 16, stiffness: 170}});
  return (
    <AbsoluteFill style={{background: C.paper, color: C.carbon, overflow: 'hidden', transform: `translateY(${exit}%)`}}>
      <Meta />
      <div style={{position: 'absolute', left: 110, top: 178, width: 810, opacity: logoOpacity, transform: `translateY(${logoY}px)`}}>
        <Img src={asset('artifacts/brand-guide/phase-object-logo-primary.svg')} style={{width: '100%', display: 'block'}} />
      </div>
      <div style={{position: 'absolute', left: 111, bottom: 124, opacity: detailOpacity}}>
        <div style={{fontFamily: 'Instrument Serif', fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.035em'}}>Ideas should<br/>change shape.</div>
      </div>
      <div style={{position: 'absolute', right: 111, bottom: 126, width: 520, opacity: detailOpacity}}>
        <Signal width={520} />
        <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 22, fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em'}}>
          <span>SEP 23—26, 2027</span><span>ROW DTLA</span>
        </div>
        <div style={{fontFamily: 'IBM Plex Mono', fontSize: 14, lineHeight: 1.55, marginTop: 17, textTransform: 'uppercase', letterSpacing: '0.08em'}}>Festival of image, sound<br/>and machine culture</div>
      </div>
      <div style={{position: 'absolute', right: 48, top: 230, width: 24, height: 24, borderRadius: 30, background: C.red, transform: `scale(${node})`}} />
    </AbsoluteFill>
  );
};

const WordStack = ({lines, accent = C.red, align = 'left'}: {lines: string[]; accent?: string; align?: 'left'|'right'}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  return (
    <div style={{textAlign: align}}>
      {lines.map((line, i) => {
        const s = spring({frame: frame - i * 5, fps, config: {damping: 18, stiffness: 150}});
        const y = interpolate(s, [0, 1], [74, 0]);
        return <div key={line} style={{fontFamily: 'Instrument Serif', fontSize: 112, lineHeight: 0.82, letterSpacing: '-0.048em', transform: `translateY(${y}px)`, opacity: s, color: i === lines.length - 1 ? accent : C.paper}}>{line}</div>;
      })}
    </div>
  );
};

const PageOne = () => {
  const frame = useCurrentFrame();
  const panel = interpolate(frame, [0, 18], [100, 0], clamp);
  const out = interpolate(frame, [63, 78], [0, -110], clamp);
  return (
    <AbsoluteFill style={{zIndex: 5, transform: `translateX(${out}%)`}}>
      <Meta light />
      <div style={{position: 'absolute', inset: 0, width: '48%', background: C.carbon, transform: `translateX(-${panel}%)`}} />
      <div style={{position: 'absolute', left: 72, bottom: 84, width: 850}}>
        <WordStack lines={['See sound.', 'Hear images.']} />
      </div>
      <div style={{position: 'absolute', right: 67, bottom: 72, writingMode: 'vertical-rl', color: C.paper, fontFamily: 'IBM Plex Mono', fontSize: 14, letterSpacing: '0.15em', textTransform: 'uppercase'}}>A new cultural frequency</div>
    </AbsoluteFill>
  );
};

const PageTwo = () => {
  const frame = useCurrentFrame();
  const reveal = interpolate(frame, [0, 20], [100, 0], clamp);
  const out = interpolate(frame, [66, 82], [0, 100], clamp);
  return (
    <AbsoluteFill style={{zIndex: 6, transform: `translateY(${out}%)`}}>
      <Meta light />
      <div style={{position: 'absolute', left: 0, bottom: 0, width: '100%', height: '44%', background: C.blue, transform: `translateY(${reveal}%)`}} />
      <div style={{position: 'absolute', left: 70, bottom: 92, right: 70, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between'}}>
        <WordStack lines={['Four days', 'outside the frame.']} accent={C.voltage} />
        <div style={{color: C.paper, fontFamily: 'IBM Plex Mono', fontSize: 15, lineHeight: 1.65, textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'right', paddingBottom: 4}}>18,000 attendees<br/>120+ artists / 45 countries<br/>60 installations / 30 premieres</div>
      </div>
    </AbsoluteFill>
  );
};

const PageThree = () => {
  const frame = useCurrentFrame();
  const slice = interpolate(frame, [0, 22], [-105, 0], clamp);
  const opacity = interpolate(frame, [0, 10, 66, 80], [0, 1, 1, 0], clamp);
  return (
    <AbsoluteFill style={{zIndex: 7, opacity}}>
      <Meta light />
      <div style={{position: 'absolute', left: 0, top: 0, bottom: 0, width: '37%', background: C.red, transform: `translateX(${slice}%)`}} />
      <div style={{position: 'absolute', left: 72, bottom: 82, width: 1040}}>
        <WordStack lines={['The future is', 'a shared medium.']} accent={C.paper} />
      </div>
      <div style={{position: 'absolute', left: 228, top: 150, width: 250, height: 250, border: `2px solid ${C.paper}`, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.paper, fontFamily: 'IBM Plex Mono', fontSize: 17, lineHeight: 1.5, textTransform: 'uppercase', textAlign: 'center', letterSpacing: '0.1em'}}>8 stages<br/>one shared<br/>signal</div>
    </AbsoluteFill>
  );
};

const PageFour = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const grow = spring({frame, fps, config: {damping: 18, stiffness: 90}});
  const fade = interpolate(frame, [0, 12, 76, 90], [0, 1, 1, 0], clamp);
  return (
    <AbsoluteFill style={{zIndex: 8, opacity: fade}}>
      <Meta light />
      <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(2,1,1,.82) 0%, rgba(2,1,1,.25) 55%, rgba(2,1,1,.05) 100%)'}} />
      <div style={{position: 'absolute', left: 74, top: 218}}>
        <WordStack lines={['Make contact', 'with what', 'comes next.']} />
      </div>
      <div style={{position: 'absolute', left: 78, bottom: 66, width: 500, transform: `scaleX(${grow})`, transformOrigin: 'left'}}><Signal width={500} /></div>
      <div style={{position: 'absolute', right: 70, bottom: 66, color: C.paper, fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 600}}>SEP 23—26 / ROW DTLA</div>
    </AbsoluteFill>
  );
};

const EndCard = ({asset}: {asset: (p: string) => string}) => {
  const frame = useCurrentFrame();
  const wipe = interpolate(frame, [0, 12], [100, 0], clamp);
  const details = interpolate(frame, [73, 94], [0, 1], clamp);
  return (
    <AbsoluteFill style={{zIndex: 30, background: C.paper, clipPath: `inset(0 0 0 ${wipe}%)`}}>
      <OffthreadVideo src={asset('artifacts/logo-animation/04-seedance-start-end.mp4')} muted style={{width: '100%', height: '100%', objectFit: 'contain'}} />
      <div style={{position: 'absolute', left: 68, right: 68, bottom: 46, display: 'flex', justifyContent: 'space-between', alignItems: 'center', opacity: details, color: C.carbon, fontFamily: 'IBM Plex Mono', fontSize: 15, letterSpacing: '0.1em', textTransform: 'uppercase'}}>
        <span>September 23—26, 2027</span>
        <span style={{color: C.red}}>Ideas should change shape.</span>
        <span>ROW DTLA / Los Angeles</span>
      </div>
    </AbsoluteFill>
  );
};

export default function PhaseObjectLaunch({asset}: {asset: (p: string) => string}) {
  const frame = useCurrentFrame();
  const musicVolume = interpolate(frame, [0, 10, 486, 527], [0, 0.9, 0.9, 0], clamp);
  return (
    <AbsoluteFill style={{background: C.carbon, overflow: 'hidden'}}>
      <Audio src={asset('artifacts/radio-spot/music-master.mp3')} volume={musicVolume} />

      <Sequence from={0} durationInFrames={85}>
        <Intro asset={asset} />
      </Sequence>

      <Sequence from={72} durationInFrames={345}>
        <AbsoluteFill>
          <OffthreadVideo src={asset('generated/visual-master-cinematic-indigo.mp4')} muted style={{width: '100%', height: '100%', objectFit: 'cover'}} />
          <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(2,1,1,.16), transparent 35%, rgba(2,1,1,.18))'}} />
        </AbsoluteFill>
      </Sequence>

      <Sequence from={76} durationInFrames={84}><PageOne /></Sequence>
      <Sequence from={148} durationInFrames={88}><PageTwo /></Sequence>
      <Sequence from={226} durationInFrames={88}><PageThree /></Sequence>
      <Sequence from={304} durationInFrames={104}><PageFour /></Sequence>

      <Sequence from={408} durationInFrames={120}>
        <EndCard asset={asset} />
      </Sequence>
    </AbsoluteFill>
  );
}