/* Bonyan ERP — الحسابات: كشوف ديون موحّدة (عملاء/موردون) مع فلترة ذكية،
   دمج المؤسسات، طباعة PDF لكل الديون الظاهرة، والنقر يفتح حساب الجهة. */
function AccountsScreen({ onNav }) {
  const I = window.BnyIcon;
  const D = window.BnyData;
  const cur = window.BnyCur;
  const { Card, Button, Money, Badge, Input } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();
  window.useBnyInvoices(); // إعادة الرسم عند أي تعديل فاتورة/دفعة
  const user = window.BnyCurrentUser;
  const canSuppliers = window.BnyCan(user, "suppliers");

  const [side, setSide] = React.useState("customers");   // customers | suppliers
  const [view, setView] = React.useState("people");       // people | orgs (للعملاء)
  const [q, setQ] = React.useState("");
  const [status, setStatus] = React.useState("all");       // all | debt | settled
  const [curF, setCurF] = React.useState("all");           // all | iqd | usd
  const [typeF, setTypeF] = React.useState("all");         // all | نقدي | آجل
  const [orgF, setOrgF] = React.useState("all");           // all | <orgId> | none
  const [sort, setSort] = React.useState("debt-desc");     // debt-desc|debt-asc|recent|alpha
  const [from, setFrom] = React.useState("");              // مدى التاريخ: من
  const [to, setTo] = React.useState("");                  // إلى
  const [printing, setPrinting] = React.useState(false);
  const forceRender = React.useReducer((x) => x + 1, 0)[1];

  const reset = () => { setQ(""); setStatus("all"); setCurF("all"); setTypeF("all"); setOrgF("all"); setSort("debt-desc"); setFrom(""); setTo(""); };

  // مدى التاريخ المختار (فارغ = كل الفترات) — يحصر الحساب بفواتير المدى
  const range = (from || to) ? { from: from || "", to: to || "" } : null;

  // المصدر: عملاء (أفراد أو مؤسسات) أو موردون — مع حصر المدى
  let rows = side === "suppliers" ? window.BnySupplierAccounts(range)
    : view === "orgs" ? window.BnyOrgAccounts(range)
    : window.BnyCustomerAccounts(range);

  // عند تفعيل المدى: أظهر فقط من له نشاط (فواتير) ضمن الفترة
  if (range) rows = rows.filter((r) => (r.invCount || 0) > 0);

  // ---- فلترة ذكية ----
  const qn = q.trim();
  if (qn) rows = rows.filter((r) => r.name.includes(qn) || (r.phone || "").includes(qn) || (r.orgName || "").includes(qn));
  if (status === "debt") rows = rows.filter((r) => r.remaining > 0.0001);
  if (status === "settled") rows = rows.filter((r) => r.remaining <= 0.0001);
  if (curF === "iqd") rows = rows.filter((r) => (r.remIqd || 0) > 0.0001);
  if (curF === "usd") rows = rows.filter((r) => (r.remUsd || 0) > 0.0001);
  if (typeF !== "all") rows = rows.filter((r) => r.type === typeF);
  if (side === "customers" && view === "people" && orgF !== "all") {
    rows = rows.filter((r) => orgF === "none" ? !r.org : r.org === orgF);
  }
  rows = rows.slice().sort((a, b) => {
    if (sort === "debt-desc") return b.remaining - a.remaining;
    if (sort === "debt-asc") return a.remaining - b.remaining;
    if (sort === "alpha") return String(a.name).localeCompare(String(b.name), "ar");
    const da = a.lastMove || "", db = b.lastMove || "";
    if (da === db) return 0; if (!da) return 1; if (!db) return -1; return db < da ? -1 : 1;
  });

  // إجماليات (بالمكافئ بالدينار)
  const totRemaining = rows.reduce((s, r) => s + r.remaining, 0);
  const totCount = rows.length;
  const debtorsCount = rows.filter((r) => r.remaining > 0.0001).length;

  // ---- التنقّل إلى حساب الجهة ----
  const openRow = (r) => {
    if (r.kind === "supplier") { window.BnyPendingSupplierId = r.id; onNav("suppliers"); return; }
    if (r.kind === "org") {
      const first = (r.members && r.members[0]) ? r.members[0].id : null;
      if (first != null) { window.BnyPendingCustomerId = first; window.BnyPendingCustomerScope = "org"; onNav("customers"); }
      return;
    }
    window.BnyPendingCustomerId = r.id; onNav("customers");
  };

  // ---- طباعة PDF لكل الصفوف الظاهرة ----
  React.useEffect(() => {
    if (!printing) return;
    document.body.classList.add("bny-printing-stmt");
    const after = () => { document.body.classList.remove("bny-printing-stmt"); setPrinting(false); };
    window.addEventListener("afterprint", after);
    const t = setTimeout(() => window.print(), 140);
    return () => { clearTimeout(t); window.removeEventListener("afterprint", after); document.body.classList.remove("bny-printing-stmt"); };
  }, [printing]);

  const fmt = (n) => Number(n || 0).toLocaleString("en-US");
  const sideLabel = side === "suppliers" ? "الموردون" : (view === "orgs" ? "المؤسسات" : "العملاء");
  const printTitle = "كشف ديون " + sideLabel + " الإجمالي";

  // شريط تجزئة معاد استخدامه
  const Seg = ({ value, set, opts }) => (
    <div className="bny-unit-toggle" role="group">
      {opts.map((o) => <button key={o.v} type="button" aria-pressed={value === o.v} onClick={() => set(o.v)}>{o.l}</button>)}
    </div>
  );
  const selStyle = { height: 38, minWidth: 130, padding: "0 10px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--surface-card)", color: "var(--text-body)", fontFamily: "var(--font-body)", fontSize: 13 };

  return (
    <div style={{ padding: isMobile ? "var(--space-4)" : "var(--space-8)", display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
      {/* رأس: تبديل عملاء/موردون + طباعة */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <Seg value={side} set={(v) => { setSide(v); setOrgF("all"); }} opts={[{ v: "customers", l: "عملاء" }].concat(canSuppliers ? [{ v: "suppliers", l: "موردون" }] : [])} />
        {side === "customers" && (
          <Seg value={view} set={setView} opts={[{ v: "people", l: "أفراد" }, { v: "orgs", l: "حسب المؤسسة" }]} />
        )}
        <div style={{ marginInlineStart: "auto" }}>
          <Button variant="secondary" icon={<I.printer size={16} />} onClick={() => setPrinting(true)} disabled={!rows.length}>طباعة PDF ({totCount})</Button>
        </div>
      </div>

      {/* ملخّص علوي */}
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(3,1fr)", gap: "var(--space-4)" }}>
        <div className="bny-card" style={{ padding: "14px 16px" }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)" }}>إجمالي المتبقّي (مكافئ د.ع)</div>
          <div style={{ marginTop: 4 }}><Money value={totRemaining} unit="د.ع" tone={totRemaining > 0 ? "debt" : "credit"} style={{ fontSize: 20 }} /></div>
        </div>
        <div className="bny-card" style={{ padding: "14px 16px" }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)" }}>عدد الجهات المدينة</div>
          <div style={{ marginTop: 4, fontSize: 20, fontWeight: 700, fontFamily: "var(--font-mono)", color: "var(--text-strong)" }}>{debtorsCount} <span style={{ fontSize: 12, color: "var(--text-muted)" }}>من {totCount}</span></div>
        </div>
        <div className="bny-card" style={{ padding: "14px 16px", display: isMobile ? "none" : "block" }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)" }}>القسم</div>
          <div style={{ marginTop: 4, fontSize: 20, fontWeight: 700, color: "var(--brand-strong)" }}>{sideLabel}</div>
        </div>
      </div>

      {/* شريط الفلترة الذكي */}
      <Card>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
          <div style={{ flex: 1, minWidth: 200, maxWidth: 340 }}>
            <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="ابحث بالاسم أو الهاتف أو المؤسسة" icon={<I.search size={16} />} />
          </div>
          <select style={selStyle} value={status} onChange={(e) => setStatus(e.target.value)} aria-label="الحالة">
            <option value="all">كل الحالات</option>
            <option value="debt">مدين فقط</option>
            <option value="settled">مسدّد فقط</option>
          </select>
          <select style={selStyle} value={curF} onChange={(e) => setCurF(e.target.value)} aria-label="العملة">
            <option value="all">كل العملات</option>
            <option value="iqd">دين بالدينار</option>
            <option value="usd">دين بالدولار</option>
          </select>
          <select style={selStyle} value={typeF} onChange={(e) => setTypeF(e.target.value)} aria-label="النوع">
            <option value="all">كل الأنواع</option>
            <option value="نقدي">نقدي</option>
            <option value="آجل">آجل</option>
          </select>
          {side === "customers" && view === "people" && (
            <select style={selStyle} value={orgF} onChange={(e) => setOrgF(e.target.value)} aria-label="المؤسسة">
              <option value="all">كل الجهات</option>
              <option value="none">أفراد مستقلون</option>
              {(D.organizations || []).map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}
            </select>
          )}
          <select style={selStyle} value={sort} onChange={(e) => setSort(e.target.value)} aria-label="الترتيب">
            <option value="debt-desc">الأعلى دينًا</option>
            <option value="debt-asc">الأقل دينًا</option>
            <option value="recent">الأحدث حركة</option>
            <option value="alpha">أبجدي</option>
          </select>
          <Button variant="ghost" size="sm" icon={<I.x size={15} />} onClick={reset}>إعادة التعيين</Button>
        </div>
        {/* فلترة حسب مدى التاريخ (من – إلى) — تحصر الأرقام بفواتير الفترة */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center", marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--border-subtle)" }}>
          <span style={{ fontSize: 12.5, color: "var(--text-muted)", fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6 }}><I.calendar size={15} /> مدى التاريخ</span>
          <label style={{ fontSize: 12, color: "var(--text-muted)" }}>من</label>
          <input type="date" className="bny-input" value={from} max={to || undefined} onChange={(e) => setFrom(e.target.value)} aria-label="من تاريخ" style={{ height: 38, width: 160, padding: "0 10px", fontFamily: "var(--font-mono)", fontSize: 13 }} />
          <label style={{ fontSize: 12, color: "var(--text-muted)" }}>إلى</label>
          <input type="date" className="bny-input" value={to} min={from || undefined} onChange={(e) => setTo(e.target.value)} aria-label="إلى تاريخ" style={{ height: 38, width: 160, padding: "0 10px", fontFamily: "var(--font-mono)", fontSize: 13 }} />
          {range && <span style={{ fontSize: 11.5, color: "var(--text-faint)" }}>(الأرقام محصورة بفواتير الفترة المحددة)</span>}
          {range && <Button variant="ghost" size="sm" icon={<I.x size={14} />} onClick={() => { setFrom(""); setTo(""); }}>مسح المدى</Button>}
        </div>
      </Card>

      {/* الجدول */}
      <Card title={printTitle}>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
            <thead>
              <tr style={{ color: "var(--text-muted)", fontSize: 12 }}>
                <th style={{ textAlign: "start", fontWeight: 600, padding: "0 8px 12px", paddingInlineStart: 4 }}>#</th>
                <th style={{ textAlign: "start", fontWeight: 600, padding: "0 8px 12px" }}>الاسم</th>
                <th style={{ textAlign: "end", fontWeight: 600, padding: "0 8px 12px" }}>الإجمالي</th>
                <th style={{ textAlign: "end", fontWeight: 600, padding: "0 8px 12px" }}>المدفوع</th>
                <th style={{ textAlign: "end", fontWeight: 600, padding: "0 8px 12px" }}>المتبقّي / الدين</th>
                <th style={{ textAlign: "center", fontWeight: 600, padding: "0 8px 12px" }}>آخر حركة</th>
                <th style={{ width: 40, padding: "0 8px 12px" }} />
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.kind + r.id} onClick={() => openRow(r)}
                  onMouseEnter={(e) => (e.currentTarget.style.background = "var(--surface-hover)")} onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
                  style={{ borderTop: "1px solid var(--border-subtle)", cursor: "pointer", transition: "background var(--dur-fast,160ms) ease" }}>
                  <td style={{ padding: "12px 8px", fontFamily: "var(--font-mono)", color: "var(--text-muted)", paddingInlineStart: 4 }}>{i + 1}</td>
                  <td style={{ padding: "12px 8px" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      {r.kind === "org" && <span style={{ color: "var(--brand)" }} title="مؤسسة"><I.building size={15} /></span>}
                      <span style={{ fontWeight: 600, color: "var(--text-strong)" }}>{r.name}</span>
                      {r.kind === "org" && <Badge tone="brand">{r.count} أعضاء</Badge>}
                    </div>
                    {r.kind === "customer" && r.orgName && <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>{r.orgName}{r.title ? " · " + r.title : ""}</div>}
                  </td>
                  <td style={{ padding: "12px 8px", textAlign: "end", fontFamily: "var(--font-mono)" }}>{fmt(r.total)} د.ع</td>
                  <td style={{ padding: "12px 8px", textAlign: "end", fontFamily: "var(--font-mono)", color: "var(--success)" }}>{fmt(r.paid)} د.ع</td>
                  <td style={{ padding: "12px 8px", textAlign: "end" }}>
                    {r.remaining > 0.0001
                      ? <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
                          {r.remIqd > 0 && <Money value={r.remIqd} unit="د.ع" tone="debt" style={{ fontSize: 13.5 }} />}
                          {r.remUsd > 0 && <Money value={r.remUsd} unit="$" tone="debt" style={{ fontSize: 13.5 }} />}
                        </div>
                      : <span className="bny-badge bny-badge--success"><span className="bny-badge__dot" />مسدّد</span>}
                  </td>
                  <td style={{ padding: "12px 8px", textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>{r.lastMove || "—"}</td>
                  <td style={{ padding: "12px 8px", textAlign: "center", color: "var(--text-faint)" }}><I.chevron size={16} /></td>
                </tr>
              ))}
              {rows.length === 0 && <tr><td colSpan={7} style={{ padding: 28, textAlign: "center", color: "var(--text-muted)" }}>لا حسابات مطابقة للفلترة</td></tr>}
            </tbody>
          </table>
        </div>
      </Card>

      {/* ورقة الطباعة (مخفية على الشاشة) */}
      {printing && (
        <div id="bny-stmt-print">
          <window.BnyStatementSheet shop={D.shop || {}} title={printTitle}
            entityName={sideLabel} entityMeta={"عدد الجهات: " + totCount + " · المدينون: " + debtorsCount + (range ? " · الفترة: " + (from ? window.BnyDate(from) : "البداية") + " — " + (to ? window.BnyDate(to) : "الآن") : "") + " · بتاريخ " + window.BnyDate(window.BnyOps.todayIso())}
            cols={[
              { label: "الاسم", render: (r) => r.name + (r.orgName && r.kind === "customer" ? " (" + r.orgName + ")" : (r.kind === "org" ? " — مؤسسة" : "")) },
              { label: "الإجمالي", align: "end", mono: true, render: (r) => fmt(r.total) },
              { label: "المدفوع", align: "end", mono: true, render: (r) => fmt(r.paid) },
              { label: "المتبقّي (د.ع)", align: "end", mono: true, render: (r) => fmt(r.remIqd) + (r.remUsd ? " + " + fmt(r.remUsd) + "$" : "") },
            ]}
            rows={rows}
            totals={[{ label: "إجمالي المتبقّي (مكافئ بالدينار)", value: fmt(totRemaining) + " د.ع", strong: true }]}
          />
        </div>
      )}
    </div>
  );
}
window.AccountsScreen = AccountsScreen;