// forside.jsx — Forside/dashboard med live data fra alle moduler
// Avhengigheter: window._sb, SK, I, Button, Card, KPI fra prototype-ui.jsx

function Forside({ go, bruker }) {
  const [data, setData] = React.useState({
    avtaler: [], tiltak: [], protokoller: [], avvik: [],
    ansatte: [], kontrakter: [], styremoter: [], prosjekter: [],
  });
  const [laster, setLaster] = React.useState(true);
  const idag = new Date();

  const fsHilsen = () => {
    const t = idag.getHours();
    if (t < 10) return 'God morgen';
    if (t < 12) return 'God formiddag';
    if (t < 17) return 'God ettermiddag';
    return 'God kveld';
  };
  const fsFmtDato = (d) => d ? new Date(d).toLocaleDateString('nb-NO', { day: 'numeric', month: 'short' }) : '—';
  const fsDagerTil = (d) => d ? Math.ceil((new Date(d) - idag) / 86400000) : null;
  const fsFmtKr = (n) => n ? new Intl.NumberFormat('nb-NO', { notation: 'compact', maximumFractionDigits: 1 }).format(n) + ' kr' : '—';

  React.useEffect(() => {
    const sb = window._sb;
    Promise.all([
      sb.from('avtaler').select('id,name,status,slutt_dato,arsverdi,risiko').order('slutt_dato'),
      sb.from('tiltak').select('id,tittel,status,frist,prioritet,ansvarlig_id').order('frist'),
      sb.from('protokoller').select('id,tittel,dato,status').order('dato', { ascending: false }).limit(5),
      sb.from('avvik').select('id,tittel,status,alvorlighet,frist').neq('status', 'lukket'),
      sb.from('profiles').select('id,navn,avatar_url,auth_status'),
      sb.from('kontrakter').select('id,profil_id,sluttdato,type'),
      sb.from('styre_moter').select('id,nr,dato,status').order('dato', { ascending: false }).limit(3),
      sb.from('prosjekter').select('id,navn,status,fremdrift,fase').limit(10),
    ]).then(([av, ti, pr, kv, an, ko, st, pj]) => {
      setData({
        avtaler: av.data || [], tiltak: ti.data || [], protokoller: pr.data || [],
        avvik: kv.data || [], ansatte: an.data || [], kontrakter: ko.data || [],
        styremoter: st.data || [], prosjekter: pj.data || [],
      });
      setLaster(false);
    }).catch(() => setLaster(false));
  }, []);

  // ── Beregninger ──
  const aktiveAvtaler = data.avtaler.filter(a => a.status === 'aktiv').length;
  const kritiskeAvtaler = data.avtaler.filter(a => { const d = fsDagerTil(a.slutt_dato); return d !== null && d >= 0 && d < 30; });
  const åpneTiltak = data.tiltak.filter(t => t.status !== 'done' && t.status !== 'avvist');
  const forfalteTiltak = åpneTiltak.filter(t => { const d = fsDagerTil(t.frist); return d !== null && d < 0; });
  const åpneAvvik = data.avvik.length;
  const kritiskeAvvik = data.avvik.filter(a => a.alvorlighet === 'høy' || a.alvorlighet === 'kritisk').length;
  const utløpteKontrakter = data.kontrakter.filter(k => { const d = fsDagerTil(k.sluttdato); return d !== null && d >= 0 && d < 90; });
  const nesteStyremøte = data.styremoter.find(m => m.status === 'innkalt' || m.status === 'planlagt');
  const ikkeInviterte = data.ansatte.filter(a => !a.auth_status || a.auth_status === 'ikke_invitert').length;
  const aktiveProsjekter = data.prosjekter.filter(p => p.status === 'aktiv' || p.status === 'pågår').length;

  const fornavn = bruker?.navn?.split(' ')[0] || bruker?.epost?.split('@')[0] || 'deg';
  const maaneder = ['januar','februar','mars','april','mai','juni','juli','august','september','oktober','november','desember'];
  const dagNavn  = ['søndag','mandag','tirsdag','onsdag','torsdag','fredag','lørdag'];
  const dagStr   = `${dagNavn[idag.getDay()]} ${idag.getDate()}. ${maaneder[idag.getMonth()]}`;

  // Samlede oppgaver som krever oppmerksomhet
  const handlinger = [];
  forfalteTiltak.forEach(t => handlinger.push({ type: 'forfalt', tekst: t.tittel, sub: `Forfalt ${fsFmtDato(t.frist)}`, farge: SK.coral, screen: 'tasks' }));
  kritiskeAvtaler.forEach(a => { const d = fsDagerTil(a.slutt_dato); handlinger.push({ type: 'avtale', tekst: a.name, sub: `Utløper om ${d} dager`, farge: '#e08d3c', screen: 'agreements' }); });
  if (kritiskeAvvik > 0) handlinger.push({ type: 'avvik', tekst: `${kritiskeAvvik} alvorlige avvik`, sub: 'Krever oppfølging', farge: SK.coral, screen: 'kvalitet' });
  utløpteKontrakter.slice(0,2).forEach(k => { const d = fsDagerTil(k.sluttdato); handlinger.push({ type: 'kontrakt', tekst: 'Kontrakt utløper', sub: `Om ${d} dager`, farge: '#e08d3c', screen: 'hr' }); });

  // Moduler og status i utviklingen
  const moduler = [
    { label: 'Forside',        screen: 'home',            ferdig: true },
    { label: 'Avtaler',        screen: 'agreements',      ferdig: true },
    { label: 'Organisasjon',   screen: 'organisation',    ferdig: true },
    { label: 'Tiltaksplan',    screen: 'tasks',           ferdig: true },
    { label: 'Protokoller',    screen: 'protocols',       ferdig: true },
    { label: 'Årshjul',        screen: 'arshjul',         ferdig: true },
    { label: 'Rutiner',        screen: 'rutiner',         ferdig: true },
    { label: 'Kvalitet & ISO', screen: 'kvalitet',        ferdig: true },
    { label: 'HR & personal',  screen: 'hr',              ferdig: true },
    { label: 'Styreportal',    screen: 'styre',           ferdig: true },
    { label: 'Intranett',      screen: 'intranett',       ferdig: true },
    { label: 'Håndbøker',      screen: 'personalhandbok', ferdig: true },
    { label: 'Prosjekter',     screen: 'projects',        ferdig: true },
    { label: 'Ressursbank',    screen: 'ressursbank',     ferdig: true },
    { label: 'Tilganger',      screen: 'tilganger',       ferdig: true },
    { label: 'Økonomi',        screen: 'finance',         ferdig: false },
    { label: 'VVJ',            screen: 'vvj',             ferdig: false },
  ];
  const ferdigeModuler = moduler.filter(m => m.ferdig).length;

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1200 }}>

      {/* Velkomst */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase', marginBottom: 4 }}>{dagStr}</div>
        <h1 style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.02, margin: 0 }}>{fsHilsen()}, {fornavn} 👋</h1>
        <div style={{ fontSize: 13.5, color: SK.soft, marginTop: 6 }}>Her er en samlet oversikt over driften i OsloKollega.</div>
      </div>

      {/* KPI-rad */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 24 }}>
        <Card padded style={{ cursor: 'pointer' }} onClick={() => go({ screen: 'agreements' })}>
          <KPI label="Aktive avtaler" value={laster ? '…' : aktiveAvtaler} sub={`${kritiskeAvtaler.length} utløper snart`} accent={kritiskeAvtaler.length > 0} />
        </Card>
        <Card padded style={{ cursor: 'pointer' }} onClick={() => go({ screen: 'tasks' })}>
          <KPI label="Åpne tiltak" value={laster ? '…' : åpneTiltak.length} sub={`${forfalteTiltak.length} forfalt`} accent={forfalteTiltak.length > 0} />
        </Card>
        <Card padded style={{ cursor: 'pointer' }} onClick={() => go({ screen: 'kvalitet' })}>
          <KPI label="Åpne avvik" value={laster ? '…' : åpneAvvik} sub={`${kritiskeAvvik} alvorlige`} accent={kritiskeAvvik > 0} />
        </Card>
        <Card padded style={{ cursor: 'pointer' }} onClick={() => go({ screen: 'hr' })}>
          <KPI label="Ansatte" value={laster ? '…' : data.ansatte.length} sub={ikkeInviterte > 0 ? `${ikkeInviterte} ikke invitert` : 'alle aktive'} accent={ikkeInviterte > 0} />
        </Card>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 18, marginBottom: 24 }}>
        {/* Krever oppmerksomhet */}
        <Card padded={false}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(17,24,61,.07)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Krever oppmerksomhet</span>
            {handlinger.length > 0 && <span style={{ fontSize: 11, fontWeight: 700, padding: '2px 9px', borderRadius: 99, background: SK.coral, color: '#fff' }}>{handlinger.length}</span>}
          </div>
          <div style={{ padding: '8px 0' }}>
            {laster ? (
              <div style={{ padding: 28, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster…</div>
            ) : handlinger.length === 0 ? (
              <div style={{ padding: 28, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Ingenting haster akkurat nå 👍</div>
            ) : handlinger.slice(0, 6).map((h, i) => (
              <div key={i} onClick={() => go({ screen: h.screen })} style={{
                padding: '11px 20px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
                borderTop: i > 0 ? '1px solid rgba(17,24,61,.05)' : 'none',
              }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: h.farge, flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{h.tekst}</div>
                  <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 1 }}>{h.sub}</div>
                </div>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={SK.soft} strokeWidth="2" strokeLinecap="round"><path d="M9 18l6-6-6-6"/></svg>
              </div>
            ))}
          </div>
        </Card>

        {/* Neste styremøte + siste protokoller */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {nesteStyremøte && (
            <div style={{ background: SK.ink, borderRadius: 14, padding: '20px 22px', color: '#fff', cursor: 'pointer' }} onClick={() => go({ screen: 'styre' })}>
              <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: 0.08, textTransform: 'uppercase', opacity: .6, marginBottom: 8 }}>Neste styremøte</div>
              <div style={{ fontSize: 18, fontWeight: 600 }}>{nesteStyremøte.nr}</div>
              <div style={{ fontSize: 13, opacity: .8, marginTop: 4 }}>{fsFmtDato(nesteStyremøte.dato)}</div>
            </div>
          )}
          <Card padded={false}>
            <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(17,24,61,.07)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: 13, fontWeight: 600 }}>Siste protokoller</span>
              <Button size="sm" onClick={() => go({ screen: 'protocols' })}>Alle →</Button>
            </div>
            {laster ? (
              <div style={{ padding: 20, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster…</div>
            ) : data.protokoller.length === 0 ? (
              <div style={{ padding: 20, textAlign: 'center', color: SK.soft, fontSize: 12.5 }}>Ingen protokoller ennå.</div>
            ) : data.protokoller.slice(0, 4).map((p, i) => (
              <div key={p.id} onClick={() => go({ screen: 'protocols' })} style={{ padding: '10px 18px', cursor: 'pointer', borderTop: i > 0 ? '1px solid rgba(17,24,61,.05)' : 'none' }}>
                <div style={{ fontSize: 12.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.tittel}</div>
                <div style={{ fontSize: 11, color: SK.soft, marginTop: 1 }}>{fsFmtDato(p.dato)}</div>
              </div>
            ))}
          </Card>
        </div>
      </div>

      {/* Aktive prosjekter */}
      {aktiveProsjekter > 0 && (
        <Card padded={false} style={{ marginBottom: 24 }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid rgba(17,24,61,.07)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 14, fontWeight: 600 }}>Aktive prosjekter ({aktiveProsjekter})</span>
            <Button size="sm" onClick={() => go({ screen: 'projects' })}>Alle →</Button>
          </div>
          <div style={{ padding: '14px 20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 14 }}>
            {data.prosjekter.filter(p => p.status === 'aktiv' || p.status === 'pågår').slice(0, 6).map(p => (
              <div key={p.id} onClick={() => go({ screen: 'projects' })} style={{ padding: '14px 16px', borderRadius: 10, border: '1px solid rgba(17,24,61,.08)', cursor: 'pointer' }}>
                <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>{p.navn}</div>
                <div style={{ height: 6, background: SK.iceBlueLight, borderRadius: 99, overflow: 'hidden' }}>
                  <div style={{ width: `${p.fremdrift || 0}%`, height: '100%', background: SK.coral, borderRadius: 99 }} />
                </div>
                <div style={{ fontSize: 11, color: SK.soft, marginTop: 6 }}>{p.fremdrift || 0}% · {p.fase || 'planlegging'}</div>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Moduloversikt / utviklingsstatus */}
      <Card padded={false}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(17,24,61,.07)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Moduler i systemet</div>
            <div style={{ fontSize: 12, color: SK.soft, marginTop: 2 }}>{ferdigeModuler} av {moduler.length} moduler i drift</div>
          </div>
          <div style={{ fontSize: 22, fontWeight: 700, color: SK.success }}>{Math.round(ferdigeModuler / moduler.length * 100)}%</div>
        </div>
        <div style={{ padding: '16px 20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 10 }}>
          {moduler.map(m => (
            <div key={m.screen} onClick={() => m.ferdig && go({ screen: m.screen })} style={{
              padding: '10px 14px', borderRadius: 9, cursor: m.ferdig ? 'pointer' : 'default',
              background: m.ferdig ? SK.iceBlueLight : 'transparent',
              border: m.ferdig ? '1px solid rgba(17,24,61,.06)' : '1px dashed rgba(17,24,61,.12)',
              opacity: m.ferdig ? 1 : .5, display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <div style={{ width: 7, height: 7, borderRadius: '50%', background: m.ferdig ? SK.success : SK.soft, flexShrink: 0 }} />
              <span style={{ fontSize: 12.5, fontWeight: m.ferdig ? 500 : 400 }}>{m.label}</span>
              {!m.ferdig && <span style={{ fontSize: 9.5, color: SK.soft, marginLeft: 'auto' }}>kommer</span>}
            </div>
          ))}
        </div>
      </Card>

    </div>
  );
}

Object.assign(window, { Forside });