// Idle state — drop zone + recent + "why 10 layers" link.
// Supports real file picking (drag-drop or click-to-browse). Falls back to
// the mock scenario in app.jsx when useMocks is enabled in TweaksPanel.
const { useState: useStateIdle, useRef: useRefIdle } = React;

function IdleScreen({ onUpload, onPickRecent, onShowLayers, recent }){
  const [over, setOver] = useStateIdle(false);
  const [hovering, setHovering] = useStateIdle(null);
  const fileInputRef = useRefIdle(null);

  const handleFile = (file) => {
    if (!file) return;
    onUpload(file);
  };

  const handleBrowse = () => {
    if (fileInputRef.current) fileInputRef.current.click();
  };

  const handleInputChange = (e) => {
    const file = e.target.files && e.target.files[0];
    if (file) handleFile(file);
    e.target.value = '';
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setOver(false);
    const file = e.dataTransfer.files && e.dataTransfer.files[0];
    if (file) handleFile(file);
  };

  return (
    <div style={{flex:1, display:'grid', gridTemplateColumns:'320px 1fr', minHeight: 0}}>
      {/* Recent sidebar */}
      <aside style={{borderRight:'1px solid var(--border)', padding:'20px 18px', overflow:'auto'}}>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 14}}>
          <div className="section-label">Recent ▸ last 5</div>
          <div className="mono" style={{fontSize:10, color:'var(--text-dim)'}}>{recent.length}/5</div>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:1}}>
          {recent.map((r, i) => (
            <button
              key={i}
              onClick={() => onPickRecent(r.scenario)}
              onMouseEnter={() => setHovering(i)}
              onMouseLeave={() => setHovering(null)}
              style={{
                textAlign:'left', cursor:'default', background: hovering===i ? 'var(--surface)' : 'transparent',
                border:'1px solid', borderColor: hovering===i ? 'var(--border-2)' : 'var(--border)',
                padding:'10px 12px', display:'flex', flexDirection:'column', gap:5,
                marginBottom: -1,
              }}
            >
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{fontSize:11}}>{r.icon}</span>
                <span className="mono" style={{fontSize:12, flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r.filename}</span>
              </div>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <span className="mono tnum" style={{
                  fontSize:11,
                  color: r.score >= 0.7 ? 'var(--red)' : r.score <= 0.3 ? 'var(--green)' : 'var(--amber)',
                }}>{fmt3(r.score)}</span>
                <span className="mono" style={{fontSize:10, color:'var(--text-dim)'}}>{r.ago}</span>
              </div>
            </button>
          ))}
        </div>

        <div style={{marginTop:24}}>
          <div className="section-label" style={{marginBottom:10}}>Daily quota</div>
          <div className="mono tnum" style={{fontSize:11, color:'var(--text-muted)', display:'flex', justifyContent:'space-between'}}>
            <span>used</span><span>23 / 100</span>
          </div>
          <div style={{height:6, background:'var(--surface-2)', border:'1px solid var(--border)', marginTop:6}}>
            <div style={{height:'100%', width:'23%', background:'var(--blue)'}}></div>
          </div>
        </div>
      </aside>

      {/* Drop zone */}
      <main
        onDragEnter={(e)=>{e.preventDefault(); setOver(true);}}
        onDragOver={(e)=>{e.preventDefault();}}
        onDragLeave={(e)=>{ if (e.target === e.currentTarget) setOver(false); }}
        onDrop={handleDrop}
        style={{padding:'40px 48px', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:18}}
      >
        <input
          ref={fileInputRef}
          type="file"
          accept=".pdf,.docx,.txt,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/plain"
          onChange={handleInputChange}
          style={{display:'none'}}
        />

        <div className={`drop ${over ? 'over' : ''}`} style={{
          width:'min(640px, 92%)', padding:'56px 40px',
          display:'flex', flexDirection:'column', alignItems:'center', gap:18, textAlign:'center',
        }}>
          <div className="mono" style={{fontSize:11, color:'var(--text-dim)', letterSpacing:'0.12em', textTransform:'uppercase'}}>
            ▸ session ready · awaiting input
          </div>
          <div className="sans" style={{fontSize:22, fontWeight:600, letterSpacing:'-0.01em'}}>
            Drop document here
          </div>
          <div className="mono" style={{color:'var(--text-muted)', fontSize:12, display:'flex', gap:14}}>
            <span>PDF</span><span style={{color:'var(--text-dim)'}}>·</span>
            <span>DOCX</span><span style={{color:'var(--text-dim)'}}>·</span>
            <span>TXT</span>
          </div>
          <div className="mono" style={{color:'var(--text-dim)', fontSize:11, display:'flex', gap:14}}>
            <span>max 10MB</span><span>·</span><span>min 100 words</span>
          </div>
          <button className="btn" onClick={handleBrowse} style={{marginTop:10}}>or click to browse ↗</button>
        </div>

        <div style={{display:'flex', alignItems:'center', gap:24, marginTop:8}}>
          <button className="btn-ghost mono" onClick={onShowLayers}
            style={{background:'transparent', border:0, color:'var(--text-muted)', fontSize:12, cursor:'default', padding:'6px 0'}}>
            Why 10 layers? →
          </button>
          <span className="mono" style={{fontSize:11, color:'var(--text-dim)'}}>v0.4.2 · engine warm · last index 4 min ago</span>
        </div>
      </main>
    </div>
  );
}

window.IdleScreen = IdleScreen;