// wireframe-extras.jsx — electricity billing & communications

// ── Electricity: mixed flat + metered ─────────────────────────
function ElectricityScreen() {
  const rows = [
    { b: 'A-01', t: 'flat', prev: '—', now: '—', kwh: '—', sum: 'kr 1 200', flag: null },
    { b: 'A-03', t: 'målt', prev: '1 142', now: '1 231', kwh: '89', sum: 'kr 178', flag: null },
    { b: 'A-11', t: 'målt', prev: '842', now: '—', kwh: '—', sum: '—', flag: 'missing' },
    { b: 'B-02', t: 'flat', prev: '—', now: '—', kwh: '—', sum: 'kr 1 200', flag: null },
    { b: 'B-14', t: 'målt', prev: '2 048', now: '2 201', kwh: '153', sum: 'kr 306', flag: 'high' },
    { b: 'C-07', t: 'målt', prev: '612', now: '—', kwh: '—', sum: '—', flag: 'missing' },
    { b: 'C-12', t: 'målt', prev: '1 884', now: '1 942', kwh: '58', sum: 'kr 116', flag: null },
    { b: 'D-03', t: 'flat', prev: '—', now: '—', kwh: '—', sum: 'kr 1 200', flag: null },
  ];
  return (
    <WFCol gap={14} style={{ height: '100%' }}>
      <WFRow>
        <div style={{ fontSize: 20, fontWeight: 600 }}>Strøm · avlesningsperiode april 2026</div>
        <div style={{ flex: 1 }} />
        <WFBtn ghost small>Importer CSV</WFBtn>
        <WFBtn ghost small>Eksporter</WFBtn>
        <WFBtn primary small>Generer fakturagrunnlag</WFBtn>
      </WFRow>

      <WFRow gap={10}>
        <KPI label="Totalforbruk" value="1 284 kWh" hint="april hittil" accent={WF.navy} />
        <KPI label="Målte plasser" value="84/96" hint="12 mangler avlesning" accent={WF.warn} />
        <KPI label="Flatpris" value="52 plasser" hint="kr 1 200 pr. sesong" />
        <KPI label="Snittpris" value="kr 2,00/kWh" />
      </WFRow>

      <WFBox padding={0} style={{ background: '#fff', flex: 1, overflow: 'hidden' }}>
        <WFRow style={{ padding: '8px 14px', borderBottom: `1px solid ${WF.rule}`, background: WF.paperAlt }}>
          <WFLabel style={{ width: 60 }}>plass</WFLabel>
          <WFLabel style={{ width: 60 }}>type</WFLabel>
          <WFLabel style={{ flex: 1 }}>eier</WFLabel>
          <WFLabel style={{ width: 80 }}>forrige</WFLabel>
          <WFLabel style={{ width: 80 }}>nå</WFLabel>
          <WFLabel style={{ width: 60 }}>kWh</WFLabel>
          <WFLabel style={{ width: 90 }}>sum</WFLabel>
          <WFLabel style={{ width: 80 }}>status</WFLabel>
        </WFRow>
        {rows.map((r, i) => (
          <WFRow key={i} style={{ padding: '8px 14px', borderBottom: `1px solid ${WF.ruleSoft}`, fontSize: 12, fontFamily: WF.mono }}>
            <div style={{ width: 60, fontWeight: 500 }}>{r.b}</div>
            <div style={{ width: 60, color: WF.inkSoft, fontSize: 11 }}>{r.t}</div>
            <div style={{ flex: 1, fontFamily: WF.font, color: WF.ink }}>
              {['Hans Ek', 'Ingrid Berg', 'Sigrid Moen', 'Arne Dahl', 'Ola Nordmann', 'Gunn Solheim', 'Mette Lien', 'Kjell Ask'][i]}
            </div>
            <div style={{ width: 80 }}>{r.prev}</div>
            <div style={{ width: 80, color: r.flag === 'missing' ? WF.warn : WF.ink }}>
              {r.flag === 'missing' ? '— tom —' : r.now}
            </div>
            <div style={{ width: 60 }}>{r.kwh}</div>
            <div style={{ width: 90 }}>{r.sum}</div>
            <div style={{ width: 80 }}>
              {r.flag === 'missing' && <WFTag bg={WF.warnSoft} color={WF.warn}>mangler</WFTag>}
              {r.flag === 'high' && <WFTag bg={WF.warnSoft} color={WF.warn}>høyt</WFTag>}
              {!r.flag && <WFTag bg={WF.okSoft} color={WF.ok}>ok</WFTag>}
            </div>
          </WFRow>
        ))}
      </WFBox>
    </WFCol>
  );
}

// ── Communications ───────────────────────────────────────────
function CommScreen() {
  return (
    <WFRow style={{ height: '100%', gap: 14 }}>
      <WFCol gap={10} style={{ flex: 1.1, minHeight: 0 }}>
        <WFRow>
          <div style={{ fontSize: 20, fontWeight: 600 }}>Meldinger</div>
          <div style={{ flex: 1 }} />
          <WFBtn primary small>+ Ny utsendelse</WFBtn>
        </WFRow>
        <WFBox padding={0} style={{ background: '#fff', flex: 1 }}>
          {[
            ['Dugnad 4. juni', '145 mottakere · e-post + SMS', 'planlagt 25.04', 'planlagt'],
            ['Sesongstart 2026', '148 mottakere · e-post', 'sendt 18.04 · 132 åpnet', 'sendt'],
            ['Purring utestående', '7 mottakere · SMS', 'sendt 20.04', 'sendt'],
            ['Ny bomnøkkel', '148 mottakere · e-post', 'utkast', 'utkast'],
            ['Høstpuss 2025', '140 mottakere · e-post', 'sendt 10.09.25', 'sendt'],
          ].map(([t, s, m, st], i) => (
            <WFRow key={i} gap={10} style={{
              padding: '12px 14px',
              borderBottom: i < 4 ? `1px solid ${WF.ruleSoft}` : 'none',
              ...(i === 0 ? { background: WF.navySoft + '55' } : {}),
            }}>
              <WFCol gap={2} style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{t}</div>
                <div style={{ fontSize: 11, color: WF.inkSoft }}>{s}</div>
                <div style={{ fontSize: 10.5, color: WF.inkFaint, fontFamily: WF.mono, marginTop: 1 }}>{m}</div>
              </WFCol>
              <WFTag bg={
                st === 'planlagt' ? WF.navySoft : st === 'sendt' ? WF.okSoft : WF.ruleSoft
              } color={
                st === 'planlagt' ? WF.navy : st === 'sendt' ? WF.ok : WF.inkSoft
              }>{st}</WFTag>
            </WFRow>
          ))}
        </WFBox>
      </WFCol>

      <WFBox padding={18} style={{ flex: 1.3, background: '#fff', display: 'flex', flexDirection: 'column' }}>
        <WFLabel>Komponer</WFLabel>
        <WFCol gap={12} style={{ marginTop: 12, flex: 1 }}>
          <WFCol gap={4}>
            <WFLabel>Mottakere</WFLabel>
            <WFRow gap={5}>
              <WFTag bg={WF.navySoft} color={WF.navy}>alle helårs ×</WFTag>
              <WFTag bg={WF.navySoft} color={WF.navy}>pir B ×</WFTag>
              <WFBtn ghost small>+ legg til</WFBtn>
            </WFRow>
            <div style={{ fontSize: 10.5, color: WF.inkFaint, fontFamily: WF.mono }}>145 mottakere</div>
          </WFCol>
          <WFCol gap={4}>
            <WFLabel>Kanal</WFLabel>
            <WFRow gap={6}>
              <WFBtn ghost small style={{ background: '#fff', borderColor: WF.navy, color: WF.navy }}>✓ e-post</WFBtn>
              <WFBtn ghost small style={{ background: '#fff', borderColor: WF.navy, color: WF.navy }}>✓ SMS</WFBtn>
              <WFBtn ghost small>☐ push</WFBtn>
            </WFRow>
          </WFCol>
          <WFCol gap={4}>
            <WFLabel>Emne</WFLabel>
            <WFInput value="Dugnad 4. juni — alle mann til pumpene" />
          </WFCol>
          <WFCol gap={4} style={{ flex: 1 }}>
            <WFLabel>Innhold</WFLabel>
            <WFBox padding={12} style={{ background: WF.paper, flex: 1 }}>
              <WFScribble w="85%" h={6} />
              <WFScribble w="92%" h={6} style={{ marginTop: 5 }} />
              <WFScribble w="78%" h={6} style={{ marginTop: 5 }} />
              <WFScribble w="88%" h={6} style={{ marginTop: 5 }} />
              <div style={{ fontSize: 11, color: WF.inkSoft, marginTop: 10, fontFamily: WF.mono }}>
                {'{{ fornavn }}'} · tilpasses per mottaker
              </div>
            </WFBox>
          </WFCol>
          <WFRow>
            <WFBtn ghost small>Lagre utkast</WFBtn>
            <div style={{ flex: 1 }} />
            <WFBtn ghost small>Planlegg…</WFBtn>
            <WFBtn primary small>Send nå</WFBtn>
          </WFRow>
        </WFCol>
      </WFBox>
    </WFRow>
  );
}

Object.assign(window, { ElectricityScreen, CommScreen });