// dir-a-reading.jsx — Til Cowork: lesevisning med AI-handlinger + spec-ark.
// Svarer Cowork sine tre spørsmål: layout (liste↔lesevisning), palett/type,
// og HVOR AI-knappene sitter (sorter / oppsummer / slett / meld av).

// AI action button used in the reading toolbar
function AIBtn({ icon, label, primary, danger }) {
  return (
    <button style={{
      display: 'flex', alignItems: 'center', gap: 7, padding: '8px 13px', borderRadius: 11,
      cursor: 'pointer', fontFamily: 'Sora', fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap',
      background: primary ? 'var(--accent-soft)' : 'var(--glass)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      border: '1px solid ' + (primary ? 'color-mix(in oklab, var(--accent) 42%, transparent)' : 'var(--glass-brd)'),
      color: primary ? 'var(--accent)' : danger ? '#ff8a8a' : 'var(--fg)',
    }}>
      <Icon name={icon} s={14} /> {label}
    </button>
  );
}

function AReading() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailA active="people" />
        {/* inbox list */}
        <div style={{ width: 336, flex: 'none', borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 64, flex: 'none', display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px 0 22px', borderBottom: '1px solid var(--line)' }}>
            <span style={{ fontWeight: 600, fontSize: 15 }}>Fra mennesker</span>
            <span className="chip chip-accent" style={{ fontSize: 11, padding: '2px 8px' }}>4</span>
            {/* SORTER lives here — list/category level */}
            <button style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6, padding: '7px 11px', borderRadius: 10,
              background: 'var(--glass)', border: '1px solid var(--glass-brd)', color: 'var(--muted)', cursor: 'pointer', fontFamily: 'Sora', fontSize: 12 }}>
              <Icon name="sort" s={14} /> Sorter
            </button>
          </div>
          <div style={{ flex: 1, overflow: 'hidden' }}>
            {PEOPLE.map((m, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, padding: '15px 18px', alignItems: 'center',
                background: i === 0 ? 'var(--glass)' : 'transparent', borderLeft: i === 0 ? '2px solid var(--accent)' : '2px solid transparent' }}>
                <div className="ava" style={{ width: 36, height: 36, fontSize: 13, background: m.col, color: '#15110d' }}>{m.mono}</div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <span style={{ fontSize: 14, fontWeight: m.unread ? 600 : 500 }}>{m.from}</span>
                    <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{m.time}</span>
                    {m.unread && <span className="dot" />}
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.subj}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* reading view */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          {/* TOOLBAR — per-message AI actions live here, top-right */}
          <div style={{ height: 64, flex: 'none', display: 'flex', alignItems: 'center', gap: 13, padding: '0 22px', borderBottom: '1px solid var(--line)' }}>
            <div className="ava" style={{ width: 36, height: 36, fontSize: 13, background: '#e8a87c', color: '#15110d' }}>IS</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 14.5 }}>Nora Dahl</div>
              <div style={{ fontSize: 12, color: 'var(--faint)' }}>til deg · 09:24</div>
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
              <AIBtn icon="sparkle" label="Oppsummer" primary />
              <AIBtn icon="archive" label="Arkiver" />
              <AIBtn icon="trash" label="Slett" danger />
            </div>
          </div>
          <div style={{ flex: 1, padding: '30px 44px', overflow: 'hidden' }}>
            <h1 style={{ margin: '0 0 18px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.025em' }}>Hytta i påsken</h1>
            {/* AI SUMMARY — appears when Oppsummer is on */}
            <div className="glass-2" style={{ borderRadius: 16, padding: '16px 18px', marginBottom: 28, borderColor: 'color-mix(in oklab, var(--accent) 28%, transparent)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 11 }}>
                <span style={{ color: 'var(--accent)', display: 'flex' }}><Icon name="sparkle" s={15} /></span>
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.03em', textTransform: 'uppercase', color: 'var(--muted)' }}>Oppsummert av drøm</span>
                <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}><Icon name="chevD" s={14} /></span>
              </div>
              <ul style={{ margin: 0, paddingLeft: 18, fontSize: 14, lineHeight: 1.7, color: 'var(--fg)' }}>
                <li>Nora foreslår hytta i uke 15 (påsken) — <b style={{ fontWeight: 600 }}>fredag til mandag</b>.</li>
                <li>Hun booker når du bekrefter.</li>
                <li>Lurer på om du vil ha med ski, eller om det blir for vått.</li>
              </ul>
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.75, color: 'var(--muted)' }}>
              <p style={{ margin: '0 0 16px' }}>Hei!</p>
              <p style={{ margin: '0 0 16px' }}>Høres helt perfekt ut — jeg booker fredag til mandag. Skal jeg ta med skiene, eller blir det for vått nå? Gi meg en lyd så ordner jeg resten.</p>
              <p style={{ margin: 0 }}>Klem, Nora</p>
            </div>
          </div>
          {/* reply bar */}
          <div style={{ padding: '0 44px 26px' }}>
            <div className="glass-2" style={{ borderRadius: 14, padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 14, color: 'var(--faint)', flex: 1 }}>Svar Nora …</span>
              <AIBtn icon="sparkle" label="Foreslå svar" primary />
              <Icon name="reply" s={16} style={{ color: 'var(--muted)' }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Spec-ark · svarer Cowork direkte ─────────────────────────
function ASpec() {
  const swatches = [
    ['--bg', '#060607', 'Bakgrunn'], ['--bg-soft', '#0c0c0e', 'Panel'],
    ['--fg', '#f3f1ef', 'Tekst'], ['--muted', 'rgba(243,…,.56)', 'Dempet'],
    ['--accent', '#ff7d54', 'Aksent'], ['--line', 'rgba(255,…,.07)', 'Hårstrek'],
  ];
  const actions = [
    ['sort', 'Sorter', 'Liste-/kategori-topp (høyre i kolonnehodet) + ⌘K', 'AI re-sorterer innboksen'],
    ['sparkle', 'Oppsummer', 'Lesevisning-verktøylinjen, øverst til høyre', 'TL;DR-kort over meldingen'],
    ['trash', 'Slett', 'Verktøylinjen + sveip på listeelement', 'Rød/varsel-farge'],
    ['mute', 'Meld av', 'Inline-banner — KUN på «Reklame»/nyhetsbrev', 'Skjuler avsender framover'],
  ];
  const types = [
    ['Sora 600 · 34px', 'Skjermtittel', { fontSize: 26, fontWeight: 600 }],
    ['Sora 600 · 15px', 'Navn / emne', { fontSize: 17, fontWeight: 600 }],
    ['Sora 400 · 14px', 'Brødtekst', { fontSize: 15, fontWeight: 400 }],
    ['JetBrains Mono · 13px', 'Koder, beløp, ⌘K', { fontSize: 15, fontFamily: "'JetBrains Mono',monospace" }],
  ];
  return (
    <div className="screen theme-dark" style={{ padding: 0 }}>
      <div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, padding: '40px 48px', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 6 }}>
          <span className="chip chip-accent">Til Cowork</span>
          <span style={{ fontSize: 13, color: 'var(--faint)' }}>Retning A · Stille</span>
        </div>
        <h2 style={{ margin: '0 0 26px', fontSize: 27, fontWeight: 600, letterSpacing: '-0.03em' }}>Layout, palett & hvor AI-knappene sitter</h2>
        <div style={{ display: 'flex', gap: 36, flex: 1, minHeight: 0 }}>
          {/* left: palette + type */}
          <div style={{ width: 360, flex: 'none', display: 'flex', flexDirection: 'column', gap: 26 }}>
            <div>
              <div style={specLabel}>Palett · mørkt tema</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9 }}>
                {swatches.map((s, i) => (
                  <div key={i} className="glass" style={{ borderRadius: 12, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 22, height: 22, borderRadius: 6, flex: 'none', background: s[1].startsWith('rgba') ? (i === 3 ? 'rgba(243,241,239,0.56)' : 'rgba(255,255,255,0.07)') : s[1], border: '1px solid var(--line-strong)' }} />
                    <div style={{ minWidth: 0 }}>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--fg)' }}>{s[0]}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--faint)' }}>{s[2]}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div style={specLabel}>Typografi · Sora + JetBrains Mono</div>
              <div className="glass" style={{ borderRadius: 14, padding: 16, display: 'flex', flexDirection: 'column', gap: 13 }}>
                {types.map((t, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12, borderTop: i ? '1px solid var(--line)' : 'none', paddingTop: i ? 13 : 0 }}>
                    <span style={{ ...t[2], letterSpacing: '-0.01em' }}>Ag</span>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 500 }}>{t[1]}</div>
                      <div className="mono" style={{ fontSize: 10.5, color: 'var(--faint)' }}>{t[0]}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          {/* right: layout map + AI actions */}
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 26, minWidth: 0 }}>
            <div>
              <div style={specLabel}>Layout · tre faste soner</div>
              <div className="glass" style={{ borderRadius: 14, padding: 14, display: 'flex', gap: 10, height: 150 }}>
                <div style={{ width: 40, borderRadius: 9, border: '1px dashed var(--line-strong)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3, color: 'var(--faint)' }}>
                  <Icon name="inbox" s={15} /><span style={{ fontSize: 9, writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>Rail</span>
                </div>
                <div style={{ width: 132, borderRadius: 9, border: '1px solid var(--line-strong)', background: 'var(--glass)', padding: 9, fontSize: 10, color: 'var(--muted)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 8 }}><b style={{ color: 'var(--fg)', fontWeight: 600, fontSize: 11 }}>Liste</b><span className="chip" style={{ marginLeft: 'auto', fontSize: 8, padding: '1px 6px', color: 'var(--accent)', borderColor: 'color-mix(in oklab,var(--accent) 40%,transparent)' }}>Sorter ▾</span></div>
                  {[0, 1, 2].map((r) => <div key={r} style={{ height: 8, borderRadius: 3, background: 'var(--line-strong)', marginBottom: 6, width: ['90%', '70%', '80%'][r] }} />)}
                </div>
                <div style={{ flex: 1, borderRadius: 9, border: '1px solid var(--accent)', background: 'var(--accent-soft)', padding: 9, fontSize: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 8 }}>
                    <b style={{ color: 'var(--fg)', fontWeight: 600, fontSize: 11 }}>Lesevisning</b>
                    <span style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
                      {['sparkle', 'archive', 'trash'].map((ic) => <span key={ic} style={{ width: 17, height: 17, borderRadius: 5, background: 'var(--glass-2)', border: '1px solid var(--glass-brd)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: ic === 'sparkle' ? 'var(--accent)' : ic === 'trash' ? '#ff8a8a' : 'var(--muted)' }}><Icon name={ic} s={10} /></span>)}
                    </span>
                  </div>
                  <div style={{ height: 22, borderRadius: 5, border: '1px solid color-mix(in oklab,var(--accent) 30%,transparent)', display: 'flex', alignItems: 'center', gap: 4, padding: '0 6px', color: 'var(--accent)', fontSize: 8, marginBottom: 7 }}><Icon name="sparkle" s={9} /> AI-oppsummering</div>
                  {[0, 1].map((r) => <div key={r} style={{ height: 7, borderRadius: 3, background: 'var(--line-strong)', marginBottom: 5 }} />)}
                </div>
              </div>
            </div>
            <div style={{ flex: 1, minHeight: 0 }}>
              <div style={specLabel}>AI-handlinger · plassering</div>
              <div className="glass" style={{ borderRadius: 14, overflow: 'hidden' }}>
                {actions.map((a, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 16px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                    <span style={{ width: 34, height: 34, flex: 'none', borderRadius: 10, background: 'var(--glass-2)', border: '1px solid var(--glass-brd)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: a[0] === 'sparkle' ? 'var(--accent)' : a[0] === 'trash' ? '#ff8a8a' : 'var(--fg)' }}><Icon name={a[0]} s={16} /></span>
                    <span style={{ fontSize: 14, fontWeight: 600, width: 96, flex: 'none' }}>{a[1]}</span>
                    <span style={{ fontSize: 13, color: 'var(--muted)', flex: 1 }}>{a[2]}</span>
                    <span style={{ fontSize: 12, color: 'var(--faint)', width: 150, flex: 'none', textAlign: 'right' }}>{a[3]}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
const specLabel = { fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--faint)', marginBottom: 12 };

Object.assign(window, { AReading, ASpec });