/* 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 levelEntries  = entries.filter(([_, cfg]) => cfg.group === 'level');
  const mainEntries   = entries.filter(([_, cfg]) => !cfg.group);
  const deviceEntries = entries.filter(([_, cfg]) => cfg.group === 'device');
  const markerEntries = entries.filter(([_, cfg]) => cfg.group === 'marker');

  // Pull TASK_DOCS for showing the rule/refs of the currently selected level
  const docs = window.TASK_DOCS && window.TASK_DOCS[quest.id];
  const currentLevel = params.level || 'basic';
  const lvlDoc = docs && docs.levels && docs.levels[currentLevel];

  // ── Tier-based level gating ───────────────────────────────────────
  // Hide / disable level options the current member tier can't access.
  // Free + Basic → only 'basic' selectable. Plus / Pro → all 3.
  const planAllows = (lvl) => window.MyndscapeAPI?.isLevelAllowed?.(lvl) ?? true;
  const lvlLockReason = (lvl) => window.MyndscapeAPI?.levelLockReason?.(lvl) || '';
  // Snap params.level back to a permitted choice if the current one isn't allowed
  React.useEffect(() => {
    if (params.level && !planAllows(params.level)){
      setParams(p => ({...p, level: 'basic'}));
    }
  }, [params.level]);

  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:'min(820px, 92vw)', maxHeight:'92vh',
        background:'var(--cream)',
        borderTop:`3px solid ${domainColor}`,
        borderRadius:4,
        boxShadow:'0 8px 40px rgba(30,40,20,.35)',
        fontFamily:'var(--serif)',color:'var(--inkw)',
        display:'flex', flexDirection:'column',
      }}>
        {/* Header (fixed at top) */}
        <div style={{
          padding:'1.4rem 2rem .9rem',
          borderBottom:'1px solid var(--wcbdr)',
          display:'flex', flexDirection:'column', gap:'.8rem',
          flexShrink:0,
        }}>
          <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>
          <p style={{
            fontSize:'.82rem',lineHeight:1.75,color:'var(--inkw)',margin:0,
            padding:'.55rem .8rem',
            background:'var(--parch)',
            borderLeft:`2px solid ${domainColor}55`,
            borderRadius:2,
          }}>{quest.desc}</p>
        </div>

        {/* Scrollable body */}
        <div style={{
          flex:1, overflowY:'auto',
          padding:'1rem 2rem',
          display:'flex', flexDirection:'column', gap:'1rem',
        }}>

        {/* 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) => {
                    // Gate the 'level' field by membership tier
                    const isLocked = key === 'level' && !planAllows(opt);
                    const label = cfg.labels ? cfg.labels[i] : opt;
                    return (
                      <option key={opt} value={opt} disabled={isLocked}>
                        {isLocked ? `🔒 ${label} — ${lvlLockReason(opt)}` : label}
                      </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'}}>
              {/* Level selector (prominent at top) */}
              {levelEntries.length > 0 && (
                <div style={{
                  padding:'.7rem .85rem',
                  background:`linear-gradient(135deg, ${domainColor}15, ${domainColor}05)`,
                  border:`1px solid ${domainColor}55`,
                  borderRadius:4,
                  display:'flex', flexDirection:'column', gap:'.5rem',
                }}>
                  {levelEntries.map(renderRow)}
                  {lvlDoc && (
                    <div style={{
                      fontSize:'.72rem', lineHeight:1.65, color:'var(--dim)',
                      paddingTop:'.4rem', borderTop:`1px dashed ${domainColor}33`,
                      display:'flex', flexDirection:'column', gap:'.4rem',
                    }}>
                      <div style={{color:'var(--inkw)', fontWeight:700, fontSize:'.78rem'}}>
                        {lvlDoc.name}
                      </div>
                      <div style={{fontFamily:'var(--italic)', fontStyle:'italic'}}>
                        <b style={{color:'var(--inkw)', fontStyle:'normal'}}>規則 </b>{lvlDoc.rule}
                      </div>
                      {lvlDoc.manipulations && (
                        <div style={{fontFamily:'var(--italic)', fontStyle:'italic'}}>
                          <b style={{color:'var(--inkw)', fontStyle:'normal'}}>操弄 </b>{lvlDoc.manipulations}
                        </div>
                      )}
                      {docs.purpose && (
                        <div style={{fontSize:'.7rem'}}>
                          <b style={{color:'var(--inkw)'}}>測量 </b>{docs.purpose}
                          <span style={{marginLeft:8, color:domainColor}}>｜ <b>腦網路</b> {docs.network}</span>
                        </div>
                      )}
                      {lvlDoc.refs && lvlDoc.refs.length > 0 && (
                        <details style={{marginTop:'.2rem'}}>
                          <summary style={{
                            cursor:'pointer', fontSize:'.72rem', fontWeight:700,
                            color:domainColor, letterSpacing:'.06em',
                            fontFamily:'var(--round)', textTransform:'uppercase',
                            outline:'none', userSelect:'none',
                          }}>References ({lvlDoc.refs.length})</summary>
                          <ol style={{
                            margin:'.4rem 0 0 1rem', padding:0, fontSize:'.68rem',
                            lineHeight:1.55, color:'var(--inkw)',
                            fontFamily:'var(--italic)', fontStyle:'italic',
                          }}>
                            {lvlDoc.refs.map((r, i) => (
                              <li key={i} style={{marginBottom:'.3rem'}}>{r}</li>
                            ))}
                          </ol>
                        </details>
                      )}
                    </div>
                  )}
                </div>
              )}
              {/* Main params — 2 columns when there are 4+ entries */}
              {mainEntries.length >= 4 ? (
                <div style={{
                  display:'grid', gridTemplateColumns:'1fr 1fr', columnGap:'1.5rem', rowGap:'.7rem',
                }}>
                  {mainEntries.map(renderRow)}
                </div>
              ) : (
                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>
          );
        })()}
        </div>
        {/* end scrollable body */}

        {/* Footer (fixed at bottom — always visible) */}
        <div style={{
          padding:'.9rem 2rem 1.1rem',
          borderTop:'1px solid var(--wcbdr)',
          background:'var(--cream)',
          flexShrink:0,
          display:'flex', flexDirection:'column', gap:'.7rem',
        }}>
          {timingWarning && (
            <div style={{
              fontSize:'.76rem', lineHeight:1.55, color:'#8a5018',
              padding:'.5rem .75rem',
              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>
          )}
          <div style={{display:'flex',gap:'.8rem',justifyContent:'flex-end'}}>
            <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:'.9rem',padding:'.55rem 1.8rem',cursor:'pointer',
              letterSpacing:'.06em',boxShadow:'0 2px 8px rgba(212,147,26,.4)',
            }}>開始測驗</button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.SettingsModal = SettingsModal;