/* TransitionShowcase.jsx — timeline + transition picker showcase */
(function () {
  'use strict';

  const TDS = {
    bg:'#0f0f0f', panel:'#1a1a1a', surface:'#252525',
    border:'#2e2e2e', text:'#f5f5f5', dim:'#999999', muted:'#666666',
    accent:'#9933ff',
  };

  const TS_CSS = `
    @keyframes ts-xfade  { 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} }
    @keyframes ts-fbk    { 0%,100%{opacity:0;background:#000} 30%,70%{opacity:1} }
    @keyframes ts-wl     { 0%{clip-path:inset(0 100% 0 0)} 80%{clip-path:inset(0 0% 0 0)} 100%{clip-path:inset(0 0% 0 0)} }
    @keyframes ts-wr     { 0%{clip-path:inset(0 0 0 100%)} 80%{clip-path:inset(0 0 0 0%)} 100%{clip-path:inset(0 0 0 0%)} }
    @keyframes ts-sl     { 0%{transform:translateX(100%)} 80%{transform:translateX(0)} 100%{transform:translateX(0)} }
    @keyframes ts-push   { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
    @keyframes ts-zi     { 0%{transform:scale(0.05);opacity:0} 70%{transform:scale(1);opacity:1} 100%{transform:scale(1);opacity:1} }
    @keyframes ts-blur   { 0%{filter:none;opacity:0} 30%{filter:blur(8px);opacity:0.5} 70%{filter:none;opacity:1} 100%{filter:none;opacity:1} }
    @keyframes ts-glitch { 0%{transform:none;filter:none} 15%{transform:translateX(-4px);filter:hue-rotate(90deg) saturate(3)} 30%{transform:translateX(4px);filter:hue-rotate(180deg)} 45%{transform:translateX(-2px);filter:hue-rotate(270deg) contrast(1.5)} 60%{transform:translateX(2px);filter:none} 100%{transform:none} }
    @keyframes ts-cube   { 0%{transform:perspective(120px) rotateY(0deg);opacity:1} 60%{transform:perspective(120px) rotateY(-90deg);opacity:0.2} 100%{transform:perspective(120px) rotateY(-90deg);opacity:0} }
    @keyframes ts-leak   { 0%,100%{opacity:0} 20%,80%{opacity:0.9} }
    @keyframes ts-flare  { 0%{transform:translateX(-120%);opacity:0} 40%,60%{opacity:0.95} 100%{transform:translateX(120%);opacity:0} }
    @keyframes ts-fdw    { 0%{opacity:1;background:#fff} 40%,60%{opacity:0} 100%{opacity:1;background:#fff} }
    @keyframes ts-morph  { 0%{border-radius:0;opacity:0} 50%{border-radius:50%;opacity:1;transform:scale(1.3)} 100%{border-radius:0;opacity:1;transform:scale(1)} }
  `;

  const TRANS_DATA = [
    { id:'crossfade',  name:'Crossfade',  bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-xfade 2s ease-in-out infinite', mode:'overlay' },
    { id:'fade-black', name:'Fade Black', bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'#000000', anim:'ts-fbk 2s ease-in-out infinite', mode:'cover' },
    { id:'fade-white', name:'Fade White', bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'#ffffff', anim:'ts-fdw 2s ease-in-out infinite', mode:'cover' },
    { id:'wipe-left',  name:'Wipe Left',  bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-wl 2s linear infinite',          mode:'cover' },
    { id:'wipe-right', name:'Wipe Right', bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-wr 2s linear infinite',          mode:'cover' },
    { id:'slide-left', name:'Slide Left', bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-sl 2s ease-in-out infinite',     mode:'cover' },
    { id:'push-left',  name:'Push Left',  bgA:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', bgB:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', anim:'ts-push 2s ease-in-out infinite',   mode:'push' },
    { id:'zoom-in',    name:'Zoom In',    bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-zi 2s ease-out infinite',         mode:'cover' },
    { id:'blur',       name:'Blur',       bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-blur 2s ease-in-out infinite',   mode:'cover' },
    { id:'glitch',     name:'Glitch',     bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-glitch 1.5s steps(5) infinite', mode:'onA' },
    { id:'cube',       name:'3D Cube',    bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-cube 2.5s ease-in-out infinite', mode:'onA' },
    { id:'light-leak', name:'Light Leak', bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(90deg,#ff8833 0%,#ffcc44 50%,#ff8833 100%)', anim:'ts-leak 2s ease-in-out infinite', mode:'screen' },
    { id:'lens-flare', name:'Lens Flare', bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.95) 45%,rgba(255,255,255,0.95) 55%,transparent 100%)', anim:'ts-flare 2s ease-in-out infinite', mode:'screen' },
    { id:'morph',      name:'Morph',      bgA:'linear-gradient(135deg,#1a3a4a,#2a5a6a)', bgB:'linear-gradient(135deg,#2a1a4a,#4a2a7a)', anim:'ts-morph 2s ease-in-out infinite',  mode:'cover' },
  ];

  function TransCard({ tr, pickerOpen, isSel, isHov, onClick, onEnter, onLeave }) {
    return (
      <div onClick={() => onClick(tr.id)}
        onMouseEnter={() => onEnter(tr.id)}
        onMouseLeave={onLeave}
        style={{
          width:86, height:66, borderRadius:5, overflow:'hidden', cursor:'pointer', position:'relative', flexShrink:0,
          border: isSel ? '1px solid #9933ff' : `1px solid ${isHov ? '#9933ff88' : '#333'}`,
          boxShadow: isSel ? '0 0 0 1px #9933ff,0 0 10px rgba(153,51,255,0.4)' : 'none',
          transition:'border 0.12s,box-shadow 0.12s',
        }}>
        {/* Clip A bg */}
        <div style={{ position:'absolute', inset:0, background: tr.bgA }}/>
        {/* Animated overlay */}
        {pickerOpen && tr.mode === 'overlay' && (
          <div style={{ position:'absolute', inset:0, background: tr.bgB, animation: tr.anim }}/>
        )}
        {pickerOpen && tr.mode === 'cover' && (
          <div style={{ position:'absolute', inset:0, background: tr.bgB, animation: tr.anim }}/>
        )}
        {pickerOpen && tr.mode === 'screen' && (
          <div style={{ position:'absolute', inset:0, background: tr.bgB, animation: tr.anim, mixBlendMode:'screen' }}/>
        )}
        {pickerOpen && tr.mode === 'onA' && (
          <div style={{ position:'absolute', inset:0, background: tr.bgA, animation: tr.anim }}/>
        )}
        {pickerOpen && tr.mode === 'push' && (
          <div style={{ position:'absolute', inset:0, background: tr.bgB, animation: tr.anim }}/>
        )}
        {/* Label */}
        <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'2px 5px', background:'rgba(0,0,0,0.72)', fontSize:9, color:'#ccc', textAlign:'center', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', fontFamily:"'Inter',-apple-system,sans-serif" }}>
          {tr.name}
        </div>
      </div>
    );
  }

  function TransitionShowcase({ scale = 1, style = {}, className = '' }) {
    const [pickerOpen, setPickerOpen] = React.useState(false);
    const [sel, setSel]               = React.useState(null);
    const [hov, setHov]               = React.useState(null);
    const [toast, setToast]           = React.useState(null);
    const [userDid, setUserDid]       = React.useState(false);

    const interact = () => { if (!userDid) setUserDid(true); };

    // Auto-demo
    React.useEffect(() => {
      if (userDid) return;
      const t1 = setTimeout(() => setPickerOpen(true), 1500);
      const t2 = setTimeout(() => {
        setSel('crossfade');
        setToast('Crossfade added · 1.0s');
        setTimeout(() => setToast(null), 2500);
      }, 3500);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    }, [userDid]);

    const handlePick = id => {
      interact();
      setSel(id);
      const name = TRANS_DATA.find(t => t.id === id)?.name || id;
      setToast(`${name} added · 1.0s`);
      setTimeout(() => setToast(null), 2500);
    };

    const PPS = 58;

    return (
      <div onMouseDown={interact} className={className}
        style={{
          width:720, background:TDS.bg, border:`1px solid ${TDS.border}`,
          borderRadius:8, overflow:'hidden',
          fontFamily:"'Inter',-apple-system,sans-serif", position:'relative',
          transform: scale !== 1 ? `scale(${scale})` : undefined,
          transformOrigin:'top left',
          ...style,
        }}>
        <style>{TS_CSS}</style>

        {/* ── Mock timeline ── */}
        <div style={{ height:192 }}>

          {/* Toolbar */}
          <div style={{ height:30, background:'#111', borderBottom:`1px solid ${TDS.border}`, display:'flex', alignItems:'center', padding:'0 12px', gap:16 }}>
            <span style={{ fontSize:10, color:TDS.muted, letterSpacing:1.5, textTransform:'uppercase', fontWeight:600 }}>Timeline</span>
            <span style={{ fontSize:10, color:TDS.dim }}>Click <strong style={{color:TDS.accent}}>+</strong> at the cut to add a transition</span>
          </div>

          {/* Ruler */}
          <div style={{ height:22, background:'#111', borderBottom:`1px solid ${TDS.border}`, position:'relative', overflow:'hidden', flexShrink:0 }}>
            <div style={{ position:'absolute', left:80, right:0, height:'100%' }}>
              {[0,1,2,3,4,5,6,7,8,9,10].map(s => (
                <div key={s} style={{ position:'absolute', left: s * PPS, height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end', paddingBottom:3 }}>
                  <div style={{ width:1, height: s % 2 === 0 ? 10 : 6, background: s % 2 === 0 ? '#555' : '#333', marginBottom:2 }}/>
                  {s % 2 === 0 && <span style={{ fontSize:9, color:TDS.muted, position:'absolute', top:4, left:2 }}>{s}s</span>}
                </div>
              ))}
            </div>
          </div>

          {/* Track row */}
          <div style={{ height:138, display:'flex' }}>
            {/* Track header */}
            <div style={{ width:80, background:'#141414', borderRight:`1px solid #1f1f1f`, display:'flex', alignItems:'center', padding:'0 10px', flexShrink:0 }}>
              <span style={{ fontSize:10, color:TDS.dim, whiteSpace:'nowrap' }}>🎬  Video</span>
            </div>

            {/* Clips area */}
            <div style={{ flex:1, background:'#0d0d0d', position:'relative', overflow:'hidden' }}>
              {/* Clip A */}
              <div style={{
                position:'absolute', left:0, width:PPS * 5, height:64, top:12,
                borderRadius:4, border:'1px solid #2a5a6a',
                background:'linear-gradient(135deg,#1a3a4a,#2a5a6a)',
                display:'flex', alignItems:'center', justifyContent:'space-between',
                padding:'0 8px', overflow:'hidden',
              }}>
                <div>
                  <div style={{ fontSize:10, color:'#fff', fontWeight:600, marginBottom:2 }}>Interview.mp4</div>
                  <div style={{ fontSize:9, color:TDS.dim }}>5.0s</div>
                </div>
                <div style={{ display:'flex', gap:2, opacity:0.35 }}>
                  {Array.from({length:8},(_,i) => (
                    <div key={i} style={{ width:7, height:44, borderRadius:1, background:`hsl(${192+i*3},${45+i*5}%,${26+i*3}%)` }}/>
                  ))}
                </div>
              </div>

              {/* Junction "+" button */}
              <div
                onClick={() => { setPickerOpen(o => !o); interact(); }}
                onMouseEnter={e => { if (!pickerOpen) { e.currentTarget.style.background='#9933ff'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#cc88ff'; } }}
                onMouseLeave={e => { if (!pickerOpen) { e.currentTarget.style.background='#2a2a2a'; e.currentTarget.style.color=sel?'#9933ff':'#777'; e.currentTarget.style.borderColor='#444'; } }}
                style={{
                  position:'absolute', left: PPS * 5 - 12, top: 12 + 20,
                  width:24, height:24, borderRadius:99,
                  border: pickerOpen ? '1.5px solid #cc88ff' : '1.5px solid #444',
                  background: pickerOpen ? '#9933ff' : '#2a2a2a',
                  color: pickerOpen ? '#fff' : (sel ? '#9933ff' : '#777'),
                  display:'flex', alignItems:'center', justifyContent:'center',
                  cursor:'pointer', fontSize:14, fontWeight:700, zIndex:3,
                  boxShadow: pickerOpen ? '0 0 12px rgba(153,51,255,0.6)' : 'none',
                  transition:'all 0.12s',
                }}>
                {sel ? '◆' : '+'}
              </div>

              {/* Clip B */}
              <div style={{
                position:'absolute', left: PPS * 5 + 14, width: PPS * 4.5, height:64, top:12,
                borderRadius:4, border:'1px solid #4a2a7a',
                background:'linear-gradient(135deg,#2a1a4a,#4a2a7a)',
                display:'flex', alignItems:'center', padding:'0 8px', overflow:'hidden',
              }}>
                <div>
                  <div style={{ fontSize:10, color:'#fff', fontWeight:600, marginBottom:2 }}>B-Roll.mp4</div>
                  <div style={{ fontSize:9, color:TDS.dim }}>4.5s</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── Transition picker panel ── */}
        <div style={{
          overflow:'hidden',
          maxHeight: pickerOpen ? 250 : 0,
          transition:'max-height 280ms cubic-bezier(0.4,0,0.2,1)',
          background: TDS.panel, borderTop: pickerOpen ? `1px solid ${TDS.border}` : 'none',
        }}>
          <div style={{ padding:'10px 12px', display:'flex', flexWrap:'wrap', gap:5 }}>
            {TRANS_DATA.map(tr => (
              <TransCard key={tr.id} tr={tr} pickerOpen={pickerOpen}
                isSel={sel === tr.id} isHov={hov === tr.id}
                onClick={handlePick}
                onEnter={id => setHov(id)}
                onLeave={() => setHov(null)}
              />
            ))}
          </div>
          <div style={{ padding:'0 12px 8px', fontSize:10, color:TDS.muted }}>
            Duration 0.1s – 5.0s  ·  Easing: linear, ease, ease-in, ease-out, ease-in-out
          </div>
        </div>

        {/* Toast */}
        {toast && (
          <div style={{ position:'absolute', bottom:12, left:'50%', transform:'translateX(-50%)', background:'#9933ff', color:'#fff', padding:'7px 14px', borderRadius:6, fontSize:11, fontWeight:700, whiteSpace:'nowrap', zIndex:20, boxShadow:'0 0 14px rgba(153,51,255,0.5)', pointerEvents:'none' }}>
            {toast}
          </div>
        )}
      </div>
    );
  }

  window.TransitionShowcase = TransitionShowcase;
})();