/* Bonyan ERP — تخصيص الفاتورة وهوية المحل (اسم، هاتف، عنوان، شعار) + معاينة */
function SettingsScreen({ user }) {
  const D = window.BnyData;
  const I = window.BnyIcon;
  const { Card, Button, Input } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();
  const [shop, setShop] = React.useState(() => ({ ...D.shop }));
  const [numbering, setNumbering] = React.useState(() => ({
    sale: { ...(D.numbering && D.numbering.sale) },
    purchase: { ...(D.numbering && D.numbering.purchase) },
  }));

  React.useEffect(() => { window.BnyData.shop = { ...shop }; }, [shop]);
  React.useEffect(() => { window.BnyData.numbering = { sale: { ...numbering.sale }, purchase: { ...numbering.purchase } }; }, [numbering]);

  // الوضع المباشر: احفظ هوية المحل في Supabase بعد توقف التعديل (debounce).
  const shopSaved = React.useRef(false);
  React.useEffect(() => {
    if (!window.BnyConfigured || !window.BnyDB || !window.BnyDB.saveShop) return;
    if (!shopSaved.current) { shopSaved.current = true; return; } // تجاهل أول تشغيل (قيمة محمّلة)
    const t = setTimeout(() => {
      window.BnyDB.saveShop(shop).catch((e) => console.warn("بُنيان: فشل حفظ هوية المحل", e));
    }, 800);
    return () => clearTimeout(t);
  }, [shop]);

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

  if (!window.BnyCan(user, "invoice_settings")) {
    return (
      <div style={{ padding: "var(--space-8)" }}>
        <div className="bny-card" style={{ padding: 48, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 64, height: 64, borderRadius: "var(--radius-lg)", background: "var(--danger-soft)", color: "var(--danger)" }}><I.alert size={32} /></span>
          <h2 style={{ fontSize: 20, margin: 0 }}>لا تملك صلاحية الوصول</h2>
          <p style={{ color: "var(--text-muted)", margin: 0 }}>تخصيص الفاتورة متاح لمن يملك صلاحية «تخصيص الفاتورة وهوية المحل».</p>
        </div>
      </div>
    );
  }

  const set = (k, v) => setShop((s) => ({ ...s, [k]: v }));
  const onLogo = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    const r = new FileReader();
    r.onload = () => set("logo", r.result);
    r.readAsDataURL(f);
  };
  const lbl = { fontSize: 12, fontWeight: 500, color: "var(--text-strong)", display: "block", marginBottom: 5 };
  const setN = (type, k, v) => setNumbering((n) => ({ ...n, [type]: { ...n[type], [k]: v } }));

  // كتلة تسلسل لنوع (بيع/شراء) — دالة تُرجع JSX (ليست مكوّنًا) حتى لا تفقد الحقول تركيزها
  const seqBlock = (type, title) => {
    const cfg = numbering[type] || {};
    const reached = window.BnySeqReached(type);
    const nextVal = Number(cfg.next) || 0;
    return (
      <div style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", padding: 16, background: "var(--surface-sunken)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
          <span style={{ display: "inline-flex", color: "var(--brand)" }}><I.invoice size={18} /></span>
          <span style={{ fontWeight: 700, color: "var(--text-strong)" }}>{title}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "5px 0" }}>
          <span style={{ color: "var(--text-muted)" }}>وصل التسلسل إلى</span>
          <b style={{ fontFamily: "var(--font-mono)" }}>{reached != null ? `${cfg.prefix || ""}${reached}` : "—"}</b>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "5px 0", borderBottom: "1px dashed var(--border-strong)", marginBottom: 12 }}>
          <span style={{ color: "var(--text-muted)" }}>الرقم التالي الذي سيستخدمه النظام</span>
          <b style={{ fontFamily: "var(--font-mono)", color: "var(--brand-strong)" }}>{`${cfg.prefix || ""}${nextVal}`}</b>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <div style={{ width: 120 }}>
            <label style={lbl}>بادئة الرقم</label>
            <Input value={cfg.prefix || ""} onChange={(e) => setN(type, "prefix", e.target.value)} placeholder="بدون" style={{ fontFamily: "var(--font-mono)" }} />
          </div>
          <div style={{ flex: 1, minWidth: 150 }}>
            <label style={lbl}>ابدأ الترقيم من</label>
            <Input numeric type="number" min="1" value={cfg.next} onChange={(e) => setN(type, "next", e.target.value)} />
          </div>
        </div>
        <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 10 }}>
          الفاتورة القادمة ستحمل الرقم: <b style={{ fontFamily: "var(--font-mono)", color: "var(--text-strong)" }}>{`${cfg.prefix || ""}${nextVal}`}</b>
        </div>
      </div>
    );
  };

  return (
    <div style={{ padding: isMobile ? "var(--space-4)" : "var(--space-8)", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? "var(--space-4)" : "var(--space-7)", alignItems: "start" }}>
      {/* form */}
      <Card title="هوية المحل والفاتورة">
        <p style={{ color: "var(--text-muted)", fontSize: 13, marginTop: 0, marginBottom: 16 }}>
          تظهر هذه البيانات في رأس وأسفل الفاتورة المطبوعة (A4 والحراري). أضف شعار المحل واسمه ورقم الهاتف والعنوان لتبدو فواتيرك احترافية.
        </p>

        <label style={lbl}>شعار / صورة المحل</label>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
          <div style={{ width: 72, height: 72, borderRadius: "var(--radius-md)", border: "1px dashed var(--border-strong)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", background: "var(--surface-sunken)", flex: "none" }}>
            {shop.logo ? <img src={shop.logo} alt="الشعار" style={{ width: "100%", height: "100%", objectFit: "contain" }} /> : <I.printer size={26} />}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <label className="bny-btn bny-btn--secondary bny-btn--sm" style={{ cursor: "pointer" }}>
              <I.plus size={16} /> اختيار صورة
              <input type="file" accept="image/*" onChange={onLogo} style={{ display: "none" }} />
            </label>
            {shop.logo && <button className="bny-btn bny-btn--ghost bny-btn--sm" onClick={() => set("logo", "")} style={{ color: "var(--danger)" }}>إزالة الصورة</button>}
          </div>
        </div>

        <div style={{ marginBottom: 14 }}>
          <label style={lbl}>اسم المحل</label>
          <Input value={shop.name} onChange={(e) => set("name", e.target.value)} placeholder="اسم المحل" />
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
          <div style={{ flex: 1, minWidth: 150 }}>
            <label style={lbl}>رقم الهاتف</label>
            <Input value={shop.phone} onChange={(e) => set("phone", e.target.value)} placeholder="07XXXXXXXXX" icon={<I.phone size={16} />} />
          </div>
        </div>
        <div style={{ marginBottom: 14 }}>
          <label style={lbl}>العنوان</label>
          <Input value={shop.address} onChange={(e) => set("address", e.target.value)} placeholder="المدينة — الشارع / المنطقة" />
        </div>
        <div>
          <label style={lbl}>ملاحظة أسفل الفاتورة</label>
          <Input value={shop.footer} onChange={(e) => set("footer", e.target.value)} placeholder="مثال: شكراً لتعاملكم معنا" />
        </div>
      </Card>

      {/* live preview */}
      <Card title="معاينة الفاتورة">
        {/* معاينة ورقية: ألوان ثابتة (لا تتبع السمة) لتبقى مقروءة في الوضعين الفاتح والداكن */}
        <div style={{ border: "1px solid #e5e3df", borderRadius: "var(--radius-md)", background: "#fff", color: "#333", padding: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12, borderBottom: "2px solid #0B2A47", paddingBottom: 14, marginBottom: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
              {shop.logo
                ? <img src={shop.logo} alt="" style={{ width: 50, height: 50, objectFit: "contain", borderRadius: 6, flex: "none" }} />
                : <img src="../../assets/logo/bonyan-mark.svg" alt="" style={{ width: 46, height: 46, flex: "none", opacity: 0.85 }} />}
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 20, fontWeight: 700, color: "#0B2A47", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{shop.name || "اسم المحل"}</div>
                {shop.address && <div style={{ fontSize: 11.5, color: "#666" }}>{shop.address}</div>}
                {shop.phone && <div style={{ fontSize: 11.5, color: "#666", fontFamily: "var(--font-mono)" }}>هاتف: {shop.phone}</div>}
              </div>
            </div>
            <div style={{ textAlign: "end", fontFamily: "var(--font-mono)", fontSize: 12, color: "#666", flex: "none" }}>
              <div style={{ color: "#0B2A47", fontWeight: 700 }}>فاتورة بيع #10429</div>
              <div>التاريخ: ٢٢/٠٦/٢٠٢٥</div>
            </div>
          </div>
          <div style={{ fontSize: 12.5, color: "#333", marginBottom: 10 }}><span style={{ color: "#666" }}>العميل: </span>أحمد المقاول</div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, color: "#333" }}>
            <thead><tr style={{ background: "#f0efec" }}>
              <th style={{ textAlign: "start", padding: "6px 8px", fontWeight: 600 }}>المادة</th>
              <th style={{ textAlign: "center", padding: "6px 8px", fontWeight: 600 }}>الكمية</th>
              <th style={{ textAlign: "end", padding: "6px 8px", fontWeight: 600 }}>المجموع</th>
            </tr></thead>
            <tbody>
              <tr style={{ borderBottom: "1px solid #e5e3df" }}><td style={{ padding: "6px 8px" }}>حديد تسليح ١٢ ملم</td><td style={{ padding: "6px 8px", textAlign: "center", fontFamily: "var(--font-mono)" }}>1</td><td style={{ padding: "6px 8px", textAlign: "end", fontFamily: "var(--font-mono)" }}>1,250,000 د.ع</td></tr>
              <tr style={{ borderBottom: "1px solid #e5e3df" }}><td style={{ padding: "6px 8px" }}>إسمنت مقاوم للأملاح</td><td style={{ padding: "6px 8px", textAlign: "center", fontFamily: "var(--font-mono)" }}>40</td><td style={{ padding: "6px 8px", textAlign: "end", fontFamily: "var(--font-mono)" }}>340,000 د.ع</td></tr>
            </tbody>
          </table>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12, paddingTop: 8, borderTop: "2px solid #0B2A47", fontWeight: 700, fontSize: 14, color: "#0B2A47" }}>
            <span>الإجمالي</span><span style={{ fontFamily: "var(--font-mono)" }}>1,590,000 د.ع</span>
          </div>
          <div style={{ marginTop: 16, fontSize: 11, color: "#666", textAlign: "center" }}>{shop.footer || ""}</div>
        </div>
        <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 10, textAlign: "center" }}>هكذا ستظهر الفاتورة عند الطباعة (نسخة البيع).</div>
      </Card>

      {/* تسلسل أرقام الفواتير — للمبيعات والمشتريات */}
      <Card title="تسلسل أرقام الفواتير" style={{ gridColumn: isMobile ? "auto" : "1 / -1" }}>
        <p style={{ color: "var(--text-muted)", fontSize: 13, marginTop: 0, marginBottom: 16 }}>
          راقب إلى أين وصل ترقيم الفواتير، وحدّد الرقم الذي يبدأ منه النظام. لكل من المبيعات والمشتريات تسلسل مستقل.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 16 }}>
          {seqBlock("sale", "فواتير البيع (المبيعات)")}
          {seqBlock("purchase", "فواتير الشراء (الموردون)")}
        </div>
      </Card>
    </div>
  );
}
window.SettingsScreen = SettingsScreen;