/* eslint-disable */
// Dashboard app — sidebar nav + multiple screens

function Dashboard({ onGotoLanding, initialScreen }) {
  const { t, lang, setLang } = useI18n();
  const [screen, setScreen] = React.useState(initialScreen || "dashboard");
  const [activeCo, setActiveCo] = React.useState(ACTIVE_COMPANY_ID);
  const [showAddModal, setShowAddModal] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [companies, setCompanies] = React.useState(COMPANIES);

  const activeCompany = companies.find(c => c.id === activeCo) || companies[0];

  React.useEffect(() => {
    if (initialScreen) setScreen(initialScreen);
  }, [initialScreen]);

  function showToast(msg) {
    setToast(msg);
    setTimeout(() => setToast(null), 2400);
  }

  function handleAddCompany(cui, name) {
    const id = "new_" + Date.now();
    const newCo = {
      id, cui: "RO " + (cui || "00000000"),
      name: name || "FIRMA NOUĂ SRL",
      short: (name || "FN").slice(0, 2).toUpperCase(),
      j: "—", city: "—", invoices: 0,
      status: "active", last: lang === "ro" ? "acum" : "just now"
    };
    setCompanies([...companies, newCo]);
    setShowAddModal(false);
    showToast(t("toast_added"));
  }

  return (
    <div className="app-shell">
      <Sidebar
        screen={screen} setScreen={setScreen}
        onGotoLanding={onGotoLanding}
      />
      <div className="main">
        <Topbar
          activeCompany={activeCompany}
          companies={companies}
          setActiveCo={setActiveCo}
          onAddCompany={() => setShowAddModal(true)}
        />
        <div className="content">
          {screen === "dashboard" && <DashScreen onAddCompany={() => setShowAddModal(true)} />}
          {screen === "companies" && <CompaniesScreen companies={companies} onAdd={() => setShowAddModal(true)} />}
          {screen === "invoices" && <InvoicesScreen />}
          {screen === "anaf" && <AnafScreen />}
          {screen === "suppliers" && <SuppliersScreen />}
          {screen === "stats" && <StatsScreen />}
          {screen === "exports" && <ExportsScreen />}
          {screen === "notif" && <NotificationsScreen />}
          {screen === "settings" && <SettingsScreen />}
          {screen === "admin" && <AdminScreen />}
        </div>
      </div>

      {showAddModal && (
        <AddCompanyModal
          onClose={() => setShowAddModal(false)}
          onSubmit={handleAddCompany}
        />
      )}
      {toast && (
        <div className="toast">
          <Icon.Check size={16}/> {toast}
        </div>
      )}
    </div>
  );
}

/* ---------- Sidebar ---------- */
function Sidebar({ screen, setScreen, onGotoLanding }) {
  const { t } = useI18n();
  const groups = [
    {
      title: t("s_main"),
      items: [
        { id: "dashboard",  icon: <Icon.Grid size={16}/>,         label: t("s_dash") },
        { id: "companies",  icon: <Icon.Building size={16}/>,     label: t("s_companies") },
      ],
    },
    {
      title: t("s_data"),
      items: [
        { id: "invoices",   icon: <Icon.File size={16}/>,         label: t("s_invoices") },
        { id: "anaf",       icon: <Icon.MessageRound size={16}/>, label: t("s_anaf"), badge: 2 },
        { id: "suppliers",  icon: <Icon.Truck size={16}/>,        label: t("s_suppliers") },
        { id: "stats",      icon: <Icon.Chart size={16}/>,        label: t("s_stats") },
        { id: "exports",    icon: <Icon.Box size={16}/>,          label: t("s_exports") },
      ],
    },
    {
      title: t("s_account"),
      items: [
        { id: "notif",      icon: <Icon.Bell size={16}/>,         label: t("s_notif"), badge: 5 },
        { id: "settings",   icon: <Icon.Gear size={16}/>,         label: t("s_settings") },
        { id: "admin",      icon: <Icon.Shield size={16}/>,       label: t("s_admin") },
      ],
    },
  ];
  return (
    <aside className="sidebar">
      <a href="#" className="sidebar-brand" onClick={(e) => { e.preventDefault(); onGotoLanding(); }}>
        <span className="brand-mark">A</span>
        <span className="name">ARHIVAR</span>
      </a>
      {groups.map((g, gi) => (
        <React.Fragment key={gi}>
          <div className="sidebar-section-title">{g.title}</div>
          {g.items.map(it => (
            <button
              key={it.id}
              className={"nav-item" + (screen === it.id ? " active" : "")}
              onClick={() => setScreen(it.id)}
            >
              {it.icon}
              <span>{it.label}</span>
              {it.badge && <span className="badge">{it.badge}</span>}
            </button>
          ))}
        </React.Fragment>
      ))}
      <div className="sidebar-foot">
        <div className="avatar">AC</div>
        <div style={{lineHeight:1.2}}>
          <div style={{fontWeight:500}}>Andrei Constantin</div>
          <small style={{color:"var(--muted)", fontSize:12}}>contabil principal</small>
        </div>
      </div>
    </aside>
  );
}

/* ---------- Topbar ---------- */
function Topbar({ activeCompany, companies, setActiveCo, onAddCompany }) {
  const { t, lang, setLang } = useI18n();
  const [open, setOpen] = React.useState(false);
  return (
    <div className="topbar">
      <div style={{position:"relative"}}>
        <div className="company-switch" onClick={() => setOpen(!open)}>
          <span className="logo">{activeCompany.short}</span>
          <div className="meta">
            <strong>{activeCompany.name}</strong>
            <small className="mono">{activeCompany.cui} · {activeCompany.j}</small>
          </div>
          <Icon.ArrowDown size={14}/>
        </div>
        {open && (
          <div style={{
            position:"absolute", top:"calc(100% + 6px)", left: 0, zIndex: 20,
            background:"var(--card)", border:"1px solid var(--line)", borderRadius: 10,
            boxShadow: "var(--shadow-lg)", width: 340, padding: 6,
          }}>
            {companies.map(c => (
              <button key={c.id}
                className="nav-item"
                onClick={() => { setActiveCo(c.id); setOpen(false); }}
                style={{padding:10}}
              >
                <span className="logo" style={{width:26, height:26, borderRadius:6, background:"var(--blue)", color:"#fff", display:"grid", placeItems:"center", fontSize:11, fontWeight:600}}>{c.short}</span>
                <div style={{display:"flex", flexDirection:"column", lineHeight:1.2, textAlign:"left"}}>
                  <strong style={{fontWeight:500, fontSize:13}}>{c.name}</strong>
                  <small className="mono" style={{color:"var(--muted)", fontSize:11}}>{c.cui}</small>
                </div>
                {c.id === activeCompany.id && <Icon.Check size={14} style={{marginLeft:"auto", color:"var(--green)"}}/>}
              </button>
            ))}
            <div style={{borderTop:"1px solid var(--line)", marginTop:4, paddingTop:4}}>
              <button className="nav-item" onClick={() => { setOpen(false); onAddCompany(); }} style={{color:"var(--blue-2)"}}>
                <Icon.Plus size={14}/> {t("d_add_company")}
              </button>
            </div>
          </div>
        )}
      </div>

      <div className="topbar-search">
        <Icon.Search size={15}/>
        <input placeholder={lang === "ro" ? "Caută factură, furnizor, CUI…" : "Search invoice, supplier, CUI…"} />
        <span className="mono" style={{fontSize:11, color:"var(--muted-2)", background:"var(--paper)", padding:"2px 6px", borderRadius:4}}>⌘K</span>
      </div>

      <div className="topbar-right">
        <div className="lang-switch">
          <button className={lang === "ro" ? "on" : ""} onClick={() => setLang("ro")}>RO</button>
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <button className="icon-btn" title={t("s_notif")}><Icon.Bell size={15}/><span className="dot-red"/></button>
        <button className="icon-btn" title={t("s_settings")}><Icon.Gear size={15}/></button>
      </div>
    </div>
  );
}

/* ============================================================ */
/* ========== DASHBOARD SCREEN ================================ */
/* ============================================================ */

function DashScreen({ onAddCompany }) {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("d_greeting")} Andrei</h1>
          <div className="page-sub">{t("d_subtitle")}</div>
        </div>
        <div style={{display:"flex", gap:8}}>
          <button className="btn btn-ghost"><Icon.Download size={14}/>{t("d_export_month")}</button>
          <button className="btn btn-primary" onClick={onAddCompany}><Icon.Plus size={14}/>{t("d_add_company")}</button>
        </div>
      </div>

      {/* KPI Row */}
      <div className="kpi-row" style={{marginBottom:16}}>
        <KPI label={t("kpi_received")} value={DASH_STATS.received.v} trend={`+${DASH_STATS.received.deltaPct}%`} trendDir="up" sub={lang === "ro" ? "vs. luna trecută" : "vs. last month"} />
        <KPI label={t("kpi_issued")} value={DASH_STATS.issued.v} trend={`+${DASH_STATS.issued.deltaPct}%`} trendDir="up" sub={lang === "ro" ? "vs. luna trecută" : "vs. last month"} />
        <KPI label={t("kpi_tva")} value={fmtRON(DASH_STATS.tva.v).split(",")[0]} suffix=" RON" trend={`${DASH_STATS.tva.deltaPct}%`} trendDir="down" sub={lang === "ro" ? "scadență 25.06" : "due 06.25"} />
        <KPI label={t("kpi_archive")} value={DASH_STATS.archive.v} sub={`${DASH_STATS.archive.gbUsed.toLocaleString(lang === "ro" ? "ro-RO" : "en-US")} / ${DASH_STATS.archive.gbLimit.toLocaleString(lang === "ro" ? "ro-RO" : "en-US")} GB`} />
      </div>

      <div className="dash-grid">
        {/* Cashflow */}
        <div className="card" style={{gridColumn: "1"}}>
          <div className="card-head">
            <div>
              <div className="card-title">{t("cashflow_t")}</div>
              <div className="card-sub">{t("cashflow_s")}</div>
            </div>
            <div className="legend">
              <span><span className="sw" style={{background:"var(--green)"}}></span>{t("legend_in")}</span>
              <span><span className="sw" style={{background:"var(--amber)"}}></span>{t("legend_out")}</span>
            </div>
          </div>
          <BarChart />
        </div>

        {/* Top suppliers */}
        <div className="card" style={{gridColumn:"2", gridRow:"1 / span 2"}}>
          <div className="card-head">
            <div>
              <div className="card-title">{t("supp_t")}</div>
              <div className="card-sub">{t("supp_s")}</div>
            </div>
          </div>
          {TOP_SUPPLIERS.map(s => (
            <div className="supplier-row" key={s.rank}>
              <div className="n">
                <span className="rank">{s.rank}</span>
                <div>
                  <div className="name-line">{s.name}</div>
                  <small>{s.n} {lang === "ro" ? "facturi" : "invoices"} · <span className="mono">{s.cui}</span></small>
                </div>
              </div>
              <div className="amt tnum">{fmtRON(s.amount)} RON</div>
            </div>
          ))}
        </div>

        {/* Categories */}
        <div className="card" style={{gridColumn:"1"}}>
          <div className="card-head">
            <div>
              <div className="card-title">{t("cats_t")}</div>
              <div className="card-sub">{t("cats_s")}</div>
            </div>
            <a className="card-link">{t("rec_all")} <Icon.ArrowRight size={12}/></a>
          </div>
          <CategoryList />
        </div>

        {/* Recent invoices */}
        <div className="card" style={{gridColumn:"1"}}>
          <div className="card-head">
            <div>
              <div className="card-title">{t("rec_t")}</div>
              <div className="card-sub">{t("rec_s")}</div>
            </div>
            <a className="card-link">{t("rec_all")} <Icon.ArrowRight size={12}/></a>
          </div>
          <div>
            {RECENT_INVOICES.slice(0, 6).map(inv => (
              <div className="inv-row" key={inv.id}>
                <div>
                  <div className="who">{inv.partner}</div>
                  <small>{inv.num} · {fmtDate(inv.date, lang)}</small>
                </div>
                <div className="amt-block">
                  <div className={"amt " + (inv.dir === "out" ? "pos" : "neg")}>
                    {inv.dir === "out" ? "+" : "−"}{fmtRON(Math.abs(inv.amount))} RON
                  </div>
                  <span className={"chip " + (inv.dir === "out" ? "blue" : "amber")}>
                    {inv.dir === "out" ? (lang === "ro" ? "Emisă" : "Issued") : (lang === "ro" ? "Primită" : "Received")}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Monitoring */}
        <div className="card" style={{gridColumn:"2"}}>
          <div className="card-head">
            <div className="card-title">{t("mon_t")}</div>
          </div>
          <div className="status-grid">
            <StatusCell ico={<Icon.Building size={15}/>} c="var(--blue)" v={COMPANIES.length} l={t("mon_companies")} />
            <StatusCell ico={<Icon.Check size={15}/>}    c="var(--green)" v={COMPANIES.filter(c => c.status === "active").length} l={t("mon_authorized")} />
            <StatusCell ico={<Icon.Gauge size={15}/>}    c="var(--amber)" v="4" l={t("mon_thresholds")} />
            <StatusCell ico={<Icon.Bell size={15}/>}     c="var(--red)"   v="5" l={t("mon_unread")} />
          </div>
        </div>

        {/* Usage */}
        <div className="card" style={{gridColumn:"2"}}>
          <div className="card-head">
            <div className="card-title">{t("usage_t")}</div>
          </div>
          <div style={{display:"flex", alignItems:"baseline", gap:8}}>
            <span style={{fontFamily:"var(--serif)", fontSize:44, lineHeight:1, letterSpacing:"-0.02em"}}>{DASH_STATS.archive.v}</span>
            <span style={{color:"var(--muted)", fontSize:14}}>{t("usage_invoices_archived")}</span>
          </div>
          <div className="usage-bar">
            <div style={{width: `${(DASH_STATS.archive.gbUsed / DASH_STATS.archive.gbLimit) * 100}%`}}></div>
          </div>
          <div style={{color:"var(--muted)", fontSize:13}}>{DASH_STATS.archive.gbUsed} / {DASH_STATS.archive.gbLimit} GB</div>
          <div style={{background:"var(--paper-2)", border:"1px solid var(--line)", borderRadius:8, padding:"10px 12px", marginTop:14, fontSize:13, color:"var(--ink-2)"}}>
            {t("usage_limit")}
          </div>
          <div style={{display:"flex", alignItems:"center", gap:8, marginTop:10, fontSize:13, color:"var(--muted)"}}>
            <Icon.Calendar size={14}/>
            <span>{t("usage_export_note")}</span>
          </div>
        </div>
      </div>
    </>
  );
}

function KPI({ label, value, suffix, trend, trendDir, sub }) {
  return (
    <div className="kpi">
      <div className="label">{label}</div>
      <div className="value tnum">{value}{suffix}</div>
      <div className="trend">
        {trend && <span className={trendDir === "up" ? "up" : "down"}>{trendDir === "up" ? "↑" : "↓"} {trend.replace("-","")}</span>}
        <span>{sub}</span>
      </div>
    </div>
  );
}

function StatusCell({ ico, c, v, l }) {
  return (
    <div className="status-cell">
      <div className="ico" style={{background: c, color:"#fff", opacity: 0.9}}>{ico}</div>
      <div className="v tnum">{v}</div>
      <div className="l">{l}</div>
    </div>
  );
}

/* ============================================================ */
/* ========== COMPANIES SCREEN ================================ */
/* ============================================================ */

function CompaniesScreen({ companies, onAdd }) {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("c_title")}</h1>
          <div className="page-sub">{t("c_sub")}</div>
        </div>
        <button className="btn btn-primary" onClick={onAdd}><Icon.Plus size={14}/>{t("d_add_company")}</button>
      </div>

      <table className="tbl">
        <thead>
          <tr>
            <th>{t("c_th_name")}</th>
            <th>{t("c_th_cui")}</th>
            <th>{t("c_th_status")}</th>
            <th>{t("c_th_invoices")}</th>
            <th>{t("c_th_last")}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {companies.map(c => (
            <tr key={c.id}>
              <td>
                <div style={{display:"flex", gap:12, alignItems:"center"}}>
                  <span style={{width:32, height:32, borderRadius:8, background:"var(--blue)", color:"#fff", display:"grid", placeItems:"center", fontSize:12, fontWeight:600}}>{c.short}</span>
                  <div>
                    <div style={{fontWeight:500}}>{c.name}</div>
                    <small style={{color:"var(--muted)", fontSize:12}}>{c.city} · {c.j}</small>
                  </div>
                </div>
              </td>
              <td className="mono">{c.cui}</td>
              <td>
                {c.status === "active"  && <span className="chip green"><Icon.Check size={12}/>{t("c_status_active")}</span>}
                {c.status === "pending" && <span className="chip amber"><Icon.Sync size={12}/>{t("c_status_pending")}</span>}
                {c.status === "error"   && <span className="chip red">! {t("c_status_error")}</span>}
              </td>
              <td className="mono tnum">{c.invoices}</td>
              <td className="mono" style={{color:"var(--muted)", fontSize:13}}>{c.last}</td>
              <td>
                <button className="btn btn-ghost" style={{height:30, fontSize:13, padding:"0 12px"}}>
                  <Icon.External size={13}/>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

/* ============================================================ */
/* ========== INVOICES SCREEN ================================= */
/* ============================================================ */

function InvoicesScreen() {
  const { t, lang } = useI18n();
  const [filter, setFilter] = React.useState("all");
  const list = RECENT_INVOICES.filter(inv => filter === "all" || inv.dir === filter);
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("i_title")}</h1>
          <div className="page-sub">{t("i_sub")}</div>
        </div>
        <button className="btn btn-ghost"><Icon.Download size={14}/> {lang === "ro" ? "Exportă CSV" : "Export CSV"}</button>
      </div>

      <div className="filter-bar">
        <div className="seg">
          <button className={filter === "all" ? "on" : ""} onClick={() => setFilter("all")}>{t("i_filter_all")}</button>
          <button className={filter === "in"  ? "on" : ""} onClick={() => setFilter("in")}>{t("i_filter_in")}</button>
          <button className={filter === "out" ? "on" : ""} onClick={() => setFilter("out")}>{t("i_filter_out")}</button>
        </div>
        <div className="pill"><Icon.Calendar size={13}/> {lang === "ro" ? "Mai 2026" : "May 2026"}</div>
        <div className="pill"><Icon.Filter size={13}/> {lang === "ro" ? "Toate categoriile" : "All categories"}</div>
        <div style={{marginLeft:"auto", color:"var(--muted)", fontSize:13}}>{list.length} {lang === "ro" ? "rezultate" : "results"}</div>
      </div>

      <table className="tbl">
        <thead>
          <tr>
            <th>{t("i_th_partner")}</th>
            <th>{t("i_th_no")}</th>
            <th>{t("i_th_date")}</th>
            <th>{t("i_th_amount")}</th>
            <th>{t("i_th_tva")}</th>
            <th>{t("i_th_status")}</th>
          </tr>
        </thead>
        <tbody>
          {list.map(inv => (
            <tr key={inv.id}>
              <td>
                <div style={{fontWeight:500}}>{inv.partner}</div>
                <small style={{color:"var(--muted)", fontSize:12}}>{CATEGORIES.find(c => c.id === inv.cat)?.[lang]}</small>
              </td>
              <td className="mono" style={{fontSize:13}}>{inv.num}</td>
              <td className="mono" style={{fontSize:13, color:"var(--muted)"}}>{fmtDate(inv.date, lang)}</td>
              <td className={"mono tnum " + (inv.amount > 0 ? "" : "")} style={{color: inv.amount > 0 ? "var(--green)" : "var(--ink)", fontWeight: 500}}>
                {inv.amount > 0 ? "+" : "−"}{fmtRON(Math.abs(inv.amount))}
              </td>
              <td className="mono tnum" style={{color:"var(--muted)"}}>{fmtRON(Math.abs(inv.tva))}</td>
              <td>
                {inv.dir === "in"
                  ? <span className="chip amber">{t("inv_status_received")}</span>
                  : <span className="chip blue">{t("inv_status_issued")}</span>
                }
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

/* ============================================================ */
/* ========== ANAF MESSAGES =================================== */
/* ============================================================ */

function AnafScreen() {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("s_anaf")}</h1>
          <div className="page-sub">{lang === "ro" ? "Mesaje primite de la ANAF prin SPV." : "Messages received from ANAF via SPV."}</div>
        </div>
      </div>
      <div style={{display:"flex", flexDirection:"column", gap:10}}>
        {ANAF_MESSAGES.map(m => (
          <div key={m.id} className="card" style={{padding:18, display:"grid", gridTemplateColumns:"auto 1fr auto", gap:14, alignItems:"center"}}>
            <div style={{width:36, height:36, borderRadius:8, background: m.read ? "var(--paper)" : "var(--blue-soft)", color:"var(--blue-2)", display:"grid", placeItems:"center"}}>
              <Icon.MessageRound size={16}/>
            </div>
            <div>
              <div style={{fontWeight: m.read ? 400 : 500, fontSize:15}}>{m.title}</div>
              <div style={{color:"var(--muted)", fontSize:13, marginTop:2}}>{m.subject}</div>
            </div>
            <div style={{textAlign:"right"}}>
              <small className="mono" style={{color:"var(--muted)", fontSize:12}}>{m.date}</small>
              {!m.read && <div><span className="chip blue" style={{marginTop:4}}>{lang === "ro" ? "Necitit" : "New"}</span></div>}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

/* ============================================================ */
/* ========== SUPPLIERS ======================================= */
/* ============================================================ */

function SuppliersScreen() {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("s_suppliers")}</h1>
          <div className="page-sub">{lang === "ro" ? "Furnizorii tăi, sortați după volum." : "Your suppliers, sorted by volume."}</div>
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>#</th>
            <th>{lang === "ro" ? "Furnizor" : "Supplier"}</th>
            <th>{lang === "ro" ? "CUI" : "CUI"}</th>
            <th>{lang === "ro" ? "Facturi" : "Invoices"}</th>
            <th>{lang === "ro" ? "Total" : "Total"}</th>
          </tr>
        </thead>
        <tbody>
          {TOP_SUPPLIERS.map(s => (
            <tr key={s.rank}>
              <td className="mono">{s.rank}</td>
              <td><strong style={{fontWeight:500}}>{s.name}</strong></td>
              <td className="mono">{s.cui}</td>
              <td className="mono tnum">{s.n}</td>
              <td className="mono tnum">{fmtRON(s.amount)} RON</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

/* ============================================================ */
/* ========== STATS =========================================== */
/* ============================================================ */

function StatsScreen() {
  const { t, lang } = useI18n();
  const [period, setPeriod] = React.useState("30");
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("st_title")}</h1>
          <div className="page-sub">{t("st_sub")}</div>
        </div>
        <div className="seg" style={{display:"inline-flex", background:"var(--paper-2)", border:"1px solid var(--line)", borderRadius:10, padding:2}}>
          <button className={period === "30" ? "on" : ""} onClick={() => setPeriod("30")} style={segBtn(period === "30")}>{t("st_period_30")}</button>
          <button className={period === "90" ? "on" : ""} onClick={() => setPeriod("90")} style={segBtn(period === "90")}>{t("st_period_90")}</button>
          <button className={period === "y"  ? "on" : ""} onClick={() => setPeriod("y")}  style={segBtn(period === "y")}>{t("st_period_year")}</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom:16}}>
        <KPI label={lang === "ro" ? "Total intrări" : "Total inflow"}    value={fmtRON(518900).split(",")[0]} suffix=" RON" trend="+22%" trendDir="up" sub="" />
        <KPI label={lang === "ro" ? "Total ieșiri" : "Total outflow"}    value={fmtRON(401400).split(",")[0]} suffix=" RON" trend="+8%"  trendDir="up" sub="" />
        <KPI label={lang === "ro" ? "Marjă"        : "Margin"}            value="22,6%" trend="+3pp" trendDir="up" sub="" />
        <KPI label={lang === "ro" ? "Furnizori distincți" : "Unique suppliers"} value="47" trend="" sub="" />
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:16}}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">{t("cashflow_t")}</div>
              <div className="card-sub">{t("cashflow_s")}</div>
            </div>
            <div className="legend">
              <span><span className="sw" style={{background:"var(--green)"}}></span>{t("legend_in")}</span>
              <span><span className="sw" style={{background:"var(--amber)"}}></span>{t("legend_out")}</span>
            </div>
          </div>
          <BarChart />
        </div>

        <div className="card">
          <div className="card-head">
            <div className="card-title">{t("cats_t")}</div>
            <div className="card-sub">{t("cats_s")}</div>
          </div>
          <CategoryList />
        </div>

        <div className="card" style={{gridColumn:"1 / -1"}}>
          <div className="card-head">
            <div>
              <div className="card-title">{lang === "ro" ? "Anomalii detectate" : "Detected anomalies"}</div>
              <div className="card-sub">{lang === "ro" ? "Tranzacții care ies din tipar" : "Transactions that break the pattern"}</div>
            </div>
          </div>
          <div style={{display:"flex", flexDirection:"column", gap:10}}>
            {[
              { c:"var(--amber)", t: lang === "ro" ? "Factură de 8.420 RON de la CLIENT GENERIC SRL — primul client nou din 2026" : "8,420 RON invoice from CLIENT GENERIC SRL — first new client in 2026", d:"19.05.2026" },
              { c:"var(--blue)", t: lang === "ro" ? "Combustibil +47% față de aceeași perioadă anul trecut" : "Fuel +47% vs. same period last year", d: lang === "ro" ? "mai 2026" : "May 2026" },
              { c:"var(--red)", t: lang === "ro" ? "ENGIE ROMANIA SA — factură duplicată detectată automat" : "ENGIE ROMANIA SA — duplicate invoice auto-detected", d:"22.05.2026" },
            ].map((row, i) => (
              <div key={i} style={{display:"flex", gap:12, alignItems:"center", padding:"12px 14px", background:"var(--paper-2)", border:"1px solid var(--line)", borderRadius:10}}>
                <span style={{width:8, height:8, borderRadius:50, background:row.c, flexShrink:0}}></span>
                <span style={{flex:1, fontSize:14}}>{row.t}</span>
                <small className="mono" style={{color:"var(--muted)", fontSize:12}}>{row.d}</small>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function segBtn(on) {
  return {
    border:0, background: on ? "var(--ink)" : "transparent",
    color: on ? "var(--paper-2)" : "var(--ink-2)",
    padding:"6px 14px", borderRadius:8, fontSize:13, fontFamily:"inherit", cursor:"pointer",
  };
}

/* ============================================================ */
/* ========== EXPORTS ========================================= */
/* ============================================================ */

function ExportsScreen() {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{t("e_title")}</h1>
          <div className="page-sub">{t("e_sub")}</div>
        </div>
        <button className="btn btn-ghost"><Icon.Sync size={14}/> {lang === "ro" ? "Regenerează" : "Regenerate"}</button>
      </div>
      <div>
        {MONTHLY_EXPORTS.map(e => (
          <div key={e.id} className="export-row">
            <div className="ico"><Icon.Box size={18}/></div>
            <div>
              <strong>{lang === "ro" ? e.month : e.monthEn}</strong>
              <small>{e.invoices} {lang === "ro" ? "facturi" : "invoices"} · {e.size} · <span className="mono">ZIP semnat RFC 3161</span></small>
            </div>
            <span className="chip green"><Icon.Check size={12}/>{t("e_status_ready")}</span>
            <button className="btn btn-primary" style={{height:34, fontSize:13}}><Icon.Download size={14}/>{t("e_download")}</button>
          </div>
        ))}
      </div>
    </>
  );
}

/* ============================================================ */
/* ========== Other simple screens ============================ */
/* ============================================================ */

function NotificationsScreen() {
  const { lang } = useI18n();
  const items = [
    { c:"var(--amber)", t: lang === "ro" ? "Prag depășit: Combustibil — 12.680 RON / 12.000 RON" : "Threshold hit: Fuel — 12,680 RON / 12,000 RON", d:"2026-05-25 17:02", read: false },
    { c:"var(--blue)",  t: lang === "ro" ? "Token reînnoit pentru SERVICII DEMO — necesar pe 12.06" : "Token renewal for SERVICII DEMO — required by 06.12", d:"2026-05-24 09:11", read: false },
    { c:"var(--red)",   t: lang === "ro" ? "LOGISTIC DEMO — eroare token, sincronizare oprită" : "LOGISTIC DEMO — token error, sync stopped", d:"2026-05-24 16:02", read: false },
    { c:"var(--green)", t: lang === "ro" ? "Arhivă aprilie 2026 generată și semnată" : "April 2026 archive generated and signed", d:"2026-05-05 06:00", read: true },
    { c:"var(--blue)",  t: lang === "ro" ? "Factură nouă: CLIENT GENERIC SRL 8.420 RON" : "New invoice: CLIENT GENERIC SRL 8,420 RON", d:"2026-05-19 11:34", read: true },
  ];
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{lang === "ro" ? "Notificări" : "Notifications"}</h1>
          <div className="page-sub">{lang === "ro" ? "Evenimente importante din arhivele tale." : "Important events across your archives."}</div>
        </div>
      </div>
      <div style={{display:"flex", flexDirection:"column", gap:8}}>
        {items.map((it, i) => (
          <div key={i} className="card" style={{padding:16, display:"grid", gridTemplateColumns:"auto 1fr auto", gap:14, alignItems:"center", background: it.read ? "var(--card)" : "var(--paper-2)"}}>
            <span style={{width:8, height:8, borderRadius:50, background:it.c}}></span>
            <div style={{fontSize:14, fontWeight: it.read ? 400 : 500}}>{it.t}</div>
            <small className="mono" style={{color:"var(--muted)", fontSize:12}}>{it.d}</small>
          </div>
        ))}
      </div>
    </>
  );
}

function SettingsScreen() {
  const { lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{lang === "ro" ? "Setări" : "Settings"}</h1>
          <div className="page-sub">{lang === "ro" ? "Cont, notificări, integrări, retenție." : "Account, notifications, integrations, retention."}</div>
        </div>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}>
        {[
          { t: lang === "ro" ? "Profil contabil" : "Accountant profile", s: lang === "ro" ? "Andrei Constantin · contabil principal" : "Andrei Constantin · lead accountant" },
          { t: lang === "ro" ? "Retenție arhivă" : "Archive retention",  s: lang === "ro" ? "6 ani (legal). Opțional extinde la 10 ani." : "6 years (legal). Optionally extend to 10." },
          { t: lang === "ro" ? "Praguri și alerte" : "Thresholds & alerts", s: lang === "ro" ? "12 praguri configurate pe categorie / furnizor" : "12 thresholds set per category / supplier" },
          { t: lang === "ro" ? "Integrări" : "Integrations",                s: "Saga · SmartBill · Contabilo · Webhook" },
          { t: lang === "ro" ? "Notificări email" : "Email notifications", s: lang === "ro" ? "Activate: praguri, sincronizare, lunar" : "On: thresholds, sync, monthly" },
          { t: "API",                                                       s: lang === "ro" ? "1 cheie activă · 4 webhook-uri" : "1 active key · 4 webhooks" },
        ].map((row, i) => (
          <div key={i} className="card" style={{padding:18}}>
            <div style={{fontWeight:500, fontSize:15}}>{row.t}</div>
            <div style={{color:"var(--muted)", fontSize:13, marginTop:6}}>{row.s}</div>
            <a className="card-link" style={{marginTop:10, display:"inline-block"}}>{lang === "ro" ? "Configurează" : "Configure"} <Icon.ArrowRight size={12}/></a>
          </div>
        ))}
      </div>
    </>
  );
}

function AdminScreen() {
  const { lang } = useI18n();
  return (
    <>
      <div className="page-head">
        <div>
          <h1 className="page-title">{lang === "ro" ? "Administrare" : "Admin"}</h1>
          <div className="page-sub">{lang === "ro" ? "Utilizatori, roluri, audit-log." : "Users, roles, audit log."}</div>
        </div>
      </div>
      <div className="card">
        <div className="card-head"><div className="card-title">{lang === "ro" ? "Audit log" : "Audit log"}</div></div>
        <table className="tbl">
          <thead>
            <tr><th>{lang === "ro" ? "Eveniment" : "Event"}</th><th>{lang === "ro" ? "Utilizator" : "User"}</th><th>{lang === "ro" ? "Companie" : "Company"}</th><th>{lang === "ro" ? "Data" : "Date"}</th></tr>
          </thead>
          <tbody>
            {[
              ["Login SPV", "demo@arhivar.ro", "COMPANIA DEMO SRL", "2026-05-26 08:14"],
              [lang === "ro" ? "Descărcare arhivă lunară" : "Monthly archive downloaded", "demo@arhivar.ro", "BIROU CONTABIL DEMO SRL", "2026-05-26 07:55"],
              [lang === "ro" ? "Token OAuth reînnoit" : "OAuth token refreshed", "system", "SERVICII DEMO SRL", "2026-05-25 23:00"],
              [lang === "ro" ? "Companie autorizată" : "Company authorized", "demo@arhivar.ro", "RETAIL DEMO SRL", "2026-05-22 14:08"],
              [lang === "ro" ? "Export CSV facturi" : "Invoice CSV export", "contabil@arhivar.ro", "COMPANIA DEMO SRL", "2026-05-20 11:31"],
            ].map((r, i) => (
              <tr key={i}>
                <td>{r[0]}</td>
                <td className="mono" style={{fontSize:13}}>{r[1]}</td>
                <td>{r[2]}</td>
                <td className="mono" style={{fontSize:13, color:"var(--muted)"}}>{r[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

/* ============================================================ */
/* ========== ADD COMPANY MODAL =============================== */
/* ============================================================ */

function AddCompanyModal({ onClose, onSubmit }) {
  const { t, lang } = useI18n();
  const [cui, setCui] = React.useState("");
  const [name, setName] = React.useState("");
  const [step, setStep] = React.useState(0); // 0 = form, 1 = oauth flow, 2 = done

  React.useEffect(() => {
    if (step === 1) {
      const tm = setTimeout(() => setStep(2), 1400);
      return () => clearTimeout(tm);
    }
    if (step === 2) {
      const tm = setTimeout(() => onSubmit(cui, name), 900);
      return () => clearTimeout(tm);
    }
  }, [step]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start"}}>
          <div>
            <h3>{t("add_title")}</h3>
            <div className="sub">{t("add_sub")}</div>
          </div>
          <button className="icon-btn" onClick={onClose} style={{background:"transparent", border:0}}>
            <Icon.Close size={16}/>
          </button>
        </div>

        {step === 0 && (
          <>
            <div className="form-row">
              <label>{t("add_label_cui")}</label>
              <input className="mono" value={cui} onChange={(e) => setCui(e.target.value)} placeholder="42891735" />
            </div>
            <div className="form-row">
              <label>{t("add_label_name")}</label>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="COMPANIA DEMO SRL"/>
            </div>
            <div style={{background:"var(--paper-2)", border:"1px solid var(--line)", borderRadius:10, padding:14, fontSize:13, color:"var(--ink-2)", display:"flex", gap:10, marginTop:8}}>
              <Icon.Lock size={15}/>
              <span>{lang === "ro" ? "Te redirecționăm pe anaf.ro. Token-ul rămâne pe serverele ANAF — noi primim doar un identificator." : "We redirect to anaf.ro. The token stays on ANAF's servers — we only get an identifier."}</span>
            </div>
            <div style={{display:"flex", gap:10, marginTop:22, justifyContent:"flex-end"}}>
              <button className="btn btn-ghost" onClick={onClose}>{t("add_cancel")}</button>
              <button className="btn btn-primary" onClick={() => setStep(1)}>{t("add_cta")} <Icon.External size={14}/></button>
            </div>
          </>
        )}

        {step >= 1 && (
          <div style={{marginTop:8}}>
            {[1,2,3].map(n => {
              const done = step > n || (step === 2 && n <= 2) || (step === 1 && n === 1);
              const active = (step === 1 && n === 1) || (step === 2 && n === 3);
              return (
                <div key={n} className="oauth-step">
                  <span className={"n " + (done && !active ? "done" : "") + (active ? " active" : "")}>
                    {done && !active ? <Icon.Check size={13}/> : n}
                  </span>
                  <div className="body">
                    <strong>{t(`add_oauth_${n}`)}</strong>
                    <small>{t(`add_oauth_${n}_s`)}</small>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- helpers ---------- */
function fmtDate(d, lang) {
  const [y,m,day] = d.split("-");
  if (lang === "en") return `${day}/${m}/${y}`;
  return `${day}.${m}.${y}`;
}

Object.assign(window, { Dashboard });