"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import {
  ArrowLeft,
  ArrowRight,
  Bot,
  Calculator,
  Check,
  CircleHelp,
  Coins,
  CreditCard,
  Gauge,
  Info,
  Loader2,
  RefreshCcw,
  ShieldCheck,
  Sparkles,
  Users,
} from "lucide-react";
import { MarketingFooter, MarketingHeader } from "@/components/marketing-shell";
import "../platform/platform.css";
import "./pricing.css";

type Row = Record<string, unknown>;
type Catalog = {
  settings: Row | null;
  plans: Row[];
  features: Row[];
  entitlements: Row[];
  addons: Row[];
};
type Lang = "ar" | "en";
const navAr = [
  ["plans", "الباقات"],
  ["calculator", "احسب خطتك"],
  ["comparison", "المقارنة"],
  ["addons", "الإضافات"],
  ["credits", "AI Credits"],
  ["faq", "الأسئلة"],
] as const;
const navEn = [
  ["plans", "Plans"],
  ["calculator", "Plan calculator"],
  ["comparison", "Compare"],
  ["addons", "Add-ons"],
  ["credits", "AI credits"],
  ["faq", "FAQ"],
] as const;

const number = (value: unknown) =>
  value === null || value === undefined ? null : Number(value);
const yes = (value: unknown) => Boolean(value);

export default function PricingPage({ lang }: { lang: Lang }) {
  const ar = lang === "ar";
  const Arrow = ar ? ArrowLeft : ArrowRight;
  const [catalog, setCatalog] = useState<Catalog | null>(null);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(true);
  const [cycle, setCycle] = useState<"monthly" | "yearly">("monthly");
  const [calc, setCalc] = useState({
    users: 3,
    agents: 1,
    whatsapp: 1,
    channels: 1,
    conversations: 1000,
    voice: 0,
    automation: false,
    api: false,
  });
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = ar ? "rtl" : "ltr";
    const saved = sessionStorage.getItem("nexora-billing-cycle");
    queueMicrotask(() => {
      if (saved === "yearly") setCycle("yearly");
      void load();
    });
  }, [ar, lang]);
  async function load() {
    setLoading(true);
    setError(false);
    try {
      const res = await fetch("/api/pricing", { cache: "no-store" });
      if (!res.ok) throw new Error();
      setCatalog(await res.json());
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }
  function changeCycle(next: "monthly" | "yearly") {
    setCycle(next);
    sessionStorage.setItem("nexora-billing-cycle", next);
  }
  const recommendation = useMemo(
    () =>
      calc.users > 50 || calc.agents > 15 || calc.whatsapp > 5 || calc.api
        ? "Enterprise"
        : calc.users > 15 ||
            calc.agents > 6 ||
            calc.channels > 5 ||
            calc.voice > 1000
          ? "Business"
          : calc.users > 5 || calc.agents > 2 || calc.automation
            ? "Professional"
            : "Starter",
    [calc],
  );
  const t = ar
    ? {
        hero: "خطط مرنة تنمو مع عملك",
        intro:
          "ابدأ بالحجم المناسب لفريقك، ثم زد عدد الوكلاء والقنوات والاستخدام عندما تحتاج.",
        monthly: "شهري",
        yearly: "سنوي",
        plans: "الباقات المنشورة",
        calc: "احسب خطتك المناسبة",
        compare: "مقارنة الباقات",
        credits: "ما هي AI Credits؟",
        faq: "أسئلة الأسعار",
        retry: "إعادة المحاولة",
      }
    : {
        hero: "Flexible plans that grow with your business",
        intro:
          "Start at the right size for your team, then add agents, channels, and usage when you need them.",
        monthly: "Monthly",
        yearly: "Yearly",
        plans: "Published plans",
        calc: "Calculate your recommended plan",
        compare: "Compare plans",
        credits: "What are AI credits?",
        faq: "Pricing FAQ",
        retry: "Try again",
      };
  const settings = catalog?.settings;
  const faq = ar
    ? [
        [
          "هل يمكنني تغيير الباقة لاحقًا؟",
          "نعم. الترقية تتحقق من السعر والحدود على الخادم، والتخفيض يفحص استخدامك أولًا حتى لا تفقد إعدادات تتجاوز الخطة الجديدة.",
        ],
        [
          "ما هي AI Credits؟",
          "وحدة لقياس استخدام خدمات الذكاء الاصطناعي. يتغير الاستهلاك حسب النموذج وحجم الرسائل، لذلك لا نربط الرصيد بعدد ثابت من الرسائل.",
        ],
        [
          "ماذا يحدث عند بلوغ الحد؟",
          "يرسل النظام تنبيهات حسب النسب التي تضبطها الإدارة، ثم يوقف الميزة المتأثرة فقط ويعرض الترقية أو الإضافة المناسبة.",
        ],
        [
          "هل توجد تجربة مجانية؟",
          settings && yes(settings.trial_enabled)
            ? `نعم، التجربة المضبوطة حاليًا ${settings.trial_days} يومًا.`
            : "التجربة المجانية غير مفعلة حاليًا، ولن نطلب بطاقة أو نحول اشتراكًا تلقائيًا دون تفعيل السياسة.",
        ],
        [
          "هل الأسعار تشمل الضريبة؟",
          settings && yes(settings.vat_enabled)
            ? yes(settings.price_includes_vat)
              ? `الأسعار المنشورة تشمل ضريبة بقيمة ${number(settings.vat_rate_basis_points)! / 100}%.`
              : `الأسعار المنشورة لا تشمل ضريبة بقيمة ${number(settings.vat_rate_basis_points)! / 100}%.`
            : "لم تُفعّل ضريبة القيمة المضافة في إعدادات التسعير المنشورة بعد.",
        ],
        [
          "هل توجد خطة للمؤسسات؟",
          "نعم، يمكن للإدارة نشر خطة مؤسسات بسعر مخصص وحدود وتكاملات واتفاقية خدمة مناسبة.",
        ],
      ]
    : [
        [
          "Can I change plans later?",
          "Yes. Upgrades are priced server-side, and downgrades validate current usage before any change.",
        ],
        [
          "What are AI credits?",
          "A unit for metered AI usage. Consumption varies by model and message size, so credits are not mapped to a fixed number of messages.",
        ],
        [
          "What happens at a limit?",
          "The system warns at admin-configured thresholds, then restricts only the affected capability and offers an upgrade or add-on.",
        ],
        [
          "Is there a free trial?",
          settings && yes(settings.trial_enabled)
            ? `Yes. The configured trial is ${settings.trial_days} days.`
            : "A free trial is not currently enabled. No card is requested and no automatic conversion occurs unless that policy is activated.",
        ],
        [
          "Do prices include VAT?",
          settings && yes(settings.vat_enabled)
            ? yes(settings.price_includes_vat)
              ? `Published prices include ${number(settings.vat_rate_basis_points)! / 100}% VAT.`
              : `Published prices exclude ${number(settings.vat_rate_basis_points)! / 100}% VAT.`
            : "VAT has not yet been enabled in the published pricing settings.",
        ],
        [
          "Is there an Enterprise plan?",
          "Yes. Admins can publish a custom plan with tailored limits, integrations, and SLA.",
        ],
      ];

  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faq.map(([q, a]) => ({
      "@type": "Question",
      name: q,
      acceptedAnswer: { "@type": "Answer", text: a },
    })),
  };
  return (
    <main className="pricing-page" dir={ar ? "rtl" : "ltr"}>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      <MarketingHeader
        isAr={ar}
        navLinks={ar ? navAr : navEn}
        languageHref={ar ? "/en/pricing" : "/pricing"}
        menuId="pricing-menu"
      />
      <section className="pr-hero">
        <div className="pf-container pr-hero-inner">
          <span className="pf-kicker">
            <Sparkles />
            {ar
              ? "تسعير واضح بلا مفاجآت"
              : "Transparent pricing without surprises"}
          </span>
          <h1>{t.hero}</h1>
          <p>{t.intro}</p>
          <div
            className="pr-cycle"
            role="group"
            aria-label={ar ? "دورة الفوترة" : "Billing cycle"}
          >
            <button
              aria-pressed={cycle === "monthly"}
              className={cycle === "monthly" ? "active" : ""}
              onClick={() => changeCycle("monthly")}
            >
              {t.monthly}
            </button>
            <button
              aria-pressed={cycle === "yearly"}
              className={cycle === "yearly" ? "active" : ""}
              onClick={() => changeCycle("yearly")}
            >
              {t.yearly}
            </button>
          </div>
          <div className="pr-policy">
            <ShieldCheck />
            <span>
              {settings
                ? vatLine(settings, ar)
                : ar
                  ? "تظهر حالة الضريبة بعد تحميل إعدادات التسعير."
                  : "VAT status appears after pricing settings load."}
            </span>
          </div>
        </div>
      </section>
      <section id="plans" className="pf-section">
        <div className="pf-container">
          <Heading
            icon={CreditCard}
            label={ar ? "التكلفة" : "Cost"}
            title={t.plans}
            text={
              ar
                ? "لا تظهر أي خطة أو خصم إلا بعد اعتمادها ونشرها من الإدارة."
                : "A plan or discount appears only after admin approval and publication."
            }
          />
          {loading ? (
            <div className="pr-state">
              <Loader2 className="spin" />
              <p>
                {ar
                  ? "جارٍ تحميل الأسعار المعتمدة…"
                  : "Loading approved pricing…"}
              </p>
            </div>
          ) : error ? (
            <div className="pr-state error">
              <RefreshCcw />
              <p>
                {ar
                  ? "تعذر تحميل الأسعار، حاول مرة أخرى."
                  : "Pricing could not be loaded. Please try again."}
              </p>
              <button onClick={load}>{t.retry}</button>
            </div>
          ) : catalog?.plans.length ? (
            <PlanGrid catalog={catalog} cycle={cycle} lang={lang} />
          ) : (
            <div className="pr-empty">
              <Info />
              <h3>
                {ar
                  ? "لم تنشر الإدارة أسعارًا عامة بعد"
                  : "No public prices have been published yet"}
              </h3>
              <p>
                {ar
                  ? "تم تجهيز الباقات وإدارة الحدود، لكننا لن نعرض سعرًا أو تجربة أو خصمًا قبل اعتماده. يمكنك طلب خطة مخصصة الآن."
                  : "Plans and limits are ready for administration, but no price, trial, or discount will appear before approval. You can request a tailored plan now."}
              </p>
              <div className="pf-actions">
                <Link className="pf-button primary" href="/contact?intent=sales">
                  {ar ? "تحدث مع فريق المبيعات" : "Talk to sales"}
                </Link>
                <a className="pf-button secondary" href="/dashboard/billing">
                  {ar ? "إدارة اشتراكي" : "Manage subscription"}
                </a>
              </div>
            </div>
          )}
        </div>
      </section>
      <section id="calculator" className="pf-section pr-alt">
        <div className="pf-container">
          <Heading
            icon={Calculator}
            label={ar ? "توصية مبدئية" : "Initial recommendation"}
            title={t.calc}
            text={
              ar
                ? "هذه النتيجة إرشادية وليست فاتورة أو عرض سعر ملزمًا."
                : "This result is guidance, not an invoice or binding quote."
            }
          />
          <div className="pr-calculator">
            <div className="pr-calc-fields">
              <Range
                label={ar ? "أعضاء الفريق" : "Team members"}
                value={calc.users}
                min={1}
                max={100}
                onChange={(v) => setCalc({ ...calc, users: v })}
              />
              <Range
                label={ar ? "وكلاء AI" : "AI agents"}
                value={calc.agents}
                min={1}
                max={25}
                onChange={(v) => setCalc({ ...calc, agents: v })}
              />
              <Range
                label={ar ? "أرقام WhatsApp" : "WhatsApp numbers"}
                value={calc.whatsapp}
                min={0}
                max={10}
                onChange={(v) => setCalc({ ...calc, whatsapp: v })}
              />
              <Range
                label={ar ? "القنوات" : "Channels"}
                value={calc.channels}
                min={1}
                max={8}
                onChange={(v) => setCalc({ ...calc, channels: v })}
              />
              <Range
                label={ar ? "المحادثات شهريًا" : "Monthly conversations"}
                value={calc.conversations}
                min={100}
                max={50000}
                step={100}
                onChange={(v) => setCalc({ ...calc, conversations: v })}
              />
              <Range
                label={ar ? "دقائق الصوت" : "Voice minutes"}
                value={calc.voice}
                min={0}
                max={5000}
                step={50}
                onChange={(v) => setCalc({ ...calc, voice: v })}
              />
              <label className="pr-check">
                <input
                  type="checkbox"
                  checked={calc.automation}
                  onChange={(e) =>
                    setCalc({ ...calc, automation: e.target.checked })
                  }
                />
                {ar ? "أحتاج أتمتة متقدمة" : "I need advanced automation"}
              </label>
              <label className="pr-check">
                <input
                  type="checkbox"
                  checked={calc.api}
                  onChange={(e) => setCalc({ ...calc, api: e.target.checked })}
                />
                {ar ? "أحتاج API" : "I need API access"}
              </label>
            </div>
            <aside>
              <Bot />
              <small>{ar ? "الخطة الأقرب لاحتياجك" : "Closest plan fit"}</small>
              <strong>{recommendation}</strong>
              <p>
                {ar
                  ? "تأكد من الحدود والسعر المنشورين قبل الاشتراك. Voice AI وWhatsApp يعتمدان على توفر التكامل."
                  : "Confirm published limits and price before subscribing. Voice AI and WhatsApp depend on integration availability."}
              </p>
              <a className="pf-button primary" href="#plans">
                {ar ? "راجع الباقات المنشورة" : "Review published plans"}
                <Arrow />
              </a>
            </aside>
          </div>
        </div>
      </section>
      <section id="comparison" className="pf-section">
        <div className="pf-container">
          <Heading
            icon={Gauge}
            label={ar ? "حدود واضحة" : "Clear limits"}
            title={t.compare}
            text={
              ar
                ? "يعرض الجدول الميزات والحدود المسجلة في النظام فقط."
                : "The table shows only features and limits stored in the system."
            }
          />
          {catalog?.plans.length ? (
            <Comparison catalog={catalog} lang={lang} />
          ) : (
            <div className="pr-state">
              <CircleHelp />
              <p>
                {ar
                  ? "ستظهر المقارنة تلقائيًا عند نشر أول باقة وحدودها."
                  : "Comparison appears automatically when the first plan and its limits are published."}
              </p>
            </div>
          )}
        </div>
      </section>
      <section id="addons" className="pf-section pr-alt">
        <div className="pf-container">
          <Heading
            icon={CreditCard}
            label={ar ? "استخدام إضافي" : "Additional usage"}
            title={
              ar ? "إضافات مستقلة عن الباقة" : "Add-ons separate from your plan"
            }
            text={
              ar
                ? "لا تظهر إلا الإضافات التي اعتمدتها الإدارة وربطتها بالباقات."
                : "Only administrator-approved add-ons linked to plans are shown."
            }
          />
          {catalog?.addons.length ? (
            <div className="pr-credit-grid">
              {catalog.addons.map((addon) => (
                <article key={String(addon.id)}>
                  <span>+</span>
                  <h3>{String(addon[ar ? "name_ar" : "name_en"])}</h3>
                  <p>
                    {String(addon[ar ? "description_ar" : "description_en"])}
                  </p>
                  <strong>
                    {(Number(addon.price_minor) / 100).toLocaleString(
                      ar ? "ar-SA" : "en-US",
                    )}{" "}
                    {String(addon.currency)}
                  </strong>
                  <small>
                    {String(addon.billing_type)} · {String(addon.quantity_unit)}
                  </small>
                </article>
              ))}
            </div>
          ) : (
            <div className="pr-state">
              <Info />
              <p>
                {ar
                  ? "لا توجد إضافات منشورة حاليًا؛ لن تظهر رسوم إضافية غير معتمدة."
                  : "No add-ons are currently published; unapproved extra fees are never shown."}
              </p>
            </div>
          )}
        </div>
      </section>
      <section id="credits" className="pf-section pr-alt">
        <div className="pf-container">
          <Heading
            icon={Coins}
            label={ar ? "الاستخدام" : "Usage"}
            title={t.credits}
            text={
              ar
                ? "رصيد مفهوم وقابل للمتابعة بدل وعود بعدد رسائل ثابت."
                : "Trackable usage rather than an unreliable fixed-message promise."
            }
          />
          <div className="pr-credit-grid">
            {(ar
              ? [
                  [
                    "ما الذي يستهلكه؟",
                    "النماذج التي تعالج النص أو الصوت، بحسب الحجم والنموذج المستخدم.",
                  ],
                  [
                    "كيف أتابعه؟",
                    "يعرض حساب الشركة الرصيد المستخدم والمتبقي وسجل الاستهلاك.",
                  ],
                  [
                    "متى تصل التنبيهات؟",
                    `عند ${thresholds(settings)} من الحد وفق إعداد الإدارة.`,
                  ],
                  [
                    "ماذا عند 100%؟",
                    "تتوقف الميزة المتأثرة وفق سياسة الخطة، ولا يتعطل الحساب بالكامل.",
                  ],
                ]
              : [
                  [
                    "What consumes credits?",
                    "Models processing text or voice, based on size and model used.",
                  ],
                  [
                    "How do I track it?",
                    "The company account shows used and remaining credits and usage history.",
                  ],
                  [
                    "When are warnings sent?",
                    `At ${thresholds(settings)} of the limit, based on admin settings.`,
                  ],
                  [
                    "What happens at 100%?",
                    "The affected capability follows plan policy; the entire account is not disabled.",
                  ],
                ]
            ).map(([a, b], i) => (
              <article key={a}>
                <span>{i + 1}</span>
                <h3>{a}</h3>
                <p>{b}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section id="faq" className="pf-section">
        <div className="pf-container">
          <Heading icon={CircleHelp} label="FAQ" title={t.faq} />
          <div className="pr-faq">
            {faq.map(([q, a]) => (
              <details key={q}>
                <summary>
                  {q}
                  <span>+</span>
                </summary>
                <p>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>
      <section className="pf-final">
        <div className="pf-container">
          <Users />
          <h2>
            {ar
              ? "تحتاج خطة مصممة لشركتك؟"
              : "Need a plan tailored to your company?"}
          </h2>
          <p>
            {ar
              ? "للفرق الكبيرة أو الاستخدامات الخاصة، يمكن تصميم حدود وتكاملات وخدمات مناسبة لاحتياجات المؤسسة."
              : "For larger teams or specialised use, limits, integrations, and services can be tailored to your organisation."}
          </p>
          <div className="pf-actions">
            <Link className="pf-button primary large" href="/contact?intent=sales">
              {ar ? "تحدث مع فريق المبيعات" : "Talk to sales"}
            </Link>
            <a className="pf-button secondary large" href="/dashboard/billing">
              {ar ? "إدارة الاشتراك" : "Manage subscription"}
            </a>
          </div>
        </div>
      </section>
      <MarketingFooter isAr={ar} navLinks={ar ? navAr : navEn} />
    </main>
  );
}

function Heading({
  icon: Icon,
  label,
  title,
  text,
}: {
  icon: typeof CreditCard;
  label: string;
  title: string;
  text?: string;
}) {
  return (
    <div className="ss-heading pr-heading">
      <span>
        <Icon />
        {label}
      </span>
      <h2>{title}</h2>
      {text && <p>{text}</p>}
    </div>
  );
}
function Range({
  label,
  value,
  min,
  max,
  step = 1,
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  onChange: (v: number) => void;
}) {
  return (
    <label className="pr-range">
      <span>
        {label}
        <b>{value}</b>
      </span>
      <input
        aria-label={label}
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
      />
    </label>
  );
}
function vatLine(s: Row, ar: boolean) {
  if (!yes(s.vat_enabled))
    return ar
      ? "الضريبة غير مفعلة في إعدادات الأسعار الحالية."
      : "VAT is not enabled in current pricing settings.";
  const rate = number(s.vat_rate_basis_points)! / 100;
  return yes(s.price_includes_vat)
    ? ar
      ? `الأسعار تشمل ضريبة القيمة المضافة (${rate}%).`
      : `Prices include ${rate}% VAT.`
    : ar
      ? `الأسعار لا تشمل ضريبة القيمة المضافة (${rate}%).`
      : `Prices exclude ${rate}% VAT.`;
}
function thresholds(s: Row | null | undefined) {
  try {
    return (
      JSON.parse(String(s?.warning_thresholds ?? "[80,90,100]")) as number[]
    )
      .map((v) => `${v}%`)
      .join("، ");
  } catch {
    return "80%، 90%، 100%";
  }
}
function PlanGrid({
  catalog,
  cycle,
  lang,
}: {
  catalog: Catalog;
  cycle: "monthly" | "yearly";
  lang: Lang;
}) {
  const ar = lang === "ar";
  return (
    <div className="pr-plan-grid">
      {catalog.plans.map((plan) => {
        const price = number(
          plan[
            cycle === "monthly" ? "monthly_price_minor" : "yearly_price_minor"
          ],
        );
        const items = catalog.entitlements.filter(
          (e) => e.plan_id === plan.id && yes(e.enabled),
        );
        return (
          <article
            className={yes(plan.popular) ? "popular" : ""}
            key={String(plan.id)}
          >
            {yes(plan.popular) && (
              <em>{ar ? "الأكثر اختيارًا" : "Most selected"}</em>
            )}
            <h3>{String(plan[ar ? "name_ar" : "name_en"])}</h3>
            <p>{String(plan[ar ? "description_ar" : "description_en"])}</p>
            <div className="pr-price">
              {String(plan.pricing_mode) === "custom" ? (
                <strong>{ar ? "سعر مخصص" : "Custom pricing"}</strong>
              ) : price === null ? (
                <strong>
                  {ar ? "السعر غير منشور" : "Price not published"}
                </strong>
              ) : (
                <>
                  <strong>
                    {(price / 100).toLocaleString(ar ? "ar-SA" : "en-US")}{" "}
                    <small>{String(plan.currency)}</small>
                  </strong>
                  <span>
                    /
                    {cycle === "monthly"
                      ? ar
                        ? "شهر"
                        : "month"
                      : ar
                        ? "سنة"
                        : "year"}
                  </span>
                </>
              )}
            </div>
            <ul>
              {items.slice(0, 7).map((item) => {
                const f = catalog.features.find(
                  (x) => x.key === item.feature_key,
                );
                return (
                  <li key={`${String(plan.id)}-${String(item.feature_key)}`}>
                    <Check />
                    {String(
                      f?.[ar ? "name_ar" : "name_en"] ?? item.feature_key,
                    )}
                    {item.limit_value !== null && (
                      <b>{Number(item.limit_value).toLocaleString()}</b>
                    )}
                  </li>
                );
              })}
            </ul>
            <a
              className="pf-button primary"
              href={
                String(plan.cta_kind) === "contact_sales"
                  ? "/contact?intent=sales"
                  : `/dashboard/billing?plan=${plan.id}&cycle=${cycle}`
              }
            >
              {String(plan.cta_kind) === "contact_sales"
                ? ar
                  ? "تواصل مع المبيعات"
                  : "Contact sales"
                : ar
                  ? "اختر الخطة"
                  : "Choose plan"}
            </a>
          </article>
        );
      })}
    </div>
  );
}
function Comparison({ catalog, lang }: { catalog: Catalog; lang: Lang }) {
  const ar = lang === "ar";
  return (
    <div className="pr-table-wrap" tabIndex={0}>
      <table>
        <thead>
          <tr>
            <th>{ar ? "الميزة" : "Feature"}</th>
            {catalog.plans.map((p) => (
              <th key={String(p.id)}>
                {String(p[ar ? "name_ar" : "name_en"])}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {catalog.features.map((f) => (
            <tr key={String(f.key)}>
              <th>
                <span>
                  {String(f[ar ? "name_ar" : "name_en"])}
                  <button
                    type="button"
                    className="pr-tooltip"
                    title={String(f[ar ? "tooltip_ar" : "tooltip_en"])}
                    aria-label={`${ar ? "شرح" : "About"} ${String(f[ar ? "name_ar" : "name_en"])}`}
                  >
                    <CircleHelp />
                  </button>
                </span>
              </th>
              {catalog.plans.map((p) => {
                const e = catalog.entitlements.find(
                  (x) => x.plan_id === p.id && x.feature_key === f.key,
                );
                return (
                  <td key={String(p.id)}>
                    {e && yes(e.enabled) ? (
                      e.limit_value === null ? (
                        <Check />
                      ) : (
                        Number(e.limit_value).toLocaleString()
                      )
                    ) : (
                      "—"
                    )}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}