/* Canopy ERP host shell — sidebar, top bar, KPIs, tabs. Not Aria-themed. */

const CanopySidebar = ({ active = "invoices", onNavigate }) => {
  const main = [
    { id: "dashboard", icon: "layout-dashboard", label: "Dashboard" },
    { id: "invoices",  icon: "file-text",        label: "Invoices" },
    { id: "financing", icon: "banknote",         label: "Financing" },
    { id: "clients",   icon: "building-2",       label: "Clients" },
    { id: "expenses",  icon: "wallet",           label: "Expenses" },
    { id: "reports",   icon: "chart-bar",        label: "Reports" },
  ];
  const bottom = [
    { id: "integrations", icon: "plug",     label: "Integrations" },
    { id: "settings",     icon: "settings", label: "Settings" },
  ];
  const Item = ({ it }) => (
    <div className={"side-nav-item" + (active === it.id ? " active" : "")} onClick={()=>onNavigate && onNavigate(it.id)}>
      <i data-lucide={it.icon}></i>
      <span>{it.label}</span>
    </div>
  );
  return (
    <aside className="side">
      <div className="side-brand">
        <div className="side-logo">E</div>
        <div className="side-brand-name">ERP Corp</div>
      </div>
      <nav className="side-nav">{main.map(it => <Item key={it.id} it={it} />)}</nav>
      <div className="side-spacer" />
      <nav className="side-nav">{bottom.map(it => <Item key={it.id} it={it} />)}</nav>
      <div className="side-org">
        <div className="side-org-avatar">AM</div>
        <div style={{flex:1, minWidth:0}}>
          <div className="side-org-name">Anna Mercier</div>
          <div className="side-org-sub">Boreal Studio</div>
        </div>
        <i data-lucide="chevrons-up-down" style={{color:"#98a2b3", width:14, height:14}}></i>
      </div>
    </aside>
  );
};

const CanopyTopbar = () => (
  <header className="topbar">
    <div className="topbar-search">
      <i data-lucide="search"></i>
      <span>Search invoices, clients…</span>
      <kbd>⌘K</kbd>
    </div>
    <div className="topbar-right">
      <button className="topbar-icon-btn"><i data-lucide="circle-help"></i></button>
      <button className="topbar-icon-btn"><i data-lucide="bell"></i></button>
      <div className="topbar-avatar">AM</div>
    </div>
  </header>
);

const Kpi = ({ label, value, delta, deltaTone = "pos", sub, financing }) => (
  <div className={"kpi" + (financing ? " financing" : "")}>
    {financing && (
      <div className="kpi-attr">
        <div className="kpi-attr-dot"></div>
        <span>via Aria</span>
      </div>
    )}
    <div className="kpi-label">{label}</div>
    <div className="kpi-row">
      <span className="kpi-val">{value}</span>
      {delta && <span className={"kpi-delta " + deltaTone}>{delta}</span>}
    </div>
    {sub && <div className="kpi-sub">{sub}</div>}
  </div>
);

const StatusBadge = ({ status, fundedOn, sentOn }) => {
  if (status === "funded") return <span className="badge financed"><i data-lucide="check"></i> Financed{fundedOn?` · ${fundedOn}`:""}</span>;
  if (status === "awaiting-buyer") return <span className="badge warn"><span className="badge-dot"></span>Awaiting buyer</span>;
  if (status === "pending")    return <span className="badge info"><span className="badge-dot"></span>Open</span>;
  if (status === "ineligible") return <span className="badge neu"><span className="badge-dot"></span>Not eligible</span>;
  return <span className="badge neu">{status}</span>;
};

const DemoBottombar = ({ onReset, onOnboarding, onBuyerPortal }) => (
  <div className="demo-bottombar">
    <div className="demo-bottombar-left">
      <i data-lucide="flask-conical"></i>
      <span className="demo-bottombar-title">Demo environment</span>
      <span className="demo-bottombar-sub">Interactive walkthrough — no real data is stored or transmitted.</span>
    </div>
    <div className="demo-bottombar-actions">
      <button className="demo-bottombar-btn" onClick={onOnboarding}>
        <i data-lucide="sparkles"></i>
        <span>Onboarding</span>
      </button>
      <button className="demo-bottombar-btn" onClick={onBuyerPortal}>
        <i data-lucide="external-link"></i>
        <span>Buyer portal</span>
      </button>
      <button className="demo-bottombar-reset" onClick={onReset}>
        <i data-lucide="refresh-ccw"></i>
        <span>Reset demo</span>
      </button>
    </div>
  </div>
);

Object.assign(window, { CanopySidebar, CanopyTopbar, Kpi, StatusBadge, DemoBottombar });