/* Canopy ERP — Dashboard, Clients, Expenses, Reports mock views. */

/* -------------------- MOCK DATA -------------------- */
window.CLIENTS = [
  { id: "cli-001", name: "Nordwind Logistics GmbH", city: "Munich, DE",    contact: "Mira Hofmann",    email: "m.hofmann@nordwind.de",  invoices: 14, outstanding: 48200.00,  paid: 342180.00, terms: "Net 30", since: "Jun 2023", health: "good",   tags: ["Logistics"] },
  { id: "cli-002", name: "Orsay & Co",              city: "Paris, FR",     contact: "Léo Bertrand",     email: "leo@orsay.fr",           invoices:  8, outstanding: 12400.50,  paid: 184520.00, terms: "Net 30", since: "Oct 2024", health: "good",   tags: ["Retail"] },
  { id: "cli-003", name: "Terrazza GmbH",           city: "Berlin, DE",    contact: "Ingo Brandt",      email: "i.brandt@terrazza.de",   invoices: 21, outstanding: 84930.00,  paid: 612000.00, terms: "Net 45", since: "Feb 2022", health: "good",   tags: ["Hospitality","Key account"] },
  { id: "cli-004", name: "Loft Atelier SARL",       city: "Lyon, FR",      contact: "Camille Roux",     email: "camille@loft-atelier.fr",invoices:  5, outstanding:  6240.00,  paid:  48200.00, terms: "Net 30", since: "Mar 2025", health: "watch",  tags: ["Design"] },
  { id: "cli-005", name: "Harlow & Sons",           city: "Manchester, UK",contact: "Peter Harlow",     email: "peter@harlow.co.uk",     invoices:  9, outstanding: 23800.00,  paid:  96400.00, terms: "Net 30", since: "Aug 2023", health: "risk",   tags: ["Trade"] },
  { id: "cli-006", name: "Studio Noir",             city: "Amsterdam, NL", contact: "Anke de Vries",    email: "anke@studionoir.nl",     invoices: 12, outstanding:     0.00,  paid: 214800.00, terms: "Net 30", since: "Jan 2023", health: "good",   tags: ["Design"] },
  { id: "cli-007", name: "Casa Blanca SL",          city: "Madrid, ES",    contact: "Rosa Jiménez",     email: "r.jimenez@casablanca.es",invoices:  6, outstanding: 18000.00,  paid:  62400.00, terms: "Net 45", since: "Nov 2024", health: "good",   tags: ["Retail"] },
  { id: "cli-008", name: "Maison Verte",            city: "Brussels, BE",  contact: "Élise Dubois",     email: "elise@maisonverte.be",   invoices: 11, outstanding: 31480.00,  paid: 188200.00, terms: "Net 30", since: "May 2023", health: "good",   tags: ["Hospitality"] },
  { id: "cli-009", name: "Kessler Werkzeugbau",     city: "Stuttgart, DE", contact: "Hans Kessler",     email: "hans@kessler-werk.de",   invoices: 17, outstanding: 14720.40,  paid: 284610.00, terms: "Net 30", since: "Sep 2022", health: "good",   tags: ["Industrial","Key account"] },
  { id: "cli-010", name: "Bluefin Textiles",        city: "Porto, PT",     contact: "Tiago Almeida",    email: "tiago@bluefin.pt",       invoices:  2, outstanding:  4250.00,  paid:   4250.00, terms: "Net 60", since: "Apr 2026", health: "new",    tags: ["Textiles"] },
  { id: "cli-011", name: "Atelier Rossi srl",       city: "Milan, IT",     contact: "Giulia Rossi",     email: "g.rossi@atelierrossi.it",invoices:  7, outstanding: 27600.00,  paid: 142100.00, terms: "Net 30", since: "Jul 2024", health: "good",   tags: ["Design"] },
];

window.EXPENSES = [
  { id: "EXP-2026-0288", vendor: "AWS",                 category: "Cloud hosting",    amount: 4218.40,  date: "Apr 22, 2026", method: "Card · •• 4471", status: "approved", owner: "Ops",       receipt: true  },
  { id: "EXP-2026-0287", vendor: "Notion Labs",         category: "Software",         amount:   96.00,  date: "Apr 22, 2026", method: "Card · •• 4471", status: "approved", owner: "Anna M.",   receipt: true  },
  { id: "EXP-2026-0286", vendor: "Deutsche Bahn",       category: "Travel",           amount:  284.50,  date: "Apr 21, 2026", method: "Card · •• 0221", status: "pending",  owner: "Jonas K.",  receipt: true  },
  { id: "EXP-2026-0285", vendor: "Figma",               category: "Software",         amount:  180.00,  date: "Apr 20, 2026", method: "Card · •• 4471", status: "approved", owner: "Design",    receipt: true  },
  { id: "EXP-2026-0284", vendor: "WeWork Paris Opéra",  category: "Office",           amount: 2940.00,  date: "Apr 19, 2026", method: "Transfer",        status: "approved", owner: "Ops",       receipt: true  },
  { id: "EXP-2026-0283", vendor: "Uber",                category: "Travel",           amount:   42.80,  date: "Apr 18, 2026", method: "Card · •• 0221", status: "approved", owner: "Léa F.",    receipt: false },
  { id: "EXP-2026-0282", vendor: "LinkedIn Ads",        category: "Marketing",        amount: 1850.00,  date: "Apr 17, 2026", method: "Card · •• 4471", status: "approved", owner: "Growth",    receipt: true  },
  { id: "EXP-2026-0281", vendor: "Maison Delcourt",     category: "Meals",            amount:  118.60,  date: "Apr 16, 2026", method: "Card · •• 0221", status: "pending",  owner: "Anna M.",   receipt: true  },
  { id: "EXP-2026-0280", vendor: "Typeform",            category: "Software",         amount:   59.00,  date: "Apr 15, 2026", method: "Card · •• 4471", status: "approved", owner: "Growth",    receipt: true  },
  { id: "EXP-2026-0279", vendor: "DHL Express",         category: "Shipping",         amount:  312.20,  date: "Apr 14, 2026", method: "Transfer",        status: "approved", owner: "Ops",       receipt: true  },
  { id: "EXP-2026-0278", vendor: "Slack Technologies",  category: "Software",         amount:  144.00,  date: "Apr 13, 2026", method: "Card · •• 4471", status: "approved", owner: "Ops",       receipt: true  },
  { id: "EXP-2026-0277", vendor: "TGV INOUI",           category: "Travel",           amount:  164.00,  date: "Apr 12, 2026", method: "Card · •• 0221", status: "rejected", owner: "Jonas K.",  receipt: false },
];

window.EXPENSE_CATS = [
  { key: "Software",     total: 8420,  color: "#4f46e5" },
  { key: "Cloud hosting",total: 12640, color: "#0ea5e9" },
  { key: "Travel",       total: 4880,  color: "#f59e0b" },
  { key: "Office",       total: 6820,  color: "#10b981" },
  { key: "Marketing",    total: 9210,  color: "#ec4899" },
  { key: "Meals",        total: 1240,  color: "#8b5cf6" },
  { key: "Shipping",     total: 2180,  color: "#64748b" },
];

/* -------------------- DASHBOARD -------------------- */
const Dashboard = ({ invoices, onNavigate }) => {
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); });
  const open     = invoices.filter(i=>i.status==="pending");
  const funded   = invoices.filter(i=>i.status==="funded");
  const awaiting = invoices.filter(i=>i.status==="awaiting-buyer");
  const outstanding = open.reduce((s,r)=>s+r.amount,0) + awaiting.reduce((s,r)=>s+r.amount,0);
  const fundable    = open.reduce((s,r)=>s+r.amount,0);

  // Revenue trend — months Nov→Apr
  const trend = [
    { m: "Nov", billed: 118, collected: 102 },
    { m: "Dec", billed: 142, collected: 128 },
    { m: "Jan", billed: 96,  collected:  94 },
    { m: "Feb", billed: 164, collected: 140 },
    { m: "Mar", billed: 188, collected: 172 },
    { m: "Apr", billed: 216, collected: 184 },
  ];
  const maxT = Math.max(...trend.map(r=>r.billed));

  const activities = [
    { i: "zap",             who: "Aria",       what: `funded ${fmtEur(9140.20)} for INV-2026-0407`,   when: "2h ago",   tone: "pos" },
    { i: "mail",            who: "You",        what: "sent validation link to Casa Blanca SL",        when: "6h ago",   tone: "neu" },
    { i: "file-plus",       who: "Anna M.",    what: "created invoice INV-2026-0412",                 when: "yesterday",tone: "neu" },
    { i: "check-circle-2",  who: "Maison Verte", what: `paid ${fmtEur(31480)} — buyer settlement`,    when: "2d ago",   tone: "pos" },
    { i: "alert-triangle",  who: "Harlow & Sons", what: "invoice INV-2026-0408 past-due · 4d",        when: "2d ago",   tone: "warn" },
    { i: "user-plus",       who: "You",        what: "added Bluefin Textiles as a client",            when: "3d ago",   tone: "neu" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Dashboard</h1>
          <div className="page-sub">Welcome back, Anna — here's how Boreal Studio is doing today.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><i data-lucide="calendar"></i>Apr 2026</button>
          <button className="btn btn-primary"><i data-lucide="plus"></i>New invoice</button>
        </div>
      </div>

      <div className="kpis">
        <Kpi label="Revenue this month"    value={fmtEurShort(216000)} delta="+14.9%" deltaTone="pos" sub="vs March" />
        <Kpi label="Outstanding"           value={fmtEurShort(outstanding)} delta={`${open.length+awaiting.length} invoices`} deltaTone="neu" sub="incl. awaiting buyer" />
        <Kpi label="Cash in bank"          value="€312.4k" delta="+€18.2k" deltaTone="pos" sub="Revolut · Qonto" />
        <Kpi label="Available to finance"  value={fmtEurShort(fundable)} delta="up to 100%" deltaTone="pos" sub={`${open.length} eligible`} financing />
      </div>

      <div className="dash-grid">
        <div className="card dash-chart">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Billed vs collected</div>
            <div className="card-toolbar-right">
              <span className="chart-legend"><span className="dot" style={{background:"#0f172a"}}></span>Billed</span>
              <span className="chart-legend"><span className="dot" style={{background:"#10b981"}}></span>Collected</span>
            </div>
          </div>
          <div className="bar-chart">
            {trend.map(r => (
              <div className="bar-col" key={r.m}>
                <div className="bars">
                  <div className="bar billed"    style={{height: `${(r.billed/maxT)*100}%`}} title={`Billed €${r.billed}k`}></div>
                  <div className="bar collected" style={{height: `${(r.collected/maxT)*100}%`}} title={`Collected €${r.collected}k`}></div>
                </div>
                <div className="bar-label">{r.m}</div>
              </div>
            ))}
          </div>
          <div className="bar-foot">
            <div>
              <div className="bar-foot-k">Billed (6mo)</div>
              <div className="bar-foot-v">€924k</div>
            </div>
            <div>
              <div className="bar-foot-k">Collected (6mo)</div>
              <div className="bar-foot-v">€820k</div>
            </div>
            <div>
              <div className="bar-foot-k">Collection rate</div>
              <div className="bar-foot-v">88.7%</div>
            </div>
            <div>
              <div className="bar-foot-k">DSO</div>
              <div className="bar-foot-v">27 days</div>
            </div>
          </div>
        </div>

        <div className="card dash-side">
          <div className="dash-side-head">Quick actions</div>
          <div className="dash-actions">
            <button className="dash-action" onClick={()=>onNavigate && onNavigate("invoices")}>
              <i data-lucide="file-plus" style={{color:"#4f46e5"}}></i>
              <div><b>New invoice</b><span>Draft a receivable for a client</span></div>
            </button>
            <button className="dash-action" onClick={()=>onNavigate && onNavigate("financing")}>
              <i data-lucide="zap" style={{color:"#10b981"}}></i>
              <div><b>Get paid now</b><span>Advance open invoices with Aria</span></div>
            </button>
            <button className="dash-action" onClick={()=>onNavigate && onNavigate("expenses")}>
              <i data-lucide="receipt" style={{color:"#f59e0b"}}></i>
              <div><b>Log an expense</b><span>Attach a receipt or forward email</span></div>
            </button>
            <button className="dash-action" onClick={()=>onNavigate && onNavigate("clients")}>
              <i data-lucide="user-plus" style={{color:"#ec4899"}}></i>
              <div><b>Add a client</b><span>Import via SIREN or VAT number</span></div>
            </button>
          </div>
        </div>

        <div className="card dash-activity">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Recent activity</div>
            <div className="card-toolbar-right">
              <span style={{fontSize:12,color:"var(--muted)"}}>Last 7 days</span>
            </div>
          </div>
          <ul className="activity-list">
            {activities.map((a,i) => (
              <li key={i} className={"activity-item tone-"+a.tone}>
                <span className="activity-icon"><i data-lucide={a.i}></i></span>
                <div className="activity-body">
                  <div><b>{a.who}</b> {a.what}</div>
                  <div className="activity-when">{a.when}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div className="card dash-upcoming">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Due this week</div>
          </div>
          <div className="upcoming-list">
            {open.slice(0,4).map(r => (
              <div className="upcoming-row" key={r.id}>
                <div>
                  <div className="upcoming-buyer">{r.buyer}</div>
                  <div className="upcoming-sub">{r.id} · {fmtDue(r.dueIn)}</div>
                </div>
                <div className="upcoming-amt">{fmtEur(r.amount)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* -------------------- CLIENTS -------------------- */
const Clients = () => {
  const [q, setQ] = React.useState("");
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); },[q]);

  const rows = CLIENTS.filter(c =>
    !q || c.name.toLowerCase().includes(q.toLowerCase()) || c.city.toLowerCase().includes(q.toLowerCase())
  );

  const totalOutstanding = CLIENTS.reduce((s,r)=>s+r.outstanding,0);
  const totalPaid        = CLIENTS.reduce((s,r)=>s+r.paid,0);
  const avgTicket        = totalPaid / CLIENTS.reduce((s,r)=>s+r.invoices,0);

  const healthLabel = {
    good:  { label: "Good standing", cls: "pos"  },
    watch: { label: "Watch",         cls: "warn" },
    risk:  { label: "At risk",       cls: "neg"  },
    new:   { label: "New",           cls: "info" },
  };

  const palette = ["#fde68a","#bbf7d0","#c7d2fe","#fecaca","#a7f3d0","#e9d5ff","#fed7aa","#bae6fd","#fbcfe8","#d9f99d","#fcd34d"];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Clients</h1>
          <div className="page-sub">{CLIENTS.length} companies across 7 countries.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><i data-lucide="download"></i>Export</button>
          <button className="btn btn-secondary"><i data-lucide="upload"></i>Import</button>
          <button className="btn btn-primary"><i data-lucide="plus"></i>New client</button>
        </div>
      </div>

      <div className="kpis">
        <Kpi label="Active clients"       value={CLIENTS.length}                             delta="+2 this quarter" deltaTone="pos" sub="across EU + UK"/>
        <Kpi label="Outstanding"          value={fmtEurShort(totalOutstanding)}              delta={`${CLIENTS.filter(c=>c.outstanding>0).length} with open invoices`} deltaTone="neu" sub="gross receivables"/>
        <Kpi label="Lifetime billed"      value={fmtEurShort(totalPaid)}                     delta="+€184k YTD" deltaTone="pos" sub="collected to date"/>
        <Kpi label="Avg. invoice"         value={fmtEurShort(avgTicket)}                     delta="+€1.2k" deltaTone="pos" sub="last 12 months"/>
      </div>

      <div className="card">
        <div className="card-toolbar">
          <div className="card-toolbar-right">
            <div className="card-toolbar-search">
              <i data-lucide="search"></i>
              <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search by name or city…"/>
            </div>
            <button className="filter-chip"><i data-lucide="sliders-horizontal"></i> Country</button>
            <button className="filter-chip"><i data-lucide="sliders-horizontal"></i> Health</button>
          </div>
        </div>
        <table className="tbl">
          <thead><tr>
            <th>Client</th>
            <th>Contact</th>
            <th>Health</th>
            <th className="num">Invoices</th>
            <th className="num">Outstanding</th>
            <th className="num">Lifetime</th>
            <th>Terms</th>
          </tr></thead>
          <tbody>
            {rows.map((c,i) => {
              const h = healthLabel[c.health];
              const initials = c.name.split(/[\s·&]+/).filter(Boolean).slice(0,2).map(w=>w[0]).join("").toUpperCase();
              return (
                <tr key={c.id}>
                  <td>
                    <div className="client-cell">
                      <div className="client-avatar" style={{background: palette[i % palette.length]}}>{initials}</div>
                      <div>
                        <div className="buyer-name">{c.name}</div>
                        <div className="buyer-sub">{c.city} · since {c.since}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style={{fontSize:13}}>{c.contact}</div>
                    <div style={{fontSize:11.5,color:"var(--muted)",marginTop:2}}>{c.email}</div>
                  </td>
                  <td><span className={"badge "+h.cls}><span className="badge-dot"></span>{h.label}</span></td>
                  <td className="num">{c.invoices}</td>
                  <td className="num" style={{fontWeight: c.outstanding>0?600:400, color: c.outstanding>0?"var(--ink)":"var(--muted)"}}>{c.outstanding>0?fmtEur(c.outstanding):"—"}</td>
                  <td className="num" style={{color:"var(--muted)"}}>{fmtEur(c.paid)}</td>
                  <td style={{fontSize:12.5,color:"var(--muted)"}}>{c.terms}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* -------------------- EXPENSES -------------------- */
const Expenses = () => {
  const [q, setQ] = React.useState("");
  const [cat, setCat] = React.useState("all");
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); },[q,cat]);

  const rows = EXPENSES.filter(e => {
    if (cat !== "all" && e.category !== cat) return false;
    if (q && !(e.vendor.toLowerCase().includes(q.toLowerCase()) || e.category.toLowerCase().includes(q.toLowerCase()))) return false;
    return true;
  });

  const total     = EXPENSES.reduce((s,r)=>s+r.amount,0);
  const pending   = EXPENSES.filter(e=>e.status==="pending");
  const approved  = EXPENSES.filter(e=>e.status==="approved");
  const catTotal  = EXPENSE_CATS.reduce((s,c)=>s+c.total,0);

  const statusBadge = (s) => {
    if (s==="approved") return <span className="badge pos"><span className="badge-dot"></span>Approved</span>;
    if (s==="pending")  return <span className="badge warn"><span className="badge-dot"></span>Pending</span>;
    if (s==="rejected") return <span className="badge neg"><span className="badge-dot"></span>Rejected</span>;
    return <span className="badge neu">{s}</span>;
  };

  const categoryIcon = {
    "Software":"laptop", "Cloud hosting":"cloud", "Travel":"plane",
    "Office":"building", "Marketing":"megaphone", "Meals":"utensils",
    "Shipping":"package"
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Expenses</h1>
          <div className="page-sub">Track company spend, approvals, and reimbursements.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><i data-lucide="download"></i>Export</button>
          <button className="btn btn-secondary"><i data-lucide="mail"></i>Forward to inbox</button>
          <button className="btn btn-primary"><i data-lucide="plus"></i>New expense</button>
        </div>
      </div>

      <div className="kpis">
        <Kpi label="Spend this month"      value={fmtEurShort(total*3.4)} delta="−4.1%" deltaTone="pos" sub="vs March"/>
        <Kpi label="Pending approvals"     value={pending.length}          delta={fmtEurShort(pending.reduce((s,r)=>s+r.amount,0))} deltaTone="warn" sub="awaiting review"/>
        <Kpi label="Reimbursable"          value={fmtEurShort(428)}        delta="3 employees" deltaTone="neu" sub="owed to team"/>
        <Kpi label="Missing receipts"      value="2"                       delta="follow-up sent" deltaTone="warn" sub="over 7 days old"/>
      </div>

      <div className="dash-grid expense-grid">
        <div className="card expense-breakdown">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>By category</div>
            <div className="card-toolbar-right">
              <span style={{fontSize:12,color:"var(--muted)"}}>April 2026</span>
            </div>
          </div>
          <div className="stacked-bar">
            {EXPENSE_CATS.map(c => (
              <div key={c.key} className="stacked-seg" style={{flex: c.total, background: c.color}} title={`${c.key} — €${c.total}`}/>
            ))}
          </div>
          <ul className="cat-list">
            {EXPENSE_CATS.map(c => (
              <li key={c.key} className="cat-row">
                <span className="cat-dot" style={{background:c.color}}></span>
                <span className="cat-name">{c.key}</span>
                <span className="cat-bar"><span style={{width:`${(c.total/catTotal)*100}%`, background:c.color}}/></span>
                <span className="cat-amt">{fmtEurShort(c.total)}</span>
                <span className="cat-pct">{Math.round((c.total/catTotal)*100)}%</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="card expense-cards">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Cards</div>
            <div className="card-toolbar-right"><span className="link-sm">Manage</span></div>
          </div>
          <div className="vcard ink">
            <div className="vcard-head">
              <span>Ops card</span>
              <span className="vcard-brand">VISA</span>
            </div>
            <div className="vcard-num">•••• •••• •••• 4471</div>
            <div className="vcard-foot">
              <span><b>Anna Mercier</b></span>
              <span>12/27</span>
            </div>
          </div>
          <div className="vcard green">
            <div className="vcard-head">
              <span>Travel card</span>
              <span className="vcard-brand">MC</span>
            </div>
            <div className="vcard-num">•••• •••• •••• 0221</div>
            <div className="vcard-foot">
              <span><b>Jonas Keller</b></span>
              <span>08/28</span>
            </div>
          </div>
          <div className="vcard-add">
            <i data-lucide="plus"></i> Issue new card
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-toolbar">
          <div className="card-toolbar-right">
            <div className="card-toolbar-search">
              <i data-lucide="search"></i>
              <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search vendor or category…"/>
            </div>
            <button className="filter-chip"><i data-lucide="sliders-horizontal"></i> Filters</button>
          </div>
        </div>
        <div className="tabs">
          <button className={"tab"+(cat==="all"?" active":"")}       onClick={()=>setCat("all")}>All <span className="tab-count">{EXPENSES.length}</span></button>
          {["Software","Travel","Office","Marketing","Cloud hosting"].map(c => (
            <button key={c} className={"tab"+(cat===c?" active":"")} onClick={()=>setCat(c)}>{c} <span className="tab-count">{EXPENSES.filter(e=>e.category===c).length}</span></button>
          ))}
        </div>
        <table className="tbl">
          <thead><tr>
            <th>Expense</th>
            <th>Category</th>
            <th>Owner</th>
            <th>Method</th>
            <th>Status</th>
            <th>Date</th>
            <th className="num">Amount</th>
          </tr></thead>
          <tbody>
            {rows.map(e => (
              <tr key={e.id}>
                <td>
                  <div className="expense-cell">
                    <div className="expense-icon"><i data-lucide={categoryIcon[e.category]||"receipt"}></i></div>
                    <div>
                      <div className="buyer-name">{e.vendor}</div>
                      <div className="buyer-sub">{e.id} {e.receipt ? " · receipt attached" : " · no receipt"}</div>
                    </div>
                  </div>
                </td>
                <td style={{fontSize:13}}>{e.category}</td>
                <td style={{fontSize:13}}>{e.owner}</td>
                <td style={{fontSize:12.5,color:"var(--muted)"}}>{e.method}</td>
                <td>{statusBadge(e.status)}</td>
                <td style={{fontSize:12.5,color:"var(--muted)"}}>{e.date}</td>
                <td className="num">{fmtEur(e.amount)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

/* -------------------- REPORTS -------------------- */
const Reports = () => {
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); });

  const cash = [
    { m:"Nov", in:102, out: 78 },
    { m:"Dec", in:128, out: 96 },
    { m:"Jan", in: 94, out: 88 },
    { m:"Feb", in:140, out:102 },
    { m:"Mar", in:172, out:118 },
    { m:"Apr", in:184, out:126 },
  ];
  const aging = [
    { bucket:"Current",  amt: 128420, pct: 62, tone:"pos" },
    { bucket:"1–30d",    amt:  52180, pct: 25, tone:"neu" },
    { bucket:"31–60d",   amt:  18640, pct:  9, tone:"warn"},
    { bucket:"60+d",     amt:   8420, pct:  4, tone:"neg" },
  ];
  const topClients = [
    { name:"Terrazza GmbH",        revenue: 86200, share: 24 },
    { name:"Kessler Werkzeugbau",  revenue: 62400, share: 17 },
    { name:"Maison Verte",         revenue: 48900, share: 14 },
    { name:"Nordwind Logistics",   revenue: 42100, share: 12 },
    { name:"Atelier Rossi srl",    revenue: 38400, share: 11 },
    { name:"Others",               revenue: 78000, share: 22 },
  ];
  const maxCash = Math.max(...cash.flatMap(r=>[r.in, r.out]));

  const tonebg = { pos:"#10b981", neu:"#64748b", warn:"#f59e0b", neg:"#ef4444" };

  const reports = [
    { t:"P&L statement",        s:"Monthly income & expenses",  i:"file-text",     badge:"Ready" },
    { t:"Balance sheet",        s:"Assets, liabilities, equity",i:"scale",         badge:"Ready" },
    { t:"Cash flow",            s:"Operating, investing, financing", i:"activity", badge:"Ready" },
    { t:"VAT return · Q1",      s:"Declaration for tax office", i:"landmark",      badge:"Due May 15" },
    { t:"Aged receivables",     s:"Outstanding by client",      i:"clock",         badge:"Ready" },
    { t:"Financing statement",  s:"Advances from Aria · YTD",   i:"banknote",      badge:"Ready" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Reports</h1>
          <div className="page-sub">Monthly, quarterly, and fiscal reports — exportable to your accountant.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><i data-lucide="calendar"></i>FY 2026</button>
          <button className="btn btn-secondary"><i data-lucide="share-2"></i>Share with accountant</button>
          <button className="btn btn-primary"><i data-lucide="download"></i>Export all</button>
        </div>
      </div>

      <div className="kpis">
        <Kpi label="Gross margin"         value="54.2%"          delta="+2.1pt"      deltaTone="pos" sub="last 90 days"/>
        <Kpi label="Net profit · April"   value="€38.4k"         delta="+€6.2k"      deltaTone="pos" sub="after fees"/>
        <Kpi label="Runway"               value="14 months"      delta="+2mo"        deltaTone="pos" sub="at current burn"/>
        <Kpi label="VAT payable Q2"       value="€12.8k"         delta="est."        deltaTone="neu" sub="filed via accountant"/>
      </div>

      <div className="dash-grid">
        <div className="card report-cashflow">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Cash flow · 6 months</div>
            <div className="card-toolbar-right">
              <span className="chart-legend"><span className="dot" style={{background:"#10b981"}}></span>Inflow</span>
              <span className="chart-legend"><span className="dot" style={{background:"#ef4444"}}></span>Outflow</span>
              <span className="chart-legend"><span className="dot" style={{background:"#4f46e5"}}></span>Net</span>
            </div>
          </div>
          <div className="lines-chart">
            <svg viewBox="0 0 600 200" preserveAspectRatio="none" className="lines-svg">
              {[0,1,2,3].map(i => <line key={i} x1="0" x2="600" y1={50*i+10} y2={50*i+10} stroke="#e2e8f0" strokeDasharray="2 4" />)}
              {(() => {
                const pts = (key, color) => {
                  const path = cash.map((r,i) => {
                    const x = (i/(cash.length-1))*580 + 10;
                    const y = 190 - (r[key]/maxCash)*170;
                    return `${i===0?"M":"L"}${x},${y}`;
                  }).join(" ");
                  return <path d={path} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>;
                };
                const net = cash.map(r => ({ m:r.m, v: r.in - r.out }));
                const maxN = Math.max(...net.map(x=>Math.abs(x.v)),40);
                const netPath = net.map((r,i)=>{
                  const x = (i/(net.length-1))*580 + 10;
                  const y = 190 - (r.v/maxN)*60 - 60;
                  return `${i===0?"M":"L"}${x},${y}`;
                }).join(" ");
                return <>
                  {pts("in", "#10b981")}
                  {pts("out","#ef4444")}
                  <path d={netPath} fill="none" stroke="#4f46e5" strokeWidth="2" strokeDasharray="4 3"/>
                </>;
              })()}
            </svg>
            <div className="lines-x">
              {cash.map(r => <span key={r.m}>{r.m}</span>)}
            </div>
          </div>
        </div>

        <div className="card report-aging">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Aged receivables</div>
          </div>
          <div className="aging-list">
            {aging.map(a => (
              <div className="aging-row" key={a.bucket}>
                <div className="aging-head">
                  <span className="aging-bucket">{a.bucket}</span>
                  <span className="aging-amt">{fmtEurShort(a.amt)}</span>
                </div>
                <div className="aging-bar"><span style={{width:`${a.pct}%`, background: tonebg[a.tone]}}/></div>
                <div className="aging-pct">{a.pct}% of book</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card report-top">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Top clients · YTD</div>
            <div className="card-toolbar-right">
              <span style={{fontSize:12,color:"var(--muted)"}}>by revenue</span>
            </div>
          </div>
          <table className="tbl">
            <thead><tr><th>Client</th><th className="num">Revenue</th><th className="num">Share</th></tr></thead>
            <tbody>
              {topClients.map((c,i)=>(
                <tr key={c.name}>
                  <td>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <div className="rank">{i+1}</div>
                      <div className="buyer-name">{c.name}</div>
                    </div>
                  </td>
                  <td className="num">{fmtEurShort(c.revenue)}</td>
                  <td className="num">
                    <div className="share-cell">
                      <div className="share-bar"><span style={{width:`${c.share*3}%`}}/></div>
                      <span>{c.share}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card report-docs">
          <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
            <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Statements & filings</div>
          </div>
          <div className="reports-list">
            {reports.map(r => (
              <div className="report-item" key={r.t}>
                <div className="report-icon"><i data-lucide={r.i}></i></div>
                <div style={{flex:1, minWidth:0}}>
                  <div className="buyer-name">{r.t}</div>
                  <div className="buyer-sub">{r.s}</div>
                </div>
                <span className={"badge "+(r.badge.startsWith("Due")?"warn":"pos")}>{r.badge}</span>
                <button className="btn-ghost-sm"><i data-lucide="download"></i></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard, Clients, Expenses, Reports });