// Settings dialog + Why-10-Layers dialog + error toast.
const { useState: useStateD } = React;

function Modal({ children, onClose }){
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

function SettingsDialog({ apiKey, onSave, onClose }){
  const [k, setK] = useStateD(apiKey || '');
  const [err, setErr] = useStateD(null);
  const submit = () => {
    if (k && k.startsWith('sk-bad')) { setErr('Invalid API key — check your dashboard.'); return; }
    onSave(k);
    onClose();
  };
  return (
    <Modal onClose={onClose}>
      <div style={{padding:'18px 22px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div className="section-label">▸ settings</div>
          <div className="sans" style={{fontSize:18, fontWeight:600, marginTop:4}}>API key</div>
        </div>
        <button className="btn-ghost" onClick={onClose} style={{background:'transparent', border:0, color:'var(--text-dim)', fontSize:14, cursor:'default', padding:6}}>×</button>
      </div>
      <div style={{padding:'18px 22px', display:'flex', flexDirection:'column', gap:14}}>
        <div className="mono" style={{fontSize:12, color:'var(--text-muted)', lineHeight:1.5}}>
          Set the API key for the TrueDetect engine. Stored in <span style={{color:'var(--text)'}}>localStorage</span> only — it never leaves the browser.
        </div>
        <input
          className="mono"
          type="password"
          value={k}
          onChange={e=>{setK(e.target.value); setErr(null);}}
          placeholder="sk-td-…"
          style={{
            background:'var(--bg)', border:'1px solid var(--border)',
            padding:'10px 12px', fontSize:13, color:'var(--text)', outline:'none',
            borderColor: err ? 'var(--red)' : 'var(--border)',
          }}
          onFocus={e=>e.target.style.borderColor = err ? 'var(--red)' : 'var(--blue)'}
          onBlur={e=>e.target.style.borderColor = err ? 'var(--red)' : 'var(--border)'}
        />
        {err && <div className="mono" style={{color:'var(--red)', fontSize:11}}>✗ {err}</div>}
        <div className="mono" style={{fontSize:11, color:'var(--text-dim)'}}>
          format: 64-char hex prefixed sk-td-
        </div>
      </div>
      <div style={{padding:'14px 22px', borderTop:'1px solid var(--border)', display:'flex', justifyContent:'flex-end', gap:10}}>
        <button className="btn" onClick={onClose}>Cancel</button>
        <button className="btn btn-primary" onClick={submit}>Save key</button>
      </div>
    </Modal>
  );
}

function WhyLayersDialog({ onClose }){
  return (
    <Modal onClose={onClose}>
      <div style={{padding:'18px 22px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
        <div>
          <div className="section-label">▸ methodology</div>
          <div className="sans" style={{fontSize:18, fontWeight:600, marginTop:4}}>Why 10 layers?</div>
          <div className="sans" style={{fontSize:13, color:'var(--text-muted)', marginTop:6, maxWidth:'52ch', lineHeight:1.5}}>
            A single classifier can be fooled. Ten orthogonal forensic signals — text, structure, source — agree, disagree, and surface the disagreement.
          </div>
        </div>
        <button className="btn-ghost" onClick={onClose} style={{background:'transparent', border:0, color:'var(--text-dim)', fontSize:14, cursor:'default', padding:6}}>×</button>
      </div>
      <div style={{padding:'8px 22px 18px', maxHeight:'60vh', overflow:'auto'}}>
        <table style={{width:'100%', borderCollapse:'collapse', fontFamily:'var(--mono)', fontSize:12}}>
          <tbody>
            {window.LAYER_META.map(m => (
              <tr key={m.key} style={{borderBottom:'1px solid var(--border)'}}>
                <td style={{padding:'10px 0', color:'var(--text-dim)', width:36}}>{m.short}</td>
                <td style={{padding:'10px 12px 10px 0', color:'var(--text)', width:140, fontWeight:500}}>{m.name}</td>
                <td style={{padding:'10px 0', color:'var(--text-dim)', width:60, textAlign:'right'}}>{pct0(m.weight)}</td>
                <td style={{padding:'10px 0 10px 16px', color:'var(--text-muted)', fontFamily:'var(--sans)', fontSize:12, lineHeight:1.5}}>
                  {window.LAYER_DESCRIPTIONS[m.key]}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{padding:'14px 22px', borderTop:'1px solid var(--border)', display:'flex', justifyContent:'flex-end'}}>
        <button className="btn" onClick={onClose}>Got it</button>
      </div>
    </Modal>
  );
}

// Toast for errors
function Toast({ kind, title, body, onAction, actionLabel, onClose }){
  const colorVar = kind === 'error' ? 'var(--red)' : kind === 'warn' ? 'var(--amber)' : 'var(--blue)';
  const icon = kind === 'error' ? '✗' : kind === 'warn' ? '⚠' : 'ℹ';
  return (
    <div className="fade-up" style={{
      position:'fixed', bottom: 24, left: 24, zIndex: 70,
      width: 460, maxWidth:'92vw',
      background:'var(--surface)', border:`1px solid ${colorVar}`,
      borderLeftWidth:3,
      padding:'14px 18px',
      display:'grid', gridTemplateColumns:'24px 1fr auto', gap:14, alignItems:'flex-start',
    }}>
      <div style={{color: colorVar, fontSize:18, lineHeight:'20px'}}>{icon}</div>
      <div>
        <div className="mono upper" style={{color: colorVar, fontSize:11, marginBottom:4}}>{title}</div>
        <div className="sans" style={{fontSize:13, color:'var(--text-muted)', lineHeight:1.5}}>{body}</div>
        {onAction && actionLabel && (
          <button className="btn" onClick={onAction} style={{marginTop:10, padding:'5px 10px', fontSize:11}}>{actionLabel}</button>
        )}
      </div>
      <button className="btn-ghost" onClick={onClose} style={{background:'transparent', border:0, color:'var(--text-dim)', fontSize:13, cursor:'default', padding:4}}>×</button>
    </div>
  );
}

window.SettingsDialog = SettingsDialog;
window.WhyLayersDialog = WhyLayersDialog;
window.Toast = Toast;