// arshjul.jsx — Årshjul med ekte Supabase-data
// Tidslinje + hjul, dynamiske filtre fra DB

const AH_MND = ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'];
const AH_MND_K = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];
const AH_DAGER = [31,28,31,30,31,30,31,31,30,31,30,31];
const AH_DAGER_FØR = AH_DAGER.reduce((a,_,i) => { a.push(i===0?0:a[i-1]+AH_DAGER[i-1]); return a; }, []);

const AH_STATUS_TONE_MAP = {
  gjennomført: { bg:'#dbeed8', fg:'#1b6a2e' },
  pågår:       { bg:'#fdeac8', fg:'#8e5a05' },
  planlagt:    { bg:'#e9eef7', fg:'#3c4a6b' },
  utsatt:      { bg:'#fcddde', fg:'#8a1620' },
  forsinket:   { bg:'#fcddde', fg:'#8a1620' },
};

const AH_KAT_FARGER = [
  '#f2545c','#08605f','#586ba4','#a01a25','#8e5a05','#3a8fb7',
  '#4a3a7a','#1b6a2e','#8a3a7a','#3c4a6b',
];

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

async function hentArshjulHendelser(aar) {
  const { data, error } = await window._sb
    .from('arshjul_hendelser')
    .select('*')
    .eq('aar', aar)
    .eq('aktiv', true)
    .order('mnd').order('dag');
  if (error) throw error;
  return data || [];
}

async function hentArshjulKategorier() {
  const { data } = await window._sb
    .from('arshjul_hendelser')
    .select('kategori')
    .eq('aktiv', true);
  if (!data) return [];
  return [...new Set(data.map(d => d.kategori).filter(Boolean))].sort();
}

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

async function oppdaterArshjulHendelse(id, felter) {
  const { data, error } = await window._sb
    .from('arshjul_hendelser').update(felter).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

async function slettArshjulHendelse(id) {
  await window._sb.from('arshjul_hendelser').update({ aktiv: false }).eq('id', id);
}

// ── Skjema ────────────────────────────────────────────────────

function ArshjulHendelseSkjema({ hendelse, aar, kategorier, onLagret, onAvbryt }) {
  const [navn,     setNavn]     = React.useState(hendelse?.navn        || '');
  const [kat,      setKat]      = React.useState(hendelse?.kategori    || (kategorier[0] || 'styre'));
  const [nyKat,    setNyKat]    = React.useState('');
  const [mnd,      setMnd]      = React.useState(hendelse?.mnd         ?? new Date().getMonth());
  const [dag,      setDag]      = React.useState(hendelse?.dag         || 1);
  const [varighet, setVarighet] = React.useState(hendelse?.varighet    || 1);
  const [status,   setStatus]   = React.useState(hendelse?.status      || 'planlagt');
  const [ansvarlig,setAnsvarlig]= React.useState(hendelse?.ansvarlig   || '');
  const [frekvens, setFrekvens] = React.useState(hendelse?.frekvens    || 'årlig');
  const [besk,     setBesk]     = React.useState(hendelse?.beskrivelse || '');
  const [laster,   setLaster]   = React.useState(false);
  const [feil,     setFeil]     = React.useState(null);

  const brukKat = nyKat.trim() || kat;

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = { navn, kategori: brukKat, mnd:parseInt(mnd), dag:parseInt(dag),
      varighet:parseInt(varighet)||1, status, ansvarlig, frekvens, beskrivelse:besk, aar };
    try {
      const res = hendelse
        ? await oppdaterArshjulHendelse(hendelse.id, felter)
        : await lagreArshjulHendelse(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 }}>
        {hendelse ? 'Rediger hendelse' : 'Ny hendelse'}
      </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:12, marginBottom:18 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Navn *</label>
          <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} autoFocus style={inp} />
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Kategori</label>
          <select className="ok-input" value={kat} onChange={e=>setKat(e.target.value)} style={inp}>
            {kategorier.map(k=><option key={k} value={k}>{k[0].toUpperCase()+k.slice(1)}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Ny kategori (overskriver)</label>
          <input className="ok-input" value={nyKat} onChange={e=>setNyKat(e.target.value)}
            placeholder="f.eks. digitalisering" style={inp} />
        </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}>
            {['planlagt','pågår','gjennomført','utsatt','forsinket'].map(s=><option key={s} value={s}>{s[0].toUpperCase()+s.slice(1)}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Måned</label>
          <select className="ok-input" value={mnd} onChange={e=>setMnd(e.target.value)} style={inp}>
            {AH_MND.map((m,i)=><option key={i} value={i}>{m}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', gap:8 }}>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
            <label style={lbl}>Dag</label>
            <input className="ok-input" type="number" min="1" max="31" value={dag} onChange={e=>setDag(e.target.value)} style={inp} />
          </div>
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:5 }}>
            <label style={lbl}>Varighet (dgr)</label>
            <input className="ok-input" type="number" min="1" value={varighet} onChange={e=>setVarighet(e.target.value)} style={inp} />
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Ansvarlig</label>
          <input className="ok-input" value={ansvarlig} onChange={e=>setAnsvarlig(e.target.value)} placeholder="f.eks. HR-leder" style={inp} />
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Frekvens</label>
          <select className="ok-input" value={frekvens} onChange={e=>setFrekvens(e.target.value)} style={inp}>
            {['månedlig','kvartalsvis','halvårlig','årlig','annet'].map(f=><option key={f} value={f}>{f[0].toUpperCase()+f.slice(1)}</option>)}
          </select>
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Beskrivelse</label>
          <textarea className="ok-input" value={besk} onChange={e=>setBesk(e.target.value)}
            rows={3} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }} />
        </div>
      </div>
      <div style={{ display:'flex', gap:8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':(hendelse?'Lagre':'Legg til')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── SVG Årshjul ───────────────────────────────────────────────

function ÅrshjulSVG({ hendelser, katFarger, aktivKat, valgtMnd, setValgtMnd }) {
  const cx = 250, cy = 250, rY = 240, rI = 105;
  const iDag = new Date();
  const dagFraksjon = (AH_DAGER_FØR[iDag.getMonth()] + iDag.getDate()) / 365;

  const polar = (r, frak) => {
    const a = frak * 2 * Math.PI - Math.PI / 2;
    return [cx + r*Math.cos(a), cy + r*Math.sin(a)];
  };

  const sektorSti = (mnd) => {
    const s = AH_DAGER_FØR[mnd]/365;
    const e = (mnd===11 ? 365 : AH_DAGER_FØR[mnd+1])/365;
    const [x1,y1]=polar(rY,s), [x2,y2]=polar(rY,e);
    const [x3,y3]=polar(rI,e), [x4,y4]=polar(rI,s);
    return `M${x1} ${y1} A${rY} ${rY} 0 0 1 ${x2} ${y2} L${x3} ${y3} A${rI} ${rI} 0 0 0 ${x4} ${y4}Z`;
  };

  return (
    <svg width="100%" viewBox="0 0 500 500" style={{ maxWidth:500 }}>
      {AH_MND.map((_,m) => {
        const erValgt = m===valgtMnd;
        const erIDag  = m===iDag.getMonth();
        return (
          <path key={m} d={sektorSti(m)}
            fill={erValgt ? '#fdeac8' : erIDag ? SK.iceBlueLight : SK.pureWhite}
            stroke={erIDag ? SK.ink : 'rgba(17,24,61,.1)'}
            strokeWidth={erIDag ? 1.5 : 0.75}
            onClick={() => setValgtMnd(m===valgtMnd ? null : m)}
            style={{ cursor:'pointer', transition:'fill .15s' }}
          />
        );
      })}
      {AH_MND_K.map((k,m) => {
        const [x,y] = polar((rY+rI)/2, (AH_DAGER_FØR[m]+AH_DAGER[m]/2)/365);
        return (
          <text key={m} x={x} y={y} textAnchor="middle" dominantBaseline="central"
            style={{ fontSize:10, fontFamily:'Poppins, sans-serif', fontWeight:600, fill:SK.ink, pointerEvents:'none' }}>
            {k}
          </text>
        );
      })}
      {hendelser
        .filter(h => !aktivKat || h.kategori===aktivKat)
        .map(h => {
          const frak = (AH_DAGER_FØR[h.mnd] + h.dag) / 365;
          const rEvent = rI + 24 + (hendelser.filter(x=>x.mnd===h.mnd).indexOf(h) % 5)*18;
          const [x,y] = polar(Math.min(rEvent, rY-14), frak);
          const farge = katFarger[h.kategori] || SK.ink;
          return (
            <circle key={h.id} cx={x} cy={y} r={5}
              fill={h.status==='gjennomført' ? farge : 'white'}
              stroke={farge} strokeWidth={1.5}
              style={{ cursor:'pointer' }}
              onClick={() => setValgtMnd(h.mnd)}>
              <title>{h.navn}</title>
            </circle>
          );
        })}
      {(() => {
        const [x1,y1] = polar(rI-8, dagFraksjon);
        const [x2,y2] = polar(rY+8, dagFraksjon);
        return <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={SK.coral} strokeWidth={2} strokeDasharray="4 2" />;
      })()}
      <text x={cx} y={cy-10} textAnchor="middle" style={{ fontSize:20, fontFamily:'Poppins,sans-serif', fontWeight:700, fill:SK.ink }}>{new Date().getFullYear()}</text>
      <text x={cx} y={cx+14} textAnchor="middle" style={{ fontSize:11, fontFamily:'Poppins,sans-serif', fill:SK.soft }}>Årshjul</text>
    </svg>
  );
}

// ── Tidslinje-visning ─────────────────────────────────────────

function TidslinjeVisning({ hendelser, katFarger, aar }) {
  const MND_HOYDE = 48;
  const alleHendelser = hendelser.slice().sort((a,b) => a.mnd-b.mnd || a.dag-b.dag);

  return (
    <Card padded={false} style={{ overflow:'hidden' }}>
      <div style={{ overflowX:'auto', minWidth:900 }}>
        <div style={{ display:'grid', gridTemplateColumns:'100px 1fr', minWidth:900 }}>
          {/* Måneds-labels + rader */}
          {AH_MND.map((mnd, m) => {
            const mndHendelser = alleHendelser.filter(h => h.mnd === m);
            const dagerIMnd = AH_DAGER[m];
            if (mndHendelser.length === 0) return (
              <React.Fragment key={m}>
                <div style={{ padding:'12px 14px', borderBottom:'1px solid rgba(17,24,61,.06)',
                  fontSize:12, fontWeight:600, color:SK.soft, display:'flex', alignItems:'center' }}>
                  {AH_MND_K[m]}
                </div>
                <div style={{ borderBottom:'1px solid rgba(17,24,61,.06)', padding:'12px 0', position:'relative', minHeight: MND_HOYDE }}>
                  <div style={{ position:'absolute', left:0, right:0, top:'50%', height:1, background:'rgba(17,24,61,.04)' }} />
                </div>
              </React.Fragment>
            );
            return (
              <React.Fragment key={m}>
                <div style={{ padding:'10px 14px', borderBottom:'1px solid rgba(17,24,61,.08)',
                  fontSize:12, fontWeight:600, background: m % 2 === 0 ? 'rgba(17,24,61,.02)' : 'transparent',
                  display:'flex', alignItems:'flex-start', paddingTop:14 }}>
                  {AH_MND[m]}
                </div>
                <div style={{ position:'relative', minHeight: Math.max(MND_HOYDE, mndHendelser.length * 36 + 16),
                  borderBottom:'1px solid rgba(17,24,61,.08)',
                  background: m % 2 === 0 ? 'rgba(17,24,61,.02)' : 'transparent',
                  padding:'8px 12px', display:'flex', flexDirection:'column', gap:6 }}>
                  {mndHendelser.map(h => {
                    const farge = katFarger[h.kategori] || SK.ink;
                    const tone  = AH_STATUS_TONE_MAP[h.status] || AH_STATUS_TONE_MAP.planlagt;
                    const dagPct = (h.dag / dagerIMnd) * 100;
                    return (
                      <div key={h.id} style={{ display:'flex', alignItems:'center', gap:10 }}>
                        <div style={{ width:32, textAlign:'right', fontSize:11, color:SK.soft, flexShrink:0 }}>
                          {h.dag}.
                        </div>
                        <div style={{ flex:1, height:28, borderRadius:6, background: tone.bg,
                          border:`1.5px solid ${farge}30`,
                          display:'flex', alignItems:'center', paddingLeft:10, gap:8,
                          borderLeft:`3px solid ${farge}` }}>
                          <span style={{ width:7, height:7, borderRadius:'50%', background:farge, flexShrink:0 }} />
                          <span style={{ fontSize:12, fontWeight:500, flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
                            {h.navn}
                          </span>
                          {h.ansvarlig && (
                            <span style={{ fontSize:10.5, color:SK.soft, flexShrink:0, paddingRight:8 }}>{h.ansvarlig}</span>
                          )}
                          <span style={{ fontSize:10, fontWeight:600, padding:'1px 6px', borderRadius:99,
                            background:tone.bg, color:tone.fg, flexShrink:0, marginRight:8 }}>
                            {h.status[0].toUpperCase()+h.status.slice(1)}
                          </span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </div>
    </Card>
  );
}

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

function ÅrshjulWorkspace({ go }) {
  const [hendelser,  setHendelser]  = React.useState([]);
  const [kategorier, setKategorier] = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [aar,        setAar]        = React.useState(new Date().getFullYear());
  const [visning,    setVisning]    = React.useState('hjul'); // hjul | tidslinje | tabell
  const [aktivKat,   setAktivKat]   = React.useState(null);
  const [aktivStatus,setAktivStatus]= React.useState(null);
  const [valgtMnd,   setValgtMnd]   = React.useState(new Date().getMonth());
  const [valgtH,     setValgtH]     = React.useState(null);
  const [visSkjema,  setVisSkjema]  = React.useState(false);
  const [redigerer,  setRedigerer]  = React.useState(null);
  const [sokTekst,   setSokTekst]   = React.useState('');

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

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [h, k] = await Promise.all([hentArshjulHendelser(aar), hentArshjulKategorier()]);
      setHendelser(h);
      setKategorier(k);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  // Bygg dynamiske farger fra kategorier i databasen
  const katFarger = React.useMemo(() => {
    const map = {};
    kategorier.forEach((k, i) => { map[k] = AH_KAT_FARGER[i % AH_KAT_FARGER.length]; });
    return map;
  }, [kategorier]);

  // Filter
  const filtrert = React.useMemo(() => {
    let h = hendelser.slice();
    if (aktivKat)    h = h.filter(x => x.kategori === aktivKat);
    if (aktivStatus) h = h.filter(x => x.status   === aktivStatus);
    if (sokTekst)    h = h.filter(x => (x.navn||'').toLowerCase().includes(sokTekst.toLowerCase()) ||
                                       (x.ansvarlig||'').toLowerCase().includes(sokTekst.toLowerCase()));
    return h;
  }, [hendelser, aktivKat, aktivStatus, sokTekst]);

  const mndHendelser = valgtMnd !== null && visning === 'hjul'
    ? filtrert.filter(h => h.mnd === valgtMnd)
    : filtrert;

  const gjennomfort = hendelser.filter(h=>h.status==='gjennomført').length;
  const paagar      = hendelser.filter(h=>h.status==='pågår').length;
  const kommende    = hendelser.filter(h=>{ const d=new Date(); return h.mnd>d.getMonth()||(h.mnd===d.getMonth()&&h.dag>=d.getDate()); }).length;

  if (visSkjema || redigerer) {
    return (
      <div className="ok-content__inner" style={{ maxWidth:800 }}>
        <Card padded={false}>
          <ArshjulHendelseSkjema
            hendelse={redigerer}
            aar={aar}
            kategorier={kategorier}
            onLagret={res => {
              if (redigerer) setHendelser(prev => prev.map(h => h.id===res.id ? res : h));
              else setHendelser(prev => [...prev, res].sort((a,b)=>a.mnd-b.mnd||a.dag-b.dag));
              // Legg til ny kategori hvis brukt
              if (res.kategori && !kategorier.includes(res.kategori)) {
                setKategorier(prev => [...prev, res.kategori].sort());
              }
              setVisSkjema(false); setRedigerer(null); setValgtH(res);
            }}
            onAvbryt={() => { setVisSkjema(false); setRedigerer(null); }}
          />
        </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' }}>Organisasjon · Kalender</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Årshjul</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {hendelser.length} hendelser · {gjennomfort} gjennomført · {paagar} pågår · {kommende} kommende
          </div>
        </div>
        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
          <button onClick={()=>setAar(a=>a-1)} className="ok-btn ok-btn--sm">‹ {aar-1}</button>
          <span style={{ fontSize:14, fontWeight:600, padding:'0 8px' }}>{aar}</span>
          <button onClick={()=>setAar(a=>a+1)} className="ok-btn ok-btn--sm">{aar+1} ›</button>
          <Button variant="primary" icon={I.plus} onClick={()=>setVisSkjema(true)}>Ny hendelse</Button>
        </div>
      </div>

      {/* KPI */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Totalt" value={laster?'…':hendelser.length} sub={`${aar}`} /></Card>
        <Card padded><KPI label="Gjennomført" value={laster?'…':gjennomfort} sub="fullførte" /></Card>
        <Card padded><KPI label="Pågår nå" value={laster?'…':paagar} sub="aktive" accent={paagar>0} /></Card>
        <Card padded><KPI label="Kommende" value={laster?'…':kommende} sub="resten av året" /></Card>
      </div>

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

      {/* Visning-tabs */}
      <div style={{ display:'flex', gap:0, borderBottom:'1px solid rgba(17,24,61,.1)', marginBottom:16 }}>
        {[['hjul','Årshjul'],['tidslinje','Tidslinje 2026'],['tabell','Tabell']].map(([k,l]) => (
          <button key={k} onClick={()=>setVisning(k)} style={{
            background:'none', border:'none', cursor:'pointer', padding:'8px 16px',
            fontSize:13, fontWeight:visning===k?600:400, color:visning===k?SK.ink:SK.soft,
            borderBottom:visning===k?`2px solid ${SK.coral}`:'2px solid transparent',
            fontFamily:'inherit',
          }}>{l}</button>
        ))}
      </div>

      {/* Filter-rad – dynamisk fra databasen */}
      <div style={{ display:'flex', gap:8, marginBottom:16, flexWrap:'wrap', alignItems:'center' }}>
        <input className="ok-input ok-input--search" placeholder="Søk hendelse, ansvarlig…"
          value={sokTekst} onChange={e=>setSokTekst(e.target.value)}
          style={{ maxWidth:220, padding:'7px 12px 7px 32px' }} />

        <button onClick={()=>setAktivKat(null)} className="ok-btn ok-btn--sm" style={{
          background: !aktivKat ? SK.ink : 'transparent',
          color: !aktivKat ? '#fff' : SK.ink,
          borderColor: !aktivKat ? SK.ink : 'rgba(17,24,61,.15)',
        }}>Alle kategorier</button>

        {/* Dynamisk fra databasen – nye kategorier dukker opp automatisk */}
        {kategorier.map(k => (
          <button key={k} onClick={()=>setAktivKat(aktivKat===k?null:k)} className="ok-btn ok-btn--sm" style={{
            background: aktivKat===k ? (katFarger[k]||SK.ink) : 'transparent',
            color: aktivKat===k ? '#fff' : SK.ink,
            borderColor: aktivKat===k ? (katFarger[k]||SK.ink) : 'rgba(17,24,61,.15)',
          }}>{k[0].toUpperCase()+k.slice(1)}</button>
        ))}

        <div style={{ marginLeft:'auto', display:'flex', gap:4 }}>
          {[null,'planlagt','pågår','gjennomført','utsatt'].map((s,i) => (
            <button key={i} onClick={()=>setAktivStatus(aktivStatus===s?null:s)} className="ok-btn ok-btn--sm" style={{
              background: aktivStatus===s ? SK.ink : 'transparent',
              color: aktivStatus===s ? '#fff' : SK.ink,
              borderColor: aktivStatus===s ? SK.ink : 'rgba(17,24,61,.15)',
            }}>{s ? s[0].toUpperCase()+s.slice(1) : 'Alle statuser'}</button>
          ))}
        </div>
      </div>

      {laster ? (
        <Card padded><div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster årshjul…</div></Card>
      ) : (
        <>
          {/* ── Hjul-visning ── */}
          {visning === 'hjul' && (
            <div style={{ display:'grid', gridTemplateColumns:'auto 1fr', gap:24, alignItems:'flex-start' }}>
              <div style={{ width:340 }}>
                <ÅrshjulSVG hendelser={filtrert} katFarger={katFarger} aktivKat={aktivKat} valgtMnd={valgtMnd} setValgtMnd={setValgtMnd} />
                <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginTop:10 }}>
                  {kategorier.map(k => (
                    <div key={k} style={{ display:'flex', alignItems:'center', gap:5 }}>
                      <span style={{ width:8, height:8, borderRadius:'50%', background:katFarger[k]||SK.ink }} />
                      <span style={{ fontSize:11, color:SK.soft }}>{k[0].toUpperCase()+k.slice(1)}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
                  <div style={{ fontSize:13, fontWeight:600 }}>
                    {valgtMnd !== null ? AH_MND[valgtMnd] : 'Alle måneder'}
                    <button onClick={()=>setValgtMnd(null)} style={{ background:'none', border:'none', cursor:'pointer', fontSize:12, color:SK.soft, marginLeft:8, fontFamily:'inherit' }}>
                      {valgtMnd !== null ? '× vis alle' : ''}
                    </button>
                  </div>
                  <span style={{ fontSize:12, color:SK.soft }}>{mndHendelser.length} hendelser</span>
                </div>
                <HendelseListeKort hendelser={mndHendelser} katFarger={katFarger} valgtH={valgtH} setValgtH={setValgtH} setRedigerer={setRedigerer} setHendelser={setHendelser} />
              </div>
            </div>
          )}

          {/* ── Tidslinje-visning ── */}
          {visning === 'tidslinje' && (
            <TidslinjeVisning hendelser={filtrert} katFarger={katFarger} aar={aar} />
          )}

          {/* ── Tabell-visning ── */}
          {visning === 'tabell' && (
            <Card padded={false}>
              <table className="ok-table">
                <thead>
                  <tr>
                    <th style={{ paddingLeft:18 }}>Hendelse</th>
                    <th>Kategori</th>
                    <th>Dato</th>
                    <th>Ansvarlig</th>
                    <th>Status</th>
                    <th>Frekvens</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {filtrert.map(h => {
                    const farge = katFarger[h.kategori] || SK.ink;
                    const tone  = AH_STATUS_TONE_MAP[h.status] || AH_STATUS_TONE_MAP.planlagt;
                    return (
                      <tr key={h.id}>
                        <td style={{ paddingLeft:18, fontWeight:600, fontSize:12.5 }}>{h.navn}</td>
                        <td>
                          <span style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:12 }}>
                            <span style={{ width:7, height:7, borderRadius:'50%', background:farge }} />
                            {h.kategori[0].toUpperCase()+h.kategori.slice(1)}
                          </span>
                        </td>
                        <td style={{ fontSize:12.5 }}>{h.dag}. {AH_MND_K[h.mnd]}</td>
                        <td style={{ fontSize:12, color:SK.soft }}>{h.ansvarlig || '—'}</td>
                        <td>
                          <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99,
                            background:tone.bg, color:tone.fg }}>{h.status[0].toUpperCase()+h.status.slice(1)}</span>
                        </td>
                        <td style={{ fontSize:12, color:SK.soft }}>{h.frekvens || '—'}</td>
                        <td><Button size="sm" onClick={() => setRedigerer(h)}>Rediger</Button></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </Card>
          )}
        </>
      )}
    </div>
  );
}

// ── Hendelse-liste (delt mellom hjul og søkeresultater) ───────

function HendelseListeKort({ hendelser, katFarger, valgtH, setValgtH, setRedigerer, setHendelser }) {
  if (hendelser.length === 0) {
    return <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen hendelser.</div>;
  }
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
      {hendelser.map(h => {
        const farge = katFarger[h.kategori] || SK.ink;
        const tone  = AH_STATUS_TONE_MAP[h.status] || AH_STATUS_TONE_MAP.planlagt;
        const erValgt = valgtH?.id === h.id;
        return (
          <div key={h.id} onClick={()=>setValgtH(erValgt?null:h)} style={{
            padding:'12px 14px', borderRadius:10, cursor:'pointer',
            background: erValgt ? SK.iceBlueLight : SK.pureWhite,
            border:`1px solid ${erValgt ? SK.coral : 'rgba(17,24,61,.1)'}`,
            borderLeft:`4px solid ${farge}`,
            transition:'all .12s',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12 }}>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontWeight:600, fontSize:13, marginBottom:3 }}>{h.navn}</div>
                <div style={{ fontSize:11.5, color:SK.soft }}>
                  {h.dag}. {AH_MND_K[h.mnd]}
                  {h.varighet > 1 && ` – ${h.varighet} dager`}
                  {h.ansvarlig && ` · ${h.ansvarlig}`}
                  {h.kategori && <span style={{ marginLeft:6, color:farge, fontWeight:600 }}>{h.kategori}</span>}
                </div>
              </div>
              <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99,
                background:tone.bg, color:tone.fg, flexShrink:0 }}>
                {h.status[0].toUpperCase()+h.status.slice(1)}
              </span>
            </div>
            {erValgt && (
              <div style={{ marginTop:12, paddingTop:10, borderTop:'1px solid rgba(17,24,61,.08)' }}>
                {h.beskrivelse && <div style={{ fontSize:12.5, color:SK.soft, lineHeight:1.6, marginBottom:10 }}>{h.beskrivelse}</div>}
                <div style={{ display:'flex', gap:8 }}>
                  <Button size="sm" variant="primary" onClick={e=>{e.stopPropagation();setRedigerer(h);}}>Rediger</Button>
                  {['planlagt','pågår','gjennomført','utsatt'].filter(s=>s!==h.status).map(s => (
                    <Button key={s} size="sm" onClick={e=>{
                      e.stopPropagation();
                      oppdaterArshjulHendelse(h.id,{status:s}).then(res=>{
                        setHendelser(prev=>prev.map(x=>x.id===res.id?res:x));
                        setValgtH(res);
                      });
                    }}>→ {s[0].toUpperCase()+s.slice(1)}</Button>
                  ))}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { ÅrshjulWorkspace });