// prototype-ui.jsx — Hi-fi UI primitives på OsloKollega brand-tokens.
// Gjenbruker SK-tokens fra sketch.jsx (Brand, OkLogo, Fjelltopper er allerede på window).

const UI_STYLE_ID = 'ok-ui-styles';
if (typeof document !== 'undefined' && !document.getElementById(UI_STYLE_ID)) {
  const s = document.createElement('style');
  s.id = UI_STYLE_ID;
  s.textContent = `
    *,*::before,*::after{box-sizing:border-box}
    body,html{font-family:'Poppins',system-ui,sans-serif;color:${SK.ink};background:${SK.iceBlueLight}}
    button{font-family:inherit}
    /* ── BUTTON ────────────────────────────────────────────────────── */
    .ok-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;
      border:1px solid ${SK.ink};background:${SK.pureWhite};color:${SK.ink};font-size:12.5px;
      font-weight:500;letter-spacing:0.005em;cursor:pointer;transition:all .15s;white-space:nowrap;
      font-family:'Poppins',sans-serif}
    .ok-btn:hover{background:${SK.ink};color:${SK.pureWhite}}
    .ok-btn--primary{background:${SK.ink};color:${SK.pureWhite}}
    .ok-btn--primary:hover{background:#1a2455;color:${SK.pureWhite}}
    .ok-btn--accent{background:${SK.coral};color:${SK.pureWhite};border-color:${SK.coral}}
    .ok-btn--accent:hover{background:#d33e47;border-color:#d33e47}
    .ok-btn--ghost{border-color:transparent;background:transparent}
    .ok-btn--ghost:hover{background:${SK.lightBlue};color:${SK.ink}}
    .ok-btn--sm{padding:4px 10px;font-size:11px}
    .ok-btn--icon{padding:6px 8px;width:30px;justify-content:center}
    .ok-btn:disabled{opacity:.5;cursor:not-allowed}
    /* ── CARD ─────────────────────────────────────────────────────── */
    .ok-card{background:${SK.pureWhite};border-radius:12px;
      box-shadow:0 1px 0 rgba(17,24,61,.04),0 2px 12px rgba(17,24,61,.06);
      border:1px solid rgba(17,24,61,.06)}
    .ok-card--flat{box-shadow:none;border:1px solid rgba(17,24,61,.1)}
    .ok-card__hd{padding:14px 18px 8px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
    .ok-card__hd h3{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-0.005em}
    .ok-card__bd{padding:0 18px 14px}
    /* ── PILL / STATUS ────────────────────────────────────────────── */
    .ok-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
      font-size:10.5px;font-weight:600;letter-spacing:0.01em;line-height:1.4;
      font-family:'Poppins',sans-serif;white-space:nowrap}
    .ok-pill__dot{width:6px;height:6px;border-radius:50%}
    .ok-pill--draft  {background:${SK.lightBlue};color:${SK.ink}}
    .ok-pill--draft   .ok-pill__dot{background:#6f7795}
    .ok-pill--track  {background:#dbeed8;color:${SK.success}}
    .ok-pill--track   .ok-pill__dot{background:${SK.success}}
    .ok-pill--risk   {background:#fdeac8;color:#8e5a05}
    .ok-pill--risk    .ok-pill__dot{background:${SK.warn}}
    .ok-pill--delay  {background:${SK.lightCoral};color:#a01a25}
    .ok-pill--delay   .ok-pill__dot{background:${SK.coral}}
    .ok-pill--done   {background:${SK.iceBlue};color:${SK.ink}}
    .ok-pill--done    .ok-pill__dot{background:${SK.ink}}
    .ok-pill--neutral{background:${SK.lightBlue};color:${SK.ink}}
    .ok-pill--neutral .ok-pill__dot{background:${SK.ink}}
    /* ── TABLE ────────────────────────────────────────────────────── */
    .ok-table{width:100%;border-collapse:collapse;font-size:12.5px}
    .ok-table th{text-align:left;padding:10px 14px;background:${SK.iceBlueLight};color:${SK.soft};
      font-weight:600;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;
      border-bottom:1px solid rgba(17,24,61,.08);user-select:none;cursor:pointer;white-space:nowrap}
    .ok-table th:hover{color:${SK.ink}}
    .ok-table th.sorted{color:${SK.ink}}
    .ok-table td{padding:12px 14px;border-bottom:1px solid rgba(17,24,61,.06);vertical-align:middle}
    .ok-table tr{cursor:pointer;transition:background .12s}
    .ok-table tbody tr:hover{background:${SK.iceBlueLight}}
    .ok-table tbody tr:last-child td{border-bottom:0}
    /* ── PROGRESS ─────────────────────────────────────────────────── */
    .ok-progress{height:6px;background:${SK.lightBlue};border-radius:99px;overflow:hidden;position:relative}
    .ok-progress__fill{position:absolute;top:0;left:0;bottom:0;background:${SK.ink};border-radius:99px;
      transition:width .4s cubic-bezier(.2,.7,.3,1)}
    .ok-progress--risk .ok-progress__fill{background:${SK.warn}}
    .ok-progress--delay .ok-progress__fill{background:${SK.coral}}
    .ok-progress--track .ok-progress__fill{background:${SK.success}}
    /* ── INPUT ────────────────────────────────────────────────────── */
    .ok-input{width:100%;padding:8px 12px;border-radius:8px;border:1px solid rgba(17,24,61,.18);
      background:${SK.pureWhite};font-size:12.5px;font-family:'Poppins',sans-serif;color:${SK.ink};
      transition:border-color .15s,box-shadow .15s}
    .ok-input:focus{outline:none;border-color:${SK.ink};box-shadow:0 0 0 3px rgba(17,24,61,.08)}
    .ok-input--search{padding-left:32px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2311183d' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
      background-repeat:no-repeat;background-position:11px center}
    /* ── KPI ──────────────────────────────────────────────────────── */
    .ok-kpi__label{font-size:11px;font-weight:600;color:${SK.soft};letter-spacing:0.04em;text-transform:uppercase}
    .ok-kpi__value{font-size:30px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin-top:4px;color:${SK.ink};white-space:nowrap}
    .ok-kpi__sub{font-size:11.5px;color:${SK.soft};margin-top:2px}
    /* ── SHELL / SIDEBAR ──────────────────────────────────────────── */
    .ok-shell{display:flex;height:100vh;background:${SK.iceBlueLight}}
    .ok-side{width:228px;background:${SK.ink};color:${SK.pureWhite};display:flex;flex-direction:column;flex-shrink:0}
    .ok-side__brand{padding:18px 18px 14px;display:flex;align-items:center;gap:10px;
      border-bottom:1px solid rgba(255,255,255,.08)}
    .ok-side__brand-text{font-weight:600;font-size:15px;letter-spacing:-0.01em}
    .ok-side__nav{padding:12px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
    .ok-side__item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;
      font-size:13px;font-weight:500;color:rgba(255,255,255,.72);transition:all .12s;
      border:none;background:transparent;font-family:inherit;text-align:left;width:100%}
    .ok-side__item:hover{background:rgba(255,255,255,.06);color:#fff}
    .ok-side__item--active{background:rgba(242,84,92,.18);color:#fff}
    .ok-side__item--active .ok-side__item-bar{background:${SK.coral}}
    .ok-side__item-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;
      flex-shrink:0;color:rgba(255,255,255,.6)}
    .ok-side__item--active .ok-side__item-icon{color:${SK.coral}}
    .ok-side__sectlbl{padding:14px 14px 6px;font-size:10px;font-weight:600;letter-spacing:0.1em;
      text-transform:uppercase;color:rgba(255,255,255,.4)}
    .ok-side__badge{margin-left:auto;background:${SK.coral};color:#fff;font-size:10px;font-weight:600;
      padding:1px 7px;border-radius:99px;min-width:18px;text-align:center}
    .ok-side__user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
    .ok-side__user-avatar{width:32px;height:32px;border-radius:50%;background:${SK.coral};display:flex;
      align-items:center;justify-content:center;font-weight:600;font-size:12px;color:#fff;flex-shrink:0}
    .ok-side__user-name{font-size:12.5px;font-weight:600;line-height:1.2}
    .ok-side__user-role{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:1px}
    /* ── MAIN ─────────────────────────────────────────────────────── */
    .ok-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
    .ok-topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:${SK.pureWhite};
      border-bottom:1px solid rgba(17,24,61,.08);flex-shrink:0}
    .ok-topbar__crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:${SK.soft}}
    .ok-topbar__crumbs button{background:none;border:0;font:inherit;color:${SK.soft};cursor:pointer;
      padding:2px 4px;border-radius:4px}
    .ok-topbar__crumbs button:hover{background:${SK.iceBlueLight};color:${SK.ink}}
    .ok-topbar__crumbs .now{color:${SK.ink};font-weight:600}
    .ok-content{flex:1;overflow-y:auto;padding:24px}
    .ok-content__inner{max-width:1200px;margin:0 auto}
    /* ── AVATARS ──────────────────────────────────────────────────── */
    .ok-av{width:26px;height:26px;border-radius:50%;background:${SK.lightBlue};display:inline-flex;
      align-items:center;justify-content:center;font-size:10px;font-weight:600;color:${SK.ink};
      border:1.5px solid ${SK.pureWhite};flex-shrink:0}
    .ok-av-group{display:inline-flex}
    .ok-av-group .ok-av+.ok-av{margin-left:-7px}
    /* ── TABS ─────────────────────────────────────────────────────── */
    .ok-tabs{display:flex;gap:0;border-bottom:1px solid rgba(17,24,61,.1);margin-bottom:18px}
    .ok-tab{padding:10px 14px;font-size:12.5px;font-weight:500;color:${SK.soft};cursor:pointer;
      border:none;background:transparent;font-family:inherit;border-bottom:2px solid transparent;
      margin-bottom:-1px;transition:all .12s}
    .ok-tab:hover{color:${SK.ink}}
    .ok-tab--active{color:${SK.ink};border-bottom-color:${SK.coral};font-weight:600}
    /* ── SCROLLBAR ────────────────────────────────────────────────── */
    .ok-content::-webkit-scrollbar,.ok-side__nav::-webkit-scrollbar{width:8px}
    .ok-content::-webkit-scrollbar-thumb{background:rgba(17,24,61,.12);border-radius:99px}
    .ok-side__nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
  `;
  document.head.appendChild(s);
}

// ── Components ─────────────────────────────────────────────────────────────
const Button = ({ variant = 'default', size, children, icon, onClick, disabled, style }) => {
  const cls = ['ok-btn'];
  if (variant === 'primary') cls.push('ok-btn--primary');
  if (variant === 'accent') cls.push('ok-btn--accent');
  if (variant === 'ghost') cls.push('ok-btn--ghost');
  if (size === 'sm') cls.push('ok-btn--sm');
  if (size === 'icon') cls.push('ok-btn--icon');
  return (
    <button className={cls.join(' ')} onClick={onClick} disabled={disabled} style={style}>
      {icon ? <span style={{ display: 'inline-flex' }}>{icon}</span> : null}
      {children}
    </button>
  );
};

const Card = ({ title, action, children, padded = true, style, flat }) => (
  <div className={`ok-card ${flat ? 'ok-card--flat' : ''}`} style={style}>
    {title ? (
      <div className="ok-card__hd">
        <h3>{title}</h3>
        {action}
      </div>
    ) : null}
    {padded ? <div className="ok-card__bd">{children}</div> : children}
  </div>
);

const STATUS_LABELS = {
  draft: 'Kladd',
  track: 'På spor',
  risk: 'I risiko',
  delay: 'Forsinkelse',
  done: 'Fullført',
  open: 'Åpen',
  in_progress: 'Pågår',
  blocked: 'Blokkert',
};

const Pill = ({ status, children, style }) => (
  <span className={`ok-pill ok-pill--${status === 'open' || status === 'blocked' ? 'risk' : status === 'in_progress' ? 'draft' : status}`} style={style}>
    <span className="ok-pill__dot" />
    {children || STATUS_LABELS[status] || status}
  </span>
);

const Progress = ({ value = 0, status = 'track', style }) => (
  <div className={`ok-progress ok-progress--${status}`} style={style}>
    <div className="ok-progress__fill" style={{ width: `${Math.max(0, Math.min(100, value))}%` }} />
  </div>
);

const Avatar = ({ initials, color, style, size = 26 }) => (
  <span className="ok-av" style={{
    background: color || SK.lightBlue, width: size, height: size, fontSize: Math.round(size * 0.38),
    ...style,
  }}>{initials}</span>
);

const AvatarGroup = ({ people = [], max = 3 }) => (
  <span className="ok-av-group">
    {people.slice(0, max).map((p, i) => (
      <Avatar key={i} initials={p.i} color={p.c} />
    ))}
    {people.length > max ? <Avatar initials={`+${people.length - max}`} color={SK.iceBlue} /> : null}
  </span>
);

const KPI = ({ label, value, sub, accent, style }) => (
  <div style={style}>
    <div className="ok-kpi__label">{label}</div>
    <div className="ok-kpi__value" style={accent ? { color: SK.coral } : null}>{value}</div>
    {sub ? <div className="ok-kpi__sub">{sub}</div> : null}
  </div>
);

const Tabs = ({ tabs, value, onChange }) => (
  <div className="ok-tabs">
    {tabs.map((t) => (
      <button
        key={t.id}
        className={`ok-tab ${value === t.id ? 'ok-tab--active' : ''}`}
        onClick={() => onChange(t.id)}
      >
        {t.label}
      </button>
    ))}
  </div>
);

// ── Icons (inline SVG) ──────────────────────────────────────────────────────
const I = {
  home: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
  folder: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>,
  mic: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="13" rx="3"/><path d="M19 10v1a7 7 0 0 1-14 0v-1"/><line x1="12" x2="12" y1="19" y2="22"/></svg>,
  check: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  bell: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>,
  doc: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>,
  chart: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/></svg>,
  users: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
  shield: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>,
  msg: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>,
  cog: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.36.16.66.4.86.7s.3.65.32 1V12c.36.16.66.4.86.7s.3.65.32 1z"/></svg>,
  plus: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/></svg>,
  download: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>,
  cal: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="4" rx="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>,
  arrowUp: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>,
  arrowDown: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>,
  chevron: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>,
};

// Click-row helper for tables — passes event so child buttons can stopPropagation.
const TR = ({ onClick, children }) => (
  <tr onClick={onClick}>{children}</tr>
);

Object.assign(window, {
  Button, Card, Pill, Progress, Avatar, AvatarGroup, KPI, Tabs, TR, I, STATUS_LABELS,
});