// Reel — Onboarding flow: Splash → Welcome → Scan → Scanning → Done

function OnboardingFlow({ onDone }) {
  const T = REEL_TOKENS;
  const [step, setStep] = React.useState('splash');
  const [scanCount, setScanCount] = React.useState(0);
  const [scanName, setScanName]   = React.useState('');
  const [scanFolder, setScanFolder] = React.useState('');
  const [scanned, setScanned]     = React.useState(null); // array of videos

  // Auto-advance splash
  React.useEffect(() => {
    if (step !== 'splash') return;
    const id = setTimeout(() => setStep('welcome'), 2200);
    return () => clearTimeout(id);
  }, [step]);

  const startScan = async (mode) => {
    setStep('scanning');
    setScanCount(0); setScanName(''); setScanFolder('');
    try {
      const videos = await REEL_SCANNER.scan((count, name, folder) => {
        setScanCount(count);
        setScanName(name);
        setScanFolder(folder || 'Scanning…');
      }, mode);
      if (videos === null) { setStep('scan'); return; } // user cancelled
      setScanned(videos);
      setStep('done');
    } catch (e) {
      setStep('scan');
    }
  };

  const finish = async () => {
    if (scanned && scanned.length > 0) {
      await REEL_DB.putVideos(scanned);
    }
    localStorage.setItem('reel-onboarded', '1');
    onDone(scanned || []);
  };

  const skip = () => {
    localStorage.setItem('reel-onboarded', '1');
    onDone([]);
  };

  if (step === 'splash') return <SplashScreen/>;
  if (step === 'welcome') return <WelcomeScreen onNext={() => setStep('scan')} onSkip={skip}/>;
  if (step === 'scan')    return <ScanPromptScreen onScan={startScan} onSkip={skip}/>;
  if (step === 'scanning') return <ScanningScreen count={scanCount} name={scanName} folder={scanFolder}/>;
  if (step === 'done')    return <ScanDoneScreen videos={scanned || []} onOpen={finish}/>;
  return null;
}

// ── Splash ──────────────────────────────────────────────────────────
function SplashScreen() {
  const T = REEL_TOKENS;
  return (
    <div style={{ position:'fixed',inset:0,background:T.bg,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:24 }}>
      <style>{`
        @keyframes reel-glow { 0%,100%{box-shadow:0 0 60px rgba(245,158,11,0.3),0 0 120px rgba(245,158,11,0.1)} 50%{box-shadow:0 0 80px rgba(245,158,11,0.5),0 0 160px rgba(245,158,11,0.2)} }
        @keyframes reel-logo-in { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
        @keyframes reel-title-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
        @keyframes reel-spin-slow { to { transform: rotate(360deg); } }
      `}</style>
      <div style={{ animation:'reel-logo-in 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards' }}>
        <div style={{ width:100,height:100,borderRadius:28,background:'#141414',display:'flex',alignItems:'center',justifyContent:'center',animation:'reel-glow 2s ease-in-out infinite',position:'relative',overflow:'hidden' }}>
          <svg viewBox="0 0 80 80" width="80" height="80">
            <circle cx="40" cy="40" r="30" stroke="#262626" strokeWidth="3" fill="none"/>
            <circle cx="40" cy="40" r="9" fill="#0a0a0a" stroke="#262626" strokeWidth="2"/>
            <circle cx="40" cy="14" r="4" fill="#262626"/>
            <circle cx="40" cy="66" r="4" fill="#262626"/>
            <circle cx="14" cy="40" r="4" fill="#262626"/>
            <circle cx="66" cy="40" r="4" fill="#262626"/>
            <circle cx="21" cy="21" r="4" fill="#262626"/>
            <circle cx="59" cy="21" r="4" fill="#262626"/>
            <circle cx="21" cy="59" r="4" fill="#262626"/>
            <circle cx="59" cy="59" r="4" fill="#262626"/>
            <path d="M32 28 L56 40 L32 52 Z" fill="#f59e0b"/>
          </svg>
        </div>
      </div>
      <div style={{ animation:'reel-title-in 0.5s 0.4s ease-out both',textAlign:'center' }}>
        <div style={{ fontSize:36,fontWeight:800,letterSpacing:-1,color:T.text }}>Reel</div>
        <div style={{ fontSize:14,color:T.textDim,marginTop:4,letterSpacing:0.2 }}>Your videos, beautifully organized</div>
      </div>
    </div>
  );
}

// ── Welcome ──────────────────────────────────────────────────────────
function WelcomeScreen({ onNext, onSkip }) {
  const T = REEL_TOKENS;
  const features = [
    { icon:'scan',    title:'Smart scanning',       desc:'Finds every video in every folder on your device' },
    { icon:'play',    title:'Cinema-grade player',  desc:'Gestures, subtitles, chapters, bookmarks and more' },
    { icon:'history', title:'Everything remembered',desc:'Resume where you left off, pick up any time' },
  ];
  return (
    <div style={{ position:'fixed',inset:0,background:T.bg,display:'flex',flexDirection:'column',padding:'60px 28px 40px',animation:'reel-title-in 0.4s ease-out' }}>
      <style>{`@keyframes reel-title-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}`}</style>
      <div style={{ flex:1,display:'flex',flexDirection:'column',justifyContent:'center',gap:40 }}>
        <div>
          <div style={{ fontSize:32,fontWeight:800,letterSpacing:-0.8,lineHeight:1.15,color:T.text }}>Your videos,<br/>beautifully<br/>organized.</div>
          <div style={{ fontSize:14,color:T.textDim,marginTop:12,lineHeight:1.6 }}>Reel scans your device and turns your local video collection into a beautiful, fast library.</div>
        </div>
        <div style={{ display:'flex',flexDirection:'column',gap:20 }}>
          {features.map((f,i) => (
            <div key={i} style={{ display:'flex',alignItems:'flex-start',gap:16,animation:`reel-title-in 0.4s ${0.1+i*0.1}s ease-out both` }}>
              <div style={{ width:44,height:44,borderRadius:14,background:T.surface2,border:'1px solid '+T.border,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                <Icon name={f.icon} size={22} color={T.accent}/>
              </div>
              <div>
                <div style={{ fontSize:15,fontWeight:700,color:T.text }}>{f.title}</div>
                <div style={{ fontSize:13,color:T.textDim,marginTop:2,lineHeight:1.45 }}>{f.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display:'flex',flexDirection:'column',gap:12 }}>
        <button onClick={onNext} style={{ width:'100%',padding:'16px',borderRadius:16,border:'none',background:T.accent,color:'#000',fontSize:16,fontWeight:800,fontFamily:'inherit',cursor:'pointer',letterSpacing:-0.2 }}>
          Get started
        </button>
        <button onClick={onSkip} style={{ width:'100%',padding:'12px',borderRadius:16,border:'none',background:'transparent',color:T.textDim,fontSize:14,fontWeight:600,fontFamily:'inherit',cursor:'pointer' }}>
          Skip for now
        </button>
      </div>
    </div>
  );
}

// ── Scan prompt ───────────────────────────────────────────────────────
function ScanPromptScreen({ onScan, onSkip }) {
  const T = REEL_TOKENS;
  const supportsFS = 'showDirectoryPicker' in window;

  const options = [
    supportsFS && {
      mode:  'fsa',
      icon:  'folder',
      title: 'Scan a folder',
      desc:  'Pick your storage folder — Reel walks all subfolders automatically',
      primary: true,
    },
    {
      mode:  'folder',
      icon:  'scan',
      title: 'Browse folder',
      desc:  'Open your file manager and select a folder of videos',
      primary: !supportsFS,
    },
    {
      mode:  'files',
      icon:  'film',
      title: 'Pick video files',
      desc:  'Choose individual videos from the media picker',
      primary: false,
    },
  ].filter(Boolean);

  return (
    <div style={{ position:'fixed',inset:0,background:T.bg,display:'flex',flexDirection:'column',padding:'60px 24px 40px',gap:28 }}>
      <div style={{ display:'flex',flexDirection:'column',alignItems:'center',gap:16 }}>
        <div style={{ width:80,height:80,borderRadius:24,background:T.surface2,border:'1px solid '+T.border,display:'flex',alignItems:'center',justifyContent:'center' }}>
          <Icon name="scan" size={40} color={T.accent}/>
        </div>
        <div style={{ textAlign:'center' }}>
          <div style={{ fontSize:24,fontWeight:800,letterSpacing:-0.5,color:T.text }}>Find your videos</div>
          <div style={{ fontSize:13,color:T.textDim,marginTop:8,lineHeight:1.6 }}>Choose how you want to add videos to Reel. You can always add more later.</div>
        </div>
      </div>

      <div style={{ display:'flex',flexDirection:'column',gap:10,flex:1 }}>
        {options.map(opt => (
          <button key={opt.mode} onClick={() => onScan(opt.mode)} style={{ display:'flex',alignItems:'center',gap:14,padding:'16px',borderRadius:16,border:'1px solid',borderColor:opt.primary?T.accent:T.border,background:opt.primary?accentSoftColor(T.accent):'transparent',color:T.text,fontFamily:'inherit',cursor:'pointer',textAlign:'left',width:'100%' }}>
            <div style={{ width:48,height:48,borderRadius:14,background:opt.primary?T.accent:T.surface2,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
              <Icon name={opt.icon} size={24} color={opt.primary?'#000':T.textDim}/>
            </div>
            <div style={{ flex:1,minWidth:0 }}>
              <div style={{ fontSize:15,fontWeight:700,color:opt.primary?T.accent:T.text }}>{opt.title}</div>
              <div style={{ fontSize:12,color:T.textDim,marginTop:2,lineHeight:1.4 }}>{opt.desc}</div>
            </div>
            <Icon name="chev-right" size={18} color={T.textMuted}/>
          </button>
        ))}
      </div>

      <div style={{ display:'flex',flexDirection:'column',gap:8 }}>
        <div style={{ fontSize:11,color:T.textMuted,textAlign:'center',lineHeight:1.5 }}>
          Reel only reads your files — nothing is uploaded or shared.
        </div>
        <button onClick={onSkip} style={{ padding:'12px',borderRadius:14,border:'none',background:'transparent',color:T.textDim,fontSize:13,fontWeight:600,fontFamily:'inherit',cursor:'pointer' }}>
          Skip — I'll add videos later
        </button>
      </div>
    </div>
  );
}

// ── Scanning progress ─────────────────────────────────────────────────
function ScanningScreen({ count, name, folder }) {
  const T = REEL_TOKENS;
  return (
    <div style={{ position:'fixed',inset:0,background:T.bg,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',padding:32,textAlign:'center',gap:32 }}>
      <style>{`
        @keyframes scan-ring{0%{stroke-dashoffset:220}100%{stroke-dashoffset:0}}
        @keyframes scan-pulse{0%,100%{opacity:0.6}50%{opacity:1}}
      `}</style>
      <div style={{ position:'relative',width:100,height:100 }}>
        <svg width="100" height="100" viewBox="0 0 100 100" style={{ animation:'scan-pulse 1.5s ease-in-out infinite' }}>
          <circle cx="50" cy="50" r="35" fill="none" stroke={T.surface2} strokeWidth="6"/>
          <circle cx="50" cy="50" r="35" fill="none" stroke={T.accent} strokeWidth="6" strokeLinecap="round"
            strokeDasharray="220" strokeDashoffset="220" style={{ animation:'scan-ring 1.5s linear infinite',transformOrigin:'50% 50%',transform:'rotate(-90deg)' }}/>
        </svg>
        <div style={{ position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center' }}>
          <Icon name="scan" size={28} color={T.accent}/>
        </div>
      </div>
      <div>
        <div style={{ fontSize:22,fontWeight:800,letterSpacing:-0.3,color:T.text }}>Scanning…</div>
        <div style={{ fontSize:32,fontWeight:800,color:T.accent,fontFamily:T.mono,marginTop:6 }}>{count}</div>
        <div style={{ fontSize:12,color:T.textDim,marginTop:4 }}>videos found</div>
      </div>
      {name && (
        <div style={{ background:T.surface,borderRadius:12,padding:'10px 16px',border:'1px solid '+T.border,maxWidth:'100%',overflow:'hidden' }}>
          <div style={{ fontSize:11,color:T.textMuted,textTransform:'uppercase',letterSpacing:1,marginBottom:3 }}>{folder}</div>
          <div style={{ fontSize:12,fontFamily:T.mono,color:T.textDim,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>{name}</div>
        </div>
      )}
    </div>
  );
}

// ── Scan done ─────────────────────────────────────────────────────────
function ScanDoneScreen({ videos, onOpen }) {
  const T = REEL_TOKENS;
  const folders = [...new Set(videos.map(v => v.folder))];
  const totalSize = videos.reduce((s,v) => s + (v.sizeBytes||0), 0);
  return (
    <div style={{ position:'fixed',inset:0,background:T.bg,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',padding:'32px 28px',textAlign:'center',gap:28 }}>
      <div style={{ width:80,height:80,borderRadius:24,background:T.accentSoft,display:'flex',alignItems:'center',justifyContent:'center' }}>
        <Icon name="check" size={40} color={T.accent}/>
      </div>
      <div>
        <div style={{ fontSize:26,fontWeight:800,letterSpacing:-0.5,color:T.text }}>All set!</div>
        <div style={{ fontSize:15,color:T.textDim,marginTop:8,lineHeight:1.6 }}>
          Found <span style={{ color:T.text,fontWeight:700 }}>{videos.length} video{videos.length!==1?'s':''}</span> across <span style={{ color:T.text,fontWeight:700 }}>{folders.length} folder{folders.length!==1?'s':''}</span>
          {totalSize > 0 && <> totaling <span style={{ color:T.text,fontWeight:700 }}>{REEL_SCANNER.fmtSize(totalSize)}</span></>}.
        </div>
      </div>
      {folders.length > 0 && (
        <div style={{ background:T.surface,borderRadius:14,border:'1px solid '+T.border,padding:'12px 16px',width:'100%',textAlign:'left' }}>
          <div style={{ fontSize:11,color:T.textMuted,textTransform:'uppercase',letterSpacing:1,marginBottom:8 }}>Folders found</div>
          {folders.slice(0,5).map(f => (
            <div key={f} style={{ fontSize:12,fontFamily:T.mono,color:T.textDim,padding:'3px 0',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>{f}</div>
          ))}
          {folders.length > 5 && <div style={{ fontSize:12,color:T.textMuted,marginTop:4 }}>+{folders.length-5} more folders</div>}
        </div>
      )}
      <button onClick={onOpen} style={{ width:'100%',padding:'16px',borderRadius:16,border:'none',background:T.accent,color:'#000',fontSize:16,fontWeight:800,fontFamily:'inherit',cursor:'pointer' }}>
        Open Reel
      </button>
    </div>
  );
}

Object.assign(window, { OnboardingFlow, SplashScreen, WelcomeScreen, ScanPromptScreen, ScanningScreen, ScanDoneScreen });