// editor_panel.jsx — timeline editor (placeholder title, trim-drag timeline,
// red-box annotation) + the Figma canvas frame + the GIF-pack result.

const PW = 900;
const EH = { header: 64, preview: 540, playbar: 50, toolbar: 56, timeline: 188, export: 78 };
const PH = EH.header + EH.preview + EH.playbar + EH.toolbar + EH.timeline + EH.export; // 976

const ACCENT = '#0a84ff';
const REDBOX = '#ff3b30';
const FILM_N = 14;
const TRACK_INSET = 20;
const TRACK_W = PW - TRACK_INSET * 2; // 860

function fmt(t) {
  const s = Math.max(0, Math.min(10, t));
  return `00:00:${String(Math.floor(s)).padStart(2, '0')}`;
}

/* ── Figma canvas holding the recording layer (scene 1) ── */
function FigmaRecWindow({ camAmt = 0 }) {
  const W = 760, H = 560;
  const cs = 1 + 0.5 * camAmt;
  const recScale = 0.6;
  return (
    <div style={{ width: W, height: H, background: '#fff', borderRadius: 16, border: '1px solid #e6e6e6', boxShadow: '0 32px 80px rgba(0,0,0,0.45)', overflow: 'hidden', fontFamily: 'Geist, sans-serif', display: 'flex', flexDirection: 'column' }}>
      <div style={{ height: 38, background: '#2c2c2c', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <FigmaMark size={15} />
          <span style={{ color: '#b3b3b3', fontSize: 12 }}>Screen recordings</span>
        </div>
        <div style={{ background: '#0d99ff', color: '#fff', fontSize: 11.5, fontWeight: 600, padding: '4px 11px', borderRadius: 6 }}>Share</div>
      </div>
      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
        <div style={{ width: 138, borderRight: '1px solid #ebebeb', padding: '10px 9px', flexShrink: 0 }}>
          <div style={{ fontSize: 10.5, fontWeight: 600, color: '#8f8f8f', marginBottom: 7 }}>Layers</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 7px', borderRadius: 6, background: '#e5f2ff' }}>
            <span style={{ width: 11, height: 11, borderRadius: 3, background: '#e6492d' }} />
            <span style={{ fontSize: 11, color: '#0d99ff' }}>Recording 1</span>
          </div>
        </div>
        <div style={{ flex: 1, position: 'relative', background: '#f5f5f5', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(#e2e2e2 1px, transparent 1px)', backgroundSize: '18px 18px', transformOrigin: '50% 46%', transform: `scale(${cs})` }}>
            <div style={{ position: 'absolute', left: '50%', top: '46%', transform: 'translate(-50%,-50%)' }}>
              <div style={{ fontSize: 10.5, color: '#8f8f8f', marginBottom: 5, fontWeight: 500, fontFamily: 'Geist, sans-serif' }}>Recording 1 · 0:10</div>
              <div style={{ position: 'relative', width: (REC_W + 16) * recScale, height: (REC_SCREEN_H + 16) * recScale, borderRadius: 24, boxShadow: '0 1px 0 rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05)' }}>
                <div style={{ transform: `scale(${recScale})`, transformOrigin: 'top left' }}>
                  <RecPhone />
                </div>
                <div style={{ position: 'absolute', left: 8, bottom: 8, display: 'flex', alignItems: 'center', gap: 5, background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: 6, padding: '3px 7px', fontFamily: 'Geist Mono, monospace', fontSize: 10 }}>
                  <svg width="9" height="9" viewBox="0 0 24 24"><path d="M7 4.5l12 7.5-12 7.5V4.5Z" fill="#fff"/></svg>0:10
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* trim handle */
function TrimHandle({ side }) {
  return (
    <div style={{ position: 'absolute', top: 0, [side]: -7, width: 14, height: 66, background: '#fff', borderRadius: side === 'left' ? '7px 0 0 7px' : '0 7px 7px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 1px 4px rgba(0,0,0,0.3)', zIndex: 4 }}>
      <div style={{ display: 'flex', gap: 2 }}>
        <span style={{ width: 1.5, height: 16, background: '#bbb', borderRadius: 1 }} />
        <span style={{ width: 1.5, height: 16, background: '#bbb', borderRadius: 1 }} />
      </div>
    </div>
  );
}

/* ── timeline editor panel ── */
function TimelineEditor({ playT = 0, tool = 'select', annoOn = false, annoType = 0, annoDraw = 1, annoIn = 1, trimRight = 1, exportPressed = 0, t = 0 }) {
  const previewScale = 0.86;
  const cellW = TRACK_W / FILM_N;
  const clipW = TRACK_W * trimRight;
  const playheadX = clamp((playT / 10) * TRACK_W, 0, clipW);

  const tools = [
    { id: 'select', icon: EdIcon.select },
    { id: 'split', icon: EdIcon.split },
    { id: 'marker', icon: EdIcon.marker },
  ];

  return (
    <div style={{ width: PW, height: PH, background: '#fff', borderRadius: 16, boxShadow: '0 40px 100px rgba(0,0,0,0.5)', overflow: 'hidden', fontFamily: 'Geist, sans-serif', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      {/* header — placeholder bar instead of a localized title */}
      <div style={{ height: EH.header, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <ScreenSyncMark size={22} />
          <span style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', color: '#1a1a1a' }}>Timeline</span>
        </div>
        <div style={{ width: 34, height: 34, borderRadius: 17, background: '#efeff1', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666' }}>
          <Icn size={18}>{EdIcon.close('#666')}</Icn>
        </div>
      </div>
      {/* preview */}
      <div style={{ height: EH.preview, background: '#fbfbfc', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative' }}>
        <div style={{ transform: `scale(${previewScale})`, position: 'relative' }}>
          <RecPhone rt={playT} annoOn={annoOn} annoType={annoType} annoDraw={annoDraw} annoIn={annoIn} clock={t} />
        </div>
      </div>
      {/* playback bar */}
      <div style={{ height: EH.playbar, borderTop: '1px solid #f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', flexShrink: 0, color: '#555', position: 'relative' }}>
        <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 13, color: '#666' }}>{fmt(playT)} / 00:00:10</span>
        <Icn size={18}>{EdIcon.expand('#888')}</Icn>
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', display: 'flex' }}>
          <Icn size={20}>{EdIcon.play('#333')}</Icn>
        </div>
      </div>
      {/* toolbar */}
      <div style={{ height: EH.toolbar, borderTop: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {tools.map((tl) => (
            <div key={tl.id} style={{ width: 34, height: 34, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', background: tool === tl.id ? '#eaf3ff' : 'transparent' }}>
              <Icn size={19}>{tl.icon(tool === tl.id ? ACCENT : '#444')}</Icn>
            </div>
          ))}
          <div style={{ width: 1, height: 22, background: '#e6e6e6', margin: '0 8px' }} />
          {[EdIcon.undo, EdIcon.redo, EdIcon.reset].map((ic, i) => (
            <div key={i} style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icn size={18}>{ic('#9a9a9e')}</Icn>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Icn size={18}>{EdIcon.zoomOut('#bbb')}</Icn>
          <div style={{ width: 120, height: 4, borderRadius: 2, background: '#e6e6e6', position: 'relative' }}>
            <div style={{ position: 'absolute', left: -7, top: '50%', transform: 'translateY(-50%)', width: 14, height: 14, borderRadius: 7, background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.25)', border: '1px solid #ddd' }} />
          </div>
          <Icn size={18}>{EdIcon.zoomIn('#bbb')}</Icn>
        </div>
      </div>
      {/* timeline — drag the right edge of the clip to trim duration */}
      <div style={{ height: EH.timeline, background: '#f7f7f8', flexShrink: 0 }}>
        <div style={{ padding: `22px ${TRACK_INSET}px 0`, position: 'relative' }}>
          {/* empty track baseline (full length, dimmed) */}
          <div style={{ position: 'relative', width: TRACK_W, height: 66, borderRadius: 7, background: '#ececef', border: '1px dashed #d6d6da', boxSizing: 'border-box' }}>
            {/* the clip */}
            <div style={{ position: 'absolute', top: 0, left: 0, width: clipW, height: 66, borderRadius: 7, overflow: 'hidden', background: '#15151a', boxShadow: `0 0 0 2px ${ACCENT}` }}>
              <div style={{ position: 'absolute', left: 0, top: 0, display: 'flex' }}>
                {Array.from({ length: FILM_N }).map((_, i) => (
                  <div key={i} style={{ width: cellW, height: 66, borderRight: '1px solid rgba(0,0,0,0.06)', flexShrink: 0, overflow: 'hidden' }}>
                    <FilmFrame w={cellW} h={66} rt={(i / (FILM_N - 1)) * 6} />
                  </div>
                ))}
              </div>
            </div>
            {/* trim handles */}
            <div style={{ position: 'absolute', left: 0, top: 0 }}><TrimHandle side="left" /></div>
            <div style={{ position: 'absolute', left: clipW, top: 0 }}><TrimHandle side="right" /></div>
            {/* playhead — white handle + line (img 2 style) */}
            <div style={{ position: 'absolute', top: -8, left: playheadX, height: 82, pointerEvents: 'none', zIndex: 5 }}>
              <div style={{ position: 'absolute', top: 0, left: -7, width: 14, height: 14, borderRadius: 7, background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.45)', border: '1px solid rgba(0,0,0,0.08)' }} />
              <div style={{ position: 'absolute', top: 8, left: -1, width: 2, height: 66, background: '#fff', boxShadow: '0 0 2px rgba(0,0,0,0.45)' }} />
            </div>
          </div>
        </div>
      </div>
      {/* export button */}
      <div style={{ height: EH.export, padding: '12px 20px', flexShrink: 0 }}>
        <div style={{ height: '100%', borderRadius: 12, background: ACCENT, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 17, letterSpacing: '0.01em', transform: `scale(${1 - exportPressed * 0.025})`, boxShadow: `0 8px 20px rgba(10,132,255,${0.32 * (1 - clamp(Math.max(exportPressed, 0), 0, 1))})` }}>
          Export GIF
        </div>
      </div>
    </div>
  );
}

/* ── GIF pack result — frames collapse & a GIF file pops out ── */
function GifFileCard({ s, p = 1, wob = 1 }) {
  // contents stagger in — thumbnail first, label follows — soft fade + small rise
  const thumbE = MEase.out(clamp((p - 0.16) / 0.4, 0, 1));
  const labelE = MEase.out(clamp((p - 0.32) / 0.4, 0, 1));
  return (
    <div style={{ position: 'relative', width: 150, height: 150, transform: `scale(${s * wob})`, transformOrigin: 'center' }}>
      <div style={{ position: 'absolute', inset: 0, background: '#fff', borderRadius: 16, boxShadow: '0 20px 50px rgba(0,0,0,0.4)' }} />
      {/* mini looping thumbnail — the annotated detail moment */}
      <div style={{ position: 'absolute', top: 18, left: '50%', transform: `translate(-50%, ${(1 - thumbE) * 8}px)`, opacity: thumbE, width: 56, height: 70, borderRadius: 8, overflow: 'hidden', border: '1px solid #eee', boxShadow: '0 2px 6px rgba(0,0,0,0.1)' }}>
        <FilmFrame w={56} h={70} rt={4.4} />
        <div style={{ position: 'absolute', inset: 0, border: `2px solid ${ACCENT}`, borderRadius: 8, boxSizing: 'border-box', opacity: 0.85 }} />
      </div>
      {/* plain-text label inside the card — soft fade + small upward settle */}
      <div style={{ position: 'absolute', bottom: 14, left: '50%', transform: `translate(-50%, ${(1 - labelE) * 8}px)`, opacity: labelE, color: '#1a1a1a', fontFamily: 'Geist, sans-serif', fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>1 GIF exported</div>
    </div>
  );
}

function GifResult({ p, t = 0 }) {
  // card settles with a hint of overshoot, then breathes very subtly while held
  const cardS = 0.9 + 0.1 * MEase.panel(clamp(p / 0.45, 0, 1));
  const wob = breathScale(t, (p - 0.5) / 0.35, 0.006, 3.2);
  const op = MEase.out(clamp(p / 0.15, 0, 1));
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Geist, sans-serif' }}>
      <div style={{ position: 'relative', width: 150, height: 150, opacity: op }}>
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }}>
          <GifFileCard s={cardS} p={p} wob={wob} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TimelineEditor, FigmaRecWindow, GifResult, PW, PH, EH, TRACK_W, TRACK_INSET });