/* Bonyan ERP — إدارة المخازن: قوائم المخازن والفئات المُدارة
   - إضافة/تعديل/حذف مخزن أو فئة (الحذف ممنوع إن كانت مستخدمة في مواد).
   - إعادة التسمية تنعكس تلقائيًا على كل المواد المرتبطة (محليًا وفي القاعدة). */
function WarehousesScreen({ user }) {
  const I = window.BnyIcon;
  const D = window.BnyData;
  const { Card, Button, Input, Badge } = window.BonyanDesignSystem_ad3ca0;
  const isMobile = window.useBnyMobile();
  const [, forceRender] = React.useReducer((x) => x + 1, 0);
  const canEdit = window.BnyCan(user, "inventory_edit");

  if (!canEdit) {
    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>
    );
  }

  return (
    <div style={{ padding: isMobile ? "var(--space-5)" : "var(--space-8)", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: "var(--space-7)", alignItems: "start" }}>
      <ManagedList
        title="المخازن" icon={<I.building size={18} />}
        items={D.warehouses || []}
        countOf={(w) => window.BnyOps.countMaterialsIn("wh", w.name)}
        countLabel={(n) => n + " مادة"}
        placeholder="اسم مخزن جديد (مثال: فرع الجديدة)"
        onAdd={async (name) => { await window.BnyOps.addWarehouse(name); forceRender(); }}
        onRename={async (item, name) => { await window.BnyOps.renameWarehouse(item, name); forceRender(); }}
        onDelete={async (item) => { await window.BnyOps.deleteWarehouse(item); forceRender(); }}
        hint="إعادة تسمية المخزن تُحدِّث كل المواد المرتبطة به تلقائيًا. لا يمكن حذف مخزن فيه مواد — انقلها أولًا من شاشة المواد."
      />
      <ManagedList
        title="الفئات" icon={<I.filter size={18} />}
        items={D.categories || []}
        countOf={(c) => window.BnyOps.countMaterialsIn("cat", c.name)}
        countLabel={(n) => n + " مادة"}
        placeholder="اسم فئة جديدة (مثال: عوازل)"
        onAdd={async (name) => { await window.BnyOps.addCategory(name); forceRender(); }}
        onRename={async (item, name) => { await window.BnyOps.renameCategory(item, name); forceRender(); }}
        onDelete={async (item) => { await window.BnyOps.deleteCategory(item); forceRender(); }}
        hint="الفئة إلزامية عند إضافة أي مادة. إعادة التسمية تُحدِّث المواد المرتبطة، ولا يمكن حذف فئة مستخدمة."
      />
    </div>
  );
}

/* قائمة مُدارة عامة: إضافة + تعديل inline + حذف مع منع الاستخدام */
function ManagedList({ title, icon, items, countOf, countLabel, placeholder, onAdd, onRename, onDelete, hint }) {
  const I = window.BnyIcon;
  const { Card, Button, Input, Badge } = window.BonyanDesignSystem_ad3ca0;
  const [newName, setNewName] = React.useState("");
  const [editId, setEditId] = React.useState(null);
  const [editVal, setEditVal] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const flash = (m) => { setErr(m); setTimeout(() => setErr(""), 4000); };

  const run = async (fn) => {
    if (busy) return;
    setBusy(true);
    try { await fn(); setErr(""); }
    catch (e) { flash(String((e && e.message) || e)); }
    finally { setBusy(false); }
  };
  const add = () => run(async () => { await onAdd(newName); setNewName(""); });
  const saveEdit = (item) => run(async () => { await onRename(item, editVal); setEditId(null); });
  const del = (item) => run(async () => { await onDelete(item); });

  return (
    <Card title={title + " (" + items.length + ")"}>
      <p style={{ color: "var(--text-muted)", fontSize: 12, margin: "0 0 12px", lineHeight: 1.6 }}>{hint}</p>

      {/* إضافة */}
      <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
        <div style={{ flex: 1 }}>
          <Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder={placeholder}
            onKeyDown={(e) => { if (e.key === "Enter") add(); }} />
        </div>
        <Button variant="accent" icon={<I.plus size={15} />} onClick={add} disabled={!newName.trim() || busy}>إضافة</Button>
      </div>
      {err && <div style={{ padding: "8px 12px", background: "var(--danger-soft)", color: "var(--danger-text)", borderRadius: "var(--radius-md)", fontSize: 12.5, marginBottom: 6 }}>{err}</div>}

      {/* القائمة */}
      <div style={{ display: "flex", flexDirection: "column" }}>
        {items.map((item, i) => {
          const used = countOf(item);
          const editing = editId === item.id;
          return (
            <div key={item.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 0", borderTop: i > 0 || true ? "1px solid var(--border-subtle)" : "none" }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", color: "var(--brand)", flex: "none" }}>{icon}</span>
              {editing ? (
                <>
                  <div style={{ flex: 1 }}>
                    <input className="bny-input" value={editVal} onChange={(e) => setEditVal(e.target.value)} autoFocus
                      onKeyDown={(e) => { if (e.key === "Enter") saveEdit(item); if (e.key === "Escape") setEditId(null); }}
                      style={{ width: "100%", height: 38 }} aria-label="الاسم الجديد" />
                  </div>
                  <button className="bny-iconbtn bny-iconbtn--sm" title="حفظ" onClick={() => saveEdit(item)} style={{ color: "var(--success)" }}><I.check size={16} /></button>
                  <button className="bny-iconbtn bny-iconbtn--sm" title="إلغاء" onClick={() => setEditId(null)} style={{ color: "var(--text-muted)" }}><I.x size={16} /></button>
                </>
              ) : (
                <>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: "var(--text-strong)" }}>{item.name}</div>
                    <div style={{ fontSize: 11.5, color: used > 0 ? "var(--text-muted)" : "var(--text-faint)" }}>{countLabel(used)}</div>
                  </div>
                  <button className="bny-iconbtn bny-iconbtn--sm" title="تعديل الاسم" onClick={() => { setEditId(item.id); setEditVal(item.name); }} style={{ color: "var(--text-muted)" }}><I.settings size={15} /></button>
                  <button className="bny-iconbtn bny-iconbtn--sm" title={used > 0 ? "لا يمكن الحذف — مستخدمة في مواد" : "حذف"} onClick={() => del(item)}
                    disabled={used > 0} style={{ color: used > 0 ? "var(--text-faint)" : "var(--danger)", cursor: used > 0 ? "not-allowed" : "pointer" }}><I.trash size={15} /></button>
                </>
              )}
            </div>
          );
        })}
        {items.length === 0 && <div style={{ padding: "20px 0", textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>لا عناصر بعد — أضف أول عنصر.</div>}
      </div>
    </Card>
  );
}
window.WarehousesScreen = WarehousesScreen;