// ui2.jsx — primitives for the multi-page system (search, filters, tabs, page header)
const { useState: useS2 } = React;

// page header — kicker + serif title + optional right slot + optional blurb
function PageHeader({ kicker, title, right, blurb }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16 }}>
        <div>
          {kicker && <div style={{ fontSize: 12, letterSpacing: '.08em', color: 'var(--ink-3)', marginBottom: 8 }}>{kicker}</div>}
          <div className="sr" style={{ fontSize: 26, lineHeight: 1.1, color: 'var(--ink)' }}>{title}</div>
        </div>
        {right && <div style={{ flexShrink: 0 }}>{right}</div>}
      </div>
      {blurb && <div className="sr" style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 12, maxWidth: 620 }}>{blurb}</div>}
    </div>
  );
}

// search field — underline only, no box (editorial)
function SearchField({ value, onChange, placeholder }) {
  const [f, setF] = useS2(false);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid ' + (f ? 'var(--ink)' : 'var(--border-strong)'), paddingBottom: 5, minWidth: 200, transition: 'border-color .15s' }}>
      <svg width="13" height="13" viewBox="0 0 16 16" style={{ flexShrink: 0 }}><circle cx="7" cy="7" r="5" fill="none" stroke="var(--ink-3)" strokeWidth="1.2" /><line x1="11" y1="11" x2="15" y2="15" stroke="var(--ink-3)" strokeWidth="1.2" /></svg>
      <input value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} onFocus={() => setF(true)} onBlur={() => setF(false)}
        style={{ border: 'none', outline: 'none', background: 'transparent', fontFamily: "'Noto Sans TC',sans-serif", fontSize: 13, color: 'var(--ink)', width: '100%' }} />
    </div>
  );
}

// filter row — text toggles, underline active (Design.md 文字切換)
function FilterRow({ options, value, onChange, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
      {label && <span style={{ fontSize: 12, letterSpacing: '.08em', color: 'var(--ink-3)' }}>{label}</span>}
      {options.map((o) => {
        const v = typeof o === 'string' ? o : o.value;
        const lbl = typeof o === 'string' ? o : o.label;
        const active = v === value;
        return (
          <span key={v} onClick={() => onChange(v)} style={{
            cursor: 'pointer', fontSize: 13, whiteSpace: 'nowrap',
            color: active ? 'var(--ink)' : 'var(--ink-3)',
            borderBottom: active ? '1px solid var(--ink)' : '1px solid transparent', paddingBottom: 2,
          }}>{lbl}</span>
        );
      })}
    </div>
  );
}

// in-page tabs
function Tabs({ tabs, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 22, borderBottom: '0.5px solid var(--border-strong)', marginBottom: 22 }}>
      {tabs.map((t) => {
        const active = t.value === value;
        return (
          <span key={t.value} onClick={() => onChange(t.value)} style={{
            cursor: 'pointer', fontSize: 14, paddingBottom: 10, marginBottom: -0.5,
            color: active ? 'var(--ink)' : 'var(--ink-3)',
            borderBottom: active ? '1.5px solid var(--ink)' : '1.5px solid transparent',
          }} className="sr">{t.label}</span>
        );
      })}
    </div>
  );
}

// key/value line
function KV({ k, v, vTone }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '10px 0', borderTop: '0.5px solid var(--border)' }}>
      <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>{k}</span>
      <span className="fr" style={{ fontSize: 15, color: vTone || 'var(--ink)' }}>{v}</span>
    </div>
  );
}

// empty / hint line
function Note({ children }) {
  return <div style={{ fontSize: 12, letterSpacing: '.04em', color: 'var(--ink-3)', lineHeight: 1.7 }}>{children}</div>;
}

// thin inline bar (for completion / progress) — square ends, ink fill
function Bar({ value, max = 100, width = '100%' }) {
  return (
    <div style={{ width, height: 2, background: 'var(--border)', position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, height: 2, width: Math.round((value / max) * 100) + '%', background: 'var(--mark)' }} />
    </div>
  );
}

// 8-session attendance ticks
function AttendanceTicks({ present }) {
  return (
    <div style={{ display: 'flex', gap: 5 }}>
      {present.map((p, i) => (
        <span key={i} title={p ? '出席' : '缺席'} style={{
          width: 14, height: 14, display: 'inline-block',
          background: p ? 'var(--mark)' : 'transparent',
          border: p ? 'none' : '1px solid var(--border-strong)',
        }} />
      ))}
    </div>
  );
}

Object.assign(window, { PageHeader, SearchField, FilterRow, Tabs, KV, Note, Bar, AttendanceTicks });