/* Bonyan ERP — Invoices register (سجل الفواتير)
   كل الفواتير (بيع + شراء) مرتّبة من الأحدث للأقدم، مع فلاتر:
   النوع (بيع/شراء) · المدى الزمني (رينج) · رقم الفاتورة (رينج) · الحالة.
   النقر على فاتورة يفتح النافذة الموحّدة (أصناف + تعديل + حذف). */
function InvoicesScreen({ onNav }) {
  const I = window.BnyIcon;
  const cur = window.BnyCur;
  const fmtDate = window.BnyDate;
  const status = window.BnyInvStatus;
  const { Card, Button, Money, Badge } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();
  const list = window.useBnyInvoices(); // يتحدّث تلقائيًا بعد أي تعديل/حذف
  const D = window.BnyData;
  const orgs = D.organizations || [];
  // مؤسسة العميل المرتبط بالفاتورة (بمطابقة الاسم) — للعرض والبحث
  const orgOfInvoice = (inv) => {
    const c = (inv.custId != null ? (D.customers || []).find((x) => x.id === inv.custId) : null)
           || (D.customers || []).find((x) => x.name === inv.party);
    if (!c || !c.org) return "";
    const o = orgs.find((x) => x.id === c.org);
    return o ? o.name : "";
  };

  const [textQ, setTextQ] = React.useState("");         // بحث بالعميل/المؤسسة
  const [dupTarget, setDupTarget] = React.useState(null); // فاتورة قيد تأكيد النسخ
  const [typeF, setTypeF] = React.useState("all");      // all | sale | purchase
  const [statusF, setStatusF] = React.useState("all");  // all | paid | partial | unpaid
  const [dateFrom, setDateFrom] = React.useState("");
  const [dateTo, setDateTo] = React.useState("");
  const [numFrom, setNumFrom] = React.useState("");
  const [numTo, setNumTo] = React.useState("");

  // نسخ فاتورة: توليد رقم جديد ثم إنشاء نسخة مطابقة كمسودة غير مسددة
  const nextNoFor = (type) => {
    const cfg = (D.numbering || {})[type] || { prefix: type === "purchase" ? "PINV-" : "" };
    const maxNum = list.filter((i) => i.type === type).reduce((m, i) => Math.max(m, i.num || 0), 0) + 1;
    return (cfg.prefix || "") + maxNum;
  };
  const duplicate = (inv) => {
    const no = nextNoFor(inv.type);
    const clone = { ...inv, no, num: parseInt(String(no).replace(/\D/g, ""), 10) || 0, paid: 0,
      date: new Date().toISOString().slice(0, 10), items: (inv.items || []).map((it) => ({ ...it })) };
    window.BnyInvoices.add(clone, { applyEffects: true }); // النسخة فاتورة فعلية: تؤثر على المخزون والأرصدة
    if (window.BnyOps) window.BnyOps.log("invoice_create", "نسخ الفاتورة #" + inv.no + " إلى مسودة جديدة #" + no, no);
    setDupTarget(null);
    window.BnyOpenInvoice(no); // افتحها كمسودة للتعديل
  };

  const remaining = (inv) => Math.max(0, (inv.total || 0) - (inv.paid || 0));
  const openInvoice = (inv) => window.BnyOpenInvoice(inv.no);

  const rows = list
    .filter((inv) => {
      if (typeF !== "all" && inv.type !== typeF) return false;
      if (statusF !== "all" && status(inv).key !== statusF) return false;
      if (dateFrom && inv.date < dateFrom) return false;
      if (dateTo && inv.date > dateTo) return false;
      if (numFrom !== "" && inv.num < Number(numFrom)) return false;
      if (numTo !== "" && inv.num > Number(numTo)) return false;
      if (textQ) { const on = orgOfInvoice(inv); if (!((inv.party || "").includes(textQ) || on.includes(textQ))) return false; }
      return true;
    })
    .slice()
    .sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : b.num - a.num));

  const hasFilter = textQ || typeF !== "all" || statusF !== "all" || dateFrom || dateTo || numFrom !== "" || numTo !== "";
  const reset = () => { setTextQ(""); setTypeF("all"); setStatusF("all"); setDateFrom(""); setDateTo(""); setNumFrom(""); setNumTo(""); };

  const typeBadge = (t) => t === "sale" ? <Badge tone="brand">بيع</Badge> : <Badge tone="warning">شراء</Badge>;

  const addBtn = (
    <Button variant="accent" size={isMobile ? "md" : "sm"} block={isMobile}
      icon={<I.plus size={16} />} onClick={() => onNav && onNav("pos")}>
      إضافة فاتورة
    </Button>
  );

  const rangeInput = { height: 36, width: isMobile ? "100%" : 92, fontSize: 13, padding: "0 8px" };
  const dateInput = { height: 36, width: isMobile ? "100%" : 150, fontSize: 13, padding: "0 8px", fontFamily: "var(--font-mono)" };

  const filters = (
    <div style={{ display: "flex", flexWrap: "wrap", gap: isMobile ? 14 : 18, alignItems: "flex-end" }}>
      <Field label="بحث (عميل / مؤسسة)">
        <input className="bny-input" value={textQ} onChange={(e) => setTextQ(e.target.value)}
          placeholder="اسم العميل أو المؤسسة" aria-label="بحث بالعميل أو المؤسسة"
          style={{ height: 36, width: isMobile ? "100%" : 210, fontSize: 13, padding: "0 10px" }} />
      </Field>

      <Field label="نوع الفاتورة">
        <div className="bny-unit-toggle" role="group" aria-label="نوع الفاتورة">
          <button type="button" aria-pressed={typeF === "all"} onClick={() => setTypeF("all")}>الكل</button>
          <button type="button" aria-pressed={typeF === "sale"} onClick={() => setTypeF("sale")}>بيع</button>
          <button type="button" aria-pressed={typeF === "purchase"} onClick={() => setTypeF("purchase")}>شراء</button>
        </div>
      </Field>

      <Field label="حالة الفاتورة">
        <div className="bny-unit-toggle" role="group" aria-label="حالة الفاتورة">
          <button type="button" aria-pressed={statusF === "all"} onClick={() => setStatusF("all")}>الكل</button>
          <button type="button" aria-pressed={statusF === "paid"} onClick={() => setStatusF("paid")}>مسددة</button>
          <button type="button" aria-pressed={statusF === "partial"} onClick={() => setStatusF("partial")}>جزئي</button>
          <button type="button" aria-pressed={statusF === "unpaid"} onClick={() => setStatusF("unpaid")}>غير مسددة</button>
        </div>
      </Field>

      <Field label="التاريخ (من — إلى)">
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: isMobile ? "wrap" : "nowrap" }}>
          <input className="bny-input" type="date" value={dateFrom} max={dateTo || undefined}
            onChange={(e) => setDateFrom(e.target.value)} aria-label="من تاريخ" style={dateInput} />
          <span style={{ color: "var(--text-faint)" }}>—</span>
          <input className="bny-input" type="date" value={dateTo} min={dateFrom || undefined}
            onChange={(e) => setDateTo(e.target.value)} aria-label="إلى تاريخ" style={dateInput} />
        </div>
      </Field>

      <Field label="رقم الفاتورة (من — إلى)">
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <input className="bny-input bny-input--numeric" type="number" inputMode="numeric" placeholder="من"
            value={numFrom} onChange={(e) => setNumFrom(e.target.value)} aria-label="من رقم" style={rangeInput} />
          <span style={{ color: "var(--text-faint)" }}>—</span>
          <input className="bny-input bny-input--numeric" type="number" inputMode="numeric" placeholder="إلى"
            value={numTo} onChange={(e) => setNumTo(e.target.value)} aria-label="إلى رقم" style={rangeInput} />
        </div>
      </Field>

      {hasFilter && (
        <Button variant="secondary" size="sm" icon={<I.x size={15} />} onClick={reset}>مسح الفلاتر</Button>
      )}
    </div>
  );

  const empty = (
    <div style={{ padding: "40px 20px", textAlign: "center", color: "var(--text-muted)", display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
      <span style={{ color: "var(--text-faint)" }}><I.invoice size={34} /></span>
      <div style={{ fontWeight: 600, color: "var(--text-body)" }}>لا توجد فواتير مطابقة</div>
      <div style={{ fontSize: 13 }}>جرّب تعديل الفلاتر أو امسحها لعرض كل الفواتير.</div>
    </div>
  );

  const rowHover = (on) => (e) => { e.currentTarget.style.background = on ? "var(--surface-hover)" : "transparent"; };

  return (
    <div style={{ padding: isMobile ? "var(--space-5)" : "var(--space-8)", display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
      <Card title={`الفواتير (${rows.length})`} actions={!isMobile ? addBtn : null}>
        {isMobile && <div style={{ marginBottom: 14 }}>{addBtn}</div>}
        {filters}
      </Card>

      <Card pad={false}>
        {rows.length === 0 ? empty : isMobile ? (
          <div style={{ display: "flex", flexDirection: "column", padding: "4px 16px 8px" }}>
            {rows.map((inv) => {
              const st = status(inv);
              const rem = remaining(inv);
              return (
                <div key={inv.no} onClick={() => openInvoice(inv)} style={{ padding: "13px 4px", borderTop: "1px solid var(--border-subtle)", cursor: "pointer", borderRadius: "var(--radius-md)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--text-strong)" }}>{inv.no}</span>
                      {typeBadge(inv.type)}
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 6, flex: "none" }}>
                      <span className={`bny-badge bny-badge--${st.state}`}><span className="bny-badge__dot" />{st.label}</span>
                      <button className="bny-iconbtn bny-iconbtn--sm" aria-label="نسخ الفاتورة" title="نسخ فاتورة"
                        onClick={(e) => { e.stopPropagation(); setDupTarget(inv); }} style={{ color: "var(--text-muted)" }}><I.copy size={15} /></button>
                    </div>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, marginTop: 8 }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, color: "var(--text-strong)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{inv.party}</div>
                      <div style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)", marginTop: 2 }}>{fmtDate(inv.date)} · {(inv.items || []).length} صنف</div>
                    </div>
                    <div style={{ textAlign: "end", flex: "none" }}>
                      <Money value={inv.total} unit={cur(inv.cur)} style={{ fontWeight: 700 }} />
                      <div style={{ fontSize: 11.5, marginTop: 3 }}>
                        {rem > 0
                          ? <span style={{ color: "var(--danger)" }}>المتبقي: {rem.toLocaleString("en-US")} {cur(inv.cur)}</span>
                          : <span style={{ color: "var(--success)" }}>لا يوجد متبقٍ</span>}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 820 }}>
              <thead>
                <tr style={{ color: "var(--text-muted)", fontSize: 12 }}>
                  <th style={{ ...th, textAlign: "start", paddingInlineStart: 20 }}>رقم الفاتورة</th>
                  <th style={{ ...th, textAlign: "center" }}>النوع</th>
                  <th style={{ ...th, textAlign: "start" }}>اسم العميل</th>
                  <th style={{ ...th, textAlign: "start" }}>المؤسسة</th>
                  <th style={{ ...th, textAlign: "center" }}>التاريخ</th>
                  <th style={{ ...th, textAlign: "end" }}>المبلغ الكلي</th>
                  <th style={{ ...th, textAlign: "center" }}>الحالة</th>
                  <th style={{ ...th, textAlign: "end" }}>المتبقي</th>
                  <th style={{ ...th, textAlign: "center", paddingInlineEnd: 20 }}>خيارات</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((inv) => {
                  const st = status(inv);
                  const rem = remaining(inv);
                  return (
                    <tr key={inv.no} onClick={() => openInvoice(inv)} onMouseEnter={rowHover(true)} onMouseLeave={rowHover(false)}
                      style={{ borderTop: "1px solid var(--border-subtle)", cursor: "pointer", transition: "background var(--dur-fast,160ms) ease" }}>
                      <td style={{ ...td, paddingInlineStart: 20, fontFamily: "var(--font-mono)", fontWeight: 700, color: "var(--text-strong)" }}>{inv.no}</td>
                      <td style={{ ...td, textAlign: "center" }}>{typeBadge(inv.type)}</td>
                      <td style={{ ...td, fontWeight: 600, color: "var(--text-strong)" }}>{inv.party}</td>
                      <td style={{ ...td, color: "var(--text-muted)", fontSize: 13 }}>{orgOfInvoice(inv) || "—"}</td>
                      <td style={{ ...td, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-muted)" }}>{fmtDate(inv.date)}</td>
                      <td style={{ ...td, textAlign: "end" }}><Money value={inv.total} unit={cur(inv.cur)} /></td>
                      <td style={{ ...td, textAlign: "center" }}><span className={`bny-badge bny-badge--${st.state}`}><span className="bny-badge__dot" />{st.label}</span></td>
                      <td style={{ ...td, textAlign: "end" }}>
                        {rem > 0 ? <Money value={rem} unit={cur(inv.cur)} tone="debt" /> : <span style={{ color: "var(--text-faint)" }}>—</span>}
                      </td>
                      <td style={{ ...td, textAlign: "center", paddingInlineEnd: 20, whiteSpace: "nowrap" }}>
                        <button className="bny-iconbtn bny-iconbtn--sm" aria-label="فتح الفاتورة" title="فتح وعرض الأصناف والتعديل"
                          onClick={(e) => { e.stopPropagation(); openInvoice(inv); }} style={{ color: "var(--brand)" }}><I.invoice size={16} /></button>
                        <button className="bny-iconbtn bny-iconbtn--sm" aria-label="نسخ الفاتورة" title="نسخ فاتورة (إنشاء نسخة مسودة)"
                          onClick={(e) => { e.stopPropagation(); setDupTarget(inv); }} style={{ color: "var(--text-muted)", marginInlineStart: 2 }}><I.copy size={16} /></button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>

      {dupTarget && (
        <div onClick={() => setDupTarget(null)} style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(0,0,0,.45)", display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--space-5)" }}>
          <div onClick={(e) => e.stopPropagation()} className="bny-card bny-card--pad" style={{ width: "100%", maxWidth: 410 }}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 10, marginBottom: 16 }}>
              <span style={{ color: "var(--brand)", flex: "none" }}><I.copy size={22} /></span>
              <div>
                <h3 style={{ margin: 0, fontSize: 16 }}>نسخ الفاتورة #{dupTarget.no}</h3>
                <p style={{ margin: "6px 0 0", fontSize: 13, color: "var(--text-muted)", lineHeight: 1.6 }}>سيتم إنشاء فاتورة جديدة مطابقة تمامًا كمسودة (غير مسدّدة) برقم جديد، ثم فتحها للتعديل. هل تريد المتابعة؟</p>
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <Button variant="secondary" onClick={() => setDupTarget(null)}>إلغاء</Button>
              <Button variant="accent" icon={<I.copy size={16} />} onClick={() => duplicate(dupTarget)}>نسخ الفاتورة</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const th = { fontWeight: 600, padding: "16px 12px 14px" };
const td = { padding: "14px 12px" };

/* حقل فلترة: عنوان صغير + عنصر التحكم. مُعرّف خارج المكوّن حتى لا تُعاد
   تهيئة الحقول (وتفقد تركيز الإدخال) مع كل إعادة رسم. */
function Field({ label, children }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
      <span style={{ fontSize: 11.5, color: "var(--text-muted)", fontWeight: 600 }}>{label}</span>
      {children}
    </div>
  );
}
window.InvoicesScreen = InvoicesScreen;