// scene.jsx — macOS desktop, menu bar, assembly + Tweaks. Loaded last.
// PANEL_W comes from core.jsx.

function MenuBar({ recording, elapsed, onIconClick, popoverOpen }) {
  const menus = ['File','Recording','View','Window','Help'];
  return (
    <div style={{
      position:'absolute', top:0, left:0, right:0, height:26, zIndex:30,
      display:'flex', alignItems:'center', padding:'0 10px', gap:18,
      background:'var(--menu-bar)',
      color:'var(--menu-text)', fontFamily:SANS, fontSize:13,
      borderBottom:'0.5px solid color-mix(in srgb, var(--menu-text) 12%, transparent)',
    }}>
      <span style={{ display:'flex' }}><I.apple size={16} color="var(--menu-text)"/></span>
      <span style={{ fontWeight:700, letterSpacing:'-0.01em' }}>dot+</span>
      {menus.map(m=><span key={m} style={{ opacity:.85, cursor:'default' }}>{m}</span>)}
      <span style={{ flex:1 }}/>
      {/* status cluster */}
      <span style={{ display:'flex', alignItems:'center', gap:14 }}>
        <I.battery size={22} color="var(--menu-text)"/>
        <I.wifi size={17} color="var(--menu-text)"/>
        <I.search size={15} color="var(--menu-text)"/>
        <I.control size={17} color="var(--menu-text)"/>
        {/* dot+ status item */}
        <button onClick={onIconClick} title="dot+" style={{
          display:'flex', alignItems:'center', gap:6, height:22, padding:'0 6px', borderRadius:6, border:'none', cursor:'pointer',
          background: (popoverOpen || recording) ? 'color-mix(in srgb, var(--menu-text) 16%, transparent)' : 'transparent',
        }}>
          {recording
            ? <><span style={{ width:8, height:8, borderRadius:'50%', background:'var(--neg)' }}/><span style={{ fontFamily:MONO, fontSize:11.5, color:'var(--menu-text)', fontVariantNumeric:'tabular-nums' }}>{mm(elapsed)}</span></>
            : <MenuMark/>}
        </button>
        <span style={{ fontFamily:SANS, fontSize:12.5, fontWeight:500, color:'var(--menu-text)' }}>Fri Jun 26&nbsp;&nbsp;7:42 PM</span>
      </span>
    </div>
  );
}

// monochrome menu-bar mark (template-icon style)
function MenuMark() {
  return (
    <svg width={16} height={16} viewBox="0 0 100 100" style={{ display:'block' }}>
      <circle cx="38" cy="62" r="18" fill="var(--menu-text)"/>
      <rect x="60" y="22" width="28" height="7" rx="3.5" fill="var(--menu-text)"/>
      <rect x="70.5" y="11.5" width="7" height="28" rx="3.5" fill="var(--menu-text)"/>
    </svg>
  );
}

function Scene() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const theme = t.appearance === 'Light' ? 'light' : 'dark';

  const [screen, setScreen] = React.useState('home');
  const [popoverOpen, setPopoverOpen] = React.useState(true);
  const [detached, setDetached] = React.useState(false);
  const [appOpen, setAppOpen] = React.useState(false);
  const [appTab, setAppTab] = React.useState('recordings');
  const [recording, setRecording] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(0);
  const [dragPos, setDragPos] = React.useState({ x: 980, y: 96 });
  const [notifDismissed, setNotifDismissed] = React.useState(false);

  // recording timer
  React.useEffect(() => {
    if (!recording) return;
    const id = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(id);
  }, [recording]);

  // processing → detail auto-advance
  React.useEffect(() => {
    if (screen !== 'processing') return;
    const id = setTimeout(() => setScreen('detail'), 2800);
    return () => clearTimeout(id);
  }, [screen]);

  const go = (s) => { setScreen(s); setPopoverOpen(true); };
  const startRec = () => { setRecording(true); setElapsed(0); setScreen('recording'); setPopoverOpen(true); setAppOpen(false); };
  const stopRec = () => { setRecording(false); setScreen('processing'); };
  const openApp = () => { setAppOpen(true); setPopoverOpen(false); };
  const toggleDetach = () => setDetached(d => !d);

  // jump-to control (reviewer aid)
  const jumpTo = (s) => {
    setAppOpen(false); setPopoverOpen(true);
    if (s === 'recording') { setRecording(true); setElapsed(16); }
    else { setRecording(false); }
    setScreen(s);
  };

  // scale stage
  const STAGE_W = 1440, STAGE_H = 900;
  const stageRef = React.useRef(null);
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const fit = () => setScale(Math.min(window.innerWidth / STAGE_W, window.innerHeight / STAGE_H));
    fit(); window.addEventListener('resize', fit); return () => window.removeEventListener('resize', fit);
  }, []);

  const width = PANEL_W[t.panelWidth] || 340;

  // detached drag
  const dragHandlers = {
    onMouseDown: (e) => {
      const sx = e.clientX, sy = e.clientY, ox = dragPos.x, oy = dragPos.y;
      const move = (ev) => setDragPos({ x: ox + (ev.clientX - sx) / scale, y: Math.max(34, oy + (ev.clientY - sy) / scale) });
      const up = () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
      window.addEventListener('mousemove', move); window.addEventListener('mouseup', up);
    },
  };

  const wallpaper = theme === 'light'
    ? 'radial-gradient(1100px 700px at 78% -10%, #e9ecf5 0%, #d7dbe8 38%, #c3c8db 100%)'
    : 'radial-gradient(1200px 760px at 80% -12%, #1c2436 0%, #11141f 42%, #07080d 100%)';

  return (
    <div style={{ width:'100vw', height:'100vh', overflow:'hidden', background: theme==='light' ? '#c3c8db' : '#07080d', display:'flex', alignItems:'center', justifyContent:'center' }}>
      <div ref={stageRef} style={{ width:STAGE_W, height:STAGE_H, transform:`scale(${scale})`, transformOrigin:'center center', position:'relative', flexShrink:0 }}>
        {/* scoped theme wrapper */}
        <div style={{ position:'absolute', inset:0, ...themeVars(theme, t.accent), overflow:'hidden', borderRadius: scale < 1 ? 0 : 0 }}>
          {/* wallpaper */}
          <div style={{ position:'absolute', inset:0, background:wallpaper }}/>
          {/* soft desktop glow accents */}
          <div style={{ position:'absolute', width:560, height:560, left:-120, bottom:-160, borderRadius:'50%', background:`radial-gradient(circle, color-mix(in srgb, var(--accent) ${theme==='light'?10:16}%, transparent), transparent 70%)`, filter:'blur(20px)' }}/>

          <MenuBar recording={recording} elapsed={elapsed} popoverOpen={popoverOpen} onIconClick={()=>setPopoverOpen(o=>!o)}/>

          {/* app window + scrim */}
          {appOpen && (
            <>
              <div onClick={()=>setAppOpen(false)} style={{ position:'absolute', inset:0, zIndex:35, background:'var(--scrim)' }}/>
              <div style={{ position:'absolute', zIndex:36, top:120, left:'50%', transform:'translateX(-50%)' }}>
                <AppWindow t={t} setTweak={setTweak} tab={appTab} setTab={setAppTab} startRec={startRec} onClose={()=>setAppOpen(false)} width={1060} height={648}/>
              </div>
            </>
          )}

          {/* popover */}
          {popoverOpen && !appOpen && (
            detached ? (
              <div style={{ position:'absolute', zIndex:40, top:dragPos.y, left:dragPos.x }}>
                <Popover t={t} screen={screen} go={go} elapsed={elapsed} startRec={startRec} stopRec={stopRec} openApp={openApp} detached toggleDetach={toggleDetach} width={width} dragHandlers={dragHandlers}/>
              </div>
            ) : (
              <div style={{ position:'absolute', zIndex:40, top:30, right:84 }}>
                {/* arrow */}
                <div style={{ position:'absolute', top:-7, right:24, width:14, height:14, background:'var(--pop-bg)', borderLeft:'1px solid var(--pop-border)', borderTop:'1px solid var(--pop-border)', transform:'rotate(45deg)' }}/>
                <Popover t={t} screen={screen} go={go} elapsed={elapsed} startRec={startRec} stopRec={stopRec} openApp={openApp} detached={false} toggleDetach={toggleDetach} width={width}/>
              </div>
            )
          )}

          {/* meeting-detected notification (when nothing is open) */}
          {!popoverOpen && !appOpen && !recording && !notifDismissed && (
            <div style={{ position:'absolute', top:36, right:14, zIndex:25, width:312, animation:'notifin .34s cubic-bezier(.2,.8,.2,1)' }}>
              <div onClick={()=>{ setPopoverOpen(true); }} style={{
                borderRadius:16, padding:'12px 13px', cursor:'pointer',
                background:'var(--pop-bg)', border:'1px solid var(--pop-border)', boxShadow:'var(--pop-shadow)',
              }}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:9 }}>
                  <Monogram size={18}/>
                  <span style={{ fontFamily:SANS, fontSize:12, fontWeight:600, color:'var(--c2)' }}>dot+</span>
                  <span style={{ flex:1 }}/>
                  <span style={{ fontFamily:MONO, fontSize:10.5, color:'var(--c3)' }}>now</span>
                  <button onClick={(e)=>{ e.stopPropagation(); setNotifDismissed(true); }} title="Dismiss" style={{ width:20, height:20, borderRadius:'50%', border:'none', cursor:'pointer', background:'var(--s2)', color:'var(--c3)', display:'flex', alignItems:'center', justifyContent:'center' }}><I.x size={12}/></button>
                </div>
                <div style={{ display:'flex', alignItems:'flex-start', gap:9 }}>
                  <span style={{ width:34, height:34, borderRadius:9, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', background:'color-mix(in srgb, var(--accent) 14%, transparent)', color:'var(--accent)' }}><I.cal size={18}/></span>
                  <span style={{ flex:1, minWidth:0 }}>
                    <span style={{ display:'block', fontFamily:SANS, fontSize:13.5, fontWeight:700, color:'var(--c1)' }}>Meeting detected</span>
                    <span style={{ display:'block', fontFamily:SANS, fontSize:12.5, lineHeight:'17px', color:'var(--c2)', marginTop:2 }}><b style={{ fontWeight:600, color:'var(--c1)' }}>Design Review</b> just started on Google Meet.</span>
                  </span>
                </div>
                <div style={{ display:'flex', gap:7, marginTop:11 }}>
                  <Btn variant="record" size="small" shape="pill" onClick={(e)=>{ e.stopPropagation(); startRec(); }} style={{ flex:1 }}>
                    <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--neg)' }}/> Record meeting
                  </Btn>
                  <Btn variant="secondary" size="small" shape="pill" onClick={(e)=>{ e.stopPropagation(); setNotifDismissed(true); }}>Ignore</Btn>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Tweaks */}
      <TweaksPanel>
        <TweakSection label="Appearance"/>
        <TweakRadio label="Theme" value={t.appearance} options={['Dark','Light']} onChange={v=>setTweak('appearance', v)}/>
        <TweakColor label="Accent" value={t.accent} options={['#276EF1','#1F9E6E','#8A5CD6','#C2603A']} onChange={v=>setTweak('accent', v)}/>
        <TweakSection label="Panel"/>
        <TweakRadio label="Width" value={t.panelWidth} options={['Compact','Standard','Roomy']} onChange={v=>setTweak('panelWidth', v)}/>
        <TweakRadio label="Density" value={t.density} options={['Compact','Comfortable']} onChange={v=>setTweak('density', v)}/>
        <TweakSection label="Layout variations"/>
        <TweakRadio label="Home" value={t.homeLayout} options={['Standard','Focused']} onChange={v=>setTweak('homeLayout', v)}/>
        <TweakRadio label="Record button" value={t.recordButton} options={['Top','Bottom']} onChange={v=>setTweak('recordButton', v)}/>
        <TweakRadio label="Recording" value={t.recordingStyle} options={['Meter','Waveform']} onChange={v=>setTweak('recordingStyle', v)}/>
        <TweakSection label="Jump to state"/>
        <TweakSelect label="Popover" value={screen} options={[
          {value:'onboarding',label:'Onboarding'},{value:'home',label:'Home / idle'},{value:'recording',label:'Recording'},
          {value:'processing',label:'Processing'},{value:'detail',label:'Recording detail'},{value:'ai',label:'Ask dot+'},{value:'settings',label:'Settings'},
        ]} onChange={jumpTo}/>
        <TweakButton label={appOpen ? 'Close app window' : 'Open full app window'} onClick={()=>setAppOpen(o=>!o)}/>
      </TweaksPanel>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "appearance": "Dark",
  "accent": "#276EF1",
  "panelWidth": "Compact",
  "density": "Comfortable",
  "homeLayout": "Standard",
  "recordButton": "Top",
  "recordingStyle": "Meter"
}/*EDITMODE-END*/;

ReactDOM.createRoot(document.getElementById('root')).render(<Scene/>);