// screens-ops.jsx — Alerts, Notifications, Report Builder, Schedule

// ─── Alerts / Debts ──────────────────────────────────────────────────
function Alerts({ lang }) {
  const isAr = lang === "ar";
  const items = [
    { id: 1, level: "critical", title: isAr ? "حساب موقوف — Zalma Snap Stories" : "Account suspended — Zalma Snap Stories", platform: "snap", debt: 820, cur: "USD", at: isAr ? "منذ ساعتين" : "2h ago", channels: ["mail","send","phone"], desc: isAr ? "تم إيقاف بث الإعلانات. السداد يستعيد الحساب فوراً." : "Ad delivery paused. Payment restores the account instantly." },
    { id: 2, level: "warn",     title: isAr ? "مديونية متأخرة — Zalma Brand Search" : "Outstanding balance — Zalma Brand Search", platform: "google", debt: 1240, cur: "USD", at: isAr ? "منذ ٤ ساعات" : "4h ago", channels: ["mail","send"], desc: isAr ? "الدفع خلال ٤٨ ساعة لتفادي الإيقاف." : "Pay within 48h to avoid suspension." },
    { id: 3, level: "info",     title: isAr ? "بطاقة الدفع منتهية الصلاحية" : "Payment card expiring", platform: "meta", debt: 0, cur: "", at: isAr ? "منذ يوم" : "1d ago", channels: ["mail"], desc: isAr ? "بطاقة •••• 4421 تنتهي خلال ١٢ يوم." : "Card •••• 4421 expires in 12 days." },
  ];
  const colorOf = { critical: "danger", warn: "warn", info: "info" };
  const labelOf = (lv) => isAr ? ({ critical: "حرج", warn: "تنبيه", info: "للعلم" })[lv] : lv;
  const iconMap = { mail: "mail", send: "send", phone: "phone" };

  return (
    <div className="page">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: isAr ? "تنبيهات حرجة" : "Critical", v: "1", c: "danger" },
          { l: isAr ? "مديونيات نشطة" : "Active debts", v: "$2,060", c: "warn" },
          { l: isAr ? "تم حلها هذا الأسبوع" : "Resolved this week", v: "7", c: "success" },
        ].map((k, i) => (
          <div key={i} className="kpi" style={{ borderInlineStart: `3px solid var(--${k.c})` }}>
            <div className="kpi-label">{k.l}</div>
            <div className="kpi-value num" style={{ color: `var(--${k.c})` }}>{k.v}</div>
          </div>
        ))}
      </div>

      <div className="row" style={{ marginBottom: 12 }}>
        <h3 style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>{isAr ? "تنبيهات نشطة" : "Active alerts"}</h3>
        <div className="seg" style={{ marginInlineStart: "auto" }}>
          <button aria-pressed="true">{isAr ? "الكل" : "All"}</button>
          <button>{isAr ? "حرجة" : "Critical"}</button>
          <button>{isAr ? "محلولة" : "Resolved"}</button>
        </div>
      </div>

      <div className="col gap-sm">
        {items.map(a => (
          <div key={a.id} className="card" style={{ padding: 18, borderInlineStart: `3px solid var(--${colorOf[a.level]})` }}>
            <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: `var(--${colorOf[a.level]}-soft)`, color: `var(--${colorOf[a.level]})`, display: "grid", placeItems: "center", flex: "none" }}>
                <Icon.alert size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="row gap-sm">
                  <Plat kind={a.platform} size={18} />
                  <span className={`chip chip-${colorOf[a.level]}`} style={{ textTransform: "uppercase" }}>{labelOf(a.level)}</span>
                  <span style={{ fontSize: 11.5, color: "var(--muted)" }}>{a.at}</span>
                </div>
                <div style={{ fontWeight: 600, marginTop: 6, fontSize: 14.5 }}>{a.title}</div>
                <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 4 }}>{a.desc}</div>
                <div className="row" style={{ marginTop: 12, gap: 8 }}>
                  {a.debt > 0 && <button className="btn btn-danger btn-sm">{isAr ? "ادفع " : "Pay "} {a.cur} {fmtN(a.debt)}</button>}
                  <button className="btn btn-sm"><Icon.eye size={12} /> {isAr ? "تفاصيل" : "Details"}</button>
                  <button className="btn btn-sm">{isAr ? "ذكرني" : "Snooze"}</button>
                  <div className="row gap-sm" style={{ marginInlineStart: "auto", color: "var(--muted)", fontSize: 11.5 }}>
                    {isAr ? "تم الإرسال إلى" : "Delivered via"}
                    {a.channels.map((c, i) => React.createElement(Icon[iconMap[c]], { key: i, size: 13 }))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <h3 style={{ fontSize: 14, fontWeight: 600, margin: "26px 0 10px" }}>{isAr ? "تنبيهات استباقية" : "Proactive guards"}</h3>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
        {[
          { t: isAr ? "ROAS أقل من ٢×" : "ROAS below 2×", on: true },
          { t: isAr ? "إنفاق > ٨٠٪ من الحد" : "Spend > 80% of cap", on: true },
          { t: isAr ? "بطاقة قرب الانتهاء" : "Card near expiry", on: false },
        ].map((g, i) => (
          <div key={i} className="card" style={{ padding: 14, display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--surface-2)", display: "grid", placeItems: "center" }}><Icon.shield size={14} /></div>
            <div style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>{g.t}</div>
            <button role="switch" aria-checked={g.on} className="switch"></button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Notification channels ───────────────────────────────────────────
function Notifications({ lang }) {
  const isAr = lang === "ar";
  const [active, setActive] = React.useState({ email: true, whatsapp: true, telegram: true });
  const channels = [
    { id: "email", icon: "mail", title: "Email", desc: isAr ? "ينفع للتقارير الأطول والملخصات." : "Best for long reports and summaries.", val: "mohamed@zalma.co", color: "info" },
    { id: "whatsapp", icon: "phone", title: "WhatsApp", desc: isAr ? "أسرع وصول — التنبيهات الحرجة." : "Fastest delivery — critical alerts.", val: "+20 100 ••• ••88", color: "success" },
    { id: "telegram", icon: "send", title: "Telegram", desc: isAr ? "تقارير غنية مع رسوم بيانية." : "Rich reports with charts.", val: "@mohamed_omari · @ZalmaTeam", color: "info" },
  ];
  return (
    <div className="page">
      <div className="col gap-sm">
        {channels.map(c => (
          <div key={c.id} className="card" style={{ padding: 0, overflow: "hidden" }}>
            <div className="row" style={{ padding: 18, gap: 14 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: `var(--${c.color}-soft)`, color: `var(--${c.color})`, display: "grid", placeItems: "center" }}>
                {React.createElement(Icon[c.icon], { size: 20 })}
              </div>
              <div style={{ flex: 1 }}>
                <div className="row gap-sm">
                  <span style={{ fontWeight: 600 }}>{c.title}</span>
                  {active[c.id] ? <span className="chip chip-success chip-dot">{isAr ? "متصل" : "Connected"}</span> : <span className="chip">{isAr ? "غير متصل" : "Disconnected"}</span>}
                </div>
                <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 2 }}>{c.desc}</div>
                <div className="mono" style={{ fontSize: 12, marginTop: 6 }}>{c.val}</div>
              </div>
              <button role="switch" aria-checked={active[c.id]} className="switch" onClick={() => setActive({ ...active, [c.id]: !active[c.id] })}></button>
            </div>
            {active[c.id] && (
              <div style={{ background: "var(--surface-2)", padding: "14px 18px", borderTop: "1px solid var(--line)" }}>
                <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{isAr ? "أرسل عبر هذه القناة" : "Send via this channel"}</div>
                <div className="row" style={{ flexWrap: "wrap", gap: 16 }}>
                  {[
                    isAr ? "تنبيهات المديونيات" : "Debt alerts",
                    isAr ? "تنبيهات الإيقاف" : "Suspension alerts",
                    isAr ? "تقارير يومية" : "Daily reports",
                    isAr ? "تنبيهات أداء" : "Performance flags",
                    isAr ? "ملخص أسبوعي" : "Weekly digest",
                  ].map((opt, i) => (
                    <label key={i} className="row gap-sm" style={{ fontSize: 12.5 }}>
                      <input type="checkbox" defaultChecked={i < 3} style={{ accentColor: "var(--primary)" }} /> {opt}
                    </label>
                  ))}
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="card" style={{ marginTop: 16, padding: 18, background: "var(--primary-soft)", borderColor: "transparent", display: "flex", gap: 14, alignItems: "flex-start" }}>
        <Icon.shield size={20} />
        <div>
          <div style={{ fontWeight: 600 }}>{isAr ? "هدوء أوقات النوم" : "Quiet hours"}</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{isAr ? "لا تُرسل تنبيهات غير حرجة بين ١٢ ص و ٧ ص." : "Suppress non-critical alerts between 12 AM and 7 AM."}</div>
        </div>
        <button role="switch" aria-checked="true" className="switch" style={{ marginInlineStart: "auto" }}></button>
      </div>
    </div>
  );
}

// ─── Report Builder ──────────────────────────────────────────────────
function ReportBuilder({ lang }) {
  const isAr = lang === "ar";
  const groups = [
    { id: "core", title: isAr ? "أساسيات" : "Core metrics", items: [
      { id: "spend",  ar: "إجمالي المصروف",  en: "Total spend",     pin: true },
      { id: "sales",  ar: "قيمة المبيعات",   en: "Sales value",     pin: true },
      { id: "orders", ar: "عدد الطلبات",     en: "Orders",          pin: true },
      { id: "roas",   ar: "ROAS",            en: "ROAS",            pin: true },
      { id: "cpa",    ar: "تكلفة الطلب",     en: "Cost / order",    pin: true },
      { id: "ctr",    ar: "نسبة النقرات",    en: "CTR",             pin: false },
      { id: "cpm",    ar: "CPM",             en: "CPM",             pin: false },
    ]},
    { id: "high", title: isAr ? "أبرز الأحداث" : "Highlights", items: [
      { id: "best",  ar: "أفضل حملة",     en: "Best campaign",      pin: true },
      { id: "worst", ar: "أسوأ حملة",     en: "Worst campaign",     pin: false },
      { id: "newad", ar: "إعلانات جديدة بدأت", en: "New ads launched", pin: false },
    ]},
    { id: "comp", title: isAr ? "مقارنات" : "Comparisons", items: [
      { id: "vs_y", ar: "مقابل أمس",      en: "vs yesterday", pin: true },
      { id: "vs_w", ar: "مقابل أسبوع",    en: "vs last week", pin: false },
      { id: "vs_m", ar: "مقابل شهر",      en: "vs last month", pin: false },
    ]},
    { id: "ops", title: isAr ? "تشغيلية" : "Operations", items: [
      { id: "balance", ar: "أرصدة الحسابات", en: "Balances", pin: true },
      { id: "debts",   ar: "تنبيهات مديونيات", en: "Debt alerts", pin: true },
      { id: "rules",   ar: "قواعد فعّلت أمس", en: "Rules triggered", pin: false },
    ]},
  ];
  const [pinned, setPinned] = React.useState(() => {
    const s = new Set();
    groups.forEach(g => g.items.forEach(i => i.pin && s.add(i.id)));
    return s;
  });
  const toggle = (id) => {
    const s = new Set(pinned);
    s.has(id) ? s.delete(id) : s.add(id);
    setPinned(s);
  };

  return (
    <div className="page">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 460px", gap: 18 }}>
        {/* Left — picker */}
        <div>
          <div className="row" style={{ marginBottom: 12 }}>
            <h3 style={{ fontSize: 14, fontWeight: 600, margin: 0 }}>{isAr ? "اختر العناصر" : "Pick metrics"}</h3>
            <span className="chip" style={{ marginInlineStart: 8 }}>{pinned.size} {isAr ? "مختارة" : "selected"}</span>
            <button className="btn btn-sm" style={{ marginInlineStart: "auto" }}>{isAr ? "قوالب جاهزة" : "Templates"}</button>
          </div>
          {groups.map(g => (
            <div key={g.id} className="card" style={{ marginBottom: 12, padding: 14 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>{g.title}</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6 }}>
                {g.items.map(i => {
                  const on = pinned.has(i.id);
                  return (
                    <button key={i.id} onClick={() => toggle(i.id)} className="row" style={{
                      padding: "10px 12px", borderRadius: 10,
                      background: on ? "var(--primary-soft)" : "var(--surface-2)",
                      color: on ? "var(--primary)" : "var(--ink-2)",
                      border: 0, gap: 8, fontSize: 13, fontWeight: 500, textAlign: "start", cursor: "default",
                    }}>
                      <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${on ? "var(--primary)" : "var(--line-2)"}`, background: on ? "var(--primary)" : "transparent", color: "#fff", display: "grid", placeItems: "center", flex: "none" }}>
                        {on ? <Icon.check size={11} /> : null}
                      </div>
                      <span style={{ flex: 1 }}>{isAr ? i.ar : i.en}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        {/* Right — preview */}
        <div style={{ position: "sticky", top: 76, alignSelf: "flex-start" }}>
          <div className="card" style={{ padding: 0, background: "var(--ink)", color: "var(--bg)", borderColor: "transparent", overflow: "hidden" }}>
            <div className="row" style={{ padding: "12px 16px", borderBottom: "1px solid rgba(255,255,255,.1)", fontSize: 12, opacity: .7 }}>
              <Icon.send size={13} />
              <span>Telegram preview · 8:00 ص</span>
              <span style={{ marginInlineStart: "auto" }} className="mono">{new Date().toLocaleDateString("ar-EG")}</span>
            </div>
            <div style={{ padding: 18, fontFamily: "var(--font-ar)", lineHeight: 1.85, fontSize: 13.5, direction: "rtl" }}>
              <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>صباح الخير محمد ☀️</div>
              <div style={{ opacity: .75, marginBottom: 14 }}>تقرير أمس — الأربعاء ٨ مايو</div>

              {pinned.has("spend") && <div>• المصروف: <b className="num">٨٢٬٣٤٠ ج.م</b> {pinned.has("vs_y") && <span style={{ color: "#ff7d7d" }}>▼ ٤٪</span>}</div>}
              {pinned.has("sales") && <div>• قيمة المبيعات: <b className="num">٢٢١٬٩٠٠ ج.م</b> {pinned.has("vs_y") && <span style={{ color: "#7df0a4" }}>▲ ١١٪</span>}</div>}
              {pinned.has("orders") && <div>• الطلبات: <b className="num">٢٤٨</b> طلب {pinned.has("vs_y") && <span style={{ color: "#7df0a4" }}>▲ ٨٪</span>}</div>}
              {pinned.has("roas") && <div>• ROAS العام: <b className="num">٢٫٧×</b></div>}
              {pinned.has("cpa") && <div>• تكلفة الطلب: <b className="num">٣٣١ ج.م</b></div>}
              {pinned.has("ctr") && <div>• CTR: <b className="num">١٫٨٪</b></div>}

              {(pinned.has("best") || pinned.has("worst")) && <div style={{ height: 1, background: "rgba(255,255,255,.1)", margin: "12px 0" }} />}
              {pinned.has("best") && <div>🏆 أفضل حملة: <b>PMax — Catalog Spring</b> · ROAS <b className="num">٤٫٢×</b></div>}
              {pinned.has("worst") && <div>📉 أسوأ حملة: <b>Awareness — Reach</b> · ROAS <b className="num">١٫١×</b></div>}

              {(pinned.has("debts") || pinned.has("balance")) && <div style={{ height: 1, background: "rgba(255,255,255,.1)", margin: "12px 0" }} />}
              {pinned.has("debts") && <div style={{ color: "#ffd28a" }}>⚠️ مديونية: حساب Snap موقوف بمبلغ ٨٢٠$</div>}
              {pinned.has("balance") && <div>💳 أرصدة الحسابات الست: <b className="num">١٢٤٬٢٠٠ ج.م</b></div>}

              <div style={{ marginTop: 16, fontSize: 12, opacity: .7 }}>📎 PDF مرفق · مدة الإنشاء: ٢٫١ ث</div>
            </div>
          </div>
          <div className="row" style={{ marginTop: 10, gap: 8 }}>
            <button className="btn btn-sm" style={{ flex: 1 }}><Icon.send size={13} /> {isAr ? "أرسل تجريبي" : "Send test"}</button>
            <button className="btn btn-primary btn-sm" style={{ flex: 1 }}><Icon.check size={13} /> {isAr ? "حفظ القالب" : "Save template"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Schedule ────────────────────────────────────────────────────────
function Schedule({ lang }) {
  const isAr = lang === "ar";
  const [time, setTime] = React.useState("08:00");
  const [days, setDays] = React.useState(new Set([0,1,2,3,4]));
  const dayLabels = isAr ? ["س","ح","ن","ث","ر","خ","ج"] : ["Sat","Sun","Mon","Tue","Wed","Thu","Fri"];
  const toggle = (i) => { const s = new Set(days); s.has(i) ? s.delete(i) : s.add(i); setDays(s); };

  return (
    <div className="page">
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 18 }}>
        <div className="col">
          <div className="card">
            <div className="card-head"><h3 className="card-title">{isAr ? "موعد الإرسال" : "Send time"}</h3></div>
            <div className="row" style={{ gap: 14, alignItems: "center" }}>
              <input type="time" value={time} onChange={e => setTime(e.target.value)}
                     style={{ fontSize: 32, fontWeight: 600, fontFamily: "var(--font-mono)", border: "1px solid var(--line)", borderRadius: 12, padding: "10px 16px", background: "var(--surface)", color: "var(--ink)", width: 200 }} />
              <div>
                <div style={{ fontSize: 12, color: "var(--muted)" }}>{isAr ? "المنطقة الزمنية" : "Timezone"}</div>
                <div style={{ fontWeight: 500 }}>(GMT+3) {isAr ? "الرياض / القاهرة" : "Riyadh / Cairo"}</div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3 className="card-title">{isAr ? "أيام الأسبوع" : "Days of the week"}</h3></div>
            <div className="row" style={{ gap: 8 }}>
              {dayLabels.map((d, i) => (
                <button key={i} onClick={() => toggle(i)} style={{
                  width: 52, height: 52, borderRadius: 12, border: 0,
                  background: days.has(i) ? "var(--primary)" : "var(--surface-2)",
                  color: days.has(i) ? "var(--primary-ink)" : "var(--ink-2)",
                  fontWeight: 600, fontSize: 14, cursor: "default",
                  fontFamily: "var(--font-ar)",
                }}>{d}</button>
              ))}
            </div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 12 }}>
              {isAr ? `سيتم الإرسال ${days.size} مرات في الأسبوع، الساعة ${time}.` : `Sends ${days.size} times per week at ${time}.`}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3 className="card-title">{isAr ? "القنوات والمستلمون" : "Channels & recipients"}</h3></div>
            <div className="col gap-sm">
              {[
                { ch: "mail", name: "mohamed@zalma.co", on: true, type: "Email" },
                { ch: "send", name: "@mohamed_omari",   on: true, type: "Telegram" },
                { ch: "phone", name: "+20 100 ••• ••88", on: false, type: "WhatsApp" },
                { ch: "mail", name: "ceo@zalma.co",     on: true, type: "Email · CEO" },
              ].map((r, i) => (
                <div key={i} className="row" style={{ padding: "10px 12px", background: "var(--surface-2)", borderRadius: 10, gap: 10 }}>
                  {React.createElement(Icon[r.ch], { size: 14 })}
                  <div style={{ flex: 1 }}>
                    <div className="mono" style={{ fontSize: 13 }}>{r.name}</div>
                    <div style={{ fontSize: 11, color: "var(--muted)" }}>{r.type}</div>
                  </div>
                  <button role="switch" aria-checked={r.on} className="switch"></button>
                </div>
              ))}
              <button className="btn btn-sm" style={{ alignSelf: "flex-start", marginTop: 4 }}><Icon.add size={12} /> {isAr ? "أضف مستلم" : "Add recipient"}</button>
            </div>
          </div>
        </div>

        {/* Right — calendar preview */}
        <div className="col">
          <div className="card">
            <div className="card-head">
              <div>
                <h3 className="card-title">{isAr ? "أيار / مايو ٢٠٢٦" : "May 2026"}</h3>
                <div className="card-sub">{isAr ? "نقاط زرقاء = أيام إرسال" : "Blue dots = send days"}</div>
              </div>
              <div className="row gap-sm"><button className="btn btn-sm btn-ghost"><Icon.arrowL size={12} /></button><button className="btn btn-sm btn-ghost"><Icon.arrow size={12} /></button></div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4, fontSize: 11 }}>
              {dayLabels.map((d, i) => <div key={i} style={{ textAlign: "center", color: "var(--muted)", fontWeight: 600, padding: "4px 0" }}>{d}</div>)}
              {Array.from({ length: 35 }, (_, i) => {
                const day = i - 4;
                const dow = i % 7;
                const valid = day > 0 && day <= 31;
                const sched = valid && days.has(dow);
                const today = day === 9;
                return (
                  <div key={i} style={{
                    aspectRatio: "1", display: "grid", placeItems: "center",
                    borderRadius: 8, fontSize: 12, fontFamily: "var(--font-mono)",
                    background: today ? "var(--primary)" : sched ? "var(--primary-soft)" : "transparent",
                    color: today ? "var(--primary-ink)" : sched ? "var(--primary)" : valid ? "var(--ink-2)" : "var(--muted-2)",
                    fontWeight: today || sched ? 600 : 400,
                    position: "relative",
                  }}>
                    {valid ? day : ""}
                    {sched && !today && <div style={{ position: "absolute", bottom: 2, width: 4, height: 4, borderRadius: 2, background: "var(--primary)" }} />}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3 className="card-title">{isAr ? "أحدث المرسلات" : "Recent sends"}</h3></div>
            <div className="col gap-sm">
              {[
                ["08:00", isAr ? "الأربعاء" : "Wed",   "delivered", "Email · Telegram"],
                ["08:00", isAr ? "الثلاثاء" : "Tue",   "delivered", "Email · Telegram"],
                ["08:00", isAr ? "الإثنين" : "Mon",    "delivered", "Email · Telegram"],
                ["08:00", isAr ? "الأحد" : "Sun",      "failed",    "Email · WhatsApp (rate limited)"],
              ].map((r, i) => (
                <div key={i} className="row" style={{ gap: 10, fontSize: 12.5, padding: "8px 0", borderBottom: i < 3 ? "1px solid var(--line)" : 0 }}>
                  <span className="mono" style={{ color: "var(--muted)" }}>{r[0]}</span>
                  <span style={{ width: 50 }}>{r[1]}</span>
                  <span className={`chip chip-${r[2] === "delivered" ? "success" : "danger"} chip-dot`}>{r[2] === "delivered" ? (isAr ? "تم التسليم" : "Delivered") : (isAr ? "فشل" : "Failed")}</span>
                  <span style={{ marginInlineStart: "auto", color: "var(--muted)", fontSize: 11.5 }}>{r[3]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Alerts = Alerts;
window.Notifications = Notifications;
window.ReportBuilder = ReportBuilder;
window.Schedule = Schedule;