/* ============ ATHARV.OS — Shell (window manager, taskbar, desktop) ============ */

let _winId = 1;
const newWinId = () => 'w' + (_winId++);

/* ===== Boot Screen ===== */
function BootScreen({ onDone }) {
  const [lines, setLines] = React.useState([]);
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    const seq = [
      { t: 50, l: 'ATHARV.OS BIOS v1.0.2026 — devarv labs' },
      { t: 50, l: 'Copyright (C) 2026 Atharv Sharma. All rights reserved.' },
      { t: 200, l: '' },
      { t: 50, l: 'Memory test: 32768K OK' },
      { t: 50, l: 'CPU: 4-core agentic processor (LangGraph enabled)' },
      { t: 80, l: 'Detecting drives...' },
      { t: 50, l: '   Primary IDE Master   : ATHARV-95 4.0GB         OK' },
      { t: 50, l: '   Primary IDE Slave    : MOUNTAIN-PHOTOS 2.0GB   OK' },
      { t: 50, l: '   Secondary IDE Master : SPOTIFY-CDROM           OK' },
      { t: 100, l: '' },
      { t: 50, l: 'Loading kernel modules...' },
      { t: 50, l: '   [OK]  systemd-mountain-monitor.service' },
      { t: 50, l: '   [OK]  langgraph-orchestrator.service' },
      { t: 50, l: '   [OK]  fail2ban.service' },
      { t: 50, l: '   [OK]  nginx-tls.service' },
      { t: 50, l: '   [OK]  cron-self-healing.timer' },
      { t: 100, l: '' },
      { t: 60, l: 'Mounting /home/devarv ...               OK' },
      { t: 60, l: 'Loading desktop environment ...         OK' },
      { t: 80, l: '' },
      { t: 50, l: 'Welcome to ATHARV.OS.' },
    ];
    let i = 0;
    let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      if (i >= seq.length) {
        setTimeout(() => { if(!cancelled) setDone(true); }, 400);
        return;
      }
      const it = seq[i++];
      setLines(L => [...L, it.l]);
      setTimeout(tick, it.t);
    };
    tick();
    return () => { cancelled = true; };
  }, []);

  React.useEffect(() => {
    if (done) {
      const t = setTimeout(onDone, 800);
      return () => clearTimeout(t);
    }
  }, [done, onDone]);

  return (
    <div className="boot">
      {lines.join('\n')}
      <span style={{animation: 'blink 1s infinite'}}>{done ? '' : '_'}</span>
      <button className="skip" onClick={onDone}>Skip ▶</button>
    </div>
  );
}

/* ===== Splash ===== */
function SplashScreen({ onDone }) {
  const [pct, setPct] = React.useState(0);
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    const img = new Image();
    img.onload = () => setLoaded(true);
    img.src = 'assets/loading-splash.png';
  }, []);
  React.useEffect(() => {
    if (!loaded) return;
    // Modem dial-up plays during loading
    if (window.sfx) {
      const t = setTimeout(() => window.sfx.modem(), 500);
      return () => clearTimeout(t);
    }
  }, [loaded]);
  React.useEffect(() => {
    if (!loaded) return;
    const t = setTimeout(onDone, 3400);
    const iv = setInterval(() => {
      setPct(p => Math.min(100, p + 2 + Math.random() * 4));
    }, 90);
    return () => { clearTimeout(t); clearInterval(iv); };
  }, [loaded, onDone]);
  return (
    <div className="splash-img" style={{ background: '#2a3340' }}>
      {loaded && (
        <>
          <div className="splash-photo"/>
          <div className="splash-bar">
            <div className="splash-fill" style={{ width: pct + '%' }}/>
          </div>
        </>
      )}
    </div>
  );
}

/* ===== Window component ===== */
function Window({ win, focused, onFocus, onClose, onMinimize, onMaximize, onUpdate, children, zIndex }) {
  const [drag, setDrag] = React.useState(null);
  const [size, setSize] = React.useState({ w: win.w, h: win.h });
  const [pos, setPos] = React.useState({ x: win.x, y: win.y });
  const [maxed, setMaxed] = React.useState(false);
  const [resizing, setResizing] = React.useState(null);
  const [roll, setRoll] = React.useState(-1);
  const winRef = React.useRef();
  const lastMove = React.useRef({ x: 0, t: 0 });

  React.useEffect(() => { setSize({ w: win.w, h: win.h }); }, [win.w, win.h]);
  React.useEffect(() => { setPos({ x: win.x, y: win.y }); }, [win.x, win.y]);

  // Drag handler
  React.useEffect(() => {
    if (!drag) return;
    const move = (e) => {
      const x = Math.max(-100, Math.min(window.innerWidth - 80, e.clientX - drag.dx));
      const y = Math.max(0, Math.min(window.innerHeight - 60, e.clientY - drag.dy));
      // Velocity → roll (spring-like)
      const now = performance.now();
      const dt = Math.max(1, now - lastMove.current.t);
      const vx = (e.clientX - lastMove.current.x) / dt;
      lastMove.current = { x: e.clientX, t: now };
      const targetRoll = Math.max(-6, Math.min(6, vx * 4));
      setRoll(r => r + (targetRoll - r) * 0.18);
      setPos({ x, y });
    };
    const up = () => {
      setDrag(null);
      // settle roll back
      let r = 0;
      const settle = setInterval(() => {
        setRoll(prev => {
          const nx = prev + (-1 - prev) * 0.22;
          if (Math.abs(nx - (-1)) < 0.05) { clearInterval(settle); return -1; }
          return nx;
        });
      }, 16);
      onUpdate(win.id, { x: pos.x, y: pos.y });
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', up);
    };
  }, [drag, pos.x, pos.y]);

  // Resize handler
  React.useEffect(() => {
    if (!resizing) return;
    const move = (e) => {
      const dx = e.clientX - resizing.sx;
      const dy = e.clientY - resizing.sy;
      setSize({
        w: Math.max(280, resizing.w0 + dx),
        h: Math.max(160, resizing.h0 + dy),
      });
    };
    const up = () => setResizing(null);
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', up);
    };
  }, [resizing]);

  const startDrag = (e) => {
    if (maxed) return;
    if (window.matchMedia && window.matchMedia('(max-width: 900px)').matches) {
      onFocus(win.id);
      return;
    }
    onFocus(win.id);
    const r = winRef.current.getBoundingClientRect();
    setDrag({ dx: e.clientX - r.left, dy: e.clientY - r.top });
  };

  const toggleMax = () => {
    if (maxed) {
      setMaxed(false);
    } else {
      setMaxed(true);
    }
  };

  const styleObj = maxed ? {
    left: 0, top: 0, width: '100%', height: 'calc(100% - 28px)',
    zIndex,
    '--drag-roll': `${roll}deg`,
  } : {
    left: pos.x, top: pos.y, width: size.w, height: size.h, zIndex,
    '--drag-roll': `${roll}deg`,
  };

  return (
    <div
      ref={winRef}
      className={`win ${focused?'focused':''} ${drag?'dragging':''} ${win.opening?'opening':''} ${win.minimizing?'minimizing':''} ${win.closing?'closing':''}`}
      style={styleObj}
      onMouseDown={()=>onFocus(win.id)}
    >
      <div
        className={`tbar ${drag?'dragging':''}`}
        onMouseDown={startDrag}
        onDoubleClick={toggleMax}
      >
        <span className="ico" dangerouslySetInnerHTML={{__html: ICO[win.iconKey] ? ICO[win.iconKey](16, win.iconColor) : ICO.myComputer(16)}}/>
        <span className="ttl">{win.title}</span>
        <div className="tctrls">
          <button className="tctrl" title="Minimize" onClick={(e)=>{e.stopPropagation(); if (window.sfx) window.sfx.minimize(); onMinimize(win.id);}}>_</button>
          <button className="tctrl" title="Maximize" onClick={(e)=>{e.stopPropagation(); if (window.sfx) window.sfx.maximize(); toggleMax();}}>{maxed?'❐':'□'}</button>
          <button className="tctrl" title="Close" onClick={(e)=>{e.stopPropagation(); if (window.sfx) window.sfx.click(); onClose(win.id);}}>✕</button>
        </div>
      </div>
      {children}
      {!maxed && (
        <div
          className="win-resize"
          style={{
            position:'absolute', right:0, bottom:0, width:14, height:14,
            cursor:'nwse-resize',
            background: 'linear-gradient(135deg, transparent 50%, #808080 50%, #808080 60%, transparent 60%, transparent 70%, #808080 70%, #808080 80%, transparent 80%)'
          }}
          onMouseDown={(e)=>{
            if (window.matchMedia && window.matchMedia('(max-width: 900px)').matches) return;
            setResizing({ sx: e.clientX, sy: e.clientY, w0: size.w, h0: size.h });
            onFocus(win.id);
            e.stopPropagation();
          }}
        />
      )}
    </div>
  );
}

/* ===== Start Menu ===== */
function StartMenu({ onSelect, onClose }) {
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.target.closest('.startmenu') && !e.target.closest('.startbtn')) onClose();
    };
    setTimeout(() => document.addEventListener('mousedown', handler), 0);
    return () => document.removeEventListener('mousedown', handler);
  }, [onClose]);

  return (
    <div className="startmenu" onClick={(e)=>e.stopPropagation()}>
      <div className="strip"><span>Atharv OS</span></div>
      <div className="items">
        <div className="smitem" onClick={()=>onSelect('about')}>
          <div className="ico" dangerouslySetInnerHTML={{__html: ICO.about(24)}}/>
          <span><b>About me</b></span>
        </div>
        <div className="smitem">
          <div className="ico" dangerouslySetInnerHTML={{__html: ICO.folder(24)}}/>
          <span>Programs</span>
          <span className="arrow">▶</span>
          <div className="submenu">
            <div className="smitem" onClick={()=>onSelect('mediaplayer')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.mediaPlayer(24)}}/>
              <span>Media Player</span>
            </div>
            <div className="smitem" onClick={()=>onSelect('terminal')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.terminal(24)}}/>
              <span>MS-DOS Prompt</span>
            </div>
            <div className="smitem">
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.folder(24)}}/>
              <span>Games</span>
              <span className="arrow">▶</span>
              <div className="submenu">
                <div className="smitem" onClick={()=>onSelect('solitaire')}>
                  <div className="ico" dangerouslySetInnerHTML={{__html: ICO.solitaire(24)}}/>
                  <span>Solitaire</span>
                </div>
              </div>
            </div>
            <div className="smitem" onClick={()=>onSelect('notepad')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.notes(24)}}/>
              <span>Notepad</span>
            </div>
            <div className="smitem" onClick={()=>onSelect('photos')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.photos(24)}}/>
              <span>Photo Viewer</span>
            </div>
          </div>
        </div>
        <div className="smitem">
          <div className="ico" dangerouslySetInnerHTML={{__html: ICO.folder(24)}}/>
          <span>Documents</span>
          <span className="arrow">▶</span>
          <div className="submenu">
            <div className="smitem" onClick={()=>onSelect('readme')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.readme(24)}}/>
              <span>README.txt</span>
            </div>
            <div className="smitem" onClick={()=>onSelect('resume')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.pdf(24)}}/>
              <span>Resume.pdf</span>
            </div>
            <div className="smitem" onClick={()=>onSelect('notepad')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.notes(24)}}/>
              <span>Notes.txt</span>
            </div>
          </div>
        </div>
        <div className="smitem">
          <div className="ico" dangerouslySetInnerHTML={{__html: ICO.skillsCpl(24)}}/>
          <span>Settings</span>
          <span className="arrow">▶</span>
          <div className="submenu">
            <div className="smitem" onClick={()=>onSelect('skills')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.skillsCpl(24)}}/>
              <span>Skills (Control Panel)</span>
            </div>
            <div className="smitem" onClick={()=>onSelect('experience')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.experience(24)}}/>
              <span>Experience.log</span>
            </div>
            <div className="smitem" onClick={()=>onSelect('awards')}>
              <div className="ico" dangerouslySetInnerHTML={{__html: ICO.awards(24)}}/>
              <span>Awards</span>
            </div>
          </div>
        </div>
        <div className="smitem" onClick={()=>onSelect('mycomputer')}>
          <div className="ico" dangerouslySetInnerHTML={{__html: ICO.myComputer(24)}}/>
          <span>My Computer</span>
        </div>
        <div className="smitem" onClick={()=>onSelect('network')}>
          <div className="ico" dangerouslySetInnerHTML={{__html: ICO.network(24)}}/>
          <span>Network Neighborhood</span>
        </div>
        <div className="smitem" onClick={()=>onSelect('run')}>
          <div className="ico" style={{fontSize:18}}>🏃</div>
          <span><span style={{textDecoration:'underline'}}>R</span>un...</span>
        </div>
        <div className="smitem divider"/>
        <div className="smitem" onClick={()=>onSelect('shutdown')}>
          <div className="ico" style={{fontSize:18}}>⏻</div>
          <span><b>Sh<span style={{textDecoration:'underline'}}>u</span>t Down...</b></span>
        </div>
      </div>
    </div>
  );
}

/* ===== Clock ===== */
function Clock() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const h = now.getHours(); const m = now.getMinutes();
  const ampm = h >= 12 ? 'PM' : 'AM';
  const h12 = ((h + 11) % 12) + 1;
  return (
    <span className="clock" title={now.toString()}>
      {String(h12).padStart(2,'0')}<span className="blink">:</span>{String(m).padStart(2,'0')} {ampm}
    </span>
  );
}

/* ===== Now Playing widget ===== */
function NowPlayingWidget({ playing, currentTrack, onOpen, onToggle }) {
  const [bars, setBars] = React.useState([4,8,12,6]);
  React.useEffect(() => {
    if (!playing) { setBars([4,4,4,4]); return; }
    const id = setInterval(() => setBars([4,8,12,6].map(()=>4 + Math.random()*10)), 180);
    return () => clearInterval(id);
  }, [playing]);
  if (!currentTrack) return null;
  return (
    <div className="np-widget win raised">
      <div className="tbar focused" style={{cursor:'default'}}>
        <span className="ttl">♪ Now Playing</span>
        <div className="tctrls">
          <button className="tctrl" onClick={onOpen} title="Open Player">↗</button>
        </div>
      </div>
      <div className="np-content">
        <div className="np-row">
          <div className="np-eq">
            {bars.map((h,i)=><div key={i} className="np-eq-bar" style={{height: h+'px'}}/>)}
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div className="np-track">{currentTrack.playlist}</div>
            <div className="np-pl">via Spotify · ATHARV.OS</div>
          </div>
          <button className="tp-btn" onClick={onToggle} style={{height:22}}>{playing?'❙❙':'▶'}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  newWinId, BootScreen, SplashScreen, Window, StartMenu, Clock, NowPlayingWidget
});