// organisasjon.jsx — Organisasjonsmodul

// ── OrgAvatar — selvstendig avatar-komponent ─────────────────

function OrgAvatar({ navn, avatarUrl, farge, size = 34, fontSize = 11 }) {
  const [imgFeil, setImgFeil] = React.useState(false);
  const ini = navn
    ? navn.split(' ').filter(Boolean).map(n => n[0]).slice(0, 2).join('').toUpperCase()
    : '?';
  const bg = farge || '#9aa3b8';
  const base = { width: size, height: size, borderRadius: '50%', flexShrink: 0,
    overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' };
  if (avatarUrl && !imgFeil) {
    return (
      <div style={base}>
        <img src={avatarUrl} alt={navn || ''} onError={() => setImgFeil(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }} />
      </div>
    );
  }
  return <div style={{ ...base, background: bg, color: '#fff', fontSize, fontWeight: 700 }}>{ini}</div>;
}

// Bemanning: automatisk fra profiles.enhet_id (trigger i Supabase)
// Tilgang: basert på rolle fra profiles/roller-tabellen

// ── Supabase-kall ─────────────────────────────────────────────

async function hentEnheter() {
  const { data, error } = await window._sb
    .from('enheter').select('*, selskap:selskaper!selskap_id(id,navn,type,nokkel)').eq('aktiv', true).order('sortering');
  if (error) throw error;
  return data || [];
}

async function hentSelskaper() {
  const { data } = await window._sb
    .from('selskaper').select('*').eq('aktiv', true).order('sortering');
  return data || [];
}

async function hentEnhetsProfiler() {
  const { data, error } = await window._sb
    .from('profiles')
    .select('id, navn, epost, enhet_id, rolle_id, avatar_url, roller(navn, farge, nokkel)')
    .order('navn');
  if (error) throw error;
  return data || [];
}

async function oppdaterEnhet(id, felter) {
  const { data, error } = await window._sb
    .from('enheter').update(felter).eq('id', id).select().single();
  if (error) {
    if (error.code === '42501') throw new Error('Du har ikke tilgang til å redigere denne enheten.');
    throw error;
  }
  return data;
}

async function opprettEnhet(felter) {
  const { data, error } = await window._sb
    .from('enheter').insert([felter]).select().single();
  if (error) {
    if (error.code === '42501') throw new Error('Du har ikke tilgang til å opprette enheter.');
    throw error;
  }
  return data;
}

async function slettEnhet(id) {
  await window._sb.from('enheter').update({ parent_id: null }).eq('parent_id', id);
  const { error } = await window._sb.from('enheter').update({ aktiv: false }).eq('id', id);
  if (error) {
    if (error.code === '42501') throw new Error('Kun daglig leder kan slette enheter.');
    throw error;
  }
}

// ── Tilgangssjekk (UI-lag) ────────────────────────────────────
// RLS er sannhetskilden — dette er bare for å skjule/vise knapper

function sjekkTilgang(profil, enhet) {
  const rolle = profil?.roller?.nokkel;
  if (!rolle) return { kanOppretteSlett: false, kanRediger: false, kanBytteLeder: false };
  const erAdmin  = rolle === 'daglig-leder';
  const erAvdLed = rolle === 'avd-leder' && enhet && enhet.leder_epost === profil.epost;
  const erHR     = rolle === 'hr';
  return {
    kanOppretteSlett: erAdmin,
    kanRediger:       erAdmin || erAvdLed,
    kanBytteLeder:    erAdmin || erAvdLed || erHR,
  };
}

// ── Konstanter ────────────────────────────────────────────────

const ENHET_TONE_MAP = {
  styre:      { bg: '#e6e1f3', fg: '#4a3a7a', label: 'Styre' },
  leder:      { bg: '#fcddde', fg: '#8a1620', label: 'Daglig leder' },
  stab:       { bg: SK.iceBlue, fg: SK.ink,   label: 'Stab' },
  avdeling:   { bg: '#dbeed8', fg: '#1b6a2e', label: 'Avdeling' },
  entreprise: { bg: '#fdeac8', fg: '#8e5a05', label: 'Entreprise' },
};

const ENHET_TYPER = [
  ['styre','Styre'],['leder','Daglig leder'],['stab','Stab'],
  ['avdeling','Avdeling'],['entreprise','Entreprise'],
];

function orgIni(navn) {
  if (!navn) return '?';
  return navn.split(' ').filter(Boolean).map(n => n[0]).slice(0, 2).join('').toUpperCase();
}
function orgFarge(navn) {
  const f = ['#f2545c','#586ba4','#08605f','#11183d','#f2cc8f','#bbe8ff'];
  return f[(navn || '').charCodeAt(0) % f.length];
}

// ── Rediger-skjema ────────────────────────────────────────────

function EnhetSkjema({ enhet, alleEnheter, alleProfiler, selskaper, lokasjoner, innloggetProfil, onLagret, onAvbryt, onSlettet, onLokasjonLagtTil }) {
  const tilgang = sjekkTilgang(innloggetProfil, enhet);

  const [navn,       setNavn]    = React.useState(enhet?.navn        || '');
  const [type,       setType]    = React.useState(enhet?.type        || 'avdeling');
  const [beskrivelse,setBesk]    = React.useState(enhet?.beskrivelse || '');
  const [lokasjon,   setLok]     = React.useState(enhet?.lokasjon    || '');
  const [lokasjonId, setLokId]   = React.useState(enhet?.lokasjon_id || '');
  const [lederEpost, setLeder]   = React.useState(enhet?.leder_epost || '');
  const [parentId,   setParent]  = React.useState(enhet?.parent_id   || '');
  const [selskapId,  setSelskapId] = React.useState(enhet?.selskap_id || '');
  const [avdNr,      setAvdNr]   = React.useState(enhet?.avd_nr       || '');
  const [attestId,   setAttestId]= React.useState(enhet?.attest_profil_id || '');
  const [laster,     setLaster]  = React.useState(false);
  const [feil,       setFeil]    = React.useState(null);
  const [bekreftSlett, setBekr]  = React.useState(false);
  // Ny lokasjon inline
  const [visNyLok,   setVisNyLok]= React.useState(false);
  const [nyLokNavn,  setNyLokNavn]= React.useState('');
  const [nyLokAdr,   setNyLokAdr]= React.useState('');
  const [lagrerLok,  setLagrerLok]= React.useState(false);
  const [lokListe,   setLokListe]= React.useState(lokasjoner || []);

  React.useEffect(() => { setLokListe(lokasjoner || []); }, [lokasjoner]);

  const opprettNyLokasjon = async () => {
    if (!nyLokNavn.trim()) return;
    setLagrerLok(true);
    try {
      const res = window.lagreLokasjon
        ? await window.lagreLokasjon({ navn: nyLokNavn.trim(), adresse: nyLokAdr.trim() || null, enhet_id: null })
        : null;
      if (res) {
        setLokListe(prev => [...prev, res].sort((a,b) => a.navn.localeCompare(b.navn)));
        setLokId(res.id);
        setLok(res.navn);
        if (onLokasjonLagtTil) onLokasjonLagtTil(res);
      }
      setVisNyLok(false); setNyLokNavn(''); setNyLokAdr('');
    } catch(e) { setFeil('Kunne ikke lagre lokasjon: ' + e.message); }
    finally { setLagrerLok(false); }
  };

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Enhetsnavn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const valgtAttest = alleProfiler.find(p => p.id === attestId);
    const valgtLok    = lokListe.find(l => l.id === lokasjonId);
    const felter = {
      navn, type, beskrivelse,
      lokasjon: valgtLok ? valgtLok.navn : lokasjon,
      lokasjon_id: lokasjonId || null,
      leder_epost: lederEpost || null,
      parent_id:   parentId   || null,
      selskap_id:  selskapId  || null,
      avd_nr:      avdNr      || null,
      attest_profil_id: attestId || null,
      attest_navn:  valgtAttest ? (valgtAttest.navn || valgtAttest.epost) : (enhet?.attest_navn || null),
      attest_epost: valgtAttest ? valgtAttest.epost : (enhet?.attest_epost || null),
    };
    try {
      const res = enhet ? await oppdaterEnhet(enhet.id, felter) : await opprettEnhet(felter);
      onLagret(res);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  };

  const slett = async () => {
    setLaster(true);
    try { await slettEnhet(enhet.id); onSlettet(enhet.id); }
    catch(e) { setFeil(e.message); setLaster(false); }
  };

  const lbl = { fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 };
  const inp = { padding: '10px 12px', fontSize: 13 };

  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 4 }}>
        {enhet ? `Rediger: ${enhet.navn}` : 'Ny enhet'}
      </div>
      {innloggetProfil?.roller?.nokkel === 'avd-leder' && (
        <div style={{ fontSize: 12, color: SK.soft, marginBottom: 14 }}>
          Du kan redigere navn, beskrivelse og leder for din enhet.
        </div>
      )}
      {feil && (
        <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8,
          padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>
      )}

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:13, marginBottom:18 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Enhetsnavn *</label>
          <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)}
            autoFocus style={inp} disabled={!tilgang.kanRediger} />
        </div>

        {tilgang.kanOppretteSlett && (
          <>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Type</label>
              <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={inp}>
                {ENHET_TYPER.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
              </select>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Tilhører</label>
              <select className="ok-input" value={parentId} onChange={e=>setParent(e.target.value)} style={inp}>
                <option value="">— Toppnivå —</option>
                {alleEnheter.filter(e => e.id !== enhet?.id).map(e => (
                  <option key={e.id} value={e.id}>{e.navn}</option>
                ))}
              </select>
            </div>
          </>
        )}

        {tilgang.kanBytteLeder && (
          <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
            <label style={lbl}>Leder</label>
            <select className="ok-input" value={lederEpost} onChange={e=>setLeder(e.target.value)} style={inp}>
              <option value="">— Ikke satt —</option>
              {alleProfiler.filter(p => p.navn || p.epost).map(p => (
                <option key={p.id} value={p.epost}>{p.navn || p.epost}</option>
              ))}
            </select>
          </div>
        )}

        {tilgang.kanOppretteSlett && (
          <>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Selskap</label>
              <select className="ok-input" value={selskapId} onChange={e=>setSelskapId(e.target.value)} style={inp}>
                <option value="">— Ikke satt —</option>
                {(selskaper||[]).map(s => (
                  <option key={s.id} value={s.id}>{s.navn}{s.type==='morselskap'?' (mor)':''}</option>
                ))}
              </select>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Avdelingsnummer</label>
              <input className="ok-input" value={avdNr} onChange={e=>setAvdNr(e.target.value)}
                placeholder="f.eks. 580" style={inp} />
            </div>
          </>
        )}

        {/* Attestansvarlig — koblet til brukerprofil */}
        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Attestansvarlig</label>
          <select className="ok-input" value={attestId} onChange={e=>setAttestId(e.target.value)} style={inp}
            disabled={!tilgang.kanRediger}>
            <option value="">— Ikke satt —</option>
            {alleProfiler.filter(p => p.navn || p.epost).map(p => (
              <option key={p.id} value={p.id}>{p.navn || p.epost}</option>
            ))}
          </select>
        </div>

        {/* Lokasjon — nedtrekk + legg til ny */}
        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Lokasjon</label>
          {!visNyLok ? (
            <div style={{ display:'flex', gap:6 }}>
              <select className="ok-input" value={lokasjonId}
                onChange={e=>{ setLokId(e.target.value); const l=lokListe.find(x=>x.id===e.target.value); setLok(l?l.navn:''); }}
                style={{ ...inp, flex:1 }} disabled={!tilgang.kanRediger}>
                <option value="">— Velg lokasjon —</option>
                {lokListe.map(l => <option key={l.id} value={l.id}>{l.navn}{l.adresse?` · ${l.adresse}`:''}</option>)}
              </select>
              {tilgang.kanRediger && (
                <Button size="sm" onClick={()=>setVisNyLok(true)} title="Legg til ny lokasjon">+ Ny</Button>
              )}
            </div>
          ) : (
            <div style={{ border:'1px dashed rgba(17,24,61,.2)', borderRadius:8, padding:'10px 12px', display:'flex', flexDirection:'column', gap:8 }}>
              <input className="ok-input" value={nyLokNavn} onChange={e=>setNyLokNavn(e.target.value)}
                placeholder="Navn på lokasjon *" style={inp} autoFocus />
              <input className="ok-input" value={nyLokAdr} onChange={e=>setNyLokAdr(e.target.value)}
                placeholder="Adresse (valgfritt)" style={inp} />
              <div style={{ display:'flex', gap:6 }}>
                <Button size="sm" variant="primary" onClick={opprettNyLokasjon} disabled={lagrerLok || !nyLokNavn.trim()}>
                  {lagrerLok ? 'Lagrer…' : 'Legg til'}
                </Button>
                <Button size="sm" onClick={()=>{ setVisNyLok(false); setNyLokNavn(''); setNyLokAdr(''); }}>Avbryt</Button>
              </div>
            </div>
          )}
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Beskrivelse</label>
          <textarea className="ok-input" value={beskrivelse} onChange={e=>setBesk(e.target.value)}
            rows={2} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }}
            disabled={!tilgang.kanRediger} />
        </div>
      </div>

      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ display:'flex', gap:8 }}>
          <Button variant="primary" onClick={lagre} disabled={laster || !tilgang.kanRediger}>
            {laster ? 'Lagrer…' : (enhet ? 'Lagre' : 'Opprett')}
          </Button>
          <Button onClick={onAvbryt}>Avbryt</Button>
        </div>

        {enhet && onSlettet && tilgang.kanOppretteSlett && (
          <div style={{ display:'flex', gap:8, alignItems:'center' }}>
            {!bekreftSlett ? (
              <Button size="sm" onClick={()=>setBekr(true)}>Slett enhet</Button>
            ) : (
              <>
                <span style={{ fontSize:12, color:SK.coral }}>Sikker? Barn-enheter løsrives.</span>
                <Button size="sm" onClick={slett} disabled={laster}
                  style={{ background:SK.coral, color:'#fff', borderColor:SK.coral }}>
                  Ja, slett
                </Button>
                <Button size="sm" onClick={()=>setBekr(false)}>Nei</Button>
              </>
            )}
          </div>
        )}
      </div>

      {!tilgang.kanRediger && !tilgang.kanBytteLeder && (
        <div style={{ marginTop: 12, fontSize: 12, color: SK.soft, lineHeight: 1.5,
          padding:'8px 12px', background:'rgba(17,24,61,.04)', borderRadius:8 }}>
          Du har lesetilgang til organisasjonsstrukturen. Kontakt daglig leder eller HR for å gjøre endringer.
        </div>
      )}
    </div>
  );
}

// ── OrgNodeKort ───────────────────────────────────────────────

function OrgNodeKort({ enhet, aktiv, onClick, onRediger, kompakt, profiler, innloggetProfil }) {
  if (!enhet) return null;
  const tone   = ENHET_TONE_MAP[enhet.type] || ENHET_TONE_MAP.stab;
  const leder  = profiler?.find(p => p.epost === enhet.leder_epost);
  const ini    = leder?.navn ? orgIni(leder.navn) : null;
  const tilgang = sjekkTilgang(innloggetProfil, enhet);

  return (
    <div style={{
      position:'relative', cursor:'pointer',
      background: SK.pureWhite, borderRadius:10,
      border:`1.5px solid ${aktiv ? SK.coral : 'rgba(17,24,61,.1)'}`,
      padding: kompakt ? '10px 12px' : '12px 14px',
      display:'flex', gap:10, alignItems:'center',
      boxShadow: aktiv ? '0 4px 16px rgba(242,84,92,.12)' : '0 1px 4px rgba(17,24,61,.05)',
      transition:'all .15s',
    }} onClick={onClick}>
      <div style={{ width: kompakt ? 4 : 5, alignSelf:'stretch', borderRadius:99,
        background:tone.bg, flexShrink:0 }} />
      {leder && (
        <OrgAvatar
          navn={leder.navn} avatarUrl={leder.avatar_url}
          farge={orgFarge(leder.navn)}
          size={kompakt ? 28 : 34} fontSize={10}
        />
      )}
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize: kompakt ? 12 : 13, fontWeight:600,
          whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
          {enhet.navn}
        </div>
        <div style={{ fontSize: kompakt ? 10.5 : 11, color:SK.soft, marginTop:1,
          whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
          {leder?.navn || tone.label}
          {enhet.headcount > 0 && (
            <span style={{ marginLeft:6 }}>· {enhet.headcount} ansatte</span>
          )}
        </div>
      </div>
      {onRediger && (tilgang.kanRediger || tilgang.kanBytteLeder) && (
        <button onClick={e=>{e.stopPropagation();onRediger(enhet);}}
          title="Rediger enhet"
          style={{ background:'none', border:'1px solid rgba(17,24,61,.12)', borderRadius:6,
            padding:'3px 7px', cursor:'pointer', fontSize:10.5, color:SK.soft, fontFamily:'inherit', flexShrink:0 }}>
          ✏
        </button>
      )}
    </div>
  );
}

// ── Interaktivt org-kart ──────────────────────────────────────

function OrgKart({ enheter, profiler, valgtId, setValgtId, onRediger, innloggetProfil }) {
  const styret = enheter.find(e => e.type === 'styre');
  const leder  = enheter.find(e => e.type === 'leder');
  const staber = enheter.filter(e => e.type === 'stab');
  const avd    = enheter.filter(e => e.type === 'avdeling');

  const Node = ({ e, kompakt }) => (
    <OrgNodeKort enhet={e} profiler={profiler} kompakt={kompakt}
      innloggetProfil={innloggetProfil}
      aktiv={valgtId === e?.id}
      onRediger={onRediger}
      onClick={() => setValgtId(valgtId === e?.id ? null : e?.id)}
    />
  );
  const Linje = () => (
    <div style={{ width:1.5, height:20, background:'rgba(17,24,61,.15)', margin:'0 auto' }} />
  );

  return (
    <Card padded style={{ overflow:'hidden' }}>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center',
        gap:16, padding:'20px 16px 8px', overflowX:'auto', minWidth:800 }}>
        {styret && <div style={{ width:280 }}><Node e={styret} /></div>}
        <Linje />
        {leder  && <div style={{ width:280 }}><Node e={leder}  /></div>}
        <Linje />
        {staber.length > 0 && (
          <>
            <div style={{ fontSize:10, fontWeight:700, letterSpacing:0.1,
              textTransform:'uppercase', color:SK.soft }}>Stab</div>
            <div style={{ display:'flex', gap:12, width:'100%', justifyContent:'center' }}>
              {staber.map(e => (
                <div key={e.id} style={{ flex:1, maxWidth:280 }}><Node e={e} kompakt /></div>
              ))}
            </div>
            <Linje />
          </>
        )}
        {avd.length > 0 && (
          <>
            <div style={{ fontSize:10, fontWeight:700, letterSpacing:0.1,
              textTransform:'uppercase', color:SK.soft }}>Avdelinger</div>
            <div style={{ display:'flex', gap:16, width:'100%', alignItems:'flex-start', justifyContent:'center' }}>
              {avd.map(e => {
                const barn = enheter.filter(b => b.parent_id === e.id);
                return (
                  <div key={e.id} style={{ flex:1, display:'flex', flexDirection:'column', maxWidth:280 }}>
                    <Node e={e} />
                    {barn.map(b => (
                      <React.Fragment key={b.id}>
                        <div style={{ width:1.5, height:12, background:'rgba(17,24,61,.15)', margin:'0 auto' }} />
                        <Node e={b} kompakt />
                      </React.Fragment>
                    ))}
                  </div>
                );
              })}
            </div>
          </>
        )}
      </div>
      <div style={{ padding:'10px 16px', borderTop:'1px solid rgba(17,24,61,.06)',
        fontSize:11.5, color:SK.soft }}>
        Klikk enhet for detaljer · ✏ for å redigere (vises kun for din enhet)
      </div>
    </Card>
  );
}

// ── Detalj­panel ──────────────────────────────────────────────

function EnhetDetalj({ enhet, alleEnheter, profiler, selskaper, lokasjoner, innloggetProfil, onLukk, onOppdatert, onSlettet }) {
  const [redigerer,   setRedigerer]   = React.useState(false);
  const [bytterLeder, setBytterLeder] = React.useState(false);
  const [lederEpost,  setLederEpost]  = React.useState(enhet.leder_epost || '');
  const [lagrerLeder, setLagrerLeder] = React.useState(false);

  const tone    = ENHET_TONE_MAP[enhet.type] || ENHET_TONE_MAP.stab;
  const leder   = profiler.find(p => p.epost === enhet.leder_epost);
  const parent  = enhet.parent_id ? alleEnheter.find(e => e.id === enhet.parent_id) : null;
  const children= alleEnheter.filter(e => e.parent_id === enhet.id);
  const ansatte = profiler.filter(p => p.enhet_id === enhet.id);
  const tilgang = sjekkTilgang(innloggetProfil, enhet);

  const lagreLeder = async () => {
    setLagrerLeder(true);
    try {
      const oppdatert = await oppdaterEnhet(enhet.id, { leder_epost: lederEpost || null });
      onOppdatert(oppdatert);
      setBytterLeder(false);
    } catch(e) { alert(e.message); } finally { setLagrerLeder(false); }
  };

  if (redigerer) {
    return (
      <div style={{ marginTop:20, background:SK.iceBlueLight, borderRadius:10,
        border:'1px solid rgba(17,24,61,.08)' }}>
        <EnhetSkjema
          enhet={enhet} alleEnheter={alleEnheter} alleProfiler={profiler}
          selskaper={selskaper} lokasjoner={lokasjoner}
          innloggetProfil={innloggetProfil}
          onLagret={oppdatert => { onOppdatert(oppdatert); setRedigerer(false); }}
          onAvbryt={() => setRedigerer(false)}
          onSlettet={id => { onSlettet(id); onLukk(); }}
        />
      </div>
    );
  }

  return (
    <div style={{ marginTop:20, padding:18, background:SK.iceBlueLight,
      borderRadius:10, border:'1px solid rgba(17,24,61,.08)' }}>
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between',
        gap:14, marginBottom:16 }}>
        <div>
          <span style={{ display:'inline-block', padding:'2px 9px', borderRadius:99,
            fontSize:10.5, fontWeight:600, letterSpacing:0.04, textTransform:'uppercase',
            background:tone.bg, color:tone.fg, marginBottom:6 }}>{tone.label}</span>
          <h2 style={{ margin:0, fontSize:20, fontWeight:600, letterSpacing:-0.01 }}>{enhet.navn}</h2>
          {enhet.beskrivelse && (
            <div style={{ fontSize:12.5, color:SK.soft, marginTop:4, lineHeight:1.4 }}>{enhet.beskrivelse}</div>
          )}
        </div>
        <div style={{ display:'flex', gap:6, flexShrink:0 }}>
          {(tilgang.kanRediger || tilgang.kanBytteLeder) && (
            <Button size="sm" variant="primary" onClick={() => setRedigerer(true)}>Rediger</Button>
          )}
          <button onClick={onLukk} style={{
            background:'none', border:'1px solid rgba(17,24,61,.15)', borderRadius:99,
            width:28, height:28, cursor:'pointer', color:SK.soft,
            display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M18 6 6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginBottom:16 }}>
        {/* Leder med hurtigredigering */}
        <div style={{ padding:'10px 12px', borderRadius:8, background:SK.pureWhite,
          border:'1px solid rgba(17,24,61,.08)', gridColumn:'1/span 2' }}>
          <div style={{ fontSize:10, fontWeight:600, color:SK.soft, letterSpacing:0.04,
            textTransform:'uppercase', marginBottom:6 }}>Leder</div>
          {bytterLeder ? (
            <div style={{ display:'flex', gap:6, alignItems:'center' }}>
              <select className="ok-input" value={lederEpost} onChange={e=>setLederEpost(e.target.value)}
                style={{ padding:'5px 8px', fontSize:12, flex:1 }}>
                <option value="">— Ingen —</option>
                {profiler.filter(p => p.navn || p.epost).map(p => (
                  <option key={p.id} value={p.epost}>{p.navn || p.epost}</option>
                ))}
              </select>
              <Button size="sm" variant="primary" onClick={lagreLeder} disabled={lagrerLeder}>✓</Button>
              <Button size="sm" onClick={()=>{setBytterLeder(false);setLederEpost(enhet.leder_epost||'');}}>✕</Button>
            </div>
          ) : (
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                {leder?.navn && (
                  <OrgAvatar navn={leder.navn} avatarUrl={leder.avatar_url}
                    farge={orgFarge(leder.navn)} size={26} fontSize={9} />
                )}
                <span style={{ fontSize:13, fontWeight:500 }}>
                  {leder?.navn || enhet.leder_epost || <span style={{ color:SK.soft, fontStyle:'italic' }}>Ikke satt</span>}
                </span>
              </div>
              {tilgang.kanBytteLeder && (
                <button onClick={()=>setBytterLeder(true)} style={{
                  background:'none', border:'1px solid rgba(17,24,61,.1)', borderRadius:4,
                  cursor:'pointer', color:SK.soft, fontSize:11, fontFamily:'inherit', padding:'2px 6px' }}>
                  Bytt
                </button>
              )}
            </div>
          )}
        </div>

        {[
          ['Avd.nr', enhet.avd_nr || '—'],
          ['Selskap', enhet.selskap?.navn || '—'],
          ['Lokasjon', enhet.lokasjon || '—'],
          ['Attestansvarlig', enhet.attest_navn
            ? `${enhet.attest_navn}${enhet.attest_tlf ? ' · ' + enhet.attest_tlf : ''}`
            : '—'],
          ['Tilhører', parent?.navn || 'Toppnivå'],
        ].map(([l, v]) => (
          <div key={l} style={{ padding:'10px 12px', borderRadius:8, background:SK.pureWhite,
            border:'1px solid rgba(17,24,61,.08)' }}>
            <div style={{ fontSize:10, fontWeight:600, color:SK.soft, letterSpacing:0.04,
              textTransform:'uppercase' }}>{l}</div>
            <div style={{ fontSize:13.5, fontWeight:500, marginTop:6 }}>{v}</div>
          </div>
        ))}
      </div>

      {children.length > 0 && (
        <div style={{ marginBottom:14 }}>
          <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04,
            textTransform:'uppercase', marginBottom:8 }}>Underenheter ({children.length})</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:8 }}>
            {children.map(c => (
              <OrgNodeKort key={c.id} enhet={c} profiler={profiler}
                innloggetProfil={innloggetProfil} kompakt />
            ))}
          </div>
        </div>
      )}

      {ansatte.length > 0 && (
        <div style={{ borderTop:'1px solid rgba(17,24,61,.08)', paddingTop:12 }}>
          <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04,
            textTransform:'uppercase', marginBottom:8 }}>
            Direkte ansatte i systemet ({ansatte.length})
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(200px, 1fr))', gap:8 }}>
            {ansatte.map(p => (
              <div key={p.id} style={{ display:'flex', alignItems:'center', gap:10,
                padding:'8px 12px', background:SK.pureWhite, borderRadius:8,
                border:'1px solid rgba(17,24,61,.08)' }}>
                <div style={{ width:32, height:32, borderRadius:'50%', flexShrink:0,
                  background:orgFarge(p.navn), color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:11, fontWeight:700 }}>{orgIni(p.navn)}</div>
                <div>
                  <div style={{ fontSize:12.5, fontWeight:600 }}>{p.navn || p.epost}</div>
                  {p.roller?.navn && (
                    <div style={{ fontSize:11, color:SK.soft }}>{p.roller.navn}</div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Enhets­liste ──────────────────────────────────────────────

function EnhetsListeTabell({ enheter, profiler, setValgtId, onRediger, innloggetProfil }) {
  return (
    <Card padded={false}>
      <table className="ok-table">
        <thead>
          <tr>
            <th style={{ paddingLeft:18, width:50 }}>Nr.</th>
            <th>Avdeling</th>
            <th>Type</th>
            <th>Selskap</th>
            <th>Attestansvarlig</th>
            <th>Lokasjon</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {enheter.filter(e => e.type !== 'styre').map(e => {
            const tone   = ENHET_TONE_MAP[e.type] || ENHET_TONE_MAP.stab;
            const tilgang = sjekkTilgang(innloggetProfil, e);
            return (
              <tr key={e.id}>
                <td style={{ paddingLeft:18, fontSize:12, fontWeight:700, color:SK.soft, fontFamily:'ui-monospace, monospace' }}>
                  {e.avd_nr || '—'}
                </td>
                <td>
                  <div style={{ fontWeight:600, fontSize:13 }}>{e.navn}</div>
                  {e.merknad && (
                    <div style={{ fontSize:11, color:SK.soft, marginTop:2, maxWidth:260 }}>{e.merknad}</div>
                  )}
                </td>
                <td>
                  <span style={{ display:'inline-block', padding:'2px 9px', borderRadius:99,
                    fontSize:10.5, fontWeight:600, background:tone.bg, color:tone.fg }}>
                    {tone.label}
                  </span>
                </td>
                <td style={{ fontSize:12 }}>
                  {e.selskap?.navn ? (
                    <span style={{ display:'inline-flex', alignItems:'center', gap:5 }}>
                      {e.selskap.type === 'morselskap' && <span style={{ fontSize:9, color:'#a01a25' }}>●</span>}
                      {e.selskap.navn.replace('OsloKollega ','OK ')}
                    </span>
                  ) : <span style={{ color:SK.soft }}>—</span>}
                </td>
                <td style={{ fontSize:12 }}>
                  {e.attest_navn ? (
                    <div>
                      <div style={{ fontWeight:500 }}>{e.attest_navn}</div>
                      {e.attest_tlf && <div style={{ fontSize:10.5, color:SK.soft }}>{e.attest_tlf}</div>}
                    </div>
                  ) : <span style={{ color:SK.coral, fontStyle:'italic' }}>Ikke satt</span>}
                </td>
                <td style={{ fontSize:12, color:SK.soft }}>{e.lokasjon || '—'}</td>
                <td>
                  <div style={{ display:'flex', gap:6 }}>
                    <Button size="sm" onClick={() => setValgtId(e.id)}>Detaljer</Button>
                    {(tilgang.kanRediger || tilgang.kanBytteLeder) && (
                      <Button size="sm" onClick={() => onRediger(e)}>Rediger</Button>
                    )}
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </Card>
  );
}

// ── Hoved­komponent ───────────────────────────────────────────

function KonsernKart({ selskaper, enheter, profiler, setValgtId, onRediger }) {
  if (!selskaper || selskaper.length === 0) {
    return <div style={{ padding:24, textAlign:'center', color:SK.soft, fontSize:13 }}>
      Ingen konsernstruktur lastet. Kjør <code>supabase-konsern.sql</code>.
    </div>;
  }

  const mor = selskaper.find(s => s.type === 'morselskap');
  const dotre = selskaper.filter(s => s.type === 'datter');
  const avdFor = sId => enheter.filter(e => e.selskap_id === sId).sort((a,b) => (a.sortering||0)-(b.sortering||0));
  const ansatteFor = eId => profiler.filter(p => p.enhet_id === eId).length;

  const SelskapKort = ({ selskap, erMor }) => {
    const avd = avdFor(selskap.id);
    return (
      <div style={{ border:`1.5px solid ${erMor ? SK.coral : 'rgba(17,24,61,.15)'}`, borderRadius:12,
        background: erMor ? '#fff6f3' : SK.pureWhite, overflow:'hidden' }}>
        <div style={{ padding:'12px 16px', borderBottom:'1px solid rgba(17,24,61,.08)',
          background: erMor ? '#fdeae3' : SK.iceBlueLight }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <div>
              <div style={{ fontSize:10, fontWeight:700, letterSpacing:0.06, textTransform:'uppercase',
                color: erMor ? '#a01a25' : SK.soft }}>
                {erMor ? 'Morselskap' : 'Datterselskap'}
              </div>
              <div style={{ fontSize:15, fontWeight:600, marginTop:2 }}>{selskap.navn}</div>
            </div>
            <span style={{ fontSize:11.5, color:SK.soft }}>{avd.length} avd.</span>
          </div>
          {selskap.lokasjoner && (
            <div style={{ fontSize:11, color:SK.soft, marginTop:4 }}>{selskap.lokasjoner}</div>
          )}
        </div>
        <div style={{ padding:'10px 12px', display:'flex', flexDirection:'column', gap:5 }}>
          {avd.map(e => {
            const tone = ENHET_TONE_MAP[e.type] || ENHET_TONE_MAP.stab;
            return (
              <div key={e.id} onClick={() => setValgtId(e.id)} style={{
                cursor:'pointer', display:'flex', alignItems:'center', gap:10, padding:'7px 10px',
                borderRadius:8, border:'1px solid rgba(17,24,61,.06)', background:SK.pureWhite }}>
                {e.avd_nr && (
                  <span style={{ fontSize:11, fontWeight:700, color:SK.soft, minWidth:30,
                    fontFamily:'ui-monospace, monospace' }}>{e.avd_nr}</span>
                )}
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:12.5, fontWeight:600 }}>{e.navn}</div>
                  {e.attest_navn && (
                    <div style={{ fontSize:10.5, color:SK.soft, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                      Attestansvar: {e.attest_navn}
                    </div>
                  )}
                </div>
                <span style={{ fontSize:9.5, fontWeight:600, padding:'1px 7px', borderRadius:99,
                  background:tone.bg, color:tone.fg, whiteSpace:'nowrap' }}>{tone.label}</span>
              </div>
            );
          })}
          {avd.length === 0 && <div style={{ fontSize:12, color:SK.soft, padding:'4px 6px' }}>Ingen avdelinger.</div>}
        </div>
      </div>
    );
  };

  return (
    <div style={{ marginTop:16 }}>
      {mor && (
        <div style={{ maxWidth:560, margin:'0 auto 8px' }}>
          <SelskapKort selskap={mor} erMor />
        </div>
      )}
      {/* Forbindelseslinje */}
      {mor && dotre.length > 0 && (
        <div style={{ display:'flex', justifyContent:'center', marginBottom:8 }}>
          <div style={{ width:2, height:20, background:'rgba(17,24,61,.2)' }} />
        </div>
      )}
      <div style={{ display:'grid', gridTemplateColumns:`repeat(${Math.max(dotre.length,1)},1fr)`, gap:16 }}>
        {dotre.map(s => <SelskapKort key={s.id} selskap={s} />)}
      </div>
      <div style={{ marginTop:14, fontSize:11.5, color:SK.soft, textAlign:'center' }}>
        Klikk en avdeling for detaljer. {mor?.navn} eier datterselskapene {dotre.map(d=>d.navn).join(' og ')}.
      </div>
    </div>
  );
}

function Organisation({ go }) {
  const [enheter,       setEnheter]       = React.useState([]);
  const [selskaper,     setSelskaper]     = React.useState([]);
  const [lokasjoner,    setLokasjoner]    = React.useState([]);
  const [profiler,      setProfiler]      = React.useState([]);
  const [innloggetProfil, setInnloggetProfil] = React.useState(null);
  const [laster,        setLaster]        = React.useState(true);
  const [feil,          setFeil]          = React.useState(null);
  const [tab,           setTab]           = React.useState('konsern');
  const [valgtId,       setValgtId]       = React.useState(null);
  const [redigererEnhet,setRedigererEnhet]= React.useState(null);
  const [visNy,         setVisNy]         = React.useState(false);

  React.useEffect(() => { lastInn(); }, []);

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const { data: { user } } = await window._sb.auth.getUser();
      const [e, p, s] = await Promise.all([hentEnheter(), hentEnhetsProfiler(), hentSelskaper()]);
      setEnheter(e);
      setProfiler(p);
      setSelskaper(s);
      if (window.hentLokasjoner) window.hentLokasjoner().then(setLokasjoner).catch(()=>{});
      const meg = p.find(x => x.id === user?.id);
      setInnloggetProfil(meg || null);
    } catch(err) { setFeil(err.message); } finally { setLaster(false); }
  }

  const valgtEnhet   = valgtId ? enheter.find(e => e.id === valgtId) : null;
  const avd          = enheter.filter(e => e.type === 'avdeling');
  const stab         = enheter.filter(e => e.type === 'stab');
  const ent          = enheter.filter(e => e.type === 'entreprise');
  const utenLeder    = enheter.filter(e => e.type !== 'styre' && !e.leder_epost).length;
  const totalAnsatte = enheter.find(e => e.type === 'leder')?.headcount
                       || enheter.filter(e => e.type === 'avdeling').reduce((s,e) => s + (e.headcount||0), 0);

  const minTilgang   = sjekkTilgang(innloggetProfil, null);

  const handleOppdatert = oppdatert =>
    setEnheter(prev => prev.map(e => e.id === oppdatert.id ? oppdatert : e));

  const handleSlettet = id => {
    setEnheter(prev => prev.filter(e => e.id !== id));
    if (valgtId === id) setValgtId(null);
    setRedigererEnhet(null);
  };

  const SkjemaModal = ({ enhet }) => (
    <div style={{
      position:'fixed', inset:0, background:'rgba(17,24,61,.4)',
      display:'flex', alignItems:'center', justifyContent:'center',
      zIndex:1000, padding:20,
    }} onClick={e => { if (e.target === e.currentTarget) { setRedigererEnhet(null); setVisNy(false); } }}>
      <div style={{ background:SK.pureWhite, borderRadius:14, maxWidth:620, width:'100%',
        maxHeight:'90vh', overflowY:'auto', boxShadow:'0 20px 60px rgba(17,24,61,.25)' }}>
        <EnhetSkjema
          enhet={enhet}
          alleEnheter={enheter}
          alleProfiler={profiler}
          selskaper={selskaper}
          lokasjoner={lokasjoner}
          innloggetProfil={innloggetProfil}
          onLagret={res => {
            if (enhet) handleOppdatert(res);
            else setEnheter(prev => [...prev, res].sort((a,b) => a.sortering - b.sortering));
            setRedigererEnhet(null); setVisNy(false);
          }}
          onAvbryt={() => { setRedigererEnhet(null); setVisNy(false); }}
          onSlettet={enhet ? handleSlettet : null}
          onLokasjonLagtTil={lok => setLokasjoner(prev => [...prev, lok])}
        />
      </div>
    </div>
  );

  const tabs = [
    { id:'konsern',   label:'Konsern' },
    { id:'kart',      label:'Organisasjonskart' },
    { id:'enheter',   label:`Avdelinger (${enheter.length})` },
    { id:'lokasjoner',label:'Lokasjoner' },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth:1320 }}>
      {(redigererEnhet || visNy) && <SkjemaModal enhet={redigererEnhet} />}

      <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' }}>
            Masterdata · Organisasjon
          </div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>
            Organisasjonen
          </h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {avd.length} avdelinger · {ent.length} entrepriser · {stab.length} stabsfunksjoner
            {utenLeder > 0 && (
              <span style={{ color:SK.coral, marginLeft:8 }}>· ⚠ {utenLeder} enheter mangler leder</span>
            )}
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          {minTilgang.kanOppretteSlett && (
            <Button variant="primary" icon={I.plus} onClick={() => setVisNy(true)}>Ny enhet</Button>
          )}
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Ansatte totalt" value={laster?'…':totalAnsatte} sub="inkl. underenheter" /></Card>
        <Card padded><KPI label="Avdelinger" value={laster?'…':avd.length} sub={`${stab.length} stab`} /></Card>
        <Card padded><KPI label="Entrepriser" value={laster?'…':ent.length} sub="sosiale" /></Card>
        <Card padded><KPI label="Uten leder" value={laster?'…':utenLeder} sub="enheter" accent={utenLeder>0} /></Card>
      </div>

      {feil && (
        <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8,
          padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>
      )}

      {laster ? (
        <Card padded>
          <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster…</div>
        </Card>
      ) : (
        <>
          <Tabs tabs={tabs} value={tab} onChange={setTab} />
          {tab === 'konsern' && (
            <>
              <KonsernKart selskaper={selskaper} enheter={enheter} profiler={profiler}
                setValgtId={id => { setValgtId(id); setTab('kart'); }}
                onRediger={e => setRedigererEnhet(e)}
              />
            </>
          )}
          {tab === 'kart' && (
            <>
              <OrgKart enheter={enheter} profiler={profiler}
                valgtId={valgtId} setValgtId={setValgtId}
                onRediger={e => setRedigererEnhet(e)}
                innloggetProfil={innloggetProfil}
              />
              {valgtEnhet && (
                <EnhetDetalj enhet={valgtEnhet} alleEnheter={enheter} selskaper={selskaper} lokasjoner={lokasjoner}
                  profiler={profiler} innloggetProfil={innloggetProfil}
                  onLukk={() => setValgtId(null)}
                  onOppdatert={handleOppdatert}
                  onSlettet={handleSlettet}
                />
              )}
            </>
          )}
          {tab === 'lokasjoner' && (
            <LokasjonsPanel enheter={enheter} />
          )}

          {tab === 'enheter' && (
            <>
              <EnhetsListeTabell enheter={enheter} profiler={profiler}
                setValgtId={id => { setValgtId(id); setTab('kart'); }}
                onRediger={e => setRedigererEnhet(e)}
                innloggetProfil={innloggetProfil}
              />
              {valgtEnhet && (
                <EnhetDetalj enhet={valgtEnhet} alleEnheter={enheter} selskaper={selskaper} lokasjoner={lokasjoner}
                  profiler={profiler} innloggetProfil={innloggetProfil}
                  onLukk={() => setValgtId(null)}
                  onOppdatert={handleOppdatert}
                  onSlettet={handleSlettet}
                />
              )}
            </>
          )}
        </>
      )}
    </div>
  );
}

Object.assign(window, { Organisation });