// styre-screens-2.jsx — Styreportal del 2: Dokumenter, Vedtak, Årshjul, Styret
// + StyreWorkspace-shellen.

const DOK_IKON = {
  Protokoll:    { bg: '#e9eef7', fg: '#3c4a6b' },
  Innkalling:   { bg: '#fdeac8', fg: '#8e5a05' },
  Saksframlegg: { bg: '#fcddde', fg: '#a01a25' },
  Rapport:      { bg: '#dbeed8', fg: '#2f5a28' },
  Vedlegg:      { bg: '#e6e1f3', fg: '#4a3a7a' },
};

// ═════════════════════════════════════════════════════════════════
// FANE · DOKUMENTER
// ═════════════════════════════════════════════════════════════════
function StyreDokumenter() {
  const [filt, setFilt] = React.useState('alle');
  const typer = ['alle', 'Protokoll', 'Innkalling', 'Saksframlegg', 'Rapport', 'Vedlegg'];
  const synlig = filt === 'alle' ? STYRE_DOKUMENTER : STYRE_DOKUMENTER.filter(d => d.type === filt);
  // grupper pr. møte
  const grupper = {};
  synlig.forEach(d => { (grupper[d.moteId] = grupper[d.moteId] || []).push(d); });
  const moteRekke = STYRE_MOTER.filter(m => grupper[m.id]);

  return (
    <div style={{ maxWidth: 920 }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap' }}>
        {typer.map(t => (
          <button key={t} onClick={() => setFilt(t)} style={{
            border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 11.5, fontWeight: 600, padding: '5px 12px', borderRadius: 99,
            background: filt === t ? SK.ink : SK.pureWhite, color: filt === t ? '#fff' : SK.soft,
            boxShadow: filt === t ? 'none' : 'inset 0 0 0 1px rgba(17,24,61,.12)',
          }}>{t === 'alle' ? 'Alle' : t}</button>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {moteRekke.map(m => (
          <div key={m.id}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.04, textTransform: 'uppercase', color: SK.soft, marginBottom: 8 }}>{m.nr} · {styreFmtDato(m.dato)}</div>
            <Card padded={false}>
              {grupper[m.id].map((d, i) => {
                const ik = DOK_IKON[d.type] || DOK_IKON.Vedlegg;
                return (
                  <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 18px', borderTop: i > 0 ? '1px solid rgba(17,24,61,.06)' : 'none' }}>
                    <div style={{ width: 38, height: 46, borderRadius: 6, background: ik.bg, color: ik.fg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 8, fontWeight: 700 }}>
                      {I.doc}<span style={{ marginTop: 2 }}>{d.format}</span>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontSize: 13, fontWeight: 600 }}>{d.tittel}</span>
                        {d.fortrolig && <span style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', color: '#a01a25', background: '#fcddde', padding: '1px 7px', borderRadius: 99 }}>Fortrolig</span>}
                      </div>
                      <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>{d.type} · {d.sider} sider · publisert {styreFmtDato(d.dato)}</div>
                    </div>
                    <Button size="sm" icon={I.download}>Last ned</Button>
                  </div>
                );
              })}
            </Card>
          </div>
        ))}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// FANE · VEDTAK
// ═════════════════════════════════════════════════════════════════
function StyreVedtak() {
  return (
    <div style={{ maxWidth: 920 }}>
      <div style={{ fontSize: 12.5, color: SK.soft, marginBottom: 16, maxWidth: 680 }}>
        Alle styrevedtak med oppfølgingsansvar. Vedtak til oppfølging følges opp av administrasjonen og rapporteres tilbake.
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {STYRE_VEDTAK.map(v => {
          const st = VEDTAK_STATUS[v.status];
          return (
            <Card key={v.id} padded>
              <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ flexShrink: 0, textAlign: 'center', minWidth: 56 }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: SK.soft, textTransform: 'uppercase' }}>Sak</div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: SK.ink, fontVariantNumeric: 'tabular-nums' }}>{v.sak}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.45, color: SK.ink }}>{v.tekst}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 10, flexWrap: 'wrap', fontSize: 11.5, color: SK.soft }}>
                    <span>{v.mote} · {styreFmtDato(v.dato)}</span>
                    {v.enstemmig
                      ? <span style={{ color: SK.success, fontWeight: 600 }}>● Enstemmig</span>
                      : <span style={{ color: SK.coral, fontWeight: 600 }}>● {v.dissens}</span>}
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>Ansvar: <Avatar initials={v.ansvarlig} color={styreFarge(v.ansvarlig)} size={20} /> {styreNavn(v.ansvarlig)}</span>
                    {v.frist && <span>Frist {styreFmtDato(v.frist)}</span>}
                  </div>
                </div>
                <span style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', padding: '4px 10px', borderRadius: 99, background: st.bg, color: st.fg, flexShrink: 0, whiteSpace: 'nowrap' }}>{st.label}</span>
              </div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// FANE · ÅRSHJUL
// ═════════════════════════════════════════════════════════════════
function StyreArshjul() {
  return (
    <div style={{ maxWidth: 980 }}>
      <div style={{ fontSize: 12.5, color: SK.soft, marginBottom: 18, maxWidth: 680 }}>
        Styrets faste behandlingspunkter gjennom året — når regnskap, strategi, budsjett og risiko skal opp.
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', left: 19, top: 8, bottom: 8, width: 2, background: 'rgba(17,24,61,.1)' }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {STYRE_ARSHJUL.map((a, i) => {
            const t = ARSHJUL_TONE[a.status];
            return (
              <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', position: 'relative' }}>
                <div style={{ width: 40, flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 1 }}>
                  <div style={{ width: 40, height: 40, borderRadius: '50%', background: a.status === 'aktiv' ? SK.coral : '#fff', color: a.status === 'aktiv' ? '#fff' : SK.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', boxShadow: `0 0 0 2px ${a.status === 'aktiv' ? SK.coral : 'rgba(17,24,61,.12)'}` }}>{a.mnd}</div>
                </div>
                <Card padded style={{ flex: 1, marginBottom: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 600 }}>{a.tittel}</span>
                    <span style={{ marginLeft: 'auto', fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase', padding: '3px 9px', borderRadius: 99, background: t.bg, color: t.fg }}>{t.label}</span>
                  </div>
                  <div style={{ fontSize: 12, color: SK.soft, marginTop: 4 }}>{a.tema}</div>
                </Card>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// FANE · STYRET (sammensetning)
// ═════════════════════════════════════════════════════════════════
function StyreSammensetning() {
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 20 }}>
        {STYRE_MEDLEMMER.map(m => (
          <Card key={m.id} padded>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <Avatar initials={m.id} color={m.farge} size={46} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{m.navn}</div>
                <div style={{ fontSize: 11.5, color: m.verv.includes('leder') || m.verv.includes('Nestleder') ? SK.coral : SK.soft, fontWeight: 600 }}>{m.verv}</div>
              </div>
            </div>
            <div style={{ marginTop: 12, fontSize: 11.5, color: SK.soft, lineHeight: 1.5 }}>{m.bakgrunn}</div>
            <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, padding: '3px 9px', borderRadius: 99, background: SK.iceBlueLight, color: SK.ink }}>Medlem siden {m.siden}</span>
              {m.uavhengig
                ? <span style={{ fontSize: 10.5, fontWeight: 600, padding: '3px 9px', borderRadius: 99, background: '#dbeed8', color: '#2f5a28' }}>Uavhengig</span>
                : <span style={{ fontSize: 10.5, fontWeight: 600, padding: '3px 9px', borderRadius: 99, background: '#e6e1f3', color: '#4a3a7a' }}>{m.verv.includes('Ansatt') ? 'Ansattvalgt' : 'Administrasjon'}</span>}
              {m.valgt !== '—' && <span style={{ fontSize: 10.5, fontWeight: 600, padding: '3px 9px', borderRadius: 99, background: '#fff', color: SK.soft, boxShadow: 'inset 0 0 0 1px rgba(17,24,61,.12)' }}>På valg {m.valgt}</span>}
            </div>
          </Card>
        ))}
      </div>
      <Card title="Om styret">
        <div style={{ fontSize: 12.5, color: SK.soft, lineHeight: 1.6, maxWidth: 720 }}>
          Styret i OsloKollega består av fem stemmeberettigede medlemmer — fire eksterne og én ansattrepresentant. Daglig leder deltar uten stemmerett og fungerer som styrets sekretær. Styret avholder fire ordinære møter i året, samt generalforsamling i juni. Valgperioden er to år med overlappende valg for å sikre kontinuitet.
        </div>
      </Card>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// WORKSPACE
// ═════════════════════════════════════════════════════════════════
function StyreWorkspaceMock({ go, initialTab }) {
  const [tab, setTab] = React.useState(initialTab || 'oversikt');
  const tabs = [
    { id: 'oversikt', label: 'Oversikt' },
    { id: 'moter', label: `Møter (${STYRE_MOTER.length})` },
    { id: 'dok', label: `Dokumenter (${STYRE_DOKUMENTER.length})` },
    { id: 'vedtak', label: `Vedtak (${STYRE_VEDTAK.length})` },
    { id: 'arshjul', label: 'Årshjul' },
    { id: 'styret', label: 'Styret' },
  ];
  return (
    <div className="ok-content__inner" style={{ maxWidth: 1320 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>
            <span style={{ color: SK.coral }}>{I.shield}</span> Lukket · kun styret
          </div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>Styreportal</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>Møter, sakspapirer, nøkkeltall og vedtak for OsloKollega-styret</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="ok-av-group">{STYRE_MEDLEMMER.filter(m => m.id !== 'KS').map(m => <Avatar key={m.id} initials={m.id} color={m.farge} />)}</span>
          <Button size="sm" icon={I.cal} onClick={() => setTab('moter')}>Møteplan</Button>
        </div>
      </div>

      <Tabs tabs={tabs} value={tab} onChange={setTab} />

      {tab === 'oversikt' && <StyreOversikt setTab={setTab} />}
      {tab === 'moter' && <StyreMoter />}
      {tab === 'dok' && <StyreDokumenter />}
      {tab === 'vedtak' && <StyreVedtak />}
      {tab === 'arshjul' && <StyreArshjul />}
      {tab === 'styret' && <StyreSammensetning />}
    </div>
  );
}

Object.assign(window, { StyreDokumenter, StyreVedtak, StyreArshjul, StyreSammensetning, StyreWorkspaceMock });