// intranett.jsx — Intranett med Supabase

async function INT_hentKanaler() {
  const { data, error } = await window._sb
    .from('int_kanaler')
    .select('*')
    .order('opprettet_at');
  if (error) throw error;
  return data || [];
}

async function INT_hentMeldinger(kanalId, limit = 50) {
  const { data, error } = await window._sb
    .from('int_meldinger')
    .select('*, avsender:profiles!avsender_id(id,navn,epost)')
    .eq('kanal_id', kanalId)
    .order('opprettet_at', { ascending: true })
    .limit(limit);
  if (error) throw error;
  return data || [];
}

async function INT_sendMelding(kanalId, avsenderId, tekst) {
  const { data, error } = await window._sb
    .from('int_meldinger')
    .insert([{ kanal_id: kanalId, avsender_id: avsenderId, tekst }])
    .select('*, avsender:profiles!avsender_id(id,navn,epost)')
    .single();
  if (error) throw error;
  return data;
}

async function INT_hentKunngjøringer() {
  const { data, error } = await window._sb
    .from('int_kunngjøringer')
    .select('*, avsender:profiles!avsender_id(id,navn)')
    .eq('publisert', true)
    .order('opprettet_at', { ascending: false });
  if (error) throw error;
  return data || [];
}

async function INT_opprettKunngjøring(felter) {
  const { avsender, ...rene } = felter;
  const { data, error } = await window._sb.from('int_kunngjøringer').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

function intFmt(ts) {
  const d = new Date(ts);
  return d.toLocaleDateString('nb-NO', { day: 'numeric', month: 'short' }) + ' ' +
    d.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
}

function intInitialer(navn) {
  if (!navn) return '?';
  return navn.split(' ').filter(Boolean).map(n => n[0]).slice(0,2).join('').toUpperCase();
}

const INT_KANALGFARGER = ['#11183d','#586ba4','#08605f','#f2545c','#e08d3c','#9b59b6','#1abc9c'];

function intKanalFarge(navn) {
  let h = 0;
  for (let i = 0; i < (navn||'').length; i++) h = (h * 31 + navn.charCodeAt(i)) & 0xffffffff;
  return INT_KANALGFARGER[Math.abs(h) % INT_KANALGFARGER.length];
}

const INT_KUNNGJ_TYPER = {
  info:   { label: 'Info',   bg: '#e9eef7', fg: '#3c4a6b' },
  viktig: { label: 'Viktig', bg: '#fdeac8', fg: '#8e5a05' },
  urgent: { label: 'Haster', bg: '#fcddde', fg: '#8a1620' },
};

// ── Chat-komponent ────────────────────────────────────────────

function IntChat({ kanaler, brukerId, brukerNavn }) {
  const [valgtKanal,  setValgtKanal]  = React.useState(kanaler[0]?.id || null);
  const [meldinger,   setMeldinger]   = React.useState([]);
  const [nyMelding,   setNyMelding]   = React.useState('');
  const [laster,      setLaster]      = React.useState(false);
  const [sender,      setSender]      = React.useState(false);
  const bunRef = React.useRef(null);

  React.useEffect(() => {
    if (!valgtKanal) return;
    setLaster(true);
    INT_hentMeldinger(valgtKanal).then(m => {
      setMeldinger(m); setLaster(false);
    }).catch(() => setLaster(false));
  }, [valgtKanal]);

  React.useEffect(() => {
    bunRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [meldinger]);

  const sendMelding = async () => {
    if (!nyMelding.trim() || !brukerId) return;
    setSender(true);
    try {
      const msg = await INT_sendMelding(valgtKanal, brukerId, nyMelding.trim());
      setMeldinger(prev => [...prev, msg]);
      setNyMelding('');
    } catch(e) { alert(e.message); } finally { setSender(false); }
  };

  const valgtKanalData = kanaler.find(k => k.id === valgtKanal);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 0, height: 560, background: SK.pureWhite, borderRadius: 12, border: '1px solid rgba(17,24,61,.08)', overflow: 'hidden' }}>
      {/* Kanal-sidebar */}
      <div style={{ borderRight: '1px solid rgba(17,24,61,.08)', overflowY: 'auto', padding: '12px 0' }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: SK.soft, letterSpacing: .08, textTransform: 'uppercase', padding: '4px 14px', marginBottom: 6 }}>Kanaler</div>
        {kanaler.map(k => (
          <div key={k.id} onClick={() => setValgtKanal(k.id)} style={{
            cursor: 'pointer', padding: '7px 14px', fontSize: 13,
            fontWeight: valgtKanal === k.id ? 600 : 400,
            background: valgtKanal === k.id ? SK.iceBlueLight : 'transparent',
            color: valgtKanal === k.id ? SK.ink : SK.soft,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: intKanalFarge(k.navn), flexShrink: 0 }} />
            # {k.navn}
            {k.privat && <span style={{ marginLeft: 'auto', fontSize: 9, color: SK.soft }}>🔒</span>}
          </div>
        ))}
      </div>

      {/* Meldingsvisning */}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '12px 18px', borderBottom: '1px solid rgba(17,24,61,.08)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: intKanalFarge(valgtKanalData?.navn || ''), flexShrink: 0 }} />
          <span style={{ fontWeight: 600, fontSize: 13 }}>#{valgtKanalData?.navn}</span>
          {valgtKanalData?.beskrivelse && <span style={{ fontSize: 12, color: SK.soft }}>· {valgtKanalData.beskrivelse}</span>}
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {laster ? (
            <div style={{ textAlign: 'center', color: SK.soft, fontSize: 13, padding: 32 }}>Laster meldinger…</div>
          ) : meldinger.length === 0 ? (
            <div style={{ textAlign: 'center', color: SK.soft, fontSize: 13, padding: 32 }}>Ingen meldinger i denne kanalen ennå.</div>
          ) : (
            meldinger.map(m => {
              const erMeg = m.avsender_id === brukerId;
              return (
                <div key={m.id} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: erMeg ? SK.ink : '#e9eef7',
                    color: erMeg ? '#fff' : SK.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 700, flexShrink: 0 }}>
                    {intInitialer(m.avsender?.navn || m.avsender?.epost)}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'baseline', marginBottom: 3 }}>
                      <span style={{ fontSize: 12.5, fontWeight: 600 }}>{m.avsender?.navn || m.avsender?.epost || '?'}</span>
                      <span style={{ fontSize: 11, color: SK.soft }}>{intFmt(m.opprettet_at)}</span>
                    </div>
                    <div style={{ fontSize: 13, lineHeight: 1.6, color: SK.ink }}>{m.tekst}</div>
                  </div>
                </div>
              );
            })
          )}
          <div ref={bunRef} />
        </div>

        <div style={{ padding: '12px 18px', borderTop: '1px solid rgba(17,24,61,.08)', display: 'flex', gap: 8 }}>
          <input className="ok-input" value={nyMelding}
            onChange={e => setNyMelding(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && !e.shiftKey && sendMelding()}
            placeholder={`Skriv i #${valgtKanalData?.navn || ''}…`}
            style={{ flex: 1, padding: '9px 12px', fontSize: 13 }} />
          <Button variant="primary" size="sm" onClick={sendMelding} disabled={sender || !nyMelding.trim()}>
            {sender ? '…' : 'Send'}
          </Button>
        </div>
      </div>
    </div>
  );
}

// ── IntranettWorkspace (hoved) ────────────────────────────────

function IntranettWorkspace({ go }) {
  const [kanaler,       setKanaler]       = React.useState([]);
  const [kunngjøringer, setKunngjøringer] = React.useState([]);
  const [laster,        setLaster]        = React.useState(true);
  const [feil,          setFeil]          = React.useState(null);
  const [fane,          setFane]          = React.useState('forside');
  const [brukerId,      setBrukerId]      = React.useState(null);
  const [brukerNavn,    setBrukerNavn]    = React.useState('');
  const [visNyKunngj,   setVisNyKunngj]  = React.useState(false);
  const [nyTittel,      setNyTittel]      = React.useState('');
  const [nyInnhold,     setNyInnhold]     = React.useState('');
  const [nyType,        setNyType]        = React.useState('info');

  React.useEffect(() => {
    window._sb.auth.getUser().then(({ data: { user } }) => {
      if (!user) return;
      setBrukerId(user.id);
      window._sb.from('profiles').select('navn').eq('id', user.id).single()
        .then(({ data }) => setBrukerNavn(data?.navn || user.email));
    });
    lastInn();
  }, []);

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [k, ku] = await Promise.all([INT_hentKanaler(), INT_hentKunngjøringer()]);
      setKanaler(k); setKunngjøringer(ku);
    } catch(err) { setFeil(err.message); } finally { setLaster(false); }
  }

  const publiserKunngj = async () => {
    if (!nyTittel.trim() || !nyInnhold.trim()) return;
    try {
      const res = await INT_opprettKunngjøring({ tittel: nyTittel, innhold: nyInnhold, type: nyType, prioritet: 'normal', avsender_id: brukerId, publisert: true });
      setKunngjøringer(prev => [res, ...prev]);
      setNyTittel(''); setNyInnhold(''); setVisNyKunngj(false);
    } catch(e) { alert(e.message); }
  };

  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' }}>Kommunikasjon</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>Intranett</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>
            {kanaler.length} kanaler · {kunngjøringer.length} kunngjøringer
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisNyKunngj(true)}>Ny kunngjøring</Button>
        </div>
      </div>

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

      <div style={{ display: 'flex', borderBottom: '1px solid rgba(17,24,61,.08)', marginBottom: 22 }}>
        {[['forside','Forside'],['meldinger','Meldinger'],['kunngjøringer',`Kunngjøringer (${kunngjøringer.length})`]].map(([k, l]) => (
          <button key={k} onClick={() => setFane(k)} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: '9px 18px',
            fontSize: 13, fontWeight: fane === k ? 600 : 400,
            color: fane === k ? SK.ink : SK.soft,
            borderBottom: fane === k ? `2px solid ${SK.coral}` : '2px solid transparent',
            fontFamily: 'inherit',
          }}>{l}</button>
        ))}
      </div>

      {laster ? (
        <Card padded><div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster…</div></Card>
      ) : (
        <>
          {fane === 'forside' && (
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 18 }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: .08, textTransform: 'uppercase', marginBottom: 12 }}>Siste kunngjøringer</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {kunngjøringer.slice(0,5).map(k => {
                    const type = INT_KUNNGJ_TYPER[k.type] || INT_KUNNGJ_TYPER.info;
                    return (
                      <div key={k.id} style={{ background: SK.pureWhite, borderRadius: 10, border: '1px solid rgba(17,24,61,.08)', padding: '14px 16px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 6 }}>
                          <div style={{ fontWeight: 600, fontSize: 13.5 }}>{k.tittel}</div>
                          <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: type.bg, color: type.fg, flexShrink: 0 }}>{type.label}</span>
                        </div>
                        <div style={{ fontSize: 13, color: SK.soft, lineHeight: 1.6 }}>{k.innhold}</div>
                        <div style={{ marginTop: 8, fontSize: 11, color: SK.soft }}>
                          {k.avsender?.navn || '—'} · {intFmt(k.opprettet_at)}
                        </div>
                      </div>
                    );
                  })}
                  {kunngjøringer.length === 0 && (
                    <div style={{ padding: 24, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Ingen kunngjøringer ennå.</div>
                  )}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: .08, textTransform: 'uppercase', marginBottom: 12 }}>Kanaler</div>
                <Card padded={false}>
                  {kanaler.map((k, i) => (
                    <div key={k.id} style={{ padding: '10px 16px', borderTop: i > 0 ? '1px solid rgba(17,24,61,.06)' : 'none',
                      display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
                      onClick={() => setFane('meldinger')}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: intKanalFarge(k.navn), flexShrink: 0 }} />
                      <span style={{ fontSize: 13, flex: 1 }}>#{k.navn}</span>
                      {k.privat && <span style={{ fontSize: 10, color: SK.soft }}>🔒</span>}
                    </div>
                  ))}
                </Card>
              </div>
            </div>
          )}

          {fane === 'meldinger' && kanaler.length > 0 && (
            <IntChat kanaler={kanaler} brukerId={brukerId} brukerNavn={brukerNavn} />
          )}

          {fane === 'kunngjøringer' && (
            <div>
              {visNyKunngj && (
                <Card padded style={{ marginBottom: 18 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>Ny kunngjøring</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <input className="ok-input" value={nyTittel} onChange={e => setNyTittel(e.target.value)}
                      placeholder="Tittel…" style={{ padding: '8px 11px', fontSize: 13 }} />
                    <textarea className="ok-input" value={nyInnhold} onChange={e => setNyInnhold(e.target.value)}
                      rows={4} placeholder="Innhold…" style={{ padding: '8px 11px', fontSize: 13, resize: 'vertical', fontFamily: 'inherit' }} />
                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                      <select className="ok-input" value={nyType} onChange={e => setNyType(e.target.value)} style={{ width: 160, padding: '8px 11px', fontSize: 13 }}>
                        {Object.entries(INT_KUNNGJ_TYPER).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
                      </select>
                      <Button variant="primary" onClick={publiserKunngj} disabled={!nyTittel.trim() || !nyInnhold.trim()}>Publiser</Button>
                      <Button onClick={() => { setVisNyKunngj(false); setNyTittel(''); setNyInnhold(''); }}>Avbryt</Button>
                    </div>
                  </div>
                </Card>
              )}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {kunngjøringer.map(k => {
                  const type = INT_KUNNGJ_TYPER[k.type] || INT_KUNNGJ_TYPER.info;
                  return (
                    <div key={k.id} style={{ background: SK.pureWhite, borderRadius: 10, border: '1px solid rgba(17,24,61,.08)', padding: '16px 18px' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
                        <div style={{ fontWeight: 600, fontSize: 14 }}>{k.tittel}</div>
                        <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 99, background: type.bg, color: type.fg, flexShrink: 0 }}>{type.label}</span>
                      </div>
                      <div style={{ fontSize: 13, lineHeight: 1.7, color: SK.ink }}>{k.innhold}</div>
                      <div style={{ marginTop: 10, fontSize: 11.5, color: SK.soft }}>
                        Publisert av {k.avsender?.navn || '—'} · {intFmt(k.opprettet_at)}
                      </div>
                    </div>
                  );
                })}
                {kunngjøringer.length === 0 && (
                  <div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Ingen kunngjøringer.</div>
                )}
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}

function IntForside({ go }) { return React.createElement('div'); }
function IntAI({ go }) { return React.createElement('div'); }
function IntKunngjoringer({ go }) { return React.createElement('div'); }

Object.assign(window, { IntranettWorkspace, IntForside, IntAI, IntKunngjoringer });