// v2-shared.jsx — Neste versjon · Stille
// Extends the locked Retning A language to the målbilde's 6-category IA.
// New icons (delegates unknown names to the original Icon), CATS6, a 6-slot
// rail, a topbar with account switch + Skriv, and realistic Norwegian mock data.

// ── Icons (new) + fallback to base Icon ──────────────────────
function IconX({ name, s = 18, sw = 1.5, style }) {
  const extra = {
    grid:     <><rect x="3.5" y="3.5" width="6" height="6" rx="1.5"/><rect x="12.5" y="3.5" width="6" height="6" rx="1.5"/><rect x="3.5" y="12.5" width="6" height="6" rx="1.5"/><rect x="12.5" y="12.5" width="6" height="6" rx="1.5"/></>,
    building: <><path d="M4 19.5V5.5A1.5 1.5 0 0 1 5.5 4h6A1.5 1.5 0 0 1 13 5.5V19.5"/><path d="M13 9.5h3.5A1.5 1.5 0 0 1 18 11v8.5"/><path d="M2.5 19.5h17"/><path d="M6.5 8h3M6.5 11.5h3M6.5 15h3"/></>,
    send:     <><path d="M19 3 9 13"/><path d="M19 3l-6.2 16.5-3.6-7.6L1.5 8.3 19 3Z"/></>,
    pencil:   <><path d="M14.3 3.6l4.1 4.1L7 19.1l-4.6 1 1-4.6L14.3 3.6Z"/><path d="M12.4 5.5l4.1 4.1"/></>,
    bell:     <><path d="M6 9a5 5 0 0 1 10 0c0 4 1.4 5.6 2 6.2H4c.6-.6 2-2.2 2-6.2Z"/><path d="M9 18.5a2 2 0 0 0 4 0"/></>,
    mail:     <><rect x="2.5" y="5" width="17" height="12" rx="2.2"/><path d="m3.2 6.5 7.8 6 7.8-6"/></>,
    eye:      <><path d="M2 11s3.4-6 9-6 9 6 9 6-3.4 6-9 6-9-6-9-6Z"/><circle cx="11" cy="11" r="2.4"/></>,
    eyeoff:   <><path d="M2 11s3.4-6 9-6c1.4 0 2.7.3 3.8.8M19.6 8.4C20.5 9.4 21 11 21 11s-3.4 6-9 6c-1.2 0-2.4-.3-3.4-.7"/><path d="M9.3 9.3a2.4 2.4 0 0 0 3.4 3.4"/><path d="M3 3.2 19 19"/></>,
    layers:   <><path d="M11 3 3 7l8 4 8-4-8-4Z"/><path d="M3 11l8 4 8-4M3 15l8 4 8-4"/></>,
    gear:     <><circle cx="11" cy="11" r="3"/><path d="M11 1.8v2.4M11 17.8v2.4M3.5 6.5l2 1.2M16.5 13.3l2 1.2M3.5 15.5l2-1.2M16.5 8.7l2-1.2"/></>,
    settings: <><path d="M3 6.5h10M16 6.5h3M3 15.5h6M12 15.5h7"/><circle cx="14.5" cy="6.5" r="2.2"/><circle cx="9.5" cy="15.5" r="2.2"/></>,
    qr:       <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="13" y="3" width="6" height="6" rx="1"/><rect x="3" y="13" width="6" height="6" rx="1"/><path d="M13 13h2.5v2.5M19 13v6M13 19h6M16 16h0"/></>,
    drag:     <><circle cx="8" cy="6" r="1.1"/><circle cx="8" cy="11" r="1.1"/><circle cx="8" cy="16" r="1.1"/><circle cx="14" cy="6" r="1.1"/><circle cx="14" cy="11" r="1.1"/><circle cx="14" cy="16" r="1.1"/></>,
    swap:     <><path d="M6 7h11M14 4l3 3-3 3M16 15H5M8 12l-3 3 3 3"/></>,
  }[name];
  if (extra) {
    return (
      <svg width={s} height={s} viewBox="0 0 22 22" fill="none" stroke="currentColor"
        strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>{extra}</svg>
    );
  }
  return <Icon name={name} s={s} sw={sw} style={style} />;
}

// ── 6-category IA (the målbilde model) ───────────────────────
const CATS6 = [
  { key: 'people',  label: 'Mennesker',     icon: 'people',   col: '#e8a87c', n: 4,   rule: 'beholdes' },
  { key: 'biz',     label: 'Bedrifter',     icon: 'building', col: '#7fb088', n: 3,   rule: 'til handlet' },
  { key: 'verify',  label: 'Verifisering',  icon: 'shield',   col: '#d99a6c', n: 1,   rule: 'auto-slett' },
  { key: 'promo',   label: 'Reklame',       icon: 'tag',      col: '#b0a0c8', n: 0,   rule: 'daglig utdrag' },
  { key: 'buy',     label: 'Kjøp',          icon: 'bag',      col: '#7aa0a0', n: 0,   rule: 'bevares' },
  { key: 'tickets', label: 'Billetter',     icon: 'ticket',   col: '#c89a5c', n: 2,   rule: 'til kalender' },
];

// storage per category (MB) — kvitteringer dominate (bevares permanent)
const CATSTAT = [
  { key: 'people',  label: 'Mennesker',    icon: 'people',   col: '#e8a87c', count: 4, mb: 210, note: '3 du ikke har svart' },
  { key: 'biz',     label: 'Bedrifter',    icon: 'building', col: '#7fb088', count: 3, mb: 180, note: '2 krever handling' },
  { key: 'verify',  label: 'Verifisering', icon: 'shield',   col: '#d99a6c', count: 1, mb: 1,   note: 'utløper om 38 s' },
  { key: 'promo',   label: 'Reklame',      icon: 'tag',      col: '#b0a0c8', count: 0, mb: 64,  note: '138 ryddet bort' },
  { key: 'buy',     label: 'Kjøp',         icon: 'bag',      col: '#7aa0a0', count: 0, mb: 420, note: 'bevart i 7 år' },
  { key: 'tickets', label: 'Billetter',    icon: 'ticket',   col: '#c89a5c', count: 2, mb: 95,  note: '2 kommende' },
];

// ── New mock data ────────────────────────────────────────────
const BIZ = [
  { from: 'DNB',         mono: 'DNB', col: '#1f7a4d', subj: 'Signering kreves — lånedokument', need: 'Signer innen fre 6. jun', age: '2 dager', action: 'Signer', hot: true,  unread: true },
  { from: 'Telenor',     mono: 'T',   col: '#2a8fd4', subj: 'Faktura forfaller snart',          need: 'Forfall 10. jun · 449 kr', age: '1 dag',  action: 'Betal',  hot: false, unread: true },
  { from: 'Fjordkraft',  mono: 'F',   col: '#0f7d7d', subj: 'Bekreft måleravlesning',           need: 'Svar ønskes',              age: '4 dager', action: 'Svar',   hot: false, unread: false },
];

const TICKETS = [
  { name: 'Et dukkehjem', org: 'Nationaltheatret', when: 'lør 7. jun · 19:00', where: 'Hovedscenen, Oslo', seat: 'Rad 7 · plass 14–15', col: '#8a5cc4', days: 4 },
  { name: 'SK1463 OSL→CPH', org: 'SAS', when: 'fre 6. jun · 07:45', where: 'Gate D32 · OSL', seat: 'Sete 14A', col: '#163a6b', days: 3 },
  { name: 'Cabaret', org: 'Det Norske Teatret', when: 'tor 19. jun · 18:00', where: 'Scene 2, Oslo', seat: 'Rad 3 · plass 8', col: '#b8543e', days: 16 },
];

const DRAFTS = [
  { to: 'Nora Dahl', col: '#e8a87c', subj: 'Re: Hytta i påsken',       prev: 'Tar med skiene — vi kan alltids la dem stå hvis…', when: '2 min siden', acct: 'example-mail.com' },
  { to: 'DNB',            col: '#1f7a4d', subj: 'Spørsmål om lånebetingelser', prev: 'Hei, jeg lurer på om det er mulig å justere…',   when: 'i går',       acct: 'example-mail.com' },
  { to: 'Kari Nymoen',    col: '#a8d8b9', subj: 'Kontrakt — utkast',          prev: 'Vedlagt finner du et første utkast til avtalen…',  when: 'man',         acct: 'gmail' },
];

const SENT = [
  { to: 'Per Strand',        col: '#9ec7e8', subj: 'Re: Lunsj torsdag?',        prev: 'Tim Wendelboe kl 12 funker fint! Gleder meg.',     when: '09:32', acct: 'example-mail.com' },
  { to: 'Oda kundeservice',  col: '#d14d4d', subj: 'Mangler vare i levering',   prev: 'Hei, det manglet en pose i dagens levering…',      when: 'i går', acct: 'gmail' },
  { to: 'Mamma',             col: '#c8b6e2', subj: 'Re: Bilder fra søndag',     prev: 'Så fine bilder! Tusen takk skal du ha 💛',         when: 'i går', acct: 'example-mail.com' },
  { to: 'Thon Hotel',        col: '#b89a4e', subj: 'Bekreftelse på reservasjon', prev: 'Bekrefter to netter, innsjekk lørdag 15:00.',    when: 'man',   acct: 'example-mail.com' },
];

const CONTACTS = [
  { name: 'Nora Dahl', mono: 'IS', col: '#e8a87c', n: 48, always: true },
  { name: 'Mamma',          mono: 'M',  col: '#c8b6e2', n: 31, always: true },
  { name: 'Kari Nymoen',    mono: 'KN', col: '#a8d8b9', n: 22, always: false },
  { name: 'Per Strand',     mono: 'JB', col: '#9ec7e8', n: 17, always: false },
];

const EXPECTED = [
  { txt: 'Svar fra Kari om kontrakten',        match: 'Matcher: Kari Nymoen', live: true },
  { txt: 'Pakkelevering fra Komplett',         match: 'Følger sporing · ingen treff ennå', live: false },
  { txt: 'Tilbud på sommerhytte fra Privatmegleren', match: 'Følger · ingen treff ennå', live: false },
];

// ── Category rail (kanonisk: 5 slots) ────────────────────────
// `omit` fjerner kategorier fra raden. Send omit={['verify']} overalt —
// verifisering er ikke lenger en kategori, men en flyktig forside-overflate
// (se v3-verifycode.jsx). De fem kanoniske: Mennesker · Bedrifter · Reklame
// · Kjøp · Billetter.
function RailV2({ active = 'overview', omit = [] }) {
  const railItem = (key, icon, badge) => {
    const on = key === active;
    return (
      <div key={key} title={key} style={{ width: 46, height: 46, borderRadius: 13, display: 'flex', alignItems: 'center',
        justifyContent: 'center', color: on ? 'var(--accent)' : 'var(--faint)', position: 'relative',
        background: on ? 'var(--accent-soft)' : 'transparent',
        border: on ? '1px solid color-mix(in oklab, var(--accent) 35%, transparent)' : '1px solid transparent' }}>
        <IconX name={icon} s={19} />
        {badge ? <span style={{ position: 'absolute', top: 6, right: 7, minWidth: 5, height: 5, borderRadius: 3, background: on ? 'var(--accent)' : 'var(--ghost)' }} /> : null}
      </div>
    );
  };
  return (
    <div style={{ width: 74, flex: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '22px 0 18px', borderRight: '1px solid var(--line)', gap: 4, position: 'relative', zIndex: 2 }}>
      <div style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--accent)', display: 'flex',
        alignItems: 'center', justifyContent: 'center', color: '#1a0d06', fontWeight: 700, fontSize: 17, marginBottom: 14 }}>d</div>
      {railItem('overview', 'grid', false)}
      <div style={{ width: 26, height: 1, background: 'var(--line)', margin: '8px 0' }} />
      {CATS6.filter((c) => !omit.includes(c.key)).map((c) => railItem(c.key, c.icon, c.n > 0))}
      <div style={{ width: 26, height: 1, background: 'var(--line)', margin: '8px 0' }} />
      {railItem('sent', 'send', false)}
      {railItem('drafts', 'pencil', false)}
      <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
        {railItem('settings', 'gear', false)}
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'linear-gradient(135deg,#e8a87c,#c8866a)' }} />
      </div>
    </div>
  );
}

// ── Topbar with account switch + Skriv ───────────────────────
function TopbarV2({ title, sub, placeholder = 'Søk i alt — beløp, butikk, person, kode…', account = 'example-mail.com' }) {
  return (
    <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 16, padding: '0 22px 0 26px',
      borderBottom: '1px solid var(--line)', position: 'relative', zIndex: 2 }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.02em' }}>{title}</div>
        {sub ? <div style={{ fontSize: 11, color: 'var(--faint)', marginTop: 1 }}>{sub}</div> : null}
      </div>
      <div className="glass" style={{ marginLeft: 14, flex: 1, maxWidth: 420, height: 38, borderRadius: 11, display: 'flex',
        alignItems: 'center', gap: 10, padding: '0 14px', color: 'var(--faint)' }}>
        <IconX name="search" s={16} />
        <span style={{ fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{placeholder}</span>
        <span className="kbd" style={{ marginLeft: 'auto' }}>⌘K</span>
      </div>
      <div className="glass" style={{ marginLeft: 'auto', height: 38, borderRadius: 11, display: 'flex', alignItems: 'center', gap: 9, padding: '0 12px' }}>
        <span style={{ width: 7, height: 7, borderRadius: 4, background: '#7fb088' }} />
        <span style={{ fontSize: 12.5, color: 'var(--fg)' }}>{account}</span>
        <span style={{ color: 'var(--faint)', display: 'flex' }}><IconX name="chevD" s={14} /></span>
      </div>
      <button style={{ height: 38, padding: '0 15px', borderRadius: 11, background: 'var(--accent)', color: '#1a0d06',
        border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 7 }}>
        <IconX name="pencil" s={15} /> Skriv
      </button>
    </div>
  );
}

// section label used across v2 screens
const v2Label = { fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--faint)' };

Object.assign(window, { IconX, CATS6, CATSTAT, BIZ, TICKETS, DRAFTS, SENT, CONTACTS, EXPECTED, RailV2, TopbarV2, v2Label });