// hr-screens.jsx — HR-modul: personalendringer på tvers av avdelinger og
// selskaper + utgående kontrakter. Bruker komponenter fra personal-screens.jsx.

function HRWorkspaceMock({ go, initialTab, initialInitials }) {
  const [tab, setTab] = React.useState(initialTab || 'oversikt');
  const [nyEndringModal, setNyEndringModal] = React.useState({
    open: !!initialInitials,
    initials: initialInitials,
  });

  const openNyEndring = (initials) => setNyEndringModal({ open: true, initials });

  const apneEndringer = PERSONAL_ENDRINGER.filter(p => p.status.startsWith('venter-')).length;
  const utkast = PERSONAL_ENDRINGER.filter(p => p.status === 'utkast').length;
  const utlopendeKontr = ALL_EMPLOYEES.filter(e => {
    if (!e.sluttDato) return false;
    const d = (new Date(e.sluttDato) - new Date('2026-05-28')) / 86400000;
    return d >= 0 && d <= 90;
  }).length;
  const korteVikar = ALL_EMPLOYEES.filter(e =>
    e.kontrakt === 'vikariat' && e.startet && e.sluttDato &&
    (new Date(e.sluttDato) - new Date(e.startet)) / 86400000 < 365
  ).length;

  const tabs = [
    { id: 'oversikt', label: 'Oversikt' },
    { id: 'endringer', label: `Personalendringer · ${apneEndringer}` },
    { id: 'kontrakter', label: `Utgående kontrakter · ${utlopendeKontr}` },
    { id: 'sykefravar', label: 'Sykefravær' },
    { id: 'kompetanse', label: 'Kompetanse' },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1320 }}>
      <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' }}>Modul</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>HR & personal</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>
            HR-leder: Hanne Myhre · {ALL_EMPLOYEES.length} ansatte · {apneEndringer} åpne personalendringer
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" icon={I.download}>Lønnskjøring · eksport</Button>
          <Button variant="primary" icon={I.plus} onClick={() => openNyEndring()}>Ny personalendring</Button>
        </div>
      </div>

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

      {tab === 'oversikt' && (
        <HROversiktMock
          apne={apneEndringer}
          utkast={utkast}
          utgaende={utlopendeKontr}
          korteVikar={korteVikar}
          goTab={setTab}
          onNyEndring={openNyEndring}
        />
      )}
      {tab === 'endringer' && <PersonalEndringerTab onNyEndring={openNyEndring} />}
      {tab === 'kontrakter' && <UtgaaendeKontrakterTab onNyEndring={openNyEndring} />}
      {tab === 'sykefravar' && (
        <Card padded><div style={{ padding: '40px 20px', textAlign: 'center', color: SK.soft }}>
          Sykefraværsoversikt kommer · integreres med Finago lønnssystem
        </div></Card>
      )}
      {tab === 'kompetanse' && (
        <Card padded><div style={{ padding: '40px 20px', textAlign: 'center', color: SK.soft }}>
          Kompetanseregister · sertifiseringer, fagbrev og kurs
        </div></Card>
      )}

      <NyPersonalendringModal
        open={nyEndringModal.open}
        prefyllInitials={nyEndringModal.initials}
        onClose={() => setNyEndringModal({ open: false })}
      />
    </div>
  );
}

// ── HR Oversikt ────────────────────────────────────────────────────────────
function HROversiktMock({ apne, utkast, utgaende, korteVikar, goTab, onNyEndring }) {
  const apneSaker = PERSONAL_ENDRINGER.filter(p => p.status.startsWith('venter-')).slice(0, 4);
  const kritiske = ALL_EMPLOYEES
    .filter(e => {
      if (!e.sluttDato) return false;
      const d = (new Date(e.sluttDato) - new Date('2026-05-28')) / 86400000;
      return d >= 0 && d <= 90;
    })
    .sort((a, b) => new Date(a.sluttDato) - new Date(b.sluttDato))
    .slice(0, 5);

  const _fmtDato = (iso) => {
    const d = new Date(iso);
    const mnd = ['jan','feb','mar','apr','mai','jun','jul','aug','sep','okt','nov','des'];
    return `${d.getDate()}. ${mnd[d.getMonth()]}`;
  };

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14, marginBottom: 16 }}>
        <Card padded><KPI label="Åpne personalendringer" value={apne} sub="Venter på godkjenning" accent={apne > 0} /></Card>
        <Card padded><KPI label="Utkast" value={utkast} sub="Ikke sendt enda" /></Card>
        <Card padded><KPI label="Utgående kontrakter" value={utgaende} sub="Utløper innen 90 dgr" accent={utgaende > 0} /></Card>
        <Card padded><KPI label="Korte vikariater" value={korteVikar} sub="< 12 mnd varighet · følg opp" /></Card>
        <Card padded><KPI label="Totalt ansatte" value={ALL_EMPLOYEES.length} sub="4 selskaper · 11 enheter" /></Card>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Card title="Åpne personalendringer" action={
          <Button variant="ghost" size="sm" onClick={() => goTab('endringer')}>Se alle →</Button>
        }>
          {apneSaker.length === 0 ? (
            <div style={{ padding: '24px 0', textAlign: 'center', color: SK.soft, fontSize: 12.5 }}>Ingen åpne saker.</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
              {apneSaker.map(p => {
                const emp = findEmp(p.person);
                const typeInfo = ENDRING_TYPER[p.type];
                const krysser = p.fraSelskap !== p.tilSelskap;
                return (
                  <div key={p.id} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '10px 12px', background: SK.iceBlueLight, borderRadius: 8,
                  }}>
                    <Avatar initials={p.person} color={emp?.c || SK.lightBlue} size={30} />
                    <div style={{ flex: 1, fontSize: 12 }}>
                      <div style={{ fontWeight: 600 }}>{p.personNavn}</div>
                      <div style={{ fontSize: 11, color: SK.soft, marginTop: 1, display: 'flex', alignItems: 'center', gap: 6 }}>
                        <span style={{ color: typeInfo.farge, fontWeight: 600 }}>{typeInfo.ikon} {typeInfo.label}</span>
                        <span>· {p.nr}</span>
                        {krysser && <span style={{ background: SK.coral, color: '#fff', padding: '0 5px', borderRadius: 3, fontSize: 9, fontWeight: 700, letterSpacing: 0.05 }}>KRYSSER SELSKAP</span>}
                      </div>
                    </div>
                    <Pill status={ENDRING_STATUS[p.status].pill}>{ENDRING_STATUS[p.status].label.replace(' — ', '\u2009·\u2009')}</Pill>
                  </div>
                );
              })}
            </div>
          )}
        </Card>

        <Card title="Kontrakter som utløper snart" action={
          <Button variant="ghost" size="sm" onClick={() => goTab('kontrakter')}>Se alle →</Button>
        }>
          {kritiske.length === 0 ? (
            <div style={{ padding: '24px 0', textAlign: 'center', color: SK.soft, fontSize: 12.5 }}>Ingen utgående kontrakter.</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
              {kritiske.map(e => {
                const dager = Math.round((new Date(e.sluttDato) - new Date('2026-05-28')) / 86400000);
                const farlig = dager <= 30;
                const kt = KONTRAKT_TYPER[e.kontrakt];
                return (
                  <div key={e.i} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '10px 12px', background: SK.iceBlueLight, borderRadius: 8,
                  }}>
                    <Avatar initials={e.i} color={e.c} size={30} />
                    <div style={{ flex: 1, fontSize: 12 }}>
                      <div style={{ fontWeight: 600 }}>{e.n}</div>
                      <div style={{ fontSize: 11, color: SK.soft, marginTop: 1 }}>
                        {kt.label} · {e.r}{e.vikarFor ? ` · vikar for ${e.vikarFor.split(' (')[0]}` : ''}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 11.5, fontWeight: 600, color: farlig ? SK.coral : '#8e5a05' }}>{dager} dgr</div>
                      <div style={{ fontSize: 10.5, color: SK.soft }}>{_fmtDato(e.sluttDato)}</div>
                    </div>
                    <Button variant="ghost" size="sm" onClick={() => onNyEndring(e.i)}>Følg opp →</Button>
                  </div>
                );
              })}
            </div>
          )}
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { HRWorkspaceMock, HROversiktMock });