/* Bonyan ERP — Pricing manager (إدخال يدوي لسعر كل مادة تحت كل نوع تسعير)
   لا نسب مئوية ولا قيم تُطبّق على الجميع — كل خانة سعر مستقل قابل للتحرير.
   التغييرات تنعكس على القائمة المنسدلة وأسعار الفاتورة. */
function PricingScreen() {
  const I = window.BnyIcon;
  const D = window.BnyData;
  const { Card, Button, Badge, Input } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();

  const [types, setTypes] = React.useState(() => D.priceTypes.map((t) => ({ ...t })));
  const [cur, setCur] = React.useState("iqd");
  const [prices, setPrices] = React.useState(() => {
    const o = {};
    D.materials.forEach((m) => { o[m.sku] = { iqd: { ...(m.prices || {}) }, usd: { ...(m.pricesUsd || {}) } }; });
    return o;
  });

  // إبقاء البيانات متاحة لباقي البرنامج (الفاتورة)
  React.useEffect(() => {
    D.materials.forEach((m) => { const p = prices[m.sku]; if (p) { m.prices = { ...p.iqd }; m.pricesUsd = { ...p.usd }; } });
    D.priceTypes = types.map((t) => ({ ...t }));
  }, [prices, types]);

  // الوضع المباشر: احفظ التسعير في Supabase بعد توقف التعديل (debounce)
  const priceSaved = React.useRef(false);
  React.useEffect(() => {
    if (!window.BnyConfigured || !window.BnyDB || !window.BnyDB.savePricing) return;
    if (!priceSaved.current) { priceSaved.current = true; return; }
    const t = setTimeout(() => {
      window.BnyDB.savePricing(D.materials, types).catch((e) => console.warn("بُنيان: فشل حفظ التسعير", e));
    }, 800);
    return () => clearTimeout(t);
  }, [prices, types]);

  const sym = window.BnyCur(cur);
  const fmt = (n) => (n === "" || n == null) ? "" : Number(n).toLocaleString("en-US");
  const cell = (sku, tid) => { const p = prices[sku]; return p && p[cur] ? p[cur][tid] : undefined; };
  const setCell = (sku, tid, raw) => {
    const v = raw === "" ? 0 : Number(raw);
    setPrices((p) => ({ ...p, [sku]: { ...p[sku], [cur]: { ...p[sku][cur], [tid]: Number.isNaN(v) ? 0 : v } } }));
  };
  const addType = () => {
    const id = "t" + Date.now();
    setTypes((ts) => [...ts, { id, name: "نوع جديد" }]);
    setPrices((p) => {
      const np = { ...p };
      D.materials.forEach((m) => { const c = np[m.sku]; np[m.sku] = { iqd: { ...c.iqd, [id]: c.iqd.main || 0 }, usd: { ...c.usd, [id]: c.usd.main || 0 } }; });
      return np;
    });
  };
  const renameType = (id, name) => setTypes((ts) => ts.map((t) => (t.id === id ? { ...t, name } : t)));
  const removeType = (id) => setTypes((ts) => ts.filter((t) => t.id !== id));

  const priceInput = (sku, tid, w) => (cur === "usd"
    ? <input className="bny-input bny-input--numeric" type="number" min="0" step="0.5" value={cell(sku, tid) == null ? "" : cell(sku, tid)} onChange={(e) => setCell(sku, tid, e.target.value)} style={{ height: 36, width: w, fontSize: 13, padding: "0 8px" }} />
    : <input className="bny-input bny-input--numeric" type="text" inputMode="numeric" value={fmt(cell(sku, tid))} onChange={(e) => setCell(sku, tid, e.target.value.replace(/[^\d]/g, ""))} style={{ height: 36, width: w, fontSize: 13, padding: "0 8px" }} />
  );

  return (
    <div style={{ padding: isMobile ? "var(--space-4)" : "var(--space-8)", display: "flex", flexDirection: "column", gap: isMobile ? "var(--space-4)" : "var(--space-7)" }}>
      <Card title="أنواع التسعير" actions={<Button size="sm" icon={<I.plus size={16} />} onClick={addType}>إضافة نوع</Button>}>
        <p style={{ color: "var(--text-muted)", fontSize: 13, marginBottom: 14 }}>
          سعر كل مادة يُدخَل يدويًا تحت كل نوع — قيم مستقلة تمامًا (ليست نسبًا). بدّل العملة لإدخال أسعار الدولار. اسم النوع لا يظهر في الفاتورة المطبوعة.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
          <span style={{ fontSize: 13, color: "var(--text-muted)" }}>عملة الإدخال</span>
          <div className="bny-unit-toggle" role="group" aria-label="عملة الإدخال">
            <button type="button" aria-pressed={cur === "iqd"} onClick={() => setCur("iqd")}>د.ع</button>
            <button type="button" aria-pressed={cur === "usd"} onClick={() => setCur("usd")}>دولار</button>
          </div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {types.map((t) => (
            <div key={t.id} style={{ display: "flex", alignItems: "center", gap: 6, background: "var(--surface-sunken)", borderRadius: "var(--radius-md)", padding: "6px 8px" }}>
              <div style={{ width: 150 }}><Input value={t.name} onChange={(e) => renameType(t.id, e.target.value)} /></div>
              {t.id === "main"
                ? <Badge tone="warning">أساسي</Badge>
                : <button className="bny-iconbtn bny-iconbtn--sm" aria-label="حذف النوع" onClick={() => removeType(t.id)} style={{ color: "var(--text-muted)" }}><I.trash size={16} /></button>}
            </div>
          ))}
        </div>
      </Card>

      <Card title={`أسعار المواد حسب النوع (${sym})`}>
        {isMobile ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {D.materials.map((m) => (
              <div key={m.sku} style={{ borderTop: "1px solid var(--border-subtle)", paddingTop: 12 }}>
                <div style={{ fontWeight: 600, color: "var(--text-strong)", fontSize: 14, marginBottom: 10 }}>{m.name} <span style={{ color: "var(--text-muted)", fontWeight: 400, fontSize: 12 }}>/ {m.unit}</span></div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {types.map((t) => (
                    <div key={t.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
                      <span style={{ fontSize: 13, color: "var(--text-body)" }}>{t.name}</span>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                        {priceInput(m.sku, t.id, 130)}
                        <span style={{ fontSize: 11, color: "var(--text-muted)" }}>{sym}</span>
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 280 + types.length * 150 }}>
              <thead>
                <tr style={{ color: "var(--text-muted)", fontSize: 12 }}>
                  <th style={{ textAlign: "start", fontWeight: 600, padding: "0 0 12px", position: "sticky", insetInlineStart: 0, background: "var(--surface-card)" }}>المادة</th>
                  {types.map((t) => <th key={t.id} style={{ textAlign: "start", fontWeight: 600, padding: "0 12px 12px 0" }}>{t.name}</th>)}
                </tr>
              </thead>
              <tbody>
                {D.materials.map((m) => (
                  <tr key={m.sku} style={{ borderTop: "1px solid var(--border-subtle)" }}>
                    <td style={{ padding: "12px 0", fontSize: 14, fontWeight: 600, color: "var(--text-strong)", whiteSpace: "nowrap", position: "sticky", insetInlineStart: 0, background: "var(--surface-card)" }}>{m.name} <span style={{ color: "var(--text-muted)", fontWeight: 400, fontSize: 12 }}>/ {m.unit}</span></td>
                    {types.map((t) => (
                      <td key={t.id} style={{ padding: "12px 12px 12px 0" }}>{priceInput(m.sku, t.id, 120)}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Card>
    </div>
  );
}
window.PricingScreen = PricingScreen;