// v2-overview.jsx — Oversiktspanel med diagram.
// Målbilde: antall e-poster per kategori (hva venter) + lagringsplass per
// kategori (hva tar plass), fremstilt som diagram for rask oversikt. Under:
// de seks kategoriene som IA-rutenett.

// donut for storage split
function StorageDonut({ data, total }) {
  const R = 58, SW = 16, C = 2 * Math.PI * R;
  let acc = 0;
  return (
    <svg width="148" height="148" viewBox="0 0 148 148">
      <g transform="rotate(-90 74 74)">
        <circle cx="74" cy="74" r={R} fill="none" stroke="var(--line)" strokeWidth={SW} />
        {data.map((d, i) => {
          const frac = d.mb / total;
          const seg = <circle key={i} cx="74" cy="74" r={R} fill="none" stroke={d.col} strokeWidth={SW}
            strokeDasharray={`${C * frac - 2.5} ${C}`} strokeDashoffset={-C * acc} strokeLinecap="round" />;
          acc += frac;
          return seg;
        })}
      </g>
      <text x="74" y="68" textAnchor="middle" className="mono" fontSize="26" fontWeight="600" fill="var(--fg)">0,95</text>
      <text x="74" y="86" textAnchor="middle" fontSize="11" fill="var(--faint)">GB brukt</text>
    </svg>
  );
}

// Dagens beste tilbud (Reklame) — rangert etter avslag + eksklusivitet
const DEALS = [
  { merch: 'Komplett', what: 'Gaming-skjerm 27″ 165Hz', off: 40, excl: true },
  { merch: 'XXL',      what: 'Salomon løpesko',          off: 25, excl: false },
];

// Per-category card on Oversikt — surfaces meaningful signals, not storage MB.
function OverviewCard({ c, lead }) {
  const ava = (txt, col, sq) => (
    <div className="ava" style={{ width: 24, height: 24, flex: 'none', borderRadius: sq ? 7 : '50%', fontSize: 10, background: col, color: '#15110d' }}>{txt}</div>
  );
  const row = (key, node) => (
    <div key={key} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12.5, color: 'var(--fg)' }}>{node}</div>
  );
  const grow = (node) => <span style={{ flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{node}</span>;

  let body, foot;
  if (c.key === 'people') {
    body = CONTACTS.slice(0, 2).map((p) => row(p.name, <>{ava(p.mono, p.col)}{grow(p.name)}<span className="mono" style={{ color: 'var(--faint)', fontSize: 11.5 }}>{p.n} e-post</span></>));
    foot = ['3 venter på svar', false, 'arrow'];
  } else if (c.key === 'biz') {
    body = BIZ.slice(0, 2).map((b) => row(b.from, <>{ava(b.mono, b.col, true)}{grow(b.from)}<span className={b.hot ? 'chip chip-accent' : 'chip'} style={{ fontSize: 10.5, padding: '2px 8px' }}>{b.action}</span></>));
    foot = ['2 åpne saker', false, 'arrow'];
  } else if (c.key === 'verify') {
    body = [
      <div key="v" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{ fontSize: 21, fontWeight: 600, letterSpacing: '0.06em' }}>084 219</span>
        <span className="chip" style={{ marginLeft: 'auto', fontSize: 11 }}><IconX name="clock" s={12} /> 38 s</span>
      </div>,
      <div key="s" style={{ fontSize: 11.5, color: 'var(--faint)' }}>Github · engangskode</div>,
    ];
    foot = ['Kopiér koden', true, 'copy'];
  } else if (c.key === 'promo') {
    body = DEALS.map((d) => row(d.merch, <>
      <span className="chip chip-accent" style={{ fontSize: 10.5, padding: '2px 7px', fontWeight: 600 }}>−{d.off}%</span>
      {grow(<><b style={{ fontWeight: 600 }}>{d.merch}</b> · {d.what}</>)}
      {d.excl ? <span style={{ color: 'var(--accent)', display: 'flex' }} title="eksklusivt"><IconX name="star" s={13} /></span> : null}
    </>));
    foot = ['via Prisjakt · dagens utdrag', false, 'arrow'];
  } else if (c.key === 'buy') {
    body = [
      <div key="t" className="mono" style={{ fontSize: 21, fontWeight: 600, letterSpacing: '-0.01em' }}>14 380<span style={{ fontSize: 12, color: 'var(--muted)' }}> kr i mai</span></div>,
      <div key="r" style={{ fontSize: 11.5, color: 'var(--faint)' }}>248 kvitteringer bevart i 7 år</div>,
    ];
    foot = ['Åpne kjøpsarkiv', true, 'archive'];
  } else { // tickets
    const t = TICKETS[0];
    body = [
      <div key="ev" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 30, height: 30, flex: 'none', borderRadius: 9, background: 'color-mix(in oklab, ' + c.col + ' 30%, transparent)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', lineHeight: 1 }}>
          <span style={{ fontSize: 8, opacity: 0.75 }}>JUN</span><span style={{ fontSize: 13, fontWeight: 700 }}>7</span>
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.name}</div>
          <div style={{ fontSize: 11, color: 'var(--faint)' }}>{t.when}</div>
        </div>
      </div>,
    ];
    foot = ['Til kalender', true, 'calendar'];
  }

  return (
    <div className="glass" style={{ borderRadius: 16, padding: '15px 17px', display: 'flex', flexDirection: 'column',
      ...(lead ? { borderColor: 'color-mix(in oklab, var(--accent) 32%, transparent)' } : {}) }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 13 }}>
        <span style={{ width: 36, height: 36, flex: 'none', borderRadius: 11, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: c.col, background: 'color-mix(in oklab, ' + c.col + ' 16%, transparent)', border: '1px solid color-mix(in oklab, ' + c.col + ' 30%, transparent)' }}>
          <IconX name={c.icon} s={18} />
        </span>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 600 }}>{c.label}</div>
          <div style={{ fontSize: 11.5, color: 'var(--faint)' }}>{c.sub}</div>
        </div>
        {c.count > 0
          ? <span className="chip chip-accent" style={{ fontSize: 11 }}>{c.count} ny</span>
          : <span style={{ color: 'var(--faint)', display: 'flex' }}><IconX name="check" s={16} /></span>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>{body}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)',
        fontSize: 12, fontWeight: foot[1] ? 600 : 500, color: foot[1] ? 'var(--accent)' : 'var(--faint)', cursor: 'pointer' }}>
        <IconX name={foot[2]} s={13} /> {foot[0]}
        <span style={{ marginLeft: 'auto', display: 'flex' }}><IconX name="chevR" s={13} /></span>
      </div>
    </div>
  );
}

// per-category descriptor line shown under the name
const CAT_SUB = { people: 'Hvem du får mest av', biz: 'Krever handling', verify: 'Aktiv kode', promo: 'Dagens beste tilbud', buy: 'Bevart · søkbart', tickets: 'Kommende arrangementer' };

function AOverview() {
  const totalCount = CATSTAT.reduce((a, c) => a + c.count, 0);
  const totalMb = CATSTAT.reduce((a, c) => a + c.mb, 0);
  const maxCount = Math.max(...CATSTAT.map((c) => c.count));
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="overview" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <TopbarV2 title="Oversikt" sub="example-mail.com · Gmail — samlet" />
          <div style={{ flex: 1, padding: '30px 36px', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            {/* heading */}
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 3 }}>
              <h1 style={{ margin: 0, fontSize: 33, fontWeight: 600, letterSpacing: '-0.03em' }}>Oversikt</h1>
              <span className="chip chip-accent" style={{ marginBottom: 6 }}>{totalCount} venter på behandling</span>
            </div>
            <div style={{ color: 'var(--muted)', fontSize: 14, marginBottom: 22 }}>Innboksen er en arbeidsflate, ikke et arkiv — målet er at den blir tom.</div>

            {/* two charts */}
            <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 18, marginBottom: 22 }}>
              {/* count bars */}
              <div className="glass" style={{ borderRadius: 20, padding: '20px 22px' }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 18 }}>
                  <span style={v2Label}>Venter på behandling</span>
                  <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>antall e-poster</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {CATSTAT.map((c) => (
                    <div key={c.key} style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                      <span style={{ width: 92, flex: 'none', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--fg)' }}>
                        <span style={{ color: c.col, display: 'flex' }}><IconX name={c.icon} s={15} /></span>{c.label}
                      </span>
                      <div style={{ flex: 1, height: 12, borderRadius: 7, background: 'var(--glass-2)', overflow: 'hidden' }}>
                        <div style={{ width: `${c.count ? Math.max(8, (c.count / maxCount) * 100) : 0}%`, height: '100%', borderRadius: 7,
                          background: c.count ? c.col : 'transparent' }} />
                      </div>
                      <span className="mono tnum" style={{ width: 22, textAlign: 'right', fontSize: 13, color: c.count ? 'var(--fg)' : 'var(--faint)' }}>{c.count}</span>
                    </div>
                  ))}
                </div>
              </div>
              {/* storage donut */}
              <div className="glass" style={{ borderRadius: 20, padding: '20px 22px', display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
                  <span style={v2Label}>Lagringsplass</span>
                  <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>per kategori</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18, flex: 1 }}>
                  <StorageDonut data={CATSTAT} total={totalMb} />
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 9 }}>
                    {CATSTAT.slice().sort((a, b) => b.mb - a.mb).map((c) => (
                      <div key={c.key} style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <span style={{ width: 9, height: 9, borderRadius: 3, background: c.col, flex: 'none' }} />
                        <span style={{ fontSize: 12.5, color: 'var(--muted)' }}>{c.label}</span>
                        <span className="mono tnum" style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--fg)' }}>{c.mb} MB</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* IA grid — the six categories */}
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 13 }}>
              <span style={v2Label}>Seks kategorier</span>
              <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>det mest relevante per kategori — ikke en innboks</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, flex: 1, minHeight: 0 }}>
              {CATSTAT.map((c, i) => (
                <OverviewCard key={c.key} c={{ ...c, sub: CAT_SUB[c.key] }} lead={i === 0} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AOverview, StorageDonut });