// arshjul-screens.jsx — Årshjul-modulen.
// Visuelt år-hjul (SVG) + tidslinje + sakliste, kategoribasert filter.

const MND_LABELS = ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'];
const MND_KORT = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];
const I_DAG_AH = new Date('2026-05-28');
const I_DAG_MND = I_DAG_AH.getMonth(); // 4 (mai)
const I_DAG_DAG = I_DAG_AH.getDate();   // 28
const DAGER_I_MND = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

const fmtKortDato = (mnd, dag) => `${dag}. ${MND_KORT[mnd].toLowerCase()}`;

// Dagens posisjon som fraksjon av året
const DAGER_FOR_MND = DAGER_I_MND.reduce((acc, _, i) => {
  acc.push(i === 0 ? 0 : acc[i - 1] + DAGER_I_MND[i - 1]);
  return acc;
}, []);
const I_ÅR_FRAKSJON = (DAGER_FOR_MND[I_DAG_MND] + I_DAG_DAG) / 365;

// Status til pill-status
const AH_PILL = {
  gjennomført: 'track',
  pågår:       'risk',
  planlagt:    'draft',
  utsatt:      'delay',
  forsinket:   'delay',
};
const AH_LABEL = {
  gjennomført: 'Gjennomført',
  pågår:       'Pågår',
  planlagt:    'Planlagt',
  utsatt:      'Utsatt',
  forsinket:   'Forsinket',
};

// ═══════════════════════════════════════════════════════════════════════════
// ÅRSHJUL — SVG-komponent
// ═══════════════════════════════════════════════════════════════════════════
function YearWheel({ events, activeCat, hoveredMonth, setHoveredMonth, selectedMonth, setSelectedMonth }) {
  const size = 520;
  const cx = size / 2;
  const cy = size / 2;
  const rOuter = 250;
  const rInner = 110;
  const rEventArea = (rOuter + rInner) / 2;
  const rEventBandInner = rInner + 26;
  const rEventBandOuter = rOuter - 14;

  // Pos på sirkel — 0° = topp, klokkeretning
  const polar = (r, fraktAvÅr) => {
    const angle = fraktAvÅr * 2 * Math.PI - Math.PI / 2;
    return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
  };
  const polarMnd = (r, mnd, dag = 15) => {
    const frakt = (DAGER_FOR_MND[mnd] + dag) / 365;
    return polar(r, frakt);
  };

  // Bygg månedsseksjoner
  const sectorPath = (mnd) => {
    const startFrak = DAGER_FOR_MND[mnd] / 365;
    const endFrak = (mnd === 11 ? 365 : DAGER_FOR_MND[mnd + 1]) / 365;
    const [x1, y1] = polar(rOuter, startFrak);
    const [x2, y2] = polar(rOuter, endFrak);
    const [x3, y3] = polar(rInner, endFrak);
    const [x4, y4] = polar(rInner, startFrak);
    return `M ${x1} ${y1} A ${rOuter} ${rOuter} 0 0 1 ${x2} ${y2} L ${x3} ${y3} A ${rInner} ${rInner} 0 0 0 ${x4} ${y4} Z`;
  };

  // Plasser hendelser i hvert kvadrant — fordel på radius for å unngå overlap
  const eventsByMonth = {};
  events.forEach(h => {
    if (!eventsByMonth[h.mnd]) eventsByMonth[h.mnd] = [];
    eventsByMonth[h.mnd].push(h);
  });

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: 'visible' }}>
      {/* Måneds-seksjoner */}
      {MND_LABELS.map((mLabel, m) => {
        const isCurrent = m === I_DAG_MND;
        const isSelected = m === selectedMonth;
        const isHover = m === hoveredMonth;
        const fillColor = isSelected ? '#fdeac8'
          : isHover ? SK.iceBlueLight
          : isCurrent ? '#dee1ed'
          : SK.pureWhite;
        return (
          <path
            key={m}
            d={sectorPath(m)}
            fill={fillColor}
            stroke={isCurrent ? SK.ink : 'rgba(17,24,61,.1)'}
            strokeWidth={isCurrent ? 1.5 : 1}
            onMouseEnter={() => setHoveredMonth(m)}
            onMouseLeave={() => setHoveredMonth(null)}
            onClick={() => setSelectedMonth(m === selectedMonth ? null : m)}
            style={{ cursor: 'pointer', transition: 'fill .15s' }}
          />
        );
      })}

      {/* Måneds-etiketter (på ytre rand) */}
      {MND_LABELS.map((label, m) => {
        const [tx, ty] = polarMnd(rOuter - 18, m, 15);
        const isCurrent = m === I_DAG_MND;
        return (
          <text
            key={`l-${m}`}
            x={tx}
            y={ty}
            textAnchor="middle"
            dominantBaseline="middle"
            style={{
              fontSize: 11,
              fontWeight: isCurrent ? 700 : 600,
              fill: isCurrent ? SK.ink : SK.soft,
              letterSpacing: 0.04,
              textTransform: 'uppercase',
              pointerEvents: 'none',
            }}
          >{MND_KORT[m]}</text>
        );
      })}

      {/* Hendelser i hver måned */}
      {Object.entries(eventsByMonth).map(([mStr, list]) => {
        const m = +mStr;
        return list.map((h, i) => {
          const radiusStep = (rEventBandOuter - rEventBandInner) / Math.max(list.length, 1);
          const r = rEventBandOuter - i * radiusStep - radiusStep / 2;
          const [x, y] = polarMnd(r, m, h.dag);
          const dim = activeCat !== 'alle' && h.kategori !== activeCat;
          const cat = ÅR_KATEGORIER[h.kategori];
          return (
            <g key={h.id} style={{ opacity: dim ? 0.18 : 1, transition: 'opacity .2s', pointerEvents: dim ? 'none' : 'auto' }}>
              <circle
                cx={x} cy={y} r={5}
                fill={cat.farge}
                stroke={SK.pureWhite}
                strokeWidth={1.5}
                style={{ cursor: 'pointer' }}
              >
                <title>{h.navn} · {fmtKortDato(h.mnd, h.dag)}</title>
              </circle>
            </g>
          );
        });
      })}

      {/* "I dag"-linje fra sentrum og ut */}
      {(() => {
        const [x1, y1] = polar(rInner - 5, I_ÅR_FRAKSJON);
        const [x2, y2] = polar(rOuter + 5, I_ÅR_FRAKSJON);
        return (
          <g>
            <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={SK.coral} strokeWidth={2} />
            <circle cx={x2} cy={y2} r={4} fill={SK.coral} />
          </g>
        );
      })()}

      {/* Senter-sirkel */}
      <circle cx={cx} cy={cy} r={rInner - 2} fill={SK.pureWhite} stroke="rgba(17,24,61,.06)" />
      <text x={cx} y={cy - 18} textAnchor="middle" style={{ fontSize: 11, fontWeight: 600, fill: SK.soft, letterSpacing: 0.06, textTransform: 'uppercase' }}>Årshjul</text>
      <text x={cx} y={cy + 8} textAnchor="middle" style={{ fontSize: 36, fontWeight: 700, fill: SK.ink, letterSpacing: -0.02 }}>2026</text>
      <text x={cx} y={cy + 30} textAnchor="middle" style={{ fontSize: 11, fontWeight: 500, fill: SK.soft }}>
        {AH_STATS.gjennom} gjennomført · {AH_STATS.pågår} pågår
      </text>
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// ÅRSHJUL-WORKSPACE
// ═══════════════════════════════════════════════════════════════════════════
function ÅrshjulWorkspace({ go }) {
  const [view, setView] = React.useState('hjul'); // 'hjul' | 'tidslinje' | 'liste'
  const [activeCat, setActiveCat] = React.useState('alle');
  const [selectedMonth, setSelectedMonth] = React.useState(I_DAG_MND);
  const [hoveredMonth, setHoveredMonth] = React.useState(null);
  const [selectedEvent, setSelectedEvent] = React.useState(null);

  const filtered = ÅR_HENDELSER.filter(h => activeCat === 'alle' || h.kategori === activeCat);

  // Hendelser denne måneden / neste 30/90 dgr
  const månedensHendelser = filtered.filter(h => h.mnd === I_DAG_MND);
  const neste30 = filtered.filter(h => {
    const dato = new Date(2026, h.mnd, h.dag);
    const dgr = (dato - I_DAG_AH) / 86400000;
    return dgr >= 0 && dgr <= 30;
  });
  const neste90 = filtered.filter(h => {
    const dato = new Date(2026, h.mnd, h.dag);
    const dgr = (dato - I_DAG_AH) / 86400000;
    return dgr >= 0 && dgr <= 90;
  });

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1320 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>Modul</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>Årshjul 2026</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>
            {AH_STATS.total} planlagte hendelser · {AH_STATS.gjennom} gjennomført · {AH_STATS.pågår} pågår · {AH_STATS.planlagt} fremover
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" icon={I.download}>Eksporter (ICS)</Button>
          <Button variant="primary" icon={I.plus}>Ny hendelse</Button>
        </div>
      </div>

      {/* KPI-rad */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 16 }}>
        <Card padded><KPI label="Denne måneden" value={månedensHendelser.length} sub={`${MND_LABELS[I_DAG_MND]} 2026`} /></Card>
        <Card padded><KPI label="Neste 30 dgr" value={neste30.length} sub="Begynner snart" accent={neste30.length > 0} /></Card>
        <Card padded><KPI label="Neste 90 dgr" value={neste90.length} sub="Til planlegging" /></Card>
        <Card padded><KPI label="Forsinkede" value={ÅR_HENDELSER.filter(h => h.status === 'forsinket' || h.status === 'utsatt').length} sub="Krever oppfølging" /></Card>
      </div>

      {/* Kontroll-rad: visning + kategori-filter */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 4, background: SK.pureWhite, border: '1px solid rgba(17,24,61,.1)', borderRadius: 99, padding: 3 }}>
          {[
            { id: 'hjul', label: 'Hjul' },
            { id: 'tidslinje', label: 'Tidslinje' },
            { id: 'liste', label: 'Liste' },
          ].map(t => (
            <button key={t.id} onClick={() => setView(t.id)} style={{
              padding: '5px 14px', borderRadius: 99, border: 0, cursor: 'pointer', fontFamily: 'inherit',
              background: view === t.id ? SK.ink : 'transparent',
              color: view === t.id ? SK.pureWhite : SK.ink,
              fontWeight: view === t.id ? 600 : 500, fontSize: 11.5,
            }}>{t.label}</button>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <CatPill id="alle" label={`Alle (${ÅR_HENDELSER.length})`} active={activeCat === 'alle'} onClick={() => setActiveCat('alle')} farge={SK.ink} />
          {Object.entries(ÅR_KATEGORIER).map(([k, info]) => {
            const n = ÅR_HENDELSER.filter(h => h.kategori === k).length;
            return <CatPill key={k} id={k} label={`${info.kort} (${n})`} active={activeCat === k} onClick={() => setActiveCat(k)} farge={info.farge} />;
          })}
        </div>
      </div>

      {/* HOVED-INNHOLD */}
      {view === 'hjul' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, alignItems: 'flex-start' }}>
          <Card>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 14px' }}>
              <YearWheel
                events={filtered}
                activeCat={activeCat}
                hoveredMonth={hoveredMonth}
                setHoveredMonth={setHoveredMonth}
                selectedMonth={selectedMonth}
                setSelectedMonth={setSelectedMonth}
              />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14, paddingTop: 10, borderTop: '1px solid rgba(17,24,61,.06)', fontSize: 10.5, color: SK.soft }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 12, height: 2, background: SK.coral, display: 'inline-block' }} /> I dag
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 10, height: 10, background: '#dee1ed', display: 'inline-block', border: '1px solid rgba(17,24,61,.2)' }} /> Inneværende mnd
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 10, height: 10, background: '#fdeac8', display: 'inline-block', border: '1px solid #fdeac8' }} /> Valgt mnd
              </span>
            </div>
          </Card>

          <Card title={selectedMonth != null ? `${MND_LABELS[selectedMonth]} 2026` : 'Klikk en måned i hjulet'} action={
            selectedMonth != null && <Button variant="ghost" size="sm" onClick={() => setSelectedMonth(null)}>Lukk ×</Button>
          }>
            {selectedMonth == null ? (
              <div style={{ padding: '40px 16px', textAlign: 'center', color: SK.soft, fontSize: 13 }}>
                Klikk en månedsseksjon i hjulet for å se hendelser, eller bytt til tidslinje/liste-visning for å se alt.
              </div>
            ) : (
              (() => {
                const m = filtered.filter(h => h.mnd === selectedMonth).sort((a, b) => a.dag - b.dag);
                if (m.length === 0) return <div style={{ padding: '24px 0', textAlign: 'center', color: SK.soft, fontSize: 13 }}>Ingen hendelser i denne måneden{activeCat !== 'alle' ? ' for valgt kategori' : ''}.</div>;
                return (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
                    {m.map(h => <HendelseRad key={h.id} h={h} onClick={() => setSelectedEvent(h)} />)}
                  </div>
                );
              })()
            )}
          </Card>
        </div>
      )}

      {view === 'tidslinje' && <TidslinjeView events={filtered} onClickEvent={setSelectedEvent} />}
      {view === 'liste' && <ListeView events={filtered} onClickEvent={setSelectedEvent} />}

      {/* Detalj-modal */}
      {selectedEvent && <HendelseModal h={selectedEvent} onClose={() => setSelectedEvent(null)} />}
    </div>
  );
}

// ── Kategori-pill ──
function CatPill({ id, label, active, onClick, farge }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 12px', borderRadius: 99, cursor: 'pointer', fontFamily: 'inherit',
      background: active ? farge : SK.pureWhite,
      color: active ? SK.pureWhite : SK.ink,
      border: `1px solid ${active ? farge : 'rgba(17,24,61,.12)'}`,
      fontSize: 11.5, fontWeight: 600,
      transition: 'all .12s',
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: '50%',
        background: active ? SK.pureWhite : farge,
      }} />
      {label}
    </button>
  );
}

// ── Hendelse-rad ──
function HendelseRad({ h, onClick }) {
  const cat = ÅR_KATEGORIER[h.kategori];
  const ansatt = TEAM[h.eier];
  return (
    <button onClick={onClick} style={{
      display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 10, alignItems: 'center',
      padding: 10, background: SK.pureWhite, border: '1px solid rgba(17,24,61,.08)',
      borderRadius: 8, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', width: '100%',
    }}>
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        background: cat.farge + '15', borderRadius: 6, padding: '4px 0',
      }}>
        <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1, color: cat.farge }}>{h.dag}</div>
        <div style={{ fontSize: 9, color: cat.farge, fontWeight: 600, letterSpacing: 0.04, textTransform: 'uppercase', marginTop: 2 }}>{MND_KORT[h.mnd]}</div>
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: SK.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{h.navn}</div>
        <div style={{ fontSize: 11, color: SK.soft, marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ color: cat.farge, fontWeight: 600 }}>{cat.kort}</span>
          {ansatt && <span>· {ansatt.n}</span>}
          {h.varighet > 1 && <span>· {h.varighet} dgr</span>}
        </div>
      </div>
      <Pill status={AH_PILL[h.status]}>{AH_LABEL[h.status]}</Pill>
    </button>
  );
}

// ── TIDSLINJE-VISNING ──
function TidslinjeView({ events, onClickEvent }) {
  return (
    <Card padded={false}>
      <div style={{ overflowX: 'auto', padding: '14px 0 18px' }}>
        <div style={{ minWidth: 980, padding: '0 18px' }}>
          {/* Måned-header */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', borderBottom: '1px solid rgba(17,24,61,.08)', paddingBottom: 8, marginBottom: 14, position: 'relative' }}>
            {MND_LABELS.map((m, i) => (
              <div key={i} style={{
                fontSize: 11, color: i === I_DAG_MND ? SK.ink : SK.soft,
                fontWeight: i === I_DAG_MND ? 700 : 600,
                letterSpacing: 0.05, textTransform: 'uppercase', textAlign: 'center',
                borderLeft: i === 0 ? 'none' : '1px solid rgba(17,24,61,.05)',
              }}>{MND_KORT[i]}</div>
            ))}
            {/* I dag-markør */}
            <div style={{
              position: 'absolute', left: `${I_ÅR_FRAKSJON * 100}%`, top: -2, bottom: -4,
              width: 2, background: SK.coral,
            }} />
            <div style={{ position: 'absolute', left: `${I_ÅR_FRAKSJON * 100}%`, top: -16, transform: 'translateX(-50%)', fontSize: 10, color: SK.coral, fontWeight: 700, letterSpacing: 0.05 }}>I DAG</div>
          </div>

          {/* En swimlane per kategori */}
          {Object.entries(ÅR_KATEGORIER).map(([k, cat]) => {
            const lane = events.filter(h => h.kategori === k);
            if (lane.length === 0) return null;
            return (
              <div key={k} style={{ position: 'relative', height: 56, marginBottom: 4, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)' }}>
                {/* Lane-label venstre */}
                <div style={{
                  position: 'absolute', left: -2, top: 4, fontSize: 10, fontWeight: 700,
                  color: cat.farge, letterSpacing: 0.06, textTransform: 'uppercase',
                  background: SK.pureWhite, padding: '2px 6px', borderRadius: 4,
                  border: `1px solid ${cat.farge}33`, zIndex: 2,
                }}>{cat.kort}</div>
                {/* Bakgrunns-rader */}
                {Array.from({ length: 12 }, (_, i) => (
                  <div key={i} style={{ borderRight: i === 11 ? 'none' : '1px solid rgba(17,24,61,.04)' }} />
                ))}
                {/* Hendelser */}
                {lane.map((h, i) => {
                  const startFrak = (DAGER_FOR_MND[h.mnd] + h.dag) / 365;
                  const widthFrak = h.varighet / 365;
                  const stagger = i % 2 === 0 ? 22 : 36;
                  return (
                    <button
                      key={h.id}
                      onClick={() => onClickEvent(h)}
                      style={{
                        position: 'absolute',
                        left: `${startFrak * 100}%`,
                        width: `max(${widthFrak * 100}%, 8px)`,
                        top: stagger,
                        height: 16,
                        background: cat.farge,
                        opacity: h.status === 'gjennomført' ? 0.45 : 1,
                        border: 0, borderRadius: 4,
                        cursor: 'pointer', fontFamily: 'inherit',
                        textAlign: 'left', overflow: 'hidden',
                        paddingLeft: 6, paddingRight: 4,
                        color: '#fff', fontSize: 10, fontWeight: 600,
                        whiteSpace: 'nowrap', textOverflow: 'ellipsis',
                        boxShadow: '0 1px 2px rgba(17,24,61,.15)',
                      }}
                      title={`${h.navn} — ${fmtKortDato(h.mnd, h.dag)}`}
                    >
                      {h.navn}
                    </button>
                  );
                })}
              </div>
            );
          })}

          {/* I dag-linje gjennom alle laner */}
          <div style={{ position: 'absolute' }} />
        </div>
      </div>
    </Card>
  );
}

// ── LISTE-VISNING ──
function ListeView({ events, onClickEvent }) {
  const sorted = [...events].sort((a, b) => (a.mnd - b.mnd) || (a.dag - b.dag));
  return (
    <Card padded={false}>
      <table className="ok-table">
        <thead>
          <tr>
            <th style={{ width: 90, paddingLeft: 18 }}>Dato</th>
            <th>Hendelse</th>
            <th>Kategori</th>
            <th>Eier</th>
            <th>Frekvens</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {sorted.map(h => {
            const cat = ÅR_KATEGORIER[h.kategori];
            const ansatt = TEAM[h.eier];
            return (
              <tr key={h.id} onClick={() => onClickEvent(h)}>
                <td style={{ paddingLeft: 18, fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>
                  {h.dag}. {MND_KORT[h.mnd].toLowerCase()}
                  {h.varighet > 1 && <div style={{ fontSize: 10.5, color: SK.soft, fontWeight: 500 }}>{h.varighet} dgr</div>}
                </td>
                <td>
                  <div style={{ fontWeight: 500, fontSize: 13 }}>{h.navn}</div>
                  <div style={{ fontSize: 11, color: SK.soft, marginTop: 1, maxWidth: 480, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{h.beskrivelse}</div>
                </td>
                <td>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 5,
                    padding: '2px 8px', borderRadius: 99,
                    background: cat.farge + '22', color: cat.farge,
                    fontSize: 11, fontWeight: 600,
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: cat.farge }} />
                    {cat.kort}
                  </span>
                </td>
                <td>
                  {ansatt && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Avatar initials={h.eier} color={ansatt.c} size={22} />
                      <span style={{ fontSize: 12 }}>{ansatt.n}</span>
                    </div>
                  )}
                </td>
                <td style={{ fontSize: 11.5, color: SK.soft, textTransform: 'capitalize' }}>{h.frekvens}</td>
                <td><Pill status={AH_PILL[h.status]}>{AH_LABEL[h.status]}</Pill></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </Card>
  );
}

// ── DETALJ-MODAL ──
function HendelseModal({ h, onClose }) {
  const cat = ÅR_KATEGORIER[h.kategori];
  const ansatt = TEAM[h.eier];
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(17,24,61,.55)', zIndex: 200,
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: SK.pureWhite, borderRadius: 14, width: '100%', maxWidth: 560,
        boxShadow: '0 20px 60px rgba(17,24,61,.4)', overflow: 'hidden',
      }}>
        <div style={{ padding: '18px 22px', borderBottom: '1px solid rgba(17,24,61,.08)', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 10, flexShrink: 0,
            background: cat.farge + '15', color: cat.farge,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1 }}>{h.dag}</div>
            <div style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: 0.06, textTransform: 'uppercase', marginTop: 3 }}>{MND_KORT[h.mnd]}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <span style={{
                padding: '2px 8px', borderRadius: 4,
                background: cat.farge + '22', color: cat.farge,
                fontSize: 10.5, fontWeight: 600, letterSpacing: 0.04, textTransform: 'uppercase',
              }}>{cat.label}</span>
              <Pill status={AH_PILL[h.status]}>{AH_LABEL[h.status]}</Pill>
            </div>
            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: -0.01 }}>{h.navn}</h2>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>×</Button>
        </div>

        <div style={{ padding: 22, fontSize: 13, lineHeight: 1.55 }}>
          <p style={{ margin: '0 0 16px', color: SK.ink }}>{h.beskrivelse}</p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
            <Detalj label="Dato" value={`${h.dag}. ${MND_LABELS[h.mnd]} 2026`} />
            <Detalj label="Varighet" value={h.varighet === 1 ? '1 dag' : `${h.varighet} dager`} />
            <Detalj label="Frekvens" value={h.frekvens} />
            <Detalj label="Ansvarsrolle" value={h.ansvarlig} />
          </div>

          <div style={{ fontSize: 10.5, color: SK.soft, fontWeight: 600, letterSpacing: 0.05, textTransform: 'uppercase', marginBottom: 6 }}>Eier</div>
          {ansatt && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, background: SK.iceBlueLight, borderRadius: 8, marginBottom: 14 }}>
              <Avatar initials={h.eier} color={ansatt.c} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{ansatt.n}</div>
                <div style={{ fontSize: 11, color: SK.soft }}>{ansatt.r}</div>
              </div>
            </div>
          )}

          {h.deltakere && h.deltakere.length > 0 && (
            <>
              <div style={{ fontSize: 10.5, color: SK.soft, fontWeight: 600, letterSpacing: 0.05, textTransform: 'uppercase', marginBottom: 6 }}>Deltakere</div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 14 }}>
                {h.deltakere.map((d, i) => {
                  const p = TEAM[d];
                  if (p) {
                    return (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '3px 8px 3px 3px', background: SK.iceBlueLight, borderRadius: 99, fontSize: 11.5, fontWeight: 500 }}>
                        <Avatar initials={d} color={p.c} size={20} />
                        {p.n}
                      </div>
                    );
                  }
                  return <span key={i} style={{ padding: '4px 10px', background: SK.iceBlueLight, borderRadius: 99, fontSize: 11.5, color: SK.soft, fontWeight: 500 }}>{d}</span>;
                })}
              </div>
            </>
          )}
        </div>

        <div style={{ padding: '14px 22px', borderTop: '1px solid rgba(17,24,61,.08)', display: 'flex', gap: 8 }}>
          <Button variant="ghost">Rediger</Button>
          <Button variant="ghost" icon={I.download}>Last ned ICS</Button>
          <Button variant="primary" style={{ marginLeft: 'auto' }} onClick={onClose}>Lukk</Button>
        </div>
      </div>
    </div>
  );
}

const Detalj = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 10.5, fontWeight: 600, color: SK.soft, letterSpacing: 0.05, textTransform: 'uppercase' }}>{label}</div>
    <div style={{ fontSize: 13, fontWeight: 500, marginTop: 3, color: SK.ink, textTransform: label === 'Frekvens' ? 'capitalize' : 'none' }}>{value}</div>
  </div>
);

// ÅrshjulWorkspace håndteres av arshjul.jsx
const ÅrshjulWorkspaceMock = ÅrshjulWorkspace;
Object.assign(window, { ÅrshjulWorkspaceMock });