// v2-mobile.jsx — iPhone: Oversikt + Billetter. Reuses Phone/StatusBar shell.

// compact 5-slot tab bar for the 6-cat IA (Mer collapses the rest)
function TabBarV2({ active }) {
  const tabs = [
    { key: 'overview', icon: 'grid' },
    { key: 'people', icon: 'people' },
    { key: 'buy', icon: 'bag' },
    { key: 'tickets', icon: 'ticket' },
    { key: 'more', icon: 'drag' },
  ];
  return (
    <div style={{ flex: 'none', height: 78, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'flex-start', padding: '13px 18px 0', gap: 4 }}>
      {tabs.map((t) => (
        <div key={t.key} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, color: t.key === active ? 'var(--accent)' : 'var(--faint)' }}>
          <IconX name={t.icon} s={21} />
          <span style={{ width: 4, height: 4, borderRadius: 2, background: t.key === active ? 'var(--accent)' : 'transparent' }} />
        </div>
      ))}
    </div>
  );
}

// abstract QR block (deterministic pattern, not a real code)
function QR({ size = 96 }) {
  const cells = 11, c = size / cells;
  const on = (x, y) => {
    if ((x < 3 && y < 3) || (x > cells - 4 && y < 3) || (x < 3 && y > cells - 4)) return (x === 0 || x === 2 || y === 0 || y === 2 || x === cells - 1 || x === cells - 3 || y === cells - 1 || y === cells - 3) ? false : (x === 1 && y === 1) || (x === cells - 2 && y === 1) || (x === 1 && y === cells - 2);
    return (x * 7 + y * 13 + x * y * 3) % 5 < 2;
  };
  const corner = (cx, cy) => (
    <g key={cx + '-' + cy}>
      <rect x={cx * c} y={cy * c} width={c * 3} height={c * 3} rx="2" fill="none" stroke="#15110d" strokeWidth={c * 0.6} />
      <rect x={(cx + 1) * c} y={(cy + 1) * c} width={c} height={c} fill="#15110d" />
    </g>
  );
  const dots = [];
  for (let y = 0; y < cells; y++) for (let x = 0; x < cells; x++) if (on(x, y) && !((x < 3 && y < 3) || (x > cells - 4 && y < 3) || (x < 3 && y > cells - 4))) dots.push(<rect key={x + ',' + y} x={x * c + c * 0.12} y={y * c + c * 0.12} width={c * 0.76} height={c * 0.76} rx={c * 0.2} fill="#15110d" />);
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ background: '#f3f1ef', borderRadius: 12, padding: 6 }}>
      {dots}{corner(0, 0)}{corner(cells - 3, 0)}{corner(0, cells - 3)}
    </svg>
  );
}

// ── iPhone · Oversikt ────────────────────────────────────────
function MOverview() {
  const totalCount = CATSTAT.reduce((a, c) => a + c.count, 0);
  const max = Math.max(...CATSTAT.map((c) => c.mb));
  return (
    <Phone theme="theme-dark" amb="amb-dark">
      <StatusBar />
      <div style={{ flex: 1, overflow: 'hidden', padding: '6px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 9, marginBottom: 2 }}>
          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: '-0.03em' }}>Oversikt</h1>
          <span className="chip chip-accent" style={{ marginBottom: 5, fontSize: 11 }}>{totalCount} venter</span>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 16 }}>example-mail.com · Gmail — samlet</div>
        {/* storage card */}
        <div className="glass" style={{ borderRadius: 18, padding: '16px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 13 }}>
            <span style={{ ...v2Label, fontSize: 10.5 }}>Lagringsplass</span>
            <span className="mono" style={{ marginLeft: 'auto', fontSize: 13, color: 'var(--fg)' }}>0,95 GB</span>
          </div>
          {/* stacked bar */}
          <div style={{ display: 'flex', height: 12, borderRadius: 7, overflow: 'hidden', gap: 2 }}>
            {CATSTAT.slice().sort((a, b) => b.mb - a.mb).map((c) => (
              <div key={c.key} style={{ width: `${(c.mb / 971) * 100}%`, background: c.col }} />
            ))}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 14px', marginTop: 13 }}>
            {CATSTAT.slice().sort((a, b) => b.mb - a.mb).slice(0, 4).map((c) => (
              <div key={c.key} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: 3, background: c.col }} />
                <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>{c.label}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--faint)' }}>{c.mb}M</span>
              </div>
            ))}
          </div>
        </div>
        {/* category list */}
        <div style={{ ...v2Label, fontSize: 10.5, margin: '18px 2px 11px' }}>Seks kategorier</div>
        <div className="glass" style={{ borderRadius: 18, overflow: 'hidden' }}>
          {CATSTAT.map((c, i) => (
            <div key={c.key} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 15px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
              <span style={{ width: 34, height: 34, flex: 'none', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: c.col, background: 'color-mix(in oklab, ' + c.col + ' 16%, transparent)' }}><IconX name={c.icon} s={17} /></span>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{c.label}</div>
                <div style={{ fontSize: 11.5, color: 'var(--faint)' }}>{c.note}</div>
              </div>
              {c.count > 0
                ? <span className="chip chip-accent" style={{ fontSize: 11 }}>{c.count}</span>
                : <span style={{ color: 'var(--faint)', display: 'flex' }}><IconX name="check" s={15} /></span>}
            </div>
          ))}
        </div>
      </div>
      <TabBarV2 active="overview" />
    </Phone>
  );
}

// ── iPhone · Billetter ───────────────────────────────────────
function MTickets() {
  return (
    <Phone theme="theme-dark" amb="amb-dark">
      <StatusBar />
      <div style={{ flex: 1, overflow: 'hidden', padding: '6px 18px 0' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 9, marginBottom: 2 }}>
          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: '-0.03em' }}>Billetter</h1>
          <span className="chip chip-accent" style={{ marginBottom: 5, fontSize: 11 }}>2 kommende</span>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 6 }}>
          <IconX name="calendar" s={13} style={{ color: '#7fb088' }} /> Lagt i Apple Kalender automatisk
        </div>
        {/* featured ticket */}
        <div className="glass-2" style={{ borderRadius: 20, padding: 18, marginBottom: 13 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 13 }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, color: 'var(--faint)', marginBottom: 3 }}>{TICKETS[0].org}</div>
              <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>{TICKETS[0].name}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--accent)', marginBottom: 4 }}>
                <IconX name="calendar" s={13} /> {TICKETS[0].when}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--muted)' }}>
                <IconX name="pin" s={13} /> {TICKETS[0].where}
              </div>
            </div>
            <QR size={92} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 14, paddingTop: 13, borderTop: '1px solid var(--line)' }}>
            <span className="chip"><IconX name="ticket" s={13} /> {TICKETS[0].seat}</span>
            <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>om {TICKETS[0].days} dager</span>
          </div>
        </div>
        {/* upcoming list */}
        <div style={{ ...v2Label, fontSize: 10.5, margin: '4px 2px 11px' }}>Senere</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {TICKETS.slice(1).map((t, i) => (
            <div key={i} className="glass" style={{ borderRadius: 15, padding: '13px 15px', display: 'flex', alignItems: 'center', gap: 13 }}>
              <div style={{ width: 42, height: 42, flex: 'none', borderRadius: 12, background: 'color-mix(in oklab, ' + t.col + ' 30%, transparent)',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'var(--fg)' }}>
                <span style={{ fontSize: 9, opacity: 0.7 }}>{t.when.split(' ')[0].toUpperCase()}</span>
                <span style={{ fontSize: 16, fontWeight: 700, lineHeight: 1 }}>{t.when.split(' ')[1]}</span>
              </div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{t.name}</div>
                <div style={{ fontSize: 12, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.org} · {t.where}</div>
              </div>
              <IconX name="qr" s={18} style={{ color: 'var(--faint)' }} />
            </div>
          ))}
        </div>
      </div>
      <TabBarV2 active="tickets" />
    </Phone>
  );
}

Object.assign(window, { TabBarV2, QR, MOverview, MTickets });