// StarThink — Meeting Notes v3
// No sidebar, inline header, 2-phase (prep + outcomes), attendee bubbles,
// owner autocomplete from attendees, status: concluded/to-be-continued, reset

function MeetingNotes() {
  const today = new Date().toISOString().split('T')[0];
  const storageKey = 'meetings_v3';

  const newMeeting = () => ({
    id: Date.now(),
    title: 'Untitled Meeting',
    date: today,
    startTime: '',
    endTime: '',
    attendeeList: [],
    // Preparation phase
    purposes: [{ text: '', outcome: '', concluded: null }],
    topics: [{ title: '', notes: '', createdAt: new Date().toISOString() }],
    // During/after
    actions: [],
    decisions: '',
    nextSteps: '',
    // Status
    status: null, // null | 'concluded' | 'continued'
    nextMeetingAgenda: '',
    nextMeetingDate: '',
  });

  const sanitizeMeeting = (meeting = {}, fallbackId = Date.now()) => {
    const fresh = newMeeting();
    return {
      ...fresh,
      ...meeting,
      id: meeting?.id || fallbackId,
      attendeeList: Array.isArray(meeting?.attendeeList) ? meeting.attendeeList : [],
      purposes: Array.isArray(meeting?.purposes) && meeting.purposes.length ? meeting.purposes : fresh.purposes,
      topics: Array.isArray(meeting?.topics) && meeting.topics.length ? meeting.topics : fresh.topics,
      actions: Array.isArray(meeting?.actions) ? meeting.actions : [],
    };
  };

  const [meetings, setMeetings] = React.useState(() => ST.get(storageKey, [newMeeting()]));
  const [selId, setSelId] = React.useState(() => (ST.get(storageKey, [newMeeting()])[0] || {}).id);
  const [attendeeInput, setAttendeeInput] = React.useState('');
  const [isMobile, setIsMobile] = React.useState(() => window.matchMedia('(max-width: 900px)').matches);

  React.useEffect(() => {
    const onResize = () => setIsMobile(window.matchMedia('(max-width: 900px)').matches);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const save = (m) => { setMeetings(m); ST.set(storageKey, m); };

  const selIdx = meetings.findIndex(m => m.id === selId);
  const current = meetings[selIdx] || meetings[0];

  const updCurrent = (field, val) => {
    const m = [...meetings];
    m[selIdx] = { ...m[selIdx], [field]: val };
    save(m);
  };

  const addMeeting = () => {
    const nm = newMeeting();
    const m = [nm, ...meetings];
    save(m);
    setSelId(nm.id);
  };

  const resetMeeting = () => {
    if (!confirm('Reset this meeting? All data will be cleared.')) return;
    const m = [...meetings];
    const fresh = { ...newMeeting(), id: current.id };
    m[selIdx] = fresh;
    save(m);
  };

  const deleteMeeting = () => {
    if (!confirm('Delete this meeting?')) return;
    const m = meetings.filter((_, i) => i !== selIdx);
    save(m.length ? m : [newMeeting()]);
    setSelId((m.length ? m[0] : meetings[0]).id);
  };

  const saveMeetingFile = () => {
    const payload = sanitizeMeeting(current);
    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    const safeDate = payload.date || today;
    const safeTitle = (payload.title || 'meeting').replace(/[^\w\-]+/g, '_').slice(0, 40);
    a.download = `starThink_meeting_${safeDate}_${safeTitle}.splan`;
    a.click();
    URL.revokeObjectURL(a.href);
  };

  const loadMeetingFile = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      try {
        const loaded = JSON.parse(ev.target.result);
        const normalized = sanitizeMeeting(loaded, current.id);
        const m = [...meetings];
        m[selIdx] = { ...normalized, id: current.id };
        save(m);
      } catch {
        alert('Invalid meeting .splan file.');
      }
    };
    reader.readAsText(file);
    e.target.value = '';
  };

  const addAttendee = (raw) => {
    const names = raw.split(',').map(n => n.trim()).filter(Boolean);
    const merged = [...new Set([...(current.attendeeList || []), ...names])];
    updCurrent('attendeeList', merged);
    setAttendeeInput('');
  };

  // Duration calc
  const duration = React.useMemo(() => {
    if (!current?.startTime || !current?.endTime) return null;
    const [sh, sm] = current.startTime.split(':').map(Number);
    const [eh, em] = current.endTime.split(':').map(Number);
    const mins = (eh * 60 + em) - (sh * 60 + sm);
    if (mins <= 0) return null;
    return mins >= 60 ? `${Math.floor(mins / 60)}h ${mins % 60 > 0 ? mins % 60 + 'm' : ''}`.trim() : `${mins}m`;
  }, [current?.startTime, current?.endTime]);

  const TA = ({ value, onChange, placeholder, rows = 3 }) => (
    <textarea value={value || ''} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={{ width: '100%', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '8px', fontSize: '13px',
        fontFamily: 'inherit', resize: 'vertical', outline: 'none', boxSizing: 'border-box', color: '#333', lineHeight: '1.7',
        minHeight: rows * 22 + 'px' }} />
  );

  if (!current) return null;

  return (
    <div className="planner-page" style={{ maxWidth: isMobile ? '100%' : '860px', overflowX: 'hidden' }}>

      {/* ── TOP BAR ── */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'stretch' : 'center', marginBottom: '20px', gap: '10px', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: isMobile ? 'stretch' : 'center', gap: '12px', flex: 1, minWidth: 0, flexDirection: isMobile ? 'column' : 'row' }}>
          <div style={{ fontSize: '22px', fontWeight: '800', letterSpacing: '-0.5px' }}>Meeting Notes</div>
          {/* Meeting selector */}
          <select value={selId} onChange={e => setSelId(parseInt(e.target.value))}
            style={{ border: '1px solid #e0e0e0', borderRadius: '4px', padding: '5px 10px', fontSize: '12px', fontFamily: 'inherit', outline: 'none', color: '#555', maxWidth: isMobile ? 'none' : '180px', width: isMobile ? '100%' : 'auto' }}>
            {meetings.map(m => (
              <option key={m.id} value={m.id}>{m.title || 'Untitled'} · {m.date || '—'}</option>
            ))}
          </select>
        </div>
        <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
          <button onClick={addMeeting} style={{ padding: '6px 12px', background: '#111', color: '#fff', border: 'none', borderRadius: '4px', fontSize: '12px', cursor: 'pointer', fontFamily: 'inherit', fontWeight: '600' }}>
            + New
          </button>
          <button onClick={resetMeeting} style={{ padding: '6px 10px', background: 'none', border: '1px solid #e0e0e0', borderRadius: '4px', fontSize: '12px', color: '#bbb', cursor: 'pointer', fontFamily: 'inherit' }}>
            ↺ Reset
          </button>
          <button onClick={saveMeetingFile} title="Save this meeting as .splan file"
            style={{ padding: '6px 10px', background: 'none', border: '1px solid #e0e0e0', borderRadius: '4px', fontSize: '12px', color: '#888', cursor: 'pointer', fontFamily: 'inherit' }}>
            ↓ Save
          </button>
          <label title="Load .splan file into this meeting"
            style={{ padding: '6px 10px', background: 'none', border: '1px solid #e0e0e0', borderRadius: '4px', fontSize: '12px', color: '#888', cursor: 'pointer', fontFamily: 'inherit' }}>
            ↑ Load
            <input type="file" accept=".splan,.json" onChange={loadMeetingFile} style={{ display: 'none' }} />
          </label>
          <button onClick={deleteMeeting} style={{ padding: '6px 10px', background: 'none', border: '1px solid #fcc', borderRadius: '4px', fontSize: '12px', color: '#c66', cursor: 'pointer', fontFamily: 'inherit' }}>
            Delete
          </button>
        </div>
      </div>

      {/* ── MEETING HEADER ── */}
      <div style={{ background: '#fafafa', border: '1px solid #e8e8e8', borderRadius: '8px', padding: '16px 20px', marginBottom: '24px' }}>
        {/* Title */}
        <input value={current.title || ''} onChange={e => updCurrent('title', e.target.value)}
          placeholder="Meeting title..."
          style={{ width: '100%', border: 'none', borderBottom: '2px solid #111', outline: 'none', fontSize: '20px', fontWeight: '700',
            color: '#111', background: 'transparent', fontFamily: 'inherit', padding: '4px 0', marginBottom: '14px', boxSizing: 'border-box' }} />

        {/* Date + times inline */}
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '10px', color: '#aaa', fontWeight: '700', letterSpacing: '1px' }}>DATE</span>
            <input type="date" value={current.date || ''} onChange={e => updCurrent('date', e.target.value)}
              style={{ border: '1px solid #e0e0e0', borderRadius: '4px', padding: '5px 8px', fontSize: '13px', fontFamily: 'inherit', outline: 'none' }} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '10px', color: '#aaa', fontWeight: '700', letterSpacing: '1px' }}>START</span>
            <input type="time" value={current.startTime || ''} onChange={e => updCurrent('startTime', e.target.value)}
              style={{ border: '1px solid #e0e0e0', borderRadius: '4px', padding: '5px 8px', fontSize: '13px', fontFamily: 'inherit', outline: 'none' }} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '10px', color: '#aaa', fontWeight: '700', letterSpacing: '1px' }}>END</span>
            <input type="time" value={current.endTime || ''} onChange={e => updCurrent('endTime', e.target.value)}
              style={{ border: '1px solid #e0e0e0', borderRadius: '4px', padding: '5px 8px', fontSize: '13px', fontFamily: 'inherit', outline: 'none' }} />
          </div>
          {duration && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
              <span style={{ fontSize: '10px', color: '#aaa', fontWeight: '700', letterSpacing: '1px' }}>DURATION</span>
              <span style={{ fontSize: '14px', fontWeight: '700', color: '#555' }}>{duration}</span>
            </div>
          )}
        </div>

        {/* Attendees */}
        <div style={{ marginTop: '14px' }}>
          <span style={{ fontSize: '10px', color: '#aaa', fontWeight: '700', letterSpacing: '1px' }}>ATTENDEES</span>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginTop: '8px', alignItems: 'center' }}>
            {(current.attendeeList || []).map((name, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '5px', padding: '4px 10px', background: '#111',
                borderRadius: '20px', fontSize: '12px', color: '#fff', fontWeight: '500' }}>
                {name}
                <span onClick={() => updCurrent('attendeeList', (current.attendeeList || []).filter((_, j) => j !== i))}
                  style={{ cursor: 'pointer', color: '#888', fontSize: '14px', lineHeight: 1 }}>×</span>
              </div>
            ))}
            <input value={attendeeInput} onChange={e => setAttendeeInput(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addAttendee(attendeeInput); } }}
              onBlur={() => { if (attendeeInput.trim()) addAttendee(attendeeInput); }}
              placeholder="Add name (Enter or comma)..."
              style={{ border: '1px dashed #ccc', borderRadius: '20px', padding: '4px 12px', fontSize: '12px',
                fontFamily: 'inherit', outline: 'none', minWidth: isMobile ? '100%' : '180px', color: '#333', background: 'transparent', flex: isMobile ? '1 1 100%' : '0 1 auto' }} />
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: '28px' }}>

        {/* ── LEFT: PREPARATION PHASE ── */}
        <div>
          <div style={{ fontSize: '11px', fontWeight: '800', letterSpacing: '2px', color: '#888', marginBottom: '4px' }}>PHASE 1 — PREPARATION</div>
          <div style={{ fontSize: '11px', color: '#ccc', marginBottom: '14px' }}>Set these before or at the start of the meeting</div>

          {/* Purposes */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
              <span style={{ fontSize: '12px', fontWeight: '700', color: '#555' }}>Meeting Purposes</span>
              <button onClick={() => updCurrent('purposes', [...(current.purposes || []), { text: '', outcome: '', concluded: null }])}
                style={{ fontSize: '11px', padding: '3px 10px', background: 'none', border: '1px solid #e0e0e0', borderRadius: '20px', cursor: 'pointer', fontFamily: 'inherit', color: '#888' }}>
                + Purpose
              </button>
            </div>
            {(current.purposes || []).map((p, i) => (
              <div key={i} style={{ marginBottom: '8px', padding: '10px 12px', background: '#fafafa', borderRadius: '6px', border: '1px solid #f0f0f0' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
                  <div style={{ width: '20px', height: '20px', borderRadius: '50%', background: '#e0e0e0', color: '#888',
                    fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: '700', flexShrink: 0 }}>{i + 1}</div>
                  <input value={p.text || ''} onChange={e => { const ps = [...current.purposes]; ps[i] = { ...ps[i], text: e.target.value }; updCurrent('purposes', ps); }}
                    placeholder={`Purpose ${i + 1}...`}
                    style={{ flex: 1, border: 'none', borderBottom: '1px solid #e8e8e8', outline: 'none', fontSize: '13px', color: '#111', background: 'transparent', fontFamily: 'inherit', padding: '2px 0' }} />
                  {current.purposes.length > 1 && (
                    <button onClick={() => updCurrent('purposes', current.purposes.filter((_, j) => j !== i))}
                      style={{ background: 'none', border: 'none', color: '#ddd', cursor: 'pointer', fontSize: '15px', flexShrink: 0 }}>×</button>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Agenda Topics */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
              <span style={{ fontSize: '12px', fontWeight: '700', color: '#555' }}>Agenda Topics</span>
              <button onClick={() => updCurrent('topics', [...(current.topics || []), { title: '', notes: '', createdAt: new Date().toISOString() }])}
                style={{ fontSize: '11px', padding: '3px 10px', background: 'none', border: '1px solid #e0e0e0', borderRadius: '20px', cursor: 'pointer', fontFamily: 'inherit', color: '#888' }}>
                + Topic
              </button>
            </div>
            {(current.topics || []).map((topic, i) => (
              <div key={i} style={{ marginBottom: '12px', border: '1px solid #e8e8e8', borderRadius: '6px', overflow: 'hidden' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '7px 10px', background: '#f8f8f8', borderBottom: '1px solid #e8e8e8' }}>
                  <div style={{ background: '#111', color: '#fff', padding: '2px 8px', borderRadius: '3px', fontSize: '10px', fontWeight: '700', flexShrink: 0 }}>
                    {i + 1}
                  </div>
                  <input value={topic.title || ''} onChange={e => { const t = [...current.topics]; t[i] = { ...t[i], title: e.target.value }; updCurrent('topics', t); }}
                    placeholder="Topic..."
                    style={{ flex: 1, border: 'none', outline: 'none', fontSize: '12px', fontWeight: '600', color: '#333', background: 'transparent', fontFamily: 'inherit' }} />
                  <span style={{ fontSize: '10px', color: '#ccc', flexShrink: 0 }}>
                    {new Date(topic.createdAt || Date.now()).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
                  </span>
                  {current.topics.length > 1 && (
                    <button onClick={() => updCurrent('topics', current.topics.filter((_, j) => j !== i))}
                      style={{ background: 'none', border: 'none', color: '#ddd', cursor: 'pointer', fontSize: '14px', flexShrink: 0 }}>×</button>
                  )}
                </div>
                <div style={{ padding: '8px 10px' }}>
                  <TA value={topic.notes || ''} onChange={v => { const t = [...current.topics]; t[i] = { ...t[i], notes: v }; updCurrent('topics', t); }}
                    placeholder="Notes..." rows={3} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ── RIGHT: OUTCOMES PHASE ── */}
        <div>
          <div style={{ fontSize: '11px', fontWeight: '800', letterSpacing: '2px', color: '#888', marginBottom: '4px' }}>PHASE 2 — OUTCOMES</div>
          <div style={{ fontSize: '11px', color: '#ccc', marginBottom: '14px' }}>Fill during or after the meeting</div>

          {/* Purpose outcomes */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{ fontSize: '12px', fontWeight: '700', color: '#555', marginBottom: '10px' }}>Purpose Outcomes</div>
            {(current.purposes || []).map((p, i) => (
              <div key={i} style={{ marginBottom: '8px', padding: '10px 12px', border: '1px solid #f0f0f0', borderRadius: '6px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
                  <div style={{ width: '20px', height: '20px', borderRadius: '50%', background: p.concluded === 'yes' ? '#2a7a2a' : p.concluded === 'no' ? '#c00' : '#e0e0e0',
                    color: '#fff', fontSize: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: '700', flexShrink: 0 }}>{i + 1}</div>
                  <span style={{ flex: 1, fontSize: '12px', color: '#666', fontStyle: p.text ? 'normal' : 'italic' }}>{p.text || `Purpose ${i + 1}`}</span>
                  {['yes', 'no', 'partial'].map((v, vi) => (
                    <div key={v} onClick={() => { const ps = [...current.purposes]; ps[i] = { ...ps[i], concluded: ps[i].concluded === v ? null : v }; updCurrent('purposes', ps); }}
                      style={{ padding: '3px 8px', borderRadius: '20px', cursor: 'pointer', fontSize: '11px', border: '1.5px solid',
                        borderColor: p.concluded === v ? ['#2a7a2a', '#c00', '#888'][vi] : '#e0e0e0',
                        background: p.concluded === v ? ['#2a7a2a', '#c00', '#888'][vi] : 'transparent',
                        color: p.concluded === v ? '#fff' : '#aaa', fontWeight: '600' }}>
                      {['✓', '✗', '~'][vi]}
                    </div>
                  ))}
                </div>
                <input value={p.outcome || ''} onChange={e => { const ps = [...current.purposes]; ps[i] = { ...ps[i], outcome: e.target.value }; updCurrent('purposes', ps); }}
                  placeholder="Outcome / decision for this purpose..."
                  style={{ width: '100%', border: 'none', borderBottom: '1px dashed #e8e8e8', outline: 'none', fontSize: '12px', color: '#555', background: 'transparent', fontFamily: 'inherit', padding: '3px 0', boxSizing: 'border-box' }} />
              </div>
            ))}
          </div>

          {/* Action items */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{ fontSize: '12px', fontWeight: '700', color: '#555', marginBottom: '10px' }}>Action Items</div>
            <datalist id={`attendees-${current.id}`}>
              {(current.attendeeList || []).map(n => <option key={n} value={n} />)}
            </datalist>
            {[...(current.actions || []), { text: '', done: false, owner: '' }].map((action, i) => {
              const a = (action && typeof action === 'object') ? action : { text: '', done: false, owner: '' };
              const isDummy = i === (current.actions || []).length;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: isMobile ? '16px 1fr 20px' : '16px 1fr 90px 20px', gap: '6px', alignItems: 'center', marginBottom: '5px', padding: '3px 0', borderBottom: '1px solid #f8f8f8' }}>
                  {!isDummy ? (
                    <div onClick={() => { const acts = [...(current.actions || [])]; acts[i] = { ...a, done: !a.done }; updCurrent('actions', acts); }}
                      style={{ width: '14px', height: '14px', border: '2px solid', borderRadius: '2px', cursor: 'pointer',
                        borderColor: a.done ? '#111' : '#ccc', background: a.done ? '#111' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {a.done && <span style={{ color: '#fff', fontSize: '9px' }}>✓</span>}
                    </div>
                  ) : <span style={{ color: '#ddd', fontSize: '12px' }}>+</span>}
                  <input value={a.text || ''} onChange={e => {
                    const acts = [...(current.actions || [])];
                    if (isDummy) acts.push({ text: e.target.value, done: false, owner: '' });
                    else acts[i] = { ...a, text: e.target.value };
                    updCurrent('actions', acts);
                  }} placeholder={isDummy ? 'Add action...' : 'Action...'}
                    style={{ border: 'none', borderBottom: '1px solid #f0f0f0', outline: 'none', fontSize: '12px', color: a.done ? '#bbb' : '#333', textDecoration: a.done ? 'line-through' : 'none', background: 'transparent', fontFamily: 'inherit', padding: '2px 0' }} />
                  <input value={a.owner || ''} onChange={e => {
                    if (!isDummy) { const acts = [...(current.actions || [])]; acts[i] = { ...a, owner: e.target.value }; updCurrent('actions', acts); }
                  }} list={`attendees-${current.id}`} placeholder="Owner"
                    style={{ border: 'none', borderBottom: '1px dashed #f0f0f0', outline: 'none', fontSize: '11px', color: '#888', background: 'transparent', fontFamily: 'inherit', padding: '2px 0', gridColumn: isMobile ? '1 / -1' : 'auto', marginLeft: isMobile ? '22px' : 0 }} />
                  {!isDummy && (
                    <button onClick={() => updCurrent('actions', (current.actions || []).filter((_, j) => j !== i))}
                      style={{ background: 'none', border: 'none', color: '#e0e0e0', cursor: 'pointer', fontSize: '13px', padding: 0 }}>×</button>
                  )}
                </div>
              );
            })}
          </div>

          {/* Key decisions + next steps */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{ fontSize: '12px', fontWeight: '700', color: '#555', marginBottom: '6px' }}>Key Decisions</div>
            <TA value={current.decisions || ''} onChange={v => updCurrent('decisions', v)} placeholder="Overall decisions made in this meeting..." rows={3} />
          </div>
          <div style={{ marginBottom: '20px' }}>
            <div style={{ fontSize: '12px', fontWeight: '700', color: '#555', marginBottom: '6px' }}>Next Steps</div>
            <TA value={current.nextSteps || ''} onChange={v => updCurrent('nextSteps', v)} placeholder="Clear next steps after this meeting..." rows={2} />
          </div>

          {/* Meeting status */}
          <div style={{ background: '#f8f8f8', border: '1px solid #e8e8e8', borderRadius: '6px', padding: '14px 16px' }}>
            <div style={{ fontSize: '11px', fontWeight: '800', letterSpacing: '1.5px', color: '#888', marginBottom: '10px' }}>MEETING STATUS</div>
            <div style={{ display: 'flex', gap: '8px', marginBottom: current.status === 'continued' ? '12px' : '0', flexWrap: 'wrap' }}>
              {[['concluded', '✓ Concluded'], ['continued', '→ To Be Continued']].map(([val, label]) => (
                <div key={val} onClick={() => updCurrent('status', current.status === val ? null : val)}
                  style={{ padding: '7px 16px', borderRadius: '20px', cursor: 'pointer', fontSize: '13px', fontWeight: '600', border: '2px solid',
                    borderColor: current.status === val ? '#111' : '#e0e0e0',
                    background: current.status === val ? '#111' : 'transparent',
                    color: current.status === val ? '#fff' : '#666', transition: 'all 0.12s' }}>
                  {label}
                </div>
              ))}
            </div>
            {current.status === 'continued' && (
              <div style={{ marginTop: '12px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 120px', gap: '12px' }}>
                <div>
                  <div style={{ fontSize: '10px', color: '#aaa', marginBottom: '4px', letterSpacing: '1px' }}>NEXT MEETING AGENDA</div>
                  <TA value={current.nextMeetingAgenda || ''} onChange={v => updCurrent('nextMeetingAgenda', v)} placeholder="What to cover next time..." rows={2} />
                </div>
                <div>
                  <div style={{ fontSize: '10px', color: '#aaa', marginBottom: '4px', letterSpacing: '1px' }}>DATE</div>
                  <input type="date" value={current.nextMeetingDate || ''} onChange={e => updCurrent('nextMeetingDate', e.target.value)}
                    style={{ width: '100%', border: '1px solid #e0e0e0', borderRadius: '4px', padding: '6px 8px', fontSize: '12px', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
                  <button onClick={() => {
                    const nm = { ...newMeeting(), title: current.title + ' (cont.)', attendeeList: current.attendeeList, date: current.nextMeetingDate || today, purposes: (current.purposes || []).map(p => ({ ...p, outcome: '', concluded: null })) };
                    const m = [nm, ...meetings]; save(m); setSelId(nm.id);
                  }} style={{ marginTop: '8px', width: '100%', padding: '6px', background: '#111', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', fontFamily: 'inherit', fontSize: '11px', fontWeight: '600' }}>
                    → New Continuation
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.MeetingNotes = MeetingNotes;