// Accounting module
function Accounting() {
  const { useState, useEffect } = React;
  const [tab, setTab] = useState("invoices");
  const [invoices, setInvoices] = useState(D.invoices);
  const [bills, setBills] = useState(D.bills);
  const [clients, setClients] = useState(D.clients);
  const [filter, setFilter] = useState("All");
  const [sel, setSel] = useState(null);
  const [showNew, setShowNew] = useState(false);

  useEffect(() => {
    const h = () => { setTab("invoices"); setShowNew(true); };
    window.addEventListener("erp:new-invoice", h);
    return () => window.removeEventListener("erp:new-invoice", h);
  }, []);

  const sum = (arr) => arr.reduce((s, i) => s + i.amount, 0);
  const outstanding = sum(invoices.filter((i) => i.status === "Sent" || i.status === "Overdue"));
  const overdueAmt = sum(invoices.filter((i) => i.status === "Overdue"));
  const collected = sum(invoices.filter((i) => i.status === "Paid"));
  const drafts = invoices.filter((i) => i.status === "Draft").length;

  const statuses = ["All", "Draft", "Sent", "Overdue", "Paid"];
  const visible = invoices.filter((i) => filter === "All" || i.status === filter);

  const setStatus = (id, status) => {
    setInvoices((inv) => inv.map((i) => (i.id === id ? { ...i, status } : i)));
    setSel(null);
  };

  return (
    <div className="page" data-screen-label="Accounting">
      <KpiBar>
        <Stat label={T("acct.outstanding")} value={money(outstanding)} sub={T("acct.openInvoicesN", { n: invoices.filter((i) => i.status === "Sent" || i.status === "Overdue").length })} />
        <Stat label={TV("Overdue")} value={money(overdueAmt)} sub={T("acct.pastDueN", { n: invoices.filter((i) => i.status === "Overdue").length })} />
        <Stat label={T("acct.collected")} value={money(collected)} sub={T("acct.paymentsReceivedN", { n: invoices.filter((i) => i.status === "Paid").length })} />
        <Stat label={T("acct.drafts")} value={String(drafts)} sub={T("acct.awaitingSend")} />
      </KpiBar>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "invoices", label: T("acct.invoices"), count: invoices.length },
        { id: "bills", label: T("acct.bills"), count: bills.length },
        { id: "journal", label: T("acct.journalEntries"), count: D.journal.length },
        { id: "ledger", label: T("acct.generalLedger") },
        { id: "tb", label: T("acct.trialBalance") },
        { id: "accounts", label: T("acct.chartOfAccounts") }
      ]} />

      {tab === "invoices" ? (
        <><div className="toolbar page-toolbar">
            <Chips active={filter} onChange={setFilter} options={statuses.map((s) => ({
              id: s, label: s === "All" ? T("common.all") : TV(s), count: s === "All" ? invoices.length : invoices.filter((i) => i.status === s).length
            }))} />
            <Btn variant="primary" icon="plus" onClick={() => setShowNew(true)}>{T("acct.newInvoice")}</Btn>
          </div>
        <section className="card">
          <DataTable rowKey={(r) => r.id} onRow={setSel} empty={T("acct.noInvoicesMatch")} rows={visible} cols={[
            { k: "id", label: T("acct.invoice"), w: "110px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "client", label: T("common.client"), render: (r) => <span className="cellwho"><Avatar name={r.client} size={24} />{r.client}</span> },
            { k: "issued", label: T("acct.issued"), w: "90px" },
            { k: "due", label: T("acct.due"), w: "90px" },
            { k: "amount", label: T("common.amount"), align: "right", w: "110px", render: (r) => <span className="mono strong">{money(r.amount)}</span> },
            { k: "status", label: T("common.status"), w: "110px", render: (r) => <Badge>{r.status}</Badge> }
          ]} />
        </section></>
      ) : null}

      {tab === "bills" ? (
        <section className="card">
          <DataTable rowKey={(r) => r.id} rows={bills} cols={[
            { k: "id", label: T("acct.bill"), w: "110px", render: (r) => <span className="mono strong">{r.id}</span> },
            { k: "vendor", label: T("acct.vendor"), render: (r) => <span className="cellwho"><Avatar name={r.vendor} size={24} />{r.vendor}</span> },
            { k: "due", label: T("acct.due"), w: "90px" },
            { k: "amount", label: T("common.amount"), align: "right", w: "110px", render: (r) => <span className="mono strong">{money(r.amount)}</span> },
            { k: "status", label: T("common.status"), w: "110px", render: (r) => <Badge>{r.status}</Badge> },
            { k: "act", label: "", align: "right", w: "100px", render: (r) => r.status !== "Paid" ? (
                <Btn small variant="subtle" onClick={() => {
                  setBills((bs) => bs.map((b) => b.id === r.id ? { ...b, status: "Paid" } : b));
                  notify(T("acct.billMarkedPaid", { id: r.id }));
                }}>{T("acct.payNow")}</Btn>
              ) : null }
          ]} />
        </section>
      ) : null}

      {tab === "journal" ? <JournalTab /> : null}

      {tab === "ledger" ? <GeneralLedger /> : null}

      {tab === "tb" ? <TrialBalance /> : null}

      {tab === "accounts" ? <CoATree /> : null}

      <Drawer open={!!sel} onClose={() => setSel(null)}
        title={sel ? sel.id : ""} sub={sel ? T("acct.issuedDueSub", { issued: sel.issued, due: sel.due }) : ""}
        footer={sel && sel.status !== "Paid" ? (
          <div className="btnrow">
            <Btn variant="primary" icon="check" onClick={() => { setStatus(sel.id, "Paid"); notify(T("acct.invoiceMarkedPaid", { id: sel.id })); }}>{T("acct.markAsPaid")}</Btn>
            <Btn icon="send" onClick={() => notify(T("acct.reminderSentTo", { name: sel.client }))}>{T("acct.sendReminder")}</Btn>
          </div>
        ) : null}>
        {sel ? (
          <div>
            <div className="amount-hero">
              <span className="display">{money(sel.amount)}</span>
              <Badge>{sel.status}</Badge>
            </div>
            <KV k={T("common.client")} v={sel.client} />
            <KV k={T("acct.issued")} v={sel.issued + ", 2026"} />
            <KV k={T("acct.due")} v={sel.due + ", 2026"} />
            <KV k={T("acct.paymentTerms")} v={TV("Net 30")} />
            <KV k={T("common.reference")} v={sel.id} mono />
            <div className="lineitems">
              <div className="li-head">{T("acct.lineItems")}</div>
              {sel.items && sel.items.length ? (
                <React.Fragment>
                  {sel.items.map((it, i) => (
                    <div className="li-row" key={i}>
                      <span>{it.desc} <span className="li-qty">× {it.qty}{it.tax ? " · " + T("acct.taxPct", { pct: it.tax }) : ""}</span></span>
                      <span className="mono">{money(it.amount)}</span>
                    </div>
                  ))}
                  <div className="li-row"><span>{T("acct.tax")}</span>
                    <span className="mono">{money(sel.items.reduce((s, it) => s + (it.taxAmount != null ? it.taxAmount : 0), 0))}</span></div>
                  <div className="li-row total"><span>{T("common.total")}</span><span className="mono strong">{money(sel.amount)}</span></div>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div className="li-row"><span>{T("acct.goodsServicesRendered")}</span><span className="mono">{money(Math.round(sel.amount / 1.05))}</span></div>
                  <div className="li-row"><span>{T("acct.taxPct", { pct: 5 })}</span><span className="mono">{money(sel.amount - Math.round(sel.amount / 1.05))}</span></div>
                  <div className="li-row total"><span>{T("common.total")}</span><span className="mono strong">{money(sel.amount)}</span></div>
                </React.Fragment>
              )}
            </div>
          </div>
        ) : null}
      </Drawer>

      <NewInvoiceModal open={showNew} onClose={() => setShowNew(false)}
        clients={clients}
        onAddClient={(name) => setClients((cs) => (cs.includes(name) ? cs : [name, ...cs]))}
        onCreate={(inv) => {
          setInvoices((list) => [inv, ...list]);
          setShowNew(false);
          notify(inv.status === "Draft" ? T("acct.invoiceSavedDraft", { id: inv.id }) : T("acct.invoiceSentTo", { id: inv.id, name: inv.client }));
        }} />
    </div>
  );
}

/* ---------- Multi-level chart of accounts ---------- */
function coaTotal(n) {
  return n.children ? n.children.reduce((s, c) => s + coaTotal(c), 0) : n.balance;
}
function coaCodes(nodes, acc) {
  nodes.forEach((n) => { if (n.children) { acc.push(n.code); coaCodes(n.children, acc); } });
  return acc;
}
function coaMatches(n, q) {
  // Match the displayed (translated) name as well as the English source, so
  // searching in Arabic finds the same rows.
  if ((n.code + " " + n.name + " " + TV(n.name)).toLowerCase().includes(q)) return true;
  return n.children ? n.children.some((c) => coaMatches(c, q)) : false;
}

function CoATree() {
  const { useState } = React;
  const allParents = coaCodes(D.coa, []);
  // start with the five root groups + their first level open
  const [open, setOpen] = useState(() => new Set(
    D.coa.flatMap((r) => [r.code].concat((r.children || []).filter((c) => c.children).map((c) => c.code)))
  ));
  const [q, setQ] = useState("");
  const query = q.trim().toLowerCase();

  const toggle = (code) => setOpen((prev) => {
    const next = new Set(prev);
    next.has(code) ? next.delete(code) : next.add(code);
    return next;
  });

  const renderNode = (n, depth) => {
    if (query && !coaMatches(n, query)) return null;
    const isParent = !!n.children;
    const isOpen = query ? true : open.has(n.code);
    const total = coaTotal(n);
    return (
      <React.Fragment key={n.code}>
        <div
          className={"coa-row" + (isParent ? " parent" : "") + (depth === 0 ? " root" : "")}
          style={{ "--depth": depth }}
          onClick={isParent ? () => toggle(n.code) : undefined}
          role={isParent ? "button" : undefined}
          aria-expanded={isParent ? isOpen : undefined}
        >
          <span className="coa-twist">
            {isParent ? <Icon name="chevR" size={13} stroke={2.2} style={{ transform: isOpen ? "rotate(90deg)" : "none", transition: "transform .15s ease" }} /> : null}
          </span>
          <span className="mono coa-code">{n.code}</span>
          <span className="coa-name">{TV(n.name)}</span>
          {isParent ? <span className="coa-count">{n.children.length}</span> : null}
          <span className={"mono coa-bal" + (isParent ? " strong" : "")}>{money(total)}</span>
        </div>
        {isParent && isOpen ? n.children.map((c) => renderNode(c, depth + 1)) : null}
      </React.Fragment>
    );
  };

  return (
    <><div className="toolbar page-toolbar">
        <div className="searchbox">
          <Icon name="search" size={15} />
          <input placeholder={T("acct.searchAccounts")} value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="btnrow">
          <Btn small onClick={() => setOpen(new Set(allParents))}>{T("common.expandAll")}</Btn>
          <Btn small onClick={() => setOpen(new Set(D.coa.map((r) => r.code)))}>{T("common.collapseAll")}</Btn>
        </div>
      </div>
    <section className="card">
      <div className="coa">
        <div className="coa-row head">
          <span className="coa-twist"></span>
          <span className="coa-code">{T("acct.code")}</span>
          <span className="coa-name">{T("acct.account")}</span>
          <span></span>
          <span className="coa-bal">{T("acct.balance")}</span>
        </div>
        {D.coa.map((r) => renderNode(r, 0))}
        {query && !D.coa.some((r) => coaMatches(r, query)) ? (
          <div className="dt-empty" style={{ padding: 32, textAlign: "center", color: "var(--ink3)" }}>{T("acct.noAccountsMatch", { q: q })}</div>
        ) : null}
      </div>
    </section></>
  );
}


window.Accounting = Accounting;