/* Bonyan ERP — التقارير والتحليلات (كل الأرقام مشتقّة من الفواتير الفعلية) */
function ReportsScreen() {
  const I = window.BnyIcon;
  const D = window.BnyData;
  const { Card, StatCard, Money, Badge } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();
  window.useBnyInvoices(); // إعادة الرسم عند أي تعديل فاتورة/دفعة
  const fmt = (n) => Math.round(Number(n) || 0).toLocaleString("en-US");
  const abbr = (n) => { n = Math.round(Number(n) || 0); const a = Math.abs(n); if (a >= 1e6) return (n / 1e6).toFixed(a >= 1e7 ? 0 : 1) + "م"; if (a >= 1e3) return Math.round(n / 1e3) + "ألف"; return String(n); };

  // فترة التقرير: الكل / هذه السنة / هذا الشهر
  const [period, setPeriod] = React.useState("all");
  const nowIso = new Date().toISOString().slice(0, 10);
  const usdRate = D.usdRate || 1500;
  const inPeriod = (d) => period === "all" ? true
    : period === "year" ? (d || "").slice(0, 4) === nowIso.slice(0, 4)
    : (d || "").slice(0, 7) === nowIso.slice(0, 7);
  const periodLabel = period === "all" ? "كل الفترات" : period === "year" ? "هذه السنة" : "هذا الشهر";

  // ---- الأساس: فواتير البيع + دوال التحويل والتكلفة (بالرمز أولًا) ----
  const allSales = (D.invoices || []).filter((i) => i.type === "sale");
  const sales = allSales.filter((i) => inPeriod(i.date));
  const invIqd = (inv, amt) => (inv.cur === "usd" ? (Number(amt) || 0) * usdRate : (Number(amt) || 0));
  const bySku = {}, byName = {};
  (D.materials || []).forEach((m) => { bySku[m.sku] = m; byName[(m.name || "").trim()] = m; });
  const matOf = (it) => (it.sku && bySku[it.sku]) || byName[(it.name || "").trim()] || null;
  const costOf = (it) => { const m = matOf(it); return m ? (Number(m.cost) || 0) : 0; };
  const invProfit = (inv) => (inv.items || []).reduce((x, it) => x + (invIqd(inv, it.price) - costOf(it)) * (Number(it.qty) || 0), 0);

  // ---- مؤشرات رئيسية ----
  const totalSales = sales.reduce((s, i) => s + invIqd(i, i.total), 0);
  const totalProfit = sales.reduce((s, i) => s + invProfit(i), 0);
  const totalDebts = (D.customers || []).reduce((s, c) => s + window.BnyToIqd(c.balance, c.balanceUsd), 0);
  const invCount = sales.length;
  const margin = totalSales > 0 ? Math.round(totalProfit / totalSales * 100) : 0;
  const avg = invCount ? totalSales / invCount : 0;

  // ---- الاتجاه الشهري: آخر ٦ أشهر (مبيعات + صافي ربح حقيقي) ----
  const AR = ["كانون٢", "شباط", "آذار", "نيسان", "أيار", "حزيران", "تموز", "آب", "أيلول", "تشرين١", "تشرين٢", "كانون١"];
  const months = [];
  { const d = new Date(); for (let k = 5; k >= 0; k--) { const dt = new Date(d.getFullYear(), d.getMonth() - k, 1); months.push({ ym: dt.getFullYear() + "-" + String(dt.getMonth() + 1).padStart(2, "0"), label: AR[dt.getMonth()] }); } }
  const trend = months.map((m) => {
    const ms = allSales.filter((i) => (i.date || "").slice(0, 7) === m.ym);
    return { label: m.label, values: { sales: ms.reduce((s, i) => s + invIqd(i, i.total), 0), profit: ms.reduce((s, i) => s + invProfit(i), 0) } };
  });
  const trendHasData = trend.some((g) => g.values.sales > 0);

  // ---- المبيعات حسب الفئة (ضمن الفترة) ----
  const catAgg = {};
  sales.forEach((i) => (i.items || []).forEach((it) => { const m = matOf(it); const c = (m && m.cat) || "أخرى"; catAgg[c] = (catAgg[c] || 0) + (Number(it.qty) || 0) * invIqd(i, it.price); }));
  const catTotal = Object.values(catAgg).reduce((s, v) => s + v, 0) || 1;
  const catColors = ["var(--brand)", "var(--amber-500)", "var(--blue-400)", "var(--success)", "var(--concrete-400)", "var(--concrete-300)"];
  const categories = Object.keys(catAgg).map((name, i) => ({ name, val: catAgg[name], pct: Math.round(catAgg[name] / catTotal * 100), color: catColors[i % catColors.length] })).sort((a, b) => b.val - a.val).slice(0, 6);

  // ---- أعلى العملاء (ضمن الفترة، بالمعرّف) ----
  // يُستثنى الزبون المستطرق من ترتيب العملاء (مبيعاته محسوبة في الإجماليات لكنه ليس عميلًا مسجّلًا)
  const walkin = (D.customers || []).find((c) => c.walkin) || { id: 0, name: "زبون مستطرق" };
  const isWalkSale = (i) => i.custId === 0 || i.custId === walkin.id || (i.custId == null && (i.party || "") === walkin.name);
  const custAgg = {};
  sales.forEach((i) => {
    if (isWalkSale(i)) return; // لا يُدرج ضمن أعلى العملاء
    const key = i.custId != null ? "id:" + i.custId : "nm:" + (i.party || "—");
    const c = custAgg[key] || (custAgg[key] = { name: i.party || "—", orders: 0, total: 0 });
    c.orders++; c.total += invIqd(i, i.total);
  });
  const topCustomers = Object.values(custAgg).sort((a, b) => b.total - a.total).slice(0, 5);

  // ---- أعلى المواد ربحًا (ضمن الفترة، بالرمز) ----
  const matAgg = {};
  sales.forEach((i) => (i.items || []).forEach((it) => {
    const m = matOf(it); const k = (m && m.sku) || it.sku || (it.name || "").trim(); if (!k) return;
    const a = matAgg[k] || (matAgg[k] = { name: (m && m.name) || it.name, sold: 0, unit: (m && m.unit) || it.unit || "", profit: 0 });
    a.sold += Number(it.qty) || 0; a.profit += (invIqd(i, it.price) - costOf(it)) * (Number(it.qty) || 0);
  }));
  const topMaterials = Object.values(matAgg).sort((a, b) => b.profit - a.profit).slice(0, 5);

  const gap = isMobile ? "var(--space-4)" : "var(--space-6)";
  return (
    <div style={{ padding: isMobile ? "var(--space-4)" : "var(--space-8)", display: "flex", flexDirection: "column", gap }}>
      {/* فلتر الفترة */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        <span style={{ fontSize: 13, color: "var(--text-muted)", fontWeight: 600 }}>الفترة</span>
        <div className="bny-unit-toggle" role="group" aria-label="فترة التقرير">
          <button type="button" aria-pressed={period === "all"} onClick={() => setPeriod("all")}>الكل</button>
          <button type="button" aria-pressed={period === "year"} onClick={() => setPeriod("year")}>السنة</button>
          <button type="button" aria-pressed={period === "month"} onClick={() => setPeriod("month")}>الشهر</button>
        </div>
        <span style={{ fontSize: 11.5, color: "var(--text-faint)" }}>({invCount} فاتورة · الدولار محوَّل بسعر {usdRate.toLocaleString("en-US")})</span>
      </div>

      {/* مؤشرات رئيسية */}
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4,1fr)", gap: isMobile ? "var(--space-3)" : "var(--space-5)" }}>
        <Kpi icon={<I.chart size={18} />} tone="brand" label={"المبيعات · " + periodLabel} value={fmt(totalSales)} unit="د.ع" />
        <Kpi icon={<I.wallet size={18} />} tone="success" label="صافي الربح التقديري" value={fmt(totalProfit)} unit="د.ع" sub={"هامش " + margin + "%"} />
        <Kpi icon={<I.invoice size={18} />} tone="amber" label="عدد الفواتير" value={fmt(invCount)} sub={"متوسط " + abbr(avg) + " د.ع"} />
        <Kpi icon={<I.users size={18} />} tone="danger" label="إجمالي الديون" value={fmt(totalDebts)} unit="د.ع" />
      </div>

      {/* الاتجاه الشهري — مخطط أعمدة بسيط */}
      <Card title="المبيعات والأرباح — آخر ٦ أشهر">
        {trendHasData ? (
          <window.BnyBars isMobile={isMobile} groups={trend}
            series={[{ key: "sales", name: "المبيعات", color: "var(--brand)" }, { key: "profit", name: "صافي الربح", color: "var(--amber-500)" }]}
            valueLabel={(g) => abbr(g.values.sales)} />
        ) : (
          <div style={{ padding: "36px 0", textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>لا مبيعات في آخر ٦ أشهر بعد</div>
        )}
      </Card>

      {/* الفئات + أعلى العملاء */}
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap }}>
        <Card title={"المبيعات حسب الفئة · " + periodLabel}>
          {categories.length === 0 && <Empty />}
          {categories.map((c) => (
            <div key={c.name} style={{ marginBottom: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 6 }}>
                <span style={{ color: "var(--text-body)", fontWeight: 500 }}>{c.name}</span>
                <span style={{ fontFamily: "var(--font-mono)", color: "var(--text-muted)" }}>{abbr(c.val)} · {c.pct}%</span>
              </div>
              <div style={{ height: 9, background: "var(--surface-sunken)", borderRadius: 99, overflow: "hidden" }}>
                <div style={{ width: c.pct + "%", height: "100%", background: c.color, borderRadius: 99, transition: "width .4s" }} />
              </div>
            </div>
          ))}
        </Card>

        <Card title={"العملاء الأكثر شراءً · " + periodLabel}>
          {topCustomers.length === 0 && <Empty />}
          {(() => { const max = Math.max(1, ...topCustomers.map((x) => x.total)); return topCustomers.map((it, i) => (
            <RankRow key={it.name + i} rank={i + 1} name={it.name} sub={it.orders + " فاتورة"} value={<Money value={it.total} unit="د.ع" />} pct={Math.round(it.total / max * 100)} color="var(--blue-400)" />
          )); })()}
        </Card>
      </div>

      {/* أعلى المواد ربحًا */}
      <Card title={"المواد الأكثر ربحًا · " + periodLabel}>
        {topMaterials.length === 0 ? <Empty /> : (() => { const max = Math.max(1, ...topMaterials.map((x) => x.profit)); return topMaterials.map((it, i) => (
          <RankRow key={it.name + i} rank={i + 1} name={it.name} sub={fmt(it.sold) + " " + it.unit + " مُباعة"} value={<Money value={it.profit} unit="د.ع" tone="credit" />} pct={Math.round(it.profit / max * 100)} color="var(--success)" />
        )); })()}
      </Card>
    </div>
  );
}

/* بطاقة مؤشر مبسّطة بأيقونة ملوّنة */
function Kpi({ icon, tone, label, value, unit, sub }) {
  const bg = { brand: "var(--brand-soft)", success: "var(--success-soft, #e6f7ef)", amber: "var(--amber-soft, #fdf2d9)", danger: "var(--danger-soft)" }[tone] || "var(--surface-sunken)";
  const fg = { brand: "var(--brand-strong)", success: "var(--success)", amber: "var(--amber-600, #b8790a)", danger: "var(--danger)" }[tone] || "var(--text-muted)";
  return (
    <div className="bny-card" style={{ padding: "14px 16px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: "var(--radius-md)", background: bg, color: fg, flex: "none" }}>{icon}</span>
        <span style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.3 }}>{label}</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 5 }}>
        <span style={{ fontSize: 21, fontWeight: 700, color: "var(--text-strong)", fontFamily: "var(--font-mono)" }}>{value}</span>
        {unit && <span style={{ fontSize: 12, color: "var(--text-muted)" }}>{unit}</span>}
      </div>
      {sub && <div style={{ fontSize: 11.5, color: "var(--text-muted)", marginTop: 3 }}>{sub}</div>}
    </div>
  );
}

function Empty() { return <div style={{ padding: "20px 0", textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>لا بيانات في هذه الفترة</div>; }

function RankRow({ rank, name, sub, value, pct, color }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: "50%", background: rank <= 3 ? "var(--brand-soft)" : "var(--surface-sunken)", color: rank <= 3 ? "var(--brand-strong)" : "var(--text-muted)", fontSize: 12, fontWeight: 700, fontFamily: "var(--font-mono)", flex: "none" }}>{rank}</span>
        <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600, color: "var(--text-strong)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</span>
        <span style={{ fontWeight: 700 }}>{value}</span>
      </div>
      <div style={{ marginInlineStart: 30 }}>
        {sub && <div style={{ fontSize: 11, color: "var(--text-muted)", marginBottom: 5, fontFamily: "var(--font-mono)" }}>{sub}</div>}
        <div style={{ height: 8, background: "var(--surface-sunken)", borderRadius: 99, overflow: "hidden" }}>
          <div style={{ width: pct + "%", height: "100%", background: color, borderRadius: 99, transition: "width .4s" }} />
        </div>
      </div>
    </div>
  );
}
window.ReportsScreen = ReportsScreen;
