/* settings.jsx — parchment-style settings modal, follows design language */
function SettingsModal({ quest, onConfirm, onCancel }) {
  const { useState } = React;
  const schema = window.TASK_PARAMS[quest.id] || {};

  const defaults = {};
  Object.entries(schema).forEach(([k, cfg]) => { defaults[k] = cfg.default; });
  const [params, setParams] = useState(defaults);
  const [showDevice, setShowDevice] = useState(false);
  const [showMarkers, setShowMarkers] = useState(false);

  // Partition schema by group for cleaner UI
  const entries = Object.entries(schema);
  const mainEntries   = entries.filter(([_, cfg]) => !cfg.group);
  const deviceEntries = entries.filter(([_, cfg]) => cfg.group === 'device');
  const markerEntries = entries.filter(([_, cfg]) => cfg.group === 'marker');

  const domainColor = {
    memory:'#4888c8', inhibition:'#c05570', flexibility:'#c8921c',
    attention:'#7050c8', executive:'#3aa878', visuospatial:'#c87030',
  }[quest.domain] || '#8a7a60';

  // Warn when response window exceeds the pre-stim fixation — it messes with test pacing
  const durVal = schema.dur ? +params.dur : null;
  const isiVal = schema.isi ? +params.isi : null;
  const timingWarning = (durVal != null && isiVal != null && durVal > isiVal);

  return (
    <div style={{
      position:'fixed',inset:0,zIndex:200,
      background:'rgba(30,40,20,.72)',backdropFilter:'blur(6px)',
      display:'flex',alignItems:'center',justifyContent:'center',
    }}>
      <div style={{
        width:480,maxHeight:'82vh',overflowY:'auto',
        background:'var(--cream)',
        borderTop:`3px solid ${domainColor}`,
        borderRadius:4,
        padding:'1.8rem 2rem 1.4rem',
        boxShadow:'0 8px 40px rgba(30,40,20,.35)',
        fontFamily:'var(--serif)',color:'var(--inkw)',
        display:'flex',flexDirection:'column',gap:'1.2rem',
      }}>
        {/* Header */}
        <div style={{display:'flex',alignItems:'flex-start',gap:'1rem'}}>
          <span style={{fontSize:'2rem',color:domainColor,lineHeight:1}}>{quest.glyph}</span>
          <div>
            <div style={{fontSize:'1.1rem',fontWeight:700,letterSpacing:'.04em'}}>{quest.name}</div>
            <div style={{fontSize:'.72rem',color:'var(--dim)',fontFamily:'var(--italic)',fontStyle:'italic',marginTop:2}}>{quest.en}</div>
          </div>
        </div>

        {/* Description */}
        <p style={{
          fontSize:'.82rem',lineHeight:1.85,color:'var(--inkw)',
          padding:'.65rem .85rem',
          background:'var(--parch)',
          borderLeft:`2px solid ${domainColor}55`,
          borderRadius:2,
        }}>{quest.desc}</p>

        {/* Row renderer, used for all three groups */}
        {(() => {
          const renderRow = ([key, cfg]) => (
            <div key={key} style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'1rem'}}>
              <span style={{fontSize:'.82rem',flex:1}}>
                {cfg.label}{cfg.unit ? ` (${cfg.unit})` : ''}
              </span>
              {cfg.type === 'select' ? (
                <select
                  value={params[key]}
                  onChange={e => setParams(p => ({...p, [key]: e.target.value}))}
                  style={{
                    background:'var(--parch)',border:'1px solid var(--wcbdr)',
                    color:'var(--inkw)',fontFamily:'var(--serif)',fontSize:'.8rem',
                    padding:'.28rem .55rem',cursor:'pointer',minWidth:110,
                  }}
                >
                  {cfg.options.map((opt, i) => (
                    <option key={opt} value={opt}>{cfg.labels ? cfg.labels[i] : opt}</option>
                  ))}
                </select>
              ) : (
                <div style={{display:'flex',alignItems:'center',gap:'.5rem'}}>
                  <input type="range" min={cfg.min} max={cfg.max} step={cfg.step}
                    value={params[key]}
                    onChange={e => setParams(p => ({...p, [key]: +e.target.value}))}
                    style={{width:110,accentColor:domainColor}}
                  />
                  <span style={{fontSize:'.78rem',color:'var(--dim)',minWidth:52,textAlign:'right'}}>
                    {params[key]}{cfg.unit||''}
                  </span>
                </div>
              )}
            </div>
          );
          const sectionHeader = (title, open, setOpen, count) => (
            <div
              onClick={() => setOpen(!open)}
              style={{
                display:'flex',alignItems:'center',justifyContent:'space-between',
                padding:'.35rem 0',borderTop:'1px solid var(--wcbdr)',
                cursor:'pointer',userSelect:'none',
              }}
            >
              <span style={{fontSize:'.78rem',color:'var(--dim)',letterSpacing:'.1em',fontFamily:'var(--round)',fontWeight:700,textTransform:'uppercase'}}>
                {title}<span style={{marginLeft:6,color:'var(--wcbdr)'}}>· {count}</span>
              </span>
              <span style={{fontSize:'.9rem',color:'var(--dim)'}}>{open ? '▾' : '▸'}</span>
            </div>
          );
          return (
            <div style={{display:'flex',flexDirection:'column',gap:'.8rem'}}>
              {mainEntries.map(renderRow)}
              {deviceEntries.length > 0 && (
                <>
                  {sectionHeader('設備控制 · INPUT DEVICE', showDevice, setShowDevice, deviceEntries.length)}
                  {showDevice && (
                    <div style={{display:'flex',flexDirection:'column',gap:'.6rem',paddingLeft:'.4rem'}}>
                      {deviceEntries.map(renderRow)}
                    </div>
                  )}
                </>
              )}
              {markerEntries.length > 0 && (
                <>
                  {sectionHeader('EEG 事件標記 · MARKERS', showMarkers, setShowMarkers, markerEntries.length)}
                  {showMarkers && (
                    <div style={{display:'flex',flexDirection:'column',gap:'.6rem',paddingLeft:'.4rem'}}>
                      <div style={{
                        fontSize:'.7rem',color:'var(--dim)',lineHeight:1.6,
                        padding:'.45rem .65rem',
                        background:'var(--parch)',border:'1px solid var(--wcbdr)',borderRadius:2,
                      }}>
                        {window.Markers?.isEnabled()
                          ? <>✓ 已啟用。此測驗會在 <b>stimulus onset</b> 與 <b>response</b> 發送對應 ID 的事件到 <code>{window.Markers.getConfig().channelName}</code>。</>
                          : <>✗ 目前未啟用。請至首頁點 <b>⚙ EEG</b> 開啟廣播（或僅作記錄用途可忽略）。</>}
                      </div>
                      {markerEntries.map(renderRow)}
                    </div>
                  )}
                </>
              )}
            </div>
          );
        })()}

        {/* Timing warning — response window exceeds stimulus interval */}
        {timingWarning && (
          <div style={{
            fontSize:'.78rem', lineHeight:1.6, color:'#8a5018',
            padding:'.6rem .8rem',
            background:'rgba(212,147,26,.14)',
            border:'1px solid rgba(212,147,26,.45)',
            borderLeft:'3px solid #d4931a',
            borderRadius:3,
            fontFamily:'var(--serif)',
          }}>
            ⚠ <b>反應時限 ({durVal}ms) 大於刺激間距 ({isiVal}ms)</b>。
            <span style={{fontFamily:'var(--italic)',fontStyle:'italic',color:'var(--dim)'}}>
              受測者在反應時限內未回應，仍會進入下一題；但會讓整體節奏比設計值慢，可能影響測驗敏感度。建議調低反應時限，或調高刺激間距。
            </span>
          </div>
        )}

        {/* Footer */}
        <div style={{display:'flex',gap:'.8rem',justifyContent:'flex-end',paddingTop:'.5rem',borderTop:'1px solid var(--wcbdr)'}}>
          <button onClick={onCancel} style={{
            background:'none',border:'1px solid var(--wcbdr)',color:'var(--dim)',
            fontFamily:'var(--serif)',fontSize:'.82rem',padding:'.45rem 1.1rem',cursor:'pointer',
          }}>取消</button>
          <button onClick={() => onConfirm({...params})} style={{
            background:'linear-gradient(135deg,#d4931a,#f0c858)',border:'none',
            color:'#2c2416',fontFamily:'var(--serif)',fontWeight:700,
            fontSize:'.85rem',padding:'.5rem 1.6rem',cursor:'pointer',
            letterSpacing:'.06em',boxShadow:'0 2px 8px rgba(212,147,26,.4)',
          }}>開始測驗</button>
        </div>
      </div>
    </div>
  );
}
window.SettingsModal = SettingsModal;