// protokoller.jsx — Møter & protokoller med Supabase
// Erstatter ProtocolHub, MeetingSeriesDetail og Protocol

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

async function hentMoter() {
  const { data, error } = await window._sb
    .from('moter')
    .select('*, leder:profiles!leder_id(id,navn,epost), enhet:enheter!enhet_id(id,navn)')
    .eq('aktiv', true)
    .order('neste_dato', { ascending: true });
  if (error) throw error;
  return data || [];
}

async function hentProtokollListe(moteId) {
  const q = window._sb
    .from('protokoller')
    .select('*, leder:profiles!leder_id(id,navn), sekretaer:profiles!sekretaer_id(id,navn)')
    .order('dato', { ascending: false });
  if (moteId) q.eq('mote_id', moteId);
  const { data, error } = await q;
  if (error) throw error;
  return data || [];
}

async function hentProtokoll(id) {
  const { data, error } = await window._sb
    .from('protokoller')
    .select(`
      *,
      leder:profiles!leder_id(id,navn,epost),
      sekretaer:profiles!sekretaer_id(id,navn,epost),
      moter(id,navn,farge,standard_agenda),
      vedtak(id,tekst,rekkefølge),
      protokoll_deltakere(id,tilstede,profil_id,profiles(id,navn,epost,roller(navn,farge)))
    `)
    .eq('id', id)
    .single();
  if (error) throw error;
  return data;
}

async function hentProfilListe() {
  const { data } = await window._sb
    .from('profiles').select('id,navn,epost,roller(navn,farge)').order('navn');
  return data || [];
}

async function opprettProtokoll(felter) {
  const { eier, sekr, ...rene } = felter;
  const { data, error } = await window._sb.from('protokoller').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

async function oppdaterProtokoll(id, felter) {
  const { leder, sekretaer, moter, vedtak: v, protokoll_deltakere: pd, opprettet_av_navn, ...rene } = felter;
  const { data, error } = await window._sb.from('protokoller').update(rene).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

async function lagreVedtak(protokollId, tekster) {
  await window._sb.from('vedtak').delete().eq('protokoll_id', protokollId);
  if (tekster.length === 0) return;
  await window._sb.from('vedtak').insert(
    tekster.map((tekst, i) => ({ protokoll_id: protokollId, tekst, rekkefølge: i }))
  );
}

async function lagreDeltakere(protokollId, deltakere) {
  await window._sb.from('protokoll_deltakere').delete().eq('protokoll_id', protokollId);
  if (deltakere.length === 0) return;
  await window._sb.from('protokoll_deltakere').insert(
    deltakere.map(d => ({ protokoll_id: protokollId, profil_id: d.profil_id, tilstede: d.tilstede }))
  );
}

// Lagre transkripsjonslinjer (jsonb-array) på protokollen
async function PROT_lagreTranskripsjon(protokollId, linjer) {
  const { error } = await window._sb.from('protokoller')
    .update({ transkripsjon: linjer }).eq('id', protokollId);
  if (error) throw error;
}

// Generer AI-sammendrag fra transkripsjon. Bruker window._anthropicKey hvis satt.
async function PROT_genererSammendrag(protokollId, linjer, tittel) {
  const tekst = (linjer || []).map(l => `${l.taler || 'Ukjent'}: ${l.tekst}`).join('\n');
  if (!tekst.trim()) throw new Error('Ingen transkripsjon å oppsummere.');

  if (!window._anthropicKey) {
    throw new Error('AI-nøkkel ikke konfigurert. Sammendrag kan genereres når Anthropic-API er koblet til.');
  }

  const res = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'x-api-key': window._anthropicKey,
      'anthropic-version': '2023-06-01',
      'anthropic-dangerous-direct-browser-access': 'true',
    },
    body: JSON.stringify({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 1024,
      messages: [{
        role: 'user',
        content: `Du er møtesekretær. Lag et kort, profesjonelt sammendrag på norsk av denne møtetranskripsjonen fra "${tittel}". Oppsummer hovedpunkter, beslutninger og oppfølgingspunkter i klar prosa.\n\n${tekst}`,
      }],
    }),
  });
  if (!res.ok) throw new Error('AI-tjenesten svarte ikke (' + res.status + ')');
  const data = await res.json();
  const sammendrag = (data.content || []).filter(b => b.type === 'text').map(b => b.text).join('\n').trim();

  await window._sb.from('protokoller')
    .update({ ai_sammendrag: sammendrag, ai_generert_at: new Date().toISOString() })
    .eq('id', protokollId);
  return sammendrag;
}

async function leggTilTiltakFraProtokoll(protokollId, tiltak, brukerId, brukerNavn) {
  const { error } = await window._sb.from('tiltak').insert(
    tiltak.map(t => ({
      tittel:         t.tittel,
      ansvarlig_id:   t.ansvarlig_id || null,
      ansvarlig_navn: t.ansvarlig_navn || null,
      frist:          t.frist || null,
      status:         'open',
      kategori:       'protokoll',
      protokoll_id:   protokollId,
      opprettet_av:   brukerId,
      opprettet_av_navn: brukerNavn,
    }))
  );
  if (error) throw error;
}

async function oppdaterMoteSerie(id, felter) {
  const { leder, enhet, ...rene } = felter;
  const { data, error } = await window._sb.from('moter').update(rene).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

async function opprettMoteSerie(felter) {
  const { data, error } = await window._sb.from('moter').insert([felter]).select().single();
  if (error) throw error;
  return data;
}

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

const PROT_STATUS = {
  utkast:          { label: 'Utkast',          bg: '#e9eef7', fg: '#3c4a6b' },
  til_godkjenning: { label: 'Til godkjenning', bg: '#fdeac8', fg: '#8e5a05' },
  godkjent:        { label: 'Godkjent',        bg: '#dbeed8', fg: '#1b6a2e' },
};

const KONF = {
  åpen:      { label: 'Åpen',      bg: '#dbeed8', fg: '#1b6a2e' },
  begrenset: { label: 'Begrenset', bg: '#fdeac8', fg: '#8e5a05' },
  fortrolig: { label: 'Fortrolig', bg: '#fcddde', fg: '#8a1620' },
};

function protFmtDato(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { weekday:'long', day:'numeric', month:'long', year:'numeric' });
}

function protFmtKort(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { day:'numeric', month:'short' });
}

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

function orgFarge2(navn) {
  const f=['#f2545c','#586ba4','#08605f','#11183d','#f2cc8f'];
  return f[(navn||'').charCodeAt(0)%f.length];
}

// ── MøteSerie-kort ────────────────────────────────────────────

function MoteSerieKort({ serie, aktiv, onClick, antallProtokoller }) {
  const dagerTil = serie.neste_dato
    ? Math.ceil((new Date(serie.neste_dato) - new Date()) / 86400000)
    : null;
  const konf = KONF[serie.konfidensialitet] || KONF.begrenset;
  const farge = serie.farge || '#586ba4';

  return (
    <div onClick={onClick} style={{
      cursor:'pointer', padding:'14px 16px', borderRadius:10,
      background: aktiv ? SK.iceBlueLight : SK.pureWhite,
      border:`1.5px solid ${aktiv ? SK.coral : 'rgba(17,24,61,.08)'}`,
      borderLeft:`4px solid ${farge}`,
      transition:'all .12s',
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:8 }}>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontWeight:600, fontSize:13.5 }}>{serie.navn}</div>
          <div style={{ fontSize:12, color:SK.soft, marginTop:3 }}>{serie.kadense_kort || serie.kadense}</div>
          {serie.leder?.navn && (
            <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>Leder: {serie.leder.navn}</div>
          )}
        </div>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4, flexShrink:0 }}>
          <span style={{ fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:99,
            background:konf.bg, color:konf.fg }}>{konf.label}</span>
          {dagerTil !== null && (
            <span style={{ fontSize:11, color: dagerTil <= 1 ? SK.coral : SK.soft, fontWeight: dagerTil <= 1 ? 700 : 400 }}>
              {dagerTil < 0 ? 'Passert' : dagerTil === 0 ? 'I dag' : dagerTil === 1 ? 'I morgen' : `Om ${dagerTil} dgr`}
            </span>
          )}
          {antallProtokoller > 0 && (
            <span style={{ fontSize:11, color:SK.soft }}>{antallProtokoller} protokoller</span>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Protokoll-rediger-skjema ──────────────────────────────────

function ProtokollSkjema({ protokoll, moter, profiler, brukerId, brukerNavn, onLagret, onAvbryt }) {
  const [moteId,    setMoteId]    = React.useState(protokoll?.mote_id     || '');
  const [tittel,    setTittel]    = React.useState(protokoll?.tittel      || '');
  const [dato,      setDato]      = React.useState(protokoll?.dato        || new Date().toISOString().split('T')[0]);
  const [tidFra,    setTidFra]    = React.useState(protokoll?.tid_fra     || '');
  const [tidTil,    setTidTil]    = React.useState(protokoll?.tid_til     || '');
  const [lokasjon,  setLokasjon]  = React.useState(protokoll?.lokasjon    || '');
  const [lederId,   setLederId]   = React.useState(protokoll?.leder_id    || '');
  const [sekrId,    setSekrId]    = React.useState(protokoll?.sekretaer_id|| '');
  const [status,    setStatus]    = React.useState(protokoll?.status      || 'utkast');
  const [konf,      setKonf]      = React.useState(protokoll?.konfidensialitet || 'begrenset');
  const [sammendrag,setSammendrag]= React.useState(protokoll?.sammendrag  || '');
  const [agenda,    setAgenda]    = React.useState((protokoll?.agenda||[]).join('\n'));
  const [laster,    setLaster]    = React.useState(false);
  const [feil,      setFeil]      = React.useState(null);

  // Fyll inn standard agenda fra møteserie
  const velgSerie = (id) => {
    setMoteId(id);
    const serie = moter.find(m => m.id === id);
    if (serie && !agenda && serie.standard_agenda?.length) {
      setAgenda(serie.standard_agenda.join('\n'));
    }
    if (serie && !tittel) {
      setTittel(`${serie.navn} · ${new Date(dato).toLocaleDateString('nb-NO', { day:'numeric', month:'short', year:'numeric' })}`);
    }
    if (serie?.leder_id && !lederId) setLederId(serie.leder_id);
  };

  const lagre = async () => {
    if (!tittel.trim() || !dato) { setFeil('Tittel og dato er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = {
      mote_id:          moteId     || null,
      tittel,
      dato,
      tid_fra:          tidFra     || null,
      tid_til:          tidTil     || null,
      lokasjon:         lokasjon   || null,
      leder_id:         lederId    || null,
      sekretaer_id:     sekrId     || null,
      status,
      konfidensialitet: konf,
      sammendrag:       sammendrag || null,
      agenda:           agenda.split('\n').map(s=>s.trim()).filter(Boolean),
      opprettet_av:     brukerId,
    };
    try {
      const res = protokoll
        ? await oppdaterProtokoll(protokoll.id, felter)
        : await opprettProtokoll(felter);
      onLagret(res);
    } catch(e) { setFeil(e.message); } finally { 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:16 }}>
        {protokoll ? 'Rediger protokoll' : 'Ny protokoll'}
      </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={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Møteserie</label>
          <select className="ok-input" value={moteId} onChange={e=>velgSerie(e.target.value)} style={inp}>
            <option value="">— Enkeltmøte —</option>
            {moter.map(m => <option key={m.id} value={m.id}>{m.navn}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Status</label>
          <select className="ok-input" value={status} onChange={e=>setStatus(e.target.value)} style={inp}>
            {Object.entries(PROT_STATUS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Tittel *</label>
          <input className="ok-input" value={tittel} onChange={e=>setTittel(e.target.value)}
            autoFocus style={inp} placeholder="f.eks. Ledergruppen · 12. juni 2026" />
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Dato *</label>
          <input className="ok-input" type="date" value={dato} onChange={e=>setDato(e.target.value)} style={inp} />
        </div>

        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
            <label style={lbl}>Fra</label>
            <input className="ok-input" type="time" value={tidFra} onChange={e=>setTidFra(e.target.value)} style={inp} />
          </div>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
            <label style={lbl}>Til</label>
            <input className="ok-input" type="time" value={tidTil} onChange={e=>setTidTil(e.target.value)} style={inp} />
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Møteleder</label>
          <select className="ok-input" value={lederId} onChange={e=>setLederId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {profiler.map(p => <option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Sekretær</label>
          <select className="ok-input" value={sekrId} onChange={e=>setSekrId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {profiler.map(p => <option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Lokasjon</label>
          <input className="ok-input" value={lokasjon} onChange={e=>setLokasjon(e.target.value)}
            placeholder="f.eks. Møterom Fjellveggen" style={inp} />
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Konfidensialitet</label>
          <select className="ok-input" value={konf} onChange={e=>setKonf(e.target.value)} style={inp}>
            <option value="åpen">Åpen</option>
            <option value="begrenset">Begrenset</option>
            <option value="fortrolig">Fortrolig</option>
          </select>
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Agenda (én sak per linje)</label>
          <textarea className="ok-input" value={agenda} onChange={e=>setAgenda(e.target.value)}
            rows={4} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }}
            placeholder="Behandling av forrige tiltaksplan&#10;Status prosjekter&#10;Eventuelt" />
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Sammendrag</label>
          <textarea className="ok-input" value={sammendrag} onChange={e=>setSammendrag(e.target.value)}
            rows={3} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }}
            placeholder="Kort oppsummering av møtet…" />
        </div>
      </div>

      <div style={{ display:'flex', gap:8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>
          {laster ? 'Lagrer…' : (protokoll ? 'Lagre endringer' : 'Opprett protokoll')}
        </Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Protokoll-detalj ──────────────────────────────────────────

function ProtokollTranskripsjon({ protokollId, tittel, transkripsjon, setTranskripsjon, aiSammendrag, setAiSammendrag }) {
  const [lytter,     setLytter]     = React.useState(false);
  const [stotter,    setStotter]    = React.useState(true);
  const [lagrer,     setLagrer]     = React.useState(false);
  const [aiLaster,   setAiLaster]   = React.useState(false);
  const [aiFeil,     setAiFeil]     = React.useState(null);
  const [taler,      setTaler]      = React.useState('');
  const [manuellTekst, setManuellTekst] = React.useState('');
  const recRef = React.useRef(null);
  const enderef = React.useRef(null);

  React.useEffect(() => {
    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) { setStotter(false); return; }
    const r = new SR();
    r.lang = 'nb-NO'; r.continuous = true; r.interimResults = false;
    r.onresult = (e) => {
      const siste = e.results[e.results.length - 1];
      if (siste && siste.isFinal) {
        const tekst = siste[0].transcript.trim();
        if (tekst) {
          setTranskripsjon(prev => [...prev, {
            ts: new Date().toISOString(),
            taler: taler || 'Møtet',
            tekst,
          }]);
        }
      }
    };
    r.onerror = () => setLytter(false);
    r.onend = () => { if (recRef.current?._aktiv) { try { r.start(); } catch(e){} } };
    recRef.current = r;
    return () => { try { r.stop(); } catch(e){} };
  }, [taler, setTranskripsjon]);

  React.useEffect(() => {
    if (enderef.current) enderef.current.scrollTop = enderef.current.scrollHeight;
  }, [transkripsjon.length]);

  const startStopp = () => {
    const r = recRef.current;
    if (!r) return;
    if (lytter) { r._aktiv = false; try { r.stop(); } catch(e){} setLytter(false); }
    else { r._aktiv = true; try { r.start(); setLytter(true); } catch(e){} }
  };

  const leggTilManuell = () => {
    if (!manuellTekst.trim()) return;
    setTranskripsjon(prev => [...prev, { ts: new Date().toISOString(), taler: taler || 'Manuelt', tekst: manuellTekst.trim() }]);
    setManuellTekst('');
  };

  const lagre = async () => {
    setLagrer(true);
    try { await PROT_lagreTranskripsjon(protokollId, transkripsjon); } catch(e) { console.error(e); }
    finally { setLagrer(false); }
  };

  const genererAI = async () => {
    setAiLaster(true); setAiFeil(null);
    try {
      const s = await PROT_genererSammendrag(protokollId, transkripsjon, tittel);
      setAiSammendrag(s);
    } catch(e) { setAiFeil(e.message); } finally { setAiLaster(false); }
  };

  return (
    <div>
      {/* Live-transkripsjon */}
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14, flexWrap:'wrap' }}>
        <Button variant={lytter?'ghost':'primary'} size="sm" onClick={startStopp} disabled={!stotter}>
          {lytter ? '■ Stopp opptak' : '● Start live-transkripsjon'}
        </Button>
        {lytter && <span style={{ fontSize:12, color:SK.coral, fontWeight:600, display:'inline-flex', alignItems:'center', gap:6 }}>
          <span style={{ width:8, height:8, borderRadius:'50%', background:SK.coral, animation:'pulse 1.2s infinite' }} />Lytter…
        </span>}
        <input className="ok-input" placeholder="Taler (valgfritt)" value={taler} onChange={e=>setTaler(e.target.value)}
          style={{ padding:'6px 10px', fontSize:12, maxWidth:160 }} />
        <Button size="sm" onClick={lagre} disabled={lagrer || transkripsjon.length===0} style={{ marginLeft:'auto' }}>
          {lagrer ? 'Lagrer…' : 'Lagre transkripsjon'}
        </Button>
      </div>

      {!stotter && (
        <div style={{ background:'#fdeac8', border:'1px solid #f2b950', borderRadius:8, padding:'9px 13px', fontSize:12.5, color:'#8e5a05', marginBottom:14 }}>
          Nettleseren støtter ikke live-transkripsjon. Bruk Chrome/Edge, eller legg inn tekst manuelt under.
        </div>
      )}

      {/* Transkripsjonsvisning */}
      <div ref={enderef} style={{ maxHeight:280, overflowY:'auto', border:'1px solid rgba(17,24,61,.1)', borderRadius:10,
        padding:'12px 14px', marginBottom:12, background:SK.iceBlueLight }}>
        {transkripsjon.length === 0 ? (
          <div style={{ fontSize:12.5, color:SK.soft, textAlign:'center', padding:'20px 0' }}>
            Ingen transkripsjon ennå. Start opptak eller legg inn tekst manuelt.
          </div>
        ) : transkripsjon.map((l, i) => (
          <div key={i} style={{ marginBottom:8, fontSize:13, lineHeight:1.5 }}>
            <span style={{ fontWeight:600, color:SK.ink }}>{l.taler}:</span>{' '}
            <span style={{ color:SK.ink }}>{l.tekst}</span>
            <span style={{ fontSize:10.5, color:SK.soft, marginLeft:6 }}>
              {l.ts ? new Date(l.ts).toLocaleTimeString('nb-NO',{hour:'2-digit',minute:'2-digit'}) : ''}
            </span>
          </div>
        ))}
      </div>

      {/* Manuell tekst */}
      <div style={{ display:'flex', gap:8, marginBottom:20 }}>
        <input className="ok-input" placeholder="Skriv inn en linje manuelt…" value={manuellTekst}
          onChange={e=>setManuellTekst(e.target.value)}
          onKeyDown={e=>{ if(e.key==='Enter') leggTilManuell(); }}
          style={{ flex:1, padding:'8px 12px', fontSize:13 }} />
        <Button size="sm" onClick={leggTilManuell} disabled={!manuellTekst.trim()}>Legg til</Button>
      </div>

      {/* AI-sammendrag */}
      <Card padded>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
          <div style={{ fontSize:13, fontWeight:600 }}>AI-sammendrag</div>
          <Button variant="primary" size="sm" onClick={genererAI} disabled={aiLaster || transkripsjon.length===0}>
            {aiLaster ? 'Genererer…' : '✨ Generer sammendrag'}
          </Button>
        </div>
        {aiFeil && (
          <div style={{ background:'#fdeac8', border:'1px solid #f2b950', borderRadius:8, padding:'9px 13px', fontSize:12.5, color:'#8e5a05', marginBottom:10 }}>
            {aiFeil}
          </div>
        )}
        {aiSammendrag ? (
          <div style={{ fontSize:13, lineHeight:1.6, color:SK.ink, whiteSpace:'pre-wrap' }}>{aiSammendrag}</div>
        ) : (
          <div style={{ fontSize:12.5, color:SK.soft }}>
            Generer et automatisk sammendrag av transkripsjonen. Sammendraget lagres på protokollen.
          </div>
        )}
      </Card>
    </div>
  );
}

function ProtokollDetalj({ protokollId, profiler, brukerId, brukerNavn, onLukk, onOppdatert, startFane }) {
  const [protokoll,  setProtokoll]  = React.useState(null);
  const [laster,     setLaster]     = React.useState(true);
  const [fane,       setFane]       = React.useState(startFane || 'oversikt');
  const [redigerer,  setRedigerer]  = React.useState(false);
  const [vedtakTekst,setVedtakTekst]= React.useState([]);
  const [nyttVedtak, setNyttVedtak] = React.useState('');
  const [nyeTiltak,  setNyeTiltak]  = React.useState([]);
  const [lagreVedtakStatus, setLVS] = React.useState(null);
  const [transkripsjon, setTranskripsjon] = React.useState([]);
  const [aiSammendrag,  setAiSammendrag]  = React.useState('');

  React.useEffect(() => {
    setLaster(true);
    hentProtokoll(protokollId).then(p => {
      setProtokoll(p);
      setVedtakTekst((p.vedtak||[]).sort((a,b)=>a.rekkefølge-b.rekkefølge).map(v=>v.tekst));
      setTranskripsjon(Array.isArray(p.transkripsjon) ? p.transkripsjon : []);
      setAiSammendrag(p.ai_sammendrag || '');
      setLaster(false);
    }).catch(() => setLaster(false));
  }, [protokollId]);

  const lagreVedtakNaa = async () => {
    setLVS('lagrer');
    try {
      await lagreVedtak(protokollId, vedtakTekst);
      setLVS('lagret');
      setTimeout(() => setLVS(null), 2000);
    } catch(e) { setLVS('feil'); }
  };

  const leggTilVedtak = () => {
    if (!nyttVedtak.trim()) return;
    setVedtakTekst(prev => [...prev, nyttVedtak.trim()]);
    setNyttVedtak('');
  };

  const lagreTiltakNaa = async () => {
    if (nyeTiltak.length === 0) return;
    try {
      await leggTilTiltakFraProtokoll(protokollId, nyeTiltak, brukerId, brukerNavn);
      setNyeTiltak([]);
      alert(`${nyeTiltak.length} tiltak lagt til i Tiltaksplan.`);
    } catch(e) { alert(e.message); }
  };

  if (laster) return <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster protokoll…</div>;
  if (!protokoll) return null;

  const statTone = PROT_STATUS[protokoll.status] || PROT_STATUS.utkast;
  const konfTone = KONF[protokoll.konfidensialitet] || KONF.begrenset;
  const deltakere = protokoll.protokoll_deltakere || [];

  if (redigerer) {
    return (
      <Card padded={false}>
        <ProtokollSkjema
          protokoll={protokoll}
          moter={[]}
          profiler={profiler}
          brukerId={brukerId}
          brukerNavn={brukerNavn}
          onLagret={res => { setProtokoll({ ...protokoll, ...res }); setRedigerer(false); onOppdatert && onOppdatert(res); }}
          onAvbryt={() => setRedigerer(false)}
        />
      </Card>
    );
  }

  return (
    <div style={{ marginTop:16 }}>
      <Card padded={false}>
        {/* Header */}
        <div style={{ padding:'16px 18px', borderBottom:'1px solid rgba(17,24,61,.08)',
          display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12 }}>
          <div style={{ flex:1, minWidth:0 }}>
            {protokoll.moter && (
              <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04,
                textTransform:'uppercase', marginBottom:4 }}>
                {protokoll.moter.navn}
              </div>
            )}
            <h2 style={{ margin:0, fontSize:18, fontWeight:600, letterSpacing:-0.01, lineHeight:1.3 }}>
              {protokoll.tittel}
            </h2>
            <div style={{ display:'flex', gap:8, marginTop:8, flexWrap:'wrap', alignItems:'center' }}>
              <span style={{ fontSize:12, color:SK.soft }}>{protFmtDato(protokoll.dato)}</span>
              {protokoll.tid_fra && <span style={{ fontSize:12, color:SK.soft }}>· {protokoll.tid_fra}{protokoll.tid_til ? ` – ${protokoll.tid_til}` : ''}</span>}
              {protokoll.lokasjon && <span style={{ fontSize:12, color:SK.soft }}>· {protokoll.lokasjon}</span>}
              <span style={{ fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:99, background:statTone.bg, color:statTone.fg }}>{statTone.label}</span>
              <span style={{ fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:99, background:konfTone.bg, color:konfTone.fg }}>{konfTone.label}</span>
            </div>
          </div>
          <div style={{ display:'flex', gap:6, flexShrink:0 }}>
            <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>

        {/* Faner */}
        <div style={{ display:'flex', borderBottom:'1px solid rgba(17,24,61,.08)' }}>
          {[['oversikt','Oversikt'],['transkripsjon','Transkripsjon & AI'],['vedtak','Vedtak'],['tiltak','Tiltak'],['deltakere','Deltakere']].map(([k,l]) => (
            <button key={k} onClick={() => setFane(k)} style={{
              background:'none', border:'none', cursor:'pointer', padding:'9px 16px',
              fontSize:12.5, 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>

        <div style={{ padding:'16px 18px' }}>
          {fane === 'oversikt' && (
            <div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:16 }}>
                {[
                  ['Møteleder', protokoll.leder?.navn || '—'],
                  ['Sekretær', protokoll.sekretaer?.navn || '—'],
                ].map(([l,v]) => (
                  <div key={l} style={{ padding:'10px 12px', borderRadius:8, background:SK.iceBlueLight }}>
                    <div style={{ fontSize:10, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase' }}>{l}</div>
                    <div style={{ fontSize:13.5, fontWeight:500, marginTop:5 }}>{v}</div>
                  </div>
                ))}
              </div>
              {protokoll.sammendrag && (
                <div style={{ fontSize:13, lineHeight:1.6, color:SK.soft }}>{protokoll.sammendrag}</div>
              )}
              {protokoll.agenda?.length > 0 && (
                <div style={{ marginTop:16 }}>
                  <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', marginBottom:8 }}>Agenda</div>
                  {protokoll.agenda.map((punkt, i) => (
                    <div key={i} style={{ display:'flex', gap:10, padding:'6px 0', borderBottom:'1px solid rgba(17,24,61,.05)' }}>
                      <span style={{ fontSize:11, color:SK.soft, minWidth:20 }}>{i+1}.</span>
                      <span style={{ fontSize:13 }}>{punkt}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {fane === 'transkripsjon' && (
            <ProtokollTranskripsjon
              protokollId={protokollId}
              tittel={protokoll.tittel}
              transkripsjon={transkripsjon}
              setTranskripsjon={setTranskripsjon}
              aiSammendrag={aiSammendrag}
              setAiSammendrag={setAiSammendrag}
            />
          )}

          {fane === 'vedtak' && (
            <div>
              {vedtakTekst.map((v, i) => (
                <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start', padding:'8px 0',
                  borderBottom:'1px solid rgba(17,24,61,.05)' }}>
                  <div style={{ width:22, height:22, borderRadius:'50%', background:SK.ink, color:'#fff',
                    display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700, flexShrink:0, marginTop:1 }}>
                    {i+1}
                  </div>
                  <input className="ok-input" value={v}
                    onChange={e => setVedtakTekst(prev => prev.map((x,j) => j===i ? e.target.value : x))}
                    style={{ flex:1, padding:'6px 10px', fontSize:13 }} />
                  <button onClick={() => setVedtakTekst(prev => prev.filter((_,j) => j!==i))}
                    style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, padding:'4px', fontSize:16 }}>×</button>
                </div>
              ))}
              <div style={{ display:'flex', gap:8, marginTop:12 }}>
                <input className="ok-input" value={nyttVedtak} onChange={e=>setNyttVedtak(e.target.value)}
                  onKeyDown={e => e.key==='Enter' && leggTilVedtak()}
                  placeholder="Skriv vedtak og trykk Enter…" style={{ flex:1, padding:'8px 11px', fontSize:13 }} />
                <Button size="sm" onClick={leggTilVedtak} disabled={!nyttVedtak.trim()}>Legg til</Button>
              </div>
              <div style={{ marginTop:12, display:'flex', gap:8, alignItems:'center' }}>
                <Button variant="primary" size="sm" onClick={lagreVedtakNaa}>Lagre vedtak</Button>
                {lagreVedtakStatus === 'lagret' && <span style={{ fontSize:12, color:'#1b6a2e' }}>✓ Lagret</span>}
                {lagreVedtakStatus === 'feil' && <span style={{ fontSize:12, color:SK.coral }}>Feil ved lagring</span>}
              </div>
            </div>
          )}

          {fane === 'tiltak' && (
            <div>
              <div style={{ fontSize:12.5, color:SK.soft, marginBottom:14, lineHeight:1.5 }}>
                Tiltak herfra legges direkte inn i Tiltaksplanen og kobles til denne protokollen.
              </div>
              {nyeTiltak.map((t, i) => (
                <div key={i} style={{ display:'flex', gap:8, marginBottom:8, alignItems:'center' }}>
                  <input className="ok-input" value={t.tittel}
                    onChange={e => setNyeTiltak(prev => prev.map((x,j) => j===i ? {...x, tittel:e.target.value} : x))}
                    style={{ flex:2, padding:'7px 10px', fontSize:13 }} placeholder="Hva skal gjøres?" />
                  <select className="ok-input" value={t.ansvarlig_id||''}
                    onChange={e => {
                      const p = profiler.find(x=>x.id===e.target.value);
                      setNyeTiltak(prev => prev.map((x,j) => j===i ? {...x, ansvarlig_id:e.target.value, ansvarlig_navn:p?.navn||null} : x));
                    }}
                    style={{ flex:1, padding:'7px 10px', fontSize:13 }}>
                    <option value="">— Ansvarlig —</option>
                    {profiler.map(p => <option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
                  </select>
                  <input className="ok-input" type="date" value={t.frist||''}
                    onChange={e => setNyeTiltak(prev => prev.map((x,j) => j===i ? {...x, frist:e.target.value} : x))}
                    style={{ width:140, padding:'7px 10px', fontSize:13 }} />
                  <button onClick={() => setNyeTiltak(prev => prev.filter((_,j) => j!==i))}
                    style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:18 }}>×</button>
                </div>
              ))}
              <div style={{ display:'flex', gap:8, marginTop:4 }}>
                <Button size="sm" icon={I.plus} onClick={() => setNyeTiltak(prev => [...prev, { tittel:'', ansvarlig_id:null, frist:'' }])}>
                  Legg til tiltak
                </Button>
                {nyeTiltak.length > 0 && (
                  <Button size="sm" variant="primary" onClick={lagreTiltakNaa}>
                    Lagre {nyeTiltak.length} tiltak til tiltaksplan
                  </Button>
                )}
              </div>
            </div>
          )}

          {fane === 'deltakere' && (
            <div>
              {deltakere.length === 0 ? (
                <div style={{ fontSize:13, color:SK.soft }}>Ingen deltakere registrert.</div>
              ) : (
                <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(200px,1fr))', gap:8 }}>
                  {deltakere.map(d => {
                    const p = d.profiles;
                    const ini = p?.navn ? orgIni2(p.navn) : '?';
                    const farge = p?.navn ? orgFarge2(p.navn) : '#9aa3b8';
                    return (
                      <div key={d.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 12px',
                        background: d.tilstede ? SK.iceBlueLight : 'rgba(17,24,61,.03)',
                        borderRadius:8, border:'1px solid rgba(17,24,61,.08)',
                        opacity: d.tilstede ? 1 : 0.5 }}>
                        <div style={{ width:30, height:30, borderRadius:'50%', background:farge, color:'#fff',
                          display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700 }}>
                          {ini}
                        </div>
                        <div>
                          <div style={{ fontSize:12.5, fontWeight:600 }}>{p?.navn || p?.epost || '—'}</div>
                          <div style={{ fontSize:11, color: d.tilstede ? '#1b6a2e' : SK.soft }}>
                            {d.tilstede ? 'Til stede' : 'Fraværende'}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}

// ── ProtocolHub (hoved­komponent) ────────────────────────────

function ProtocolHub({ go }) {
  const [moter,         setMoter]         = React.useState([]);
  const [protokoller,   setProtokoller]   = React.useState([]);
  const [profiler,      setProfiler]      = React.useState([]);
  const [laster,        setLaster]        = React.useState(true);
  const [feil,          setFeil]          = React.useState(null);
  const [valgtMoteId,   setValgtMoteId]   = React.useState(null);
  const [valgtProtId,   setValgtProtId]   = React.useState(null);
  const [visNyProt,     setVisNyProt]     = React.useState(false);
  const [brukerId,      setBrukerId]      = React.useState(null);
  const [brukerNavn,    setBrukerNavn]    = React.useState('');

  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 [m, p, pr] = await Promise.all([hentMoter(), hentProtokollListe(), hentProfilListe()]);
      setMoter(m);
      setProtokoller(p);
      setProfiler(pr);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  const filtrerteProtokoller = valgtMoteId
    ? protokoller.filter(p => p.mote_id === valgtMoteId)
    : protokoller;

  const utkast    = protokoller.filter(p => p.status === 'utkast').length;
  const tilGodkj  = protokoller.filter(p => p.status === 'til_godkjenning').length;
  const kommende  = moter.filter(m => m.neste_dato && new Date(m.neste_dato) > new Date()).length;

  if (visNyProt) {
    return (
      <div className="ok-content__inner" style={{ maxWidth:800 }}>
        <Card padded={false}>
          <ProtokollSkjema
            moter={moter}
            profiler={profiler}
            brukerId={brukerId}
            brukerNavn={brukerNavn}
            onLagret={res => { setProtokoller(prev => [res, ...prev]); setVisNyProt(false); setValgtProtId(res.id); }}
            onAvbryt={() => setVisNyProt(false)}
          />
        </Card>
      </div>
    );
  }

  return (
    <div className="ok-content__inner" style={{ maxWidth:1320 }}>
      {/* Header */}
      <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' }}>Arbeid</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Møter & protokoller</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {moter.length} møteserier · {protokoller.length} protokoller
            {tilGodkj > 0 && <span style={{ color:SK.coral }}> · {tilGodkj} venter godkjenning</span>}
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisNyProt(true)}>Ny protokoll</Button>
        </div>
      </div>

      {/* KPI */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Møteserier" value={laster?'…':moter.length} sub="aktive" /></Card>
        <Card padded><KPI label="Kommende møter" value={laster?'…':kommende} sub="innen 14 dgr" /></Card>
        <Card padded><KPI label="Utkast" value={laster?'…':utkast} sub="ikke godkjent" accent={utkast>0} /></Card>
        <Card padded><KPI label="Til godkjenning" value={laster?'…':tilGodkj} sub="venter" accent={tilGodkj>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>
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'280px 1fr', gap:18, alignItems:'flex-start' }}>
          {/* Møteserier-sidebar */}
          <div>
            <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.08,
              textTransform:'uppercase', marginBottom:10 }}>Møteserier</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              <div onClick={() => setValgtMoteId(null)} style={{
                cursor:'pointer', padding:'10px 12px', borderRadius:8, fontSize:12.5,
                fontWeight: !valgtMoteId ? 600 : 400,
                background: !valgtMoteId ? SK.ink : 'transparent',
                color: !valgtMoteId ? '#fff' : SK.ink,
                border:'1px solid rgba(17,24,61,.1)',
              }}>
                Alle protokoller ({protokoller.length})
              </div>
              {moter.map(m => (
                <MoteSerieKort key={m.id} serie={m}
                  aktiv={valgtMoteId === m.id}
                  antallProtokoller={protokoller.filter(p => p.mote_id === m.id).length}
                  onClick={() => setValgtMoteId(valgtMoteId===m.id ? null : m.id)}
                />
              ))}
            </div>
          </div>

          {/* Protokollliste + detalj */}
          <div>
            <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.08,
              textTransform:'uppercase', marginBottom:10 }}>
              {valgtMoteId ? moter.find(m=>m.id===valgtMoteId)?.navn : 'Alle protokoller'}
              {' '}({filtrerteProtokoller.length})
            </div>

            {filtrerteProtokoller.length === 0 ? (
              <Card padded>
                <div style={{ padding:24, textAlign:'center', color:SK.soft, fontSize:13 }}>
                  Ingen protokoller. Klikk «Ny protokoll» for å opprette.
                </div>
              </Card>
            ) : (
              <Card padded={false}>
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Protokoll</th>
                      <th>Dato</th>
                      <th>Leder</th>
                      <th>Vedtak</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtrerteProtokoller.map(p => {
                      const tone = PROT_STATUS[p.status] || PROT_STATUS.utkast;
                      const erValgt = p.id === valgtProtId;
                      return (
                        <tr key={p.id} onClick={() => setValgtProtId(erValgt ? null : p.id)} style={{
                          background: erValgt ? SK.iceBlueLight : 'transparent',
                          borderLeft: erValgt ? `3px solid ${SK.coral}` : '3px solid transparent',
                          cursor:'pointer',
                        }}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ fontWeight:600, fontSize:12.5 }}>{p.tittel}</div>
                            {p.lokasjon && <div style={{ fontSize:11, color:SK.soft, marginTop:2 }}>{p.lokasjon}</div>}
                          </td>
                          <td style={{ fontSize:12.5, fontWeight:500 }}>{protFmtKort(p.dato)}</td>
                          <td style={{ fontSize:12, color:SK.soft }}>{p.leder?.navn || '—'}</td>
                          <td style={{ fontSize:12.5, fontWeight:600, color:SK.soft }}>—</td>
                          <td>
                            <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99,
                              background:tone.bg, color:tone.fg }}>{tone.label}</span>
                          </td>
                          <td>
                            <Button size="sm" onClick={e=>{e.stopPropagation(); go({ screen:'protocol', id:p.id });}}>Åpne</Button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </Card>
            )}

            {valgtProtId && (
              <ProtokollDetalj
                protokollId={valgtProtId}
                profiler={profiler}
                brukerId={brukerId}
                brukerNavn={brukerNavn}
                onLukk={() => setValgtProtId(null)}
                onOppdatert={res => setProtokoller(prev => prev.map(p => p.id===res.id ? {...p,...res} : p))}
              />
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// Støtter også direkte-navigasjon til en enkelt protokoll
function Protocol({ id, go }) {
  const [profiler, setProfiler] = React.useState([]);
  const [brukerId, setBrukerId] = React.useState(null);
  const [brukerNavn, setBrukerNavn] = React.useState('');

  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));
    });
    hentProfilListe().then(setProfiler);
  }, []);

  if (!id) return <ProtocolHub go={go} />;

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1100 }}>
      <button onClick={() => go({ screen: 'protocols' })}
        style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:12, fontFamily:'inherit', padding:0, marginBottom:12 }}>
        ← Alle protokoller
      </button>
      <ProtokollDetalj
        protokollId={id}
        profiler={profiler}
        brukerId={brukerId}
        brukerNavn={brukerNavn}
        startFane="transkripsjon"
        onLukk={() => go({ screen: 'protocols' })}
      />
    </div>
  );
}
function MeetingSeriesDetail({ id, go }) {
  return <ProtocolHub go={go} />;
}

Object.assign(window, { ProtocolHub, Protocol, MeetingSeriesDetail });