// prototype-screens.jsx — Forside / Prosjekt-liste / Prosjekt-detalj / Protokoll

const fmtKr = (n) => n.toLocaleString('nb-NO');
const fmtDate = (iso) => {
  const d = new Date(iso);
  return d.toLocaleDateString('nb-NO', { day: 'numeric', month: 'short' });
};
const daysUntil = (iso) => {
  const today = new Date('2026-05-21'); // demo fixed "i dag"
  const d = new Date(iso);
  return Math.ceil((d - today) / 86400000);
};

// ═══════════════════════════════════════════════════════════════════════════
// FORSIDE / DASHBOARD
// ═══════════════════════════════════════════════════════════════════════════
function DashboardOld({ go }) { // erstattet av tilpassbar Dashboard i dashboard-screens.jsx
  const active = PROJECTS.filter(p => p.status !== 'done');
  const risk = PROJECTS.filter(p => p.status === 'risk').length;
  const delay = PROJECTS.filter(p => p.status === 'delay').length;
  const totalTiltak = PROJECTS.reduce((s, p) => s + p.openTiltak, 0);
  const totalBudget = PROJECTS.reduce((s, p) => s + p.budget.plan, 0);
  const totalSpent = PROJECTS.reduce((s, p) => s + p.budget.spent, 0);

  // Statusfordeling for stablet bar
  const dist = ['track', 'risk', 'delay', 'draft'].map(s => ({
    s, n: active.filter(p => p.status === s).length,
  }));
  const distTotal = dist.reduce((sum, x) => sum + x.n, 0);

  const upcoming = PROJECTS
    .filter(p => p.status !== 'done')
    .map(p => ({ ...p, days: daysUntil(p.end) }))
    .sort((a, b) => a.days - b.days)
    .slice(0, 6);

  // Krever deg — samler tiltak fra alle protokoller som er åpne for Kari (KS)
  const mineTiltak = PROTOCOLS.flatMap(pr =>
    pr.tiltak.filter(t => (t.ansvarlig === 'KS' || t.gruppe === 'Ledergruppen') && t.status !== 'done')
      .map(t => ({ ...t, protokoll: pr.title, protokollId: pr.id, protokollDate: pr.date }))
  );

  return (
    <div className="ok-content__inner">
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>
            Torsdag 21. mai 2026 · uke 21
          </div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>
            God morgen, Kari
          </h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>
            Du har {mineTiltak.length} åpne tiltak fra protokoller · {risk + delay} prosjekter trenger oppmerksomhet i dag.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button icon={I.download} size="sm">Eksporter rapport</Button>
          <Button icon={I.plus} variant="primary">Nytt prosjekt</Button>
        </div>
      </div>

      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14, marginBottom: 22 }}>
        <Card padded><KPI label="Aktive prosjekter" value={active.length} sub={`${PROJECTS.length - active.length} avsluttet i år`} /></Card>
        <Card padded>
          <KPI label="I risiko" value={risk} sub={`av ${active.length} aktive`} accent={risk > 0} />
        </Card>
        <Card padded>
          <KPI label="Forsinkelse" value={delay} sub={`${delay > 0 ? 'krever handling' : 'alle på spor'}`} accent={delay > 0} />
        </Card>
        <Card padded><KPI label="Åpne tiltak" value={totalTiltak} sub="fra siste 90 dager" /></Card>
        <Card padded>
          <KPI label="Budsjett brukt" value={`${Math.round(totalSpent / totalBudget * 100)} %`} sub={`${fmtKr(Math.round(totalSpent / 1000))}k av ${fmtKr(Math.round(totalBudget / 1000))}k`} />
        </Card>
      </div>

      {/* Portfolio status */}
      <Card title="Porteføljestatus" style={{ marginBottom: 14 }}
        action={<Button size="sm" variant="ghost" onClick={() => go({ screen: 'projects' })}>
          Se alle ({PROJECTS.length}) <span style={{ marginLeft: 4 }}>{I.chevron}</span>
        </Button>}
      >
        <div style={{ display: 'flex', height: 10, borderRadius: 99, overflow: 'hidden', marginBottom: 12 }}>
          {dist.map((d, i) => d.n > 0 && (
            <div key={i} style={{
              width: `${(d.n / distTotal) * 100}%`,
              background: d.s === 'track' ? SK.success : d.s === 'risk' ? SK.warn : d.s === 'delay' ? SK.coral : SK.lightBlue,
            }} title={`${d.s}: ${d.n}`} />
          ))}
        </div>
        <div style={{ display: 'flex', gap: 18, fontSize: 12 }}>
          {dist.map((d, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: d.s === 'track' ? SK.success : d.s === 'risk' ? SK.warn : d.s === 'delay' ? SK.coral : SK.lightBlue,
              }} />
              <span style={{ color: SK.soft, fontWeight: 500 }}>{STATUS_LABELS[d.s]}</span>
              <span style={{ fontWeight: 600 }}>{d.n}</span>
            </div>
          ))}
        </div>
      </Card>

      {/* Two columns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
        {/* Left: kommende frister */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card title="Kommende frister" padded={false}>
            <table className="ok-table">
              <tbody>
                {upcoming.map(p => (
                  <TR key={p.id} onClick={() => go({ screen: 'project', id: p.id })}>
                    <td style={{ paddingLeft: 18 }}>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div>
                      <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>{p.nextMilestone}</div>
                    </td>
                    <td><Pill status={p.status} /></td>
                    <td style={{ paddingRight: 18, textAlign: 'right' }}>
                      <div style={{ fontWeight: 600, fontSize: 13, color: p.days < 14 ? SK.coral : SK.ink }}>
                        {p.days < 0 ? `${Math.abs(p.days)} dgr forsinket` : `om ${p.days} dgr`}
                      </div>
                      <div style={{ fontSize: 11, color: SK.soft }}>frist {fmtDate(p.end)}</div>
                    </td>
                  </TR>
                ))}
              </tbody>
            </table>
          </Card>

          <Card title="Nylige protokoller" padded={false}
            action={<Button size="sm" variant="ghost" onClick={() => go({ screen: 'protocol', id: PROTOCOLS[0].id })}>
              Åpne siste <span style={{ marginLeft: 4 }}>{I.chevron}</span>
            </Button>}
          >
            <table className="ok-table">
              <tbody>
                {PROTOCOLS.map(pr => (
                  <TR key={pr.id} onClick={() => go({ screen: 'protocol', id: pr.id })}>
                    <td style={{ paddingLeft: 18 }}>
                      <div style={{ fontWeight: 600 }}>{pr.title}</div>
                      <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>
                        {fmtDate(pr.date)} · {pr.duration} min · {pr.tiltak.length} tiltak fordelt
                      </div>
                    </td>
                    <td>
                      <Pill status={pr.status === 'approved' ? 'done' : pr.status === 'review' ? 'risk' : 'draft'}>
                        {pr.status === 'approved' ? 'Godkjent' : pr.status === 'review' ? 'Til gjennomgang' : 'Utkast'}
                      </Pill>
                    </td>
                    <td style={{ paddingRight: 18, textAlign: 'right' }}>
                      <AvatarGroup people={pr.attendees.map(k => TEAM[k])} />
                    </td>
                  </TR>
                ))}
              </tbody>
            </table>
          </Card>
        </div>

        {/* Right: krever deg + integrasjoner */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card title="Krever deg" action={<span style={{ background: SK.coral, color: '#fff', padding: '2px 8px', borderRadius: 99, fontSize: 11, fontWeight: 600 }}>{mineTiltak.length}</span>}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {mineTiltak.slice(0, 5).map((t, i) => (
                <div key={i} style={{
                  padding: '10px 0', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none',
                  display: 'flex', gap: 10, cursor: 'pointer',
                }} onClick={() => go({ screen: 'protocol', id: t.protokollId })}>
                  <input type="checkbox" style={{ marginTop: 3, accentColor: SK.coral, flexShrink: 0 }} onClick={(e) => e.stopPropagation()} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, lineHeight: 1.35 }}>{t.title}</div>
                    <div style={{ fontSize: 11, color: SK.soft, marginTop: 3 }}>
                      Fra: {t.protokoll} · {t.gruppe}
                    </div>
                  </div>
                  <Pill status={daysUntil(t.frist) < 3 ? 'delay' : 'draft'}>
                    {daysUntil(t.frist) < 0 ? `${Math.abs(daysUntil(t.frist))}d forsinket`
                      : daysUntil(t.frist) === 0 ? 'i dag'
                      : `${daysUntil(t.frist)}d`}
                  </Pill>
                </div>
              ))}
            </div>
          </Card>

          <Card title="Fra integrasjonene">
            {[
              { src: 'Visma', dot: SK.success, t: 'Lønnskjøring klar for godkjenning', s: 'uke 21 · 92 ansatte' },
              { src: 'Outlook', dot: SK.info, t: '12 nye e-poster, 3 høy prio', s: 'NAV Nordstrand venter svar' },
              { src: 'Teams', dot: SK.purple, t: '4 nye meldinger i # ledelse', s: 'sist: Marius R. · 23 min' },
              { src: 'KS-modul', dot: SK.coral, t: '1 nytt avvik registrert', s: 'kategori: HMS · Holmlia' },
              { src: 'SharePoint', dot: SK.green, t: '7 nye dokumenter denne uka', s: 'i 4 prosjekt-mapper' },
            ].map((x, i) => (
              <div key={i} style={{ padding: '9px 0', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none', display: 'flex', gap: 10, alignItems: 'center' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: x.dot, flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5 }}>{x.t}</div>
                  <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>{x.src} · {x.s}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// PROSJEKT-LISTE
// ═══════════════════════════════════════════════════════════════════════════
function ProjectListMock({ go }) {
  const [sortBy, setSortBy] = React.useState('end');
  const [sortDir, setSortDir] = React.useState('asc');
  const [search, setSearch] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [avdFilter, setAvdFilter] = React.useState('all');

  const sortedProjects = React.useMemo(() => {
    let p = PROJECTS.slice();
    if (search) p = p.filter(x => x.name.toLowerCase().includes(search.toLowerCase()) || x.desc.toLowerCase().includes(search.toLowerCase()));
    if (statusFilter !== 'all') p = p.filter(x => x.status === statusFilter);
    if (avdFilter !== 'all') p = p.filter(x => x.avd === avdFilter);
    p.sort((a, b) => {
      let va = a[sortBy], vb = b[sortBy];
      if (sortBy === 'progress' || sortBy === 'openTiltak') { va = +va; vb = +vb; }
      if (va < vb) return sortDir === 'asc' ? -1 : 1;
      if (va > vb) return sortDir === 'asc' ? 1 : -1;
      return 0;
    });
    return p;
  }, [sortBy, sortDir, search, statusFilter, avdFilter]);

  const toggleSort = (k) => {
    if (sortBy === k) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortBy(k); setSortDir('asc'); }
  };

  const SortHead = ({ k, children, style }) => (
    <th onClick={() => toggleSort(k)} className={sortBy === k ? 'sorted' : ''} style={style}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        {children}
        {sortBy === k ? (sortDir === 'asc' ? I.arrowUp : I.arrowDown) : null}
      </span>
    </th>
  );

  const avds = ['all', ...new Set(PROJECTS.map(p => p.avd))];

  return (
    <div className="ok-content__inner">
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>Portefølje</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>
            Prosjekter <span style={{ color: SK.soft, fontWeight: 400 }}>· {sortedProjects.length}</span>
          </h1>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" icon={I.download}>Eksporter</Button>
          <Button variant="primary" icon={I.plus}>Nytt prosjekt</Button>
        </div>
      </div>

      <Card padded={false}>
        <div style={{ padding: '12px 16px', display: 'flex', gap: 10, alignItems: 'center', borderBottom: '1px solid rgba(17,24,61,.08)' }}>
          <input
            className="ok-input ok-input--search"
            placeholder="Søk i prosjekter…"
            value={search}
            onChange={e => setSearch(e.target.value)}
            style={{ maxWidth: 260 }}
          />
          <div style={{ display: 'flex', gap: 4, marginLeft: 6 }}>
            {[
              ['all', 'Alle'], ['track', 'På spor'], ['risk', 'I risiko'],
              ['delay', 'Forsinkelse'], ['draft', 'Kladd'],
            ].map(([k, l]) => (
              <button key={k} onClick={() => setStatusFilter(k)} className="ok-btn ok-btn--sm" style={{
                background: statusFilter === k ? SK.ink : 'transparent',
                color: statusFilter === k ? '#fff' : SK.ink,
                borderColor: statusFilter === k ? SK.ink : 'rgba(17,24,61,.15)',
              }}>{l}</button>
            ))}
          </div>
          <div style={{ width: 1, height: 24, background: 'rgba(17,24,61,.1)', margin: '0 4px' }} />
          <select
            value={avdFilter}
            onChange={e => setAvdFilter(e.target.value)}
            className="ok-input"
            style={{ maxWidth: 180, padding: '6px 10px' }}
          >
            {avds.map(a => <option key={a} value={a}>{a === 'all' ? 'Alle avdelinger' : a}</option>)}
          </select>
        </div>

        <div style={{ overflow: 'auto' }}>
          <table className="ok-table">
            <thead>
              <tr>
                <SortHead k="name">Prosjekt</SortHead>
                <SortHead k="avd">Avdeling</SortHead>
                <SortHead k="phase">Fase</SortHead>
                <SortHead k="status">Status</SortHead>
                <SortHead k="progress">Fremdrift</SortHead>
                <SortHead k="end">Frist</SortHead>
                <SortHead k="openTiltak">Åpne tiltak</SortHead>
                <th>Team</th>
              </tr>
            </thead>
            <tbody>
              {sortedProjects.map(p => {
                const days = daysUntil(p.end);
                return (
                  <TR key={p.id} onClick={() => go({ screen: 'project', id: p.id })}>
                    <td style={{ paddingLeft: 18 }}>
                      <div style={{ fontWeight: 600 }}>{p.name}</div>
                      <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>{p.desc}</div>
                    </td>
                    <td style={{ fontSize: 12 }}>{p.avd}</td>
                    <td style={{ fontSize: 12 }}>{p.phase}</td>
                    <td><Pill status={p.status} /></td>
                    <td style={{ width: 140 }}>
                      <Progress value={p.progress} status={p.status === 'delay' ? 'delay' : p.status === 'risk' ? 'risk' : 'track'} />
                      <div style={{ fontSize: 11, color: SK.soft, marginTop: 4 }}>{p.progress}%</div>
                    </td>
                    <td>
                      <div style={{ fontSize: 12.5, fontWeight: 600 }}>{fmtDate(p.end)}</div>
                      <div style={{ fontSize: 11, color: days < 14 ? SK.coral : SK.soft, marginTop: 2 }}>
                        {days < 0 ? `${Math.abs(days)} dgr forsinket` : `om ${days} dgr`}
                      </div>
                    </td>
                    <td style={{ textAlign: 'center', fontWeight: 600, color: p.openTiltak > 5 ? SK.coral : SK.ink }}>
                      {p.openTiltak}
                    </td>
                    <td><AvatarGroup people={p.team.map(k => TEAM[k])} /></td>
                  </TR>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { ProjectListMock, fmtKr, fmtDate, daysUntil });