// ========================================================
//  Privat ekonomi (Admin-only) — 5 flikar
// ========================================================

const EK_TABS = [
  { id:"oversikt", label:"Ekonomiöversikt" },
  { id:"kostnader", label:"Kostnader" },
  { id:"intakter",  label:"Intäkter" },
  { id:"fakturor",  label:"Fakturor & betalningar" },
  { id:"rapport",   label:"Månadsrapport" },
];

// FX-omräkning för KPIs i blandade valutor — visa allt i SEK för totaler.
const FX_TO_SEK = { SEK:1, NOK:1.0, EUR:11.4 }; // 1:1 NOK→SEK för demo, EUR ~11.4 SEK

function toSEK(belopp, valuta){ return belopp * (FX_TO_SEK[valuta] || 1); }

function marketFromTag(t){
  if(t === "EasyTull SE") return "SE";
  if(t === "EasyToll NO") return "NO";
  return "BOTH";
}

function inDateRange(d, fromIso, toIso){ return d >= fromIso && d <= toIso; }

function filterKostnaderByPeriod(period, marketTag){
  return KOSTNADER.filter(k => {
    if(!inDateRange(k.datum, period.fromIso, period.toIso)) return false;
    if(marketTag !== "Alla" && k.marknad !== marketTag) return false;
    return true;
  });
}
function filterIntakterByPeriod(period, marketTag){
  return INTAKTER.filter(i => {
    if(!inDateRange(i.datum, period.fromIso, period.toIso)) return false;
    if(marketTag !== "Alla" && i.marknad !== marketTag) return false;
    return true;
  });
}

// ===================================================================
function PrivatEkonomiView({ market, period, kostnaderState, setKostnaderState, intakterState, setIntakterState }){
  const [tab, setTab] = useState("oversikt");
  // Sync state — apply overrides on top of base
  const kostnader = useMemo(() => KOSTNADER.map(k => kostnaderState[k.id] ? { ...k, ...kostnaderState[k.id] } : k), [kostnaderState]);
  const intakter  = useMemo(() => INTAKTER.map(i => intakterState[i.id] ? { ...i, ...intakterState[i.id] } : i), [intakterState]);

  const marketTag = market === "SE" ? "EasyTull SE" : market === "NO" ? "EasyToll NO" : "Alla";

  function updateKostnad(id, patch){
    const saved = { ...(kostnader.find(k => k.id === id) || {}), ...patch, id };
    upsertById(KOSTNADER, saved);
    setKostnaderState(s => ({ ...s, [id]: { ...(s[id]||{}), ...patch } }));
    window.EASYTULL_BACKEND?.persistCost(saved)
      .catch(err => console.warn("Kostnad kunde inte sparas i Supabase.", err));
  }
  function updateIntakt(id, patch){
    const saved = { ...(intakter.find(i => i.id === id) || {}), ...patch, id };
    upsertById(INTAKTER, saved);
    setIntakterState(s => ({ ...s, [id]: { ...(s[id]||{}), ...patch } }));
    window.EASYTULL_BACKEND?.persistRevenue(saved)
      .catch(err => console.warn("Intäkt kunde inte sparas i Supabase.", err));
  }

  function addKostnad(k){
    const id = `k-new-${Date.now()}`;
    const saved = { id, ...k };
    upsertById(KOSTNADER, saved);
    setKostnaderState(s => ({ ...s, [id]: saved }));
    window.EASYTULL_BACKEND?.persistCost(saved)
      .catch(err => console.warn("Kostnad kunde inte sparas i Supabase.", err));
  }
  function addIntakt(i){
    const id = `i-new-${Date.now()}`;
    const saved = { id, ...i };
    upsertById(INTAKTER, saved);
    setIntakterState(s => ({ ...s, [id]: saved }));
    window.EASYTULL_BACKEND?.persistRevenue(saved)
      .catch(err => console.warn("Intäkt kunde inte sparas i Supabase.", err));
  }

  return (
    <>
      <Topbar
        title="Privat ekonomi"
        subtitle="Intern översikt över kostnader, intäkter och betalningar. Ersätter inte bokföringsprogram."
        market={market}
        periodLabel={period.label}
        right={<RoleStamp label="Endast Admin"/>}
      />

      {/* Tabs */}
      <div className="flex items-center gap-1 mb-5 border-b border-paper-200">
        {EK_TABS.map(t => (
          <button
            key={t.id}
            onClick={()=>setTab(t.id)}
            className={`px-4 py-2.5 text-[13px] font-medium border-b-2 -mb-px transition
              ${tab === t.id ? "border-ink-900 text-ink-900" : "border-transparent text-ink-500 hover:text-ink-700"}`}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === "oversikt" && <EkOversikt period={period} marketTag={marketTag} market={market} kostnader={kostnader} intakter={intakter}/>}
      {tab === "kostnader" && <EkKostnader period={period} marketTag={marketTag} market={market} kostnader={kostnader} onUpdate={updateKostnad} onAdd={addKostnad}/>}
      {tab === "intakter" && <EkIntakter period={period} marketTag={marketTag} market={market} intakter={intakter} onUpdate={updateIntakt} onAdd={addIntakt}/>}
      {tab === "fakturor" && <EkFakturor period={period} marketTag={marketTag} market={market} intakter={intakter} onUpdate={updateIntakt}/>}
      {tab === "rapport" && <EkRapport period={period} marketTag={marketTag} market={market} kostnader={kostnader} intakter={intakter}/>}
    </>
  );
}

function RoleStamp({ label }){
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] tracking-wider uppercase text-accent-ink bg-accent-soft px-2 py-1 rounded">
      <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5 7V5a3 3 0 0 1 6 0v2"/></svg>
      {label}
    </span>
  );
}

// =============== ÖVERSIKT ==========================================
function EkOversikt({ period, marketTag, market, kostnader, intakter }){
  const k = filterKostnaderByPeriod(period, marketTag);
  const i = filterIntakterByPeriod(period, marketTag);

  // Faktura-summor (alltid i SEK för totaler)
  const fakturerat = i.reduce((a,x) => a + toSEK(x.belopp, x.valuta), 0);
  const inbetalt   = i.filter(x => x.status === "Betald" || x.status === "Delbetald").reduce((a,x) => a + toSEK(x.betaltBelopp || 0, x.valuta), 0);
  const obetalt    = i.filter(x => x.status === "Skickad" || x.status === "Förfallen" || x.status === "Delbetald").reduce((a,x) => a + toSEK((x.belopp - (x.betaltBelopp||0)), x.valuta), 0);
  const forfallna  = i.filter(x => x.status === "Förfallen").reduce((a,x) => a + toSEK((x.belopp - (x.betaltBelopp||0)), x.valuta), 0);

  const kostnaderTot = k.reduce((a,x) => a + toSEK(x.belopp, x.valuta), 0);
  const lopande      = k.filter(x => x.kostnadstyp === "Återkommande" || x.kostnadstyp === "Månadsbudget").reduce((a,x) => a + toSEK(x.belopp, x.valuta), 0);
  const engang       = k.filter(x => x.kostnadstyp === "Engångskostnad").reduce((a,x) => a + toSEK(x.belopp, x.valuta), 0);

  const resultat = fakturerat - kostnaderTot;

  // SE vs NO resultat
  const iSE = i.filter(x => x.marknad === "EasyTull SE").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  const iNO = i.filter(x => x.marknad === "EasyToll NO").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  const kSE = k.filter(x => x.marknad === "EasyTull SE").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  const kNO = k.filter(x => x.marknad === "EasyToll NO").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  const kCommon = k.filter(x => x.marknad === "Gemensam").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  // dela gemensamma kostnader 60/40 SE/NO
  const resSE = iSE - kSE - kCommon * 0.6;
  const resNO = iNO - kNO - kCommon * 0.4;

  return (
    <>
      <div className="text-[11px] text-ink-400 italic mb-3">Alla totaler i SEK · NOK 1:1 · EUR 11,40</div>

      {/* KPI grid */}
      <div className="grid grid-cols-4 gap-3 mb-5">
        <EkKpi label="Fakturerat denna period" value={fakturerat} accent="bg-accent" tone="ink"/>
        <EkKpi label="Inbetalt" value={inbetalt} tone="good"/>
        <EkKpi label="Obetalt" value={obetalt} tone="warn"/>
        <EkKpi label="Förfallna fakturor" value={forfallna} tone="bad"/>
        <EkKpi label="Kostnader" value={kostnaderTot} tone="ink"/>
        <EkKpi label="Löpande" value={lopande} sub="Återkommande" tone="mute"/>
        <EkKpi label="Engångskostnader" value={engang} tone="mute"/>
        <EkKpi label="Resultat" value={resultat} tone={resultat >= 0 ? "good" : "bad"} bold/>
      </div>

      {/* Resultat per marknad */}
      <Card title="Resultat per marknad" subtitle="Gemensamma kostnader fördelade 60% SE / 40% NO" className="mb-5">
        <div className="grid grid-cols-2 gap-4 mt-1">
          <MarketResult market="SE" intakt={iSE} kostnad={kSE + kCommon*0.6} resultat={resSE}/>
          <MarketResult market="NO" intakt={iNO} kostnad={kNO + kCommon*0.4} resultat={resNO}/>
        </div>
      </Card>

      {/* Kassaflöde-ish chart */}
      <Card title="Intäkter vs kostnader" subtitle="Per kategori i vald period">
        <CashflowChart kostnader={k} intakter={i}/>
      </Card>
    </>
  );
}

function EkKpi({ label, value, sub, tone, bold }){
  const tones = {
    ink:  "bg-white border-paper-200 text-ink-900",
    mute: "bg-paper-50 border-paper-200 text-ink-700",
    good: "bg-accent-soft/40 border-accent/15 text-accent-ink",
    warn: "bg-amber-50 border-amber-200 text-amber-900",
    bad:  "bg-rose-50 border-rose-200 text-rose-800",
  };
  return (
    <div className={`rounded-xl border px-4 py-3.5 ${tones[tone]}`}>
      <div className="eyebrow opacity-70">{label}</div>
      <div className={`display num leading-none mt-1.5 ${bold ? "text-[28px]" : "text-[24px]"}`}>
        {fmtNum(value)} <span className="text-[11px] opacity-60">SEK</span>
      </div>
      {sub && <div className="text-[11px] opacity-70 mt-1.5">{sub}</div>}
    </div>
  );
}

function MarketResult({ market, intakt, kostnad, resultat }){
  const positiv = resultat >= 0;
  return (
    <div className="bg-paper-50 border border-paper-200 rounded-lg p-4">
      <div className="flex items-center gap-2 mb-3">
        {market === "SE" ? <FlagSE/> : <FlagNO/>}
        <span className="text-[14px] text-ink-900 font-medium">{market === "SE" ? "EasyTull · Sverige" : "EasyToll · Norge"}</span>
      </div>
      <div className="grid grid-cols-3 gap-3">
        <div>
          <div className="eyebrow text-ink-500">Intäkt</div>
          <div className="display num text-[20px] text-ink-900 mt-1">{fmtNum(intakt)}</div>
        </div>
        <div>
          <div className="eyebrow text-ink-500">Kostnad</div>
          <div className="display num text-[20px] text-ink-700 mt-1">{fmtNum(kostnad)}</div>
        </div>
        <div>
          <div className="eyebrow text-ink-500">Resultat</div>
          <div className={`display num text-[20px] mt-1 ${positiv ? "text-accent-ink" : "text-rose-700"}`}>{positiv ? "+" : ""}{fmtNum(resultat)}</div>
        </div>
      </div>
    </div>
  );
}

function CashflowChart({ kostnader, intakter }){
  const byCat = {};
  EKONOMI_KATEGORIER.forEach(c => byCat[c] = 0);
  kostnader.forEach(k => byCat[k.kategori] = (byCat[k.kategori]||0) + toSEK(k.belopp, k.valuta));
  const data = Object.entries(byCat).map(([cat, val]) => ({ kategori:cat, kostnad:val })).filter(d => d.kostnad > 0).sort((a,b)=>b.kostnad-a.kostnad);
  // Lägg till total intäkt som referens
  const totalIntakt = intakter.reduce((a,x)=>a+toSEK(x.belopp, x.valuta),0);
  const total = data.reduce((a,d)=>a+d.kostnad,0);
  return (
    <div className="mt-2">
      <div className="grid grid-cols-2 gap-5 mb-5">
        <div className="bg-paper-50 border border-paper-200 rounded-lg p-4">
          <div className="eyebrow text-ink-500 mb-1.5">Total intäkt</div>
          <div className="display num text-[28px] text-accent-ink">{fmtNum(totalIntakt)} <span className="text-[12px] text-ink-500">SEK</span></div>
        </div>
        <div className="bg-paper-50 border border-paper-200 rounded-lg p-4">
          <div className="eyebrow text-ink-500 mb-1.5">Total kostnad</div>
          <div className="display num text-[28px] text-ink-900">{fmtNum(total)} <span className="text-[12px] text-ink-500">SEK</span></div>
        </div>
      </div>
      <div className="space-y-2">
        {data.map(d => {
          const w = total ? (d.kostnad/total)*100 : 0;
          return (
            <div key={d.kategori} className="grid grid-cols-[160px_1fr_auto] items-center gap-3 text-[13px]">
              <span className="text-ink-700">{d.kategori}</span>
              <div className="h-1.5 bg-paper-100 rounded-full overflow-hidden">
                <div className="h-full rounded-full bg-ink-700" style={{ width:`${w}%` }}></div>
              </div>
              <span className="num text-ink-800 w-28 text-right">{fmtNum(d.kostnad)} <span className="text-[10px] text-ink-400">SEK</span></span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// =============== KOSTNADER ==========================================
function EkKostnader({ period, marketTag, market, kostnader, onUpdate, onAdd }){
  const [filter, setFilter] = useState({ kategori:"alla", typ:"alla", betald:"alla", sok:"" });
  const [openEdit, setOpenEdit] = useState(null);
  const [openAdd, setOpenAdd] = useState(false);

  const list = filterKostnaderByPeriod(period, marketTag).filter(k => {
    if(filter.kategori !== "alla" && k.kategori !== filter.kategori) return false;
    if(filter.typ !== "alla" && k.kostnadstyp !== filter.typ) return false;
    if(filter.betald !== "alla"){
      const wantPaid = filter.betald === "Ja";
      if(Boolean(k.betald) !== wantPaid) return false;
    }
    if(filter.sok && !k.beskrivning.toLowerCase().includes(filter.sok.toLowerCase()) && !k.leverantor.toLowerCase().includes(filter.sok.toLowerCase())) return false;
    return true;
  }).sort((a,b) => b.datum.localeCompare(a.datum));

  return (
    <>
      <div className="flex items-center justify-end gap-2 mb-3">
        <Btn variant="outline" size="sm">Exportera CSV</Btn>
        <Btn variant="primary" size="sm" onClick={()=>setOpenAdd(true)}>+ Lägg till kostnad</Btn>
      </div>

      <Card className="mb-3">
        <div className="flex flex-wrap items-center gap-3 py-2.5">
          <div className="flex-1 min-w-[200px] relative">
            <svg width="14" height="14" viewBox="0 0 16 16" className="absolute left-3 top-1/2 -translate-y-1/2 text-ink-400"><circle cx="7" cy="7" r="5" stroke="currentColor" fill="none" strokeWidth="1.5"/><path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
            <input
              placeholder="Sök i beskrivning eller leverantör…"
              value={filter.sok}
              onChange={e=>setFilter(f=>({...f, sok:e.target.value}))}
              className="w-full bg-paper-50 border border-paper-200 rounded-lg pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-ink-600"
            />
          </div>
          <FilterSelect label="Kategori" value={filter.kategori} onChange={v=>setFilter(f=>({...f,kategori:v}))} options={["alla", ...EKONOMI_KATEGORIER]}/>
          <FilterSelect label="Kostnadstyp" value={filter.typ} onChange={v=>setFilter(f=>({...f,typ:v}))} options={["alla", ...KOSTNADSTYPER]}/>
          <FilterSelect label="Betald" value={filter.betald} onChange={v=>setFilter(f=>({...f,betald:v}))} options={["alla","Ja","Nej"]}/>
          <div className="text-[12px] text-ink-500 ml-auto num">{list.length} kostnader</div>
        </div>
      </Card>

      <Card>
        <div className="overflow-x-auto scroll-thin-light">
          <table className="w-full text-sm" style={{ minWidth:"1100px" }}>
            <thead>
              <tr className="text-left text-ink-500 text-[11px] tracking-wider uppercase border-b border-paper-200">
                <th className="py-2.5 font-medium pr-3">Datum</th>
                <th className="py-2.5 font-medium pr-3">Marknad</th>
                <th className="py-2.5 font-medium pr-3">Kategori</th>
                <th className="py-2.5 font-medium pr-3">Leverantör</th>
                <th className="py-2.5 font-medium pr-3">Beskrivning</th>
                <th className="py-2.5 font-medium pr-3">Typ</th>
                <th className="py-2.5 font-medium pr-3 text-right">Belopp</th>
                <th className="py-2.5 font-medium pl-2">Betald</th>
              </tr>
            </thead>
            <tbody>
              {list.map(k => (
                <tr key={k.id} onClick={()=>setOpenEdit(k)} className="border-b border-paper-100 last:border-0 hover:bg-paper-50 cursor-pointer">
                  <td className="py-2.5 pr-3 num text-ink-700 whitespace-nowrap">{k.datum}</td>
                  <td className="py-2.5 pr-3"><MarketTagSmall tag={k.marknad}/></td>
                  <td className="py-2.5 pr-3 text-ink-700">{k.kategori}</td>
                  <td className="py-2.5 pr-3 text-ink-700">{k.leverantor}</td>
                  <td className="py-2.5 pr-3 text-ink-700 max-w-[240px] truncate">{k.beskrivning}</td>
                  <td className="py-2.5 pr-3"><KostnadstypBadge typ={k.kostnadstyp}/></td>
                  <td className="py-2.5 pr-3 text-right num text-ink-800 whitespace-nowrap">{fmtNum(k.belopp)} <span className="text-[10px] text-ink-400">{k.valuta}</span></td>
                  <td className="py-2.5 pl-2">
                    {k.betald
                      ? <span className="inline-flex items-center gap-1.5 text-[11.5px] text-accent-ink"><span className="w-1.5 h-1.5 rounded-full bg-accent"></span>Betald · {k.betaldatum}</span>
                      : <button onClick={(e)=>{ e.stopPropagation(); onUpdate(k.id, { betald:true, betaldatum: isoDate(TODAY) }); }} className="text-[11.5px] text-ink-600 hover:text-ink-900 underline-offset-2 hover:underline">Markera som betald</button>}
                  </td>
                </tr>
              ))}
              {list.length === 0 && (
                <tr><td colSpan={8}><Empty>Inga kostnader matchar filtret.</Empty></td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {openAdd && <KostnadModal isNew period={period} onClose={()=>setOpenAdd(false)} onSave={(k)=>{ onAdd(k); setOpenAdd(false); }}/>}
      {openEdit && <KostnadModal kostnad={openEdit} onClose={()=>setOpenEdit(null)} onSave={(patch)=>{ onUpdate(openEdit.id, patch); setOpenEdit(null); }}/>}
    </>
  );
}

function KostnadstypBadge({ typ }){
  const map = {
    "Återkommande":     "bg-paper-100 text-ink-700",
    "Engångskostnad":   "bg-amber-50 text-amber-800",
    "Anpassad period":  "bg-sky-50 text-sky-800",
    "Månadsbudget":     "bg-accent-soft text-accent-ink",
  };
  return <span className={`text-[11px] px-2 py-0.5 rounded-full ${map[typ] || "bg-paper-100 text-ink-700"}`}>{typ}</span>;
}

function MarketTagSmall({ tag }){
  if(tag === "EasyTull SE") return <span className="inline-flex items-center gap-1 text-[11px] text-ink-600"><FlagSE size={11}/> SE</span>;
  if(tag === "EasyToll NO") return <span className="inline-flex items-center gap-1 text-[11px] text-ink-600"><FlagNO size={11}/> NO</span>;
  return <span className="text-[11px] text-ink-500">Gemensam</span>;
}

// =============== INTÄKTER ==========================================
function EkIntakter({ period, marketTag, market, intakter, onUpdate, onAdd }){
  const [filter, setFilter] = useState({ status:"alla", tjanst:"alla", sok:"" });
  const [openEdit, setOpenEdit] = useState(null);
  const [openAdd, setOpenAdd] = useState(false);

  const list = filterIntakterByPeriod(period, marketTag).filter(i => {
    if(filter.status !== "alla" && i.status !== filter.status) return false;
    if(filter.tjanst !== "alla" && i.tjanst !== filter.tjanst) return false;
    if(filter.sok && !(i.kund||"").toLowerCase().includes(filter.sok.toLowerCase()) && !(i.fakturanr||"").toLowerCase().includes(filter.sok.toLowerCase())) return false;
    return true;
  }).sort((a,b) => b.datum.localeCompare(a.datum));

  return (
    <>
      <div className="flex items-center justify-end gap-2 mb-3">
        <Btn variant="outline" size="sm">Exportera CSV</Btn>
        <Btn variant="primary" size="sm" onClick={()=>setOpenAdd(true)}>+ Lägg till intäkt</Btn>
      </div>
      <Card className="mb-3">
        <div className="flex flex-wrap items-center gap-3 py-2.5">
          <div className="flex-1 min-w-[200px] relative">
            <svg width="14" height="14" viewBox="0 0 16 16" className="absolute left-3 top-1/2 -translate-y-1/2 text-ink-400"><circle cx="7" cy="7" r="5" stroke="currentColor" fill="none" strokeWidth="1.5"/><path d="M11 11l3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
            <input
              placeholder="Sök i kund eller fakturanummer…"
              value={filter.sok}
              onChange={e=>setFilter(f=>({...f, sok:e.target.value}))}
              className="w-full bg-paper-50 border border-paper-200 rounded-lg pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-ink-600"
            />
          </div>
          <FilterSelect label="Status" value={filter.status} onChange={v=>setFilter(f=>({...f,status:v}))} options={["alla", ...FAKTURA_STATUSAR]}/>
          <FilterSelect label="Tjänst" value={filter.tjanst} onChange={v=>setFilter(f=>({...f,tjanst:v}))} options={["alla", ...FAKTURA_TJANSTER]}/>
          <div className="text-[12px] text-ink-500 ml-auto num">{list.length} fakturor</div>
        </div>
      </Card>
      <Card>
        <div className="overflow-x-auto scroll-thin-light">
          <table className="w-full text-sm" style={{ minWidth:"1100px" }}>
            <thead>
              <tr className="text-left text-ink-500 text-[11px] tracking-wider uppercase border-b border-paper-200">
                <th className="py-2.5 font-medium pr-3">Datum</th>
                <th className="py-2.5 font-medium pr-3">Faktura</th>
                <th className="py-2.5 font-medium pr-3">Kund</th>
                <th className="py-2.5 font-medium pr-3">Marknad</th>
                <th className="py-2.5 font-medium pr-3">Tjänst</th>
                <th className="py-2.5 font-medium pr-3">Status</th>
                <th className="py-2.5 font-medium pr-3 text-right">Belopp</th>
                <th className="py-2.5 font-medium pl-2">Inbetalt</th>
              </tr>
            </thead>
            <tbody>
              {list.map(i => (
                <tr key={i.id} onClick={()=>setOpenEdit(i)} className="border-b border-paper-100 last:border-0 hover:bg-paper-50 cursor-pointer">
                  <td className="py-2.5 pr-3 num text-ink-700 whitespace-nowrap">{i.datum}</td>
                  <td className="py-2.5 pr-3 num text-ink-500 text-[12px]">{i.fakturanr}</td>
                  <td className="py-2.5 pr-3 text-ink-800">{i.kund}</td>
                  <td className="py-2.5 pr-3"><MarketTagSmall tag={i.marknad}/></td>
                  <td className="py-2.5 pr-3 text-ink-700">{i.tjanst}</td>
                  <td className="py-2.5 pr-3"><FakturaStatusBadge status={i.status}/></td>
                  <td className="py-2.5 pr-3 text-right num text-ink-800 whitespace-nowrap">{fmtNum(i.belopp)} <span className="text-[10px] text-ink-400">{i.valuta}</span></td>
                  <td className="py-2.5 pl-2 text-[12px]">
                    {i.status === "Betald" || i.status === "Delbetald"
                      ? <span className="text-accent-ink num">{fmtNum(i.betaltBelopp || 0)} · {i.betaldatum}</span>
                      : <button onClick={(e)=>{ e.stopPropagation(); onUpdate(i.id, { status:"Betald", betaldatum: isoDate(TODAY), betaltBelopp: i.belopp, betalsatt: i.betalsatt || "Bank" }); }} className="text-ink-600 hover:text-ink-900 underline-offset-2 hover:underline">Markera som betald</button>}
                  </td>
                </tr>
              ))}
              {list.length === 0 && (
                <tr><td colSpan={8}><Empty>Inga intäkter matchar filtret.</Empty></td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>
      {openAdd && <IntaktModal isNew period={period} onClose={()=>setOpenAdd(false)} onSave={(i)=>{ onAdd(i); setOpenAdd(false); }}/>}
      {openEdit && <IntaktModal intakt={openEdit} onClose={()=>setOpenEdit(null)} onSave={(patch)=>{ onUpdate(openEdit.id, patch); setOpenEdit(null); }}/>}
    </>
  );
}

function FakturaStatusBadge({ status }){
  const map = {
    "Utkast":     "bg-paper-100 text-ink-600",
    "Skickad":    "bg-sky-50 text-sky-800",
    "Betald":     "bg-accent-soft text-accent-ink",
    "Förfallen":  "bg-rose-50 text-rose-800",
    "Delbetald":  "bg-amber-50 text-amber-800",
  };
  return <span className={`inline-flex items-center gap-1.5 text-[11.5px] px-2 py-0.5 rounded-full ${map[status]}`}>
    <span className="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>{status}
  </span>;
}

// =============== FAKTUROR & BETALNINGAR =============================
function EkFakturor({ period, marketTag, market, intakter, onUpdate }){
  const list = filterIntakterByPeriod(period, marketTag);
  const obetalda = list.filter(i => i.status === "Skickad" || i.status === "Förfallen" || i.status === "Delbetald");
  const betalda  = list.filter(i => i.status === "Betald");

  return (
    <>
      <Card title="Obetalda fakturor" subtitle="Skickade, delbetalda och förfallna" className="mb-5">
        {obetalda.length === 0 ? <Empty>Inga obetalda fakturor i perioden.</Empty> : (
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-ink-500 text-[11px] tracking-wider uppercase border-b border-paper-200">
                <th className="py-2 font-medium">Datum</th>
                <th className="py-2 font-medium">Faktura</th>
                <th className="py-2 font-medium">Kund</th>
                <th className="py-2 font-medium">Marknad</th>
                <th className="py-2 font-medium">Status</th>
                <th className="py-2 font-medium text-right">Belopp</th>
                <th className="py-2 font-medium text-right">Återstår</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {obetalda.map(i => {
                const aterstar = i.belopp - (i.betaltBelopp || 0);
                return (
                  <tr key={i.id} className="border-b border-paper-100 last:border-0">
                    <td className="py-2.5 num text-ink-700 whitespace-nowrap">{i.datum}</td>
                    <td className="py-2.5 num text-ink-500 text-[12px]">{i.fakturanr}</td>
                    <td className="py-2.5 text-ink-800">{i.kund}</td>
                    <td className="py-2.5"><MarketTagSmall tag={i.marknad}/></td>
                    <td className="py-2.5"><FakturaStatusBadge status={i.status}/></td>
                    <td className="py-2.5 text-right num text-ink-700">{fmtNum(i.belopp)} <span className="text-[10px] text-ink-400">{i.valuta}</span></td>
                    <td className="py-2.5 text-right num text-rose-700">{fmtNum(aterstar)}</td>
                    <td className="py-2.5 text-right">
                      <Btn size="sm" variant="primary" onClick={()=>onUpdate(i.id, { status:"Betald", betaldatum: isoDate(TODAY), betaltBelopp: i.belopp, betalsatt: i.betalsatt || "Bank" })}>Markera som betald</Btn>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </Card>

      <Card title="Betalda fakturor" subtitle="Inbetalningar i vald period">
        {betalda.length === 0 ? <Empty>Inga inbetalda fakturor i perioden.</Empty> : (
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-ink-500 text-[11px] tracking-wider uppercase border-b border-paper-200">
                <th className="py-2 font-medium">Datum</th>
                <th className="py-2 font-medium">Faktura</th>
                <th className="py-2 font-medium">Kund</th>
                <th className="py-2 font-medium">Marknad</th>
                <th className="py-2 font-medium">Betaldatum</th>
                <th className="py-2 font-medium">Betalsätt</th>
                <th className="py-2 font-medium text-right">Inbetalt</th>
              </tr>
            </thead>
            <tbody>
              {betalda.map(i => (
                <tr key={i.id} className="border-b border-paper-100 last:border-0">
                  <td className="py-2.5 num text-ink-700">{i.datum}</td>
                  <td className="py-2.5 num text-ink-500 text-[12px]">{i.fakturanr}</td>
                  <td className="py-2.5 text-ink-800">{i.kund}</td>
                  <td className="py-2.5"><MarketTagSmall tag={i.marknad}/></td>
                  <td className="py-2.5 num text-ink-700">{i.betaldatum || "—"}</td>
                  <td className="py-2.5 text-ink-700">{i.betalsatt || "—"}</td>
                  <td className="py-2.5 text-right num text-accent-ink">{fmtNum(i.betaltBelopp || i.belopp)} <span className="text-[10px] text-ink-400">{i.valuta}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Card>
    </>
  );
}

// =============== MÅNADSRAPPORT ======================================
function EkRapport({ period, marketTag, market, kostnader, intakter }){
  const k = filterKostnaderByPeriod(period, marketTag);
  const i = filterIntakterByPeriod(period, marketTag);
  const fakturerat = i.reduce((a,x) => a + toSEK(x.belopp, x.valuta), 0);
  const inbetalt   = i.filter(x => x.status === "Betald" || x.status === "Delbetald").reduce((a,x) => a + toSEK(x.betaltBelopp || 0, x.valuta), 0);
  const kostnaderTot = k.reduce((a,x) => a + toSEK(x.belopp, x.valuta), 0);

  const iSE = i.filter(x => x.marknad === "EasyTull SE").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  const iNO = i.filter(x => x.marknad === "EasyToll NO").reduce((a,x)=>a+toSEK(x.belopp,x.valuta),0);
  const sePct = fakturerat ? Math.round((iSE/fakturerat)*100) : 0;
  const noPct = fakturerat ? Math.round((iNO/fakturerat)*100) : 0;

  // largest cost category
  const byCat = {};
  k.forEach(x => byCat[x.kategori] = (byCat[x.kategori]||0) + toSEK(x.belopp, x.valuta));
  const topCat = Object.entries(byCat).sort((a,b)=>b[1]-a[1])[0];

  return (
    <Card title={`Månadsrapport · ${period.label}`} subtitle="Sammanfattning av perioden">
      <div className="bg-paper-50 border border-paper-200 rounded-xl p-6 mt-1">
        <p className="text-[16px] text-ink-800 leading-relaxed">
          <strong>{period.label}</strong> hade <strong className="num">{fmtNum(fakturerat)} kr</strong> i fakturerade intäkter,{" "}
          <strong className="num">{fmtNum(inbetalt)} kr</strong> inbetalt och <strong className="num">{fmtNum(kostnaderTot)} kr</strong> i kostnader.
          {fakturerat > 0 && <> EasyTull SE stod för <strong>{sePct}%</strong> av intäkterna och EasyToll NO för <strong>{noPct}%</strong>.</>}
          {topCat && <> Största kostnaden var <strong>{topCat[0]}</strong> ({fmtNum(topCat[1])} kr).</>}
        </p>
        <div className="mt-5 pt-5 border-t border-paper-200 grid grid-cols-3 gap-4">
          <ReportStat label="Fakturerat" value={fakturerat}/>
          <ReportStat label="Inbetalt" value={inbetalt}/>
          <ReportStat label="Kostnader" value={kostnaderTot}/>
          <ReportStat label="Resultat" value={fakturerat - kostnaderTot} accent/>
          <ReportStat label="Intäkt SE" value={iSE}/>
          <ReportStat label="Intäkt NO" value={iNO}/>
        </div>
      </div>

      <p className="text-[11.5px] text-ink-400 italic mt-4">
        Intern översikt. Ersätter inte bokföringsprogram.
      </p>
    </Card>
  );
}

function ReportStat({ label, value, accent }){
  const positiv = value >= 0;
  return (
    <div>
      <div className="eyebrow text-ink-500">{label}</div>
      <div className={`display num text-[22px] mt-1 ${accent ? (positiv ? "text-accent-ink" : "text-rose-700") : "text-ink-900"}`}>
        {accent && positiv ? "+" : ""}{fmtNum(value)} <span className="text-[11px] text-ink-500">SEK</span>
      </div>
    </div>
  );
}

// =============== MODALER ============================================
function KostnadModal({ kostnad, isNew, period, onClose, onSave }){
  const [form, setForm] = useState(() => {
    if(isNew){
      return {
        datum: isoDate(TODAY),
        marknad: "EasyTull SE",
        kategori: "Övrigt",
        leverantor: "",
        beskrivning: "",
        belopp: 0,
        valuta: "SEK",
        moms: 25,
        kostnadstyp: "Återkommande",
        periodFran: isoDate(period.from),
        periodTill: isoDate(period.to),
        betald: false,
        betaldatum: null,
        kommentar: "",
      };
    }
    return { ...kostnad };
  });
  function set(k,v){ setForm(f => ({ ...f, [k]: v })); }

  return (
    <div className="fixed inset-0 z-30 bg-ink-900/50 flex items-center justify-center p-6" onClick={onClose}>
      <div className="bg-white w-[720px] max-w-full max-h-[90vh] overflow-y-auto rounded-xl border border-paper-200 shadow-2xl" onClick={e=>e.stopPropagation()}>
        <div className="flex items-center justify-between px-6 pt-6 pb-4 border-b border-paper-200 sticky top-0 bg-white">
          <div>
            <div className="eyebrow text-ink-500">{isNew ? "Ny kostnad" : "Redigera kostnad"}</div>
            <h3 className="display text-[22px] text-ink-900 mt-0.5">{isNew ? "Lägg till kostnad" : form.beskrivning}</h3>
          </div>
          <button onClick={onClose} className="text-ink-500 hover:text-ink-900 text-xl leading-none">×</button>
        </div>
        <div className="p-6 grid grid-cols-2 gap-4">
          <Field label="Datum"><input type="date" value={form.datum} onChange={e=>set("datum",e.target.value)} className="modalInput"/></Field>
          <Field label="Marknad">
            <select value={form.marknad} onChange={e=>set("marknad",e.target.value)} className="modalInput bare">
              <option>EasyTull SE</option><option>EasyToll NO</option><option>Gemensam</option>
            </select>
          </Field>
          <Field label="Kategori">
            <select value={form.kategori} onChange={e=>set("kategori",e.target.value)} className="modalInput bare">
              {EKONOMI_KATEGORIER.map(k => <option key={k}>{k}</option>)}
            </select>
          </Field>
          <Field label="Leverantör"><input value={form.leverantor} onChange={e=>set("leverantor",e.target.value)} className="modalInput" placeholder="T.ex. Google Ireland Ltd"/></Field>
          <div className="col-span-2"><Field label="Beskrivning"><input value={form.beskrivning} onChange={e=>set("beskrivning",e.target.value)} className="modalInput"/></Field></div>
          <Field label="Belopp"><input type="number" value={form.belopp} onChange={e=>set("belopp",Number(e.target.value))} className="modalInput num"/></Field>
          <div className="grid grid-cols-2 gap-3">
            <Field label="Valuta"><select value={form.valuta} onChange={e=>set("valuta",e.target.value)} className="modalInput bare"><option>SEK</option><option>NOK</option><option>EUR</option></select></Field>
            <Field label="Moms %"><input type="number" value={form.moms} onChange={e=>set("moms",Number(e.target.value))} className="modalInput num"/></Field>
          </div>
          <Field label="Kostnadstyp"><select value={form.kostnadstyp} onChange={e=>set("kostnadstyp",e.target.value)} className="modalInput bare">{KOSTNADSTYPER.map(t => <option key={t}>{t}</option>)}</select></Field>
          <Field label="Period från"><input type="date" value={form.periodFran || ""} onChange={e=>set("periodFran",e.target.value)} className="modalInput"/></Field>
          <Field label="Period till"><input type="date" value={form.periodTill || ""} onChange={e=>set("periodTill",e.target.value)} className="modalInput"/></Field>
          <Field label="Betald">
            <select value={String(form.betald)} onChange={e=>set("betald",e.target.value === "true")} className="modalInput bare">
              <option value="false">Nej</option><option value="true">Ja</option>
            </select>
          </Field>
          <Field label="Betaldatum"><input type="date" value={form.betaldatum || ""} onChange={e=>set("betaldatum",e.target.value || null)} className="modalInput"/></Field>
          <div className="col-span-2"><Field label="Kommentar"><textarea rows={3} value={form.kommentar || ""} onChange={e=>set("kommentar",e.target.value)} className="modalInput"/></Field></div>
        </div>
        <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-3 border-t border-paper-200 sticky bottom-0 bg-white">
          <Btn variant="ghost" onClick={onClose}>Avbryt</Btn>
          <Btn variant="primary" onClick={()=>onSave(form)}>{isNew ? "Lägg till" : "Spara ändringar"}</Btn>
        </div>
        <style>{`.modalInput{ width:100%; background:#fbfaf7; border:1px solid #ecebe4; border-radius:8px; padding:8px 12px; font-size:14px; color:#13161b; outline:none; }
        .modalInput:focus{ border-color:#13161b; }`}</style>
      </div>
    </div>
  );
}

function IntaktModal({ intakt, isNew, period, onClose, onSave }){
  const [form, setForm] = useState(() => {
    if(isNew){
      return {
        datum: isoDate(TODAY),
        marknad: "EasyTull SE",
        kund: "",
        tjanst: "Import",
        fakturanr: `INV-${isoDate(TODAY).replaceAll("-","").slice(0,6)}-XXX`,
        belopp: 0,
        valuta: "SEK",
        moms: 25,
        status: "Utkast",
        betaldatum: null,
        betaltBelopp: 0,
        betalsatt: null,
        kopplatLead: "",
        kommentar: "",
      };
    }
    return { ...intakt };
  });
  function set(k,v){ setForm(f => ({ ...f, [k]: v })); }

  return (
    <div className="fixed inset-0 z-30 bg-ink-900/50 flex items-center justify-center p-6" onClick={onClose}>
      <div className="bg-white w-[720px] max-w-full max-h-[90vh] overflow-y-auto rounded-xl border border-paper-200 shadow-2xl" onClick={e=>e.stopPropagation()}>
        <div className="flex items-center justify-between px-6 pt-6 pb-4 border-b border-paper-200 sticky top-0 bg-white">
          <div>
            <div className="eyebrow text-ink-500">{isNew ? "Ny intäkt" : "Redigera intäkt"}</div>
            <h3 className="display text-[22px] text-ink-900 mt-0.5">{isNew ? "Lägg till intäkt / faktura" : form.fakturanr}</h3>
          </div>
          <button onClick={onClose} className="text-ink-500 hover:text-ink-900 text-xl leading-none">×</button>
        </div>
        <div className="p-6 grid grid-cols-2 gap-4">
          <Field label="Datum"><input type="date" value={form.datum} onChange={e=>set("datum",e.target.value)} className="modalInput"/></Field>
          <Field label="Fakturanummer"><input value={form.fakturanr} onChange={e=>set("fakturanr",e.target.value)} className="modalInput num"/></Field>
          <Field label="Marknad">
            <select value={form.marknad} onChange={e=>set("marknad",e.target.value)} className="modalInput bare">
              <option>EasyTull SE</option><option>EasyToll NO</option>
            </select>
          </Field>
          <Field label="Kund"><input value={form.kund} onChange={e=>set("kund",e.target.value)} className="modalInput"/></Field>
          <Field label="Tjänst"><select value={form.tjanst} onChange={e=>set("tjanst",e.target.value)} className="modalInput bare">{FAKTURA_TJANSTER.map(t => <option key={t}>{t}</option>)}</select></Field>
          <Field label="Status"><select value={form.status} onChange={e=>set("status",e.target.value)} className="modalInput bare">{FAKTURA_STATUSAR.map(t => <option key={t}>{t}</option>)}</select></Field>
          <Field label="Belopp"><input type="number" value={form.belopp} onChange={e=>set("belopp",Number(e.target.value))} className="modalInput num"/></Field>
          <div className="grid grid-cols-2 gap-3">
            <Field label="Valuta"><select value={form.valuta} onChange={e=>set("valuta",e.target.value)} className="modalInput bare"><option>SEK</option><option>NOK</option><option>EUR</option></select></Field>
            <Field label="Moms %"><input type="number" value={form.moms} onChange={e=>set("moms",Number(e.target.value))} className="modalInput num"/></Field>
          </div>
          <Field label="Betaldatum"><input type="date" value={form.betaldatum || ""} onChange={e=>set("betaldatum",e.target.value || null)} className="modalInput"/></Field>
          <Field label="Betalt belopp"><input type="number" value={form.betaltBelopp || 0} onChange={e=>set("betaltBelopp",Number(e.target.value))} className="modalInput num"/></Field>
          <Field label="Betalsätt"><select value={form.betalsatt || ""} onChange={e=>set("betalsatt",e.target.value || null)} className="modalInput bare"><option value="">—</option>{BETALSATT.map(t => <option key={t}>{t}</option>)}</select></Field>
          <Field label="Kopplat lead"><input value={form.kopplatLead || ""} onChange={e=>set("kopplatLead",e.target.value)} className="modalInput font-mono" placeholder="t.ex. SE-2026-4-22"/></Field>
          <div className="col-span-2"><Field label="Kommentar"><textarea rows={3} value={form.kommentar || ""} onChange={e=>set("kommentar",e.target.value)} className="modalInput"/></Field></div>
        </div>
        <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-3 border-t border-paper-200 sticky bottom-0 bg-white">
          <Btn variant="ghost" onClick={onClose}>Avbryt</Btn>
          <Btn variant="primary" onClick={()=>onSave(form)}>{isNew ? "Lägg till" : "Spara ändringar"}</Btn>
        </div>
        <style>{`.modalInput{ width:100%; background:#fbfaf7; border:1px solid #ecebe4; border-radius:8px; padding:8px 12px; font-size:14px; color:#13161b; outline:none; }
        .modalInput:focus{ border-color:#13161b; }`}</style>
      </div>
    </div>
  );
}

Object.assign(window, { PrivatEkonomiView });