function Expired({ lang, setLang, daysSinceExpiry, waUrl, clientName }) {
  const { useState, useEffect } = React;
  const T = window.T;
  const LangToggle = window.LangToggle;
  const t = T[lang].expired;

  function tr(ca, es) { return lang === "es" ? es : ca; }

  const [clientData, setClientData]     = useState(null);
  const [pendingCount, setPendingCount] = useState(null);

  useEffect(function () {
    async function fetchData() {
      var client = await window.SVX.getCurrentClient();
      if (!client) return;
      setClientData(client);

      if (client.subscription_expires_at) {
        var res = await window.SB
          .from("reservations")
          .select("*", { count: "exact", head: true })
          .eq("client_id", client.id)
          .eq("source", "whatsapp_bot")
          .eq("status", "pending")
          .gte("created_at", client.subscription_expires_at);

        if (!res.error) setPendingCount(res.count || 0);
      }
    }
    fetchData();
  }, []);

  // ── Derived values ───────────────────────────────────────────────────────
  var locale     = lang === "es" ? "es-ES" : "ca-ES";
  var planText   = "—";
  var statusText = t.statusV;
  var lastSync   = "—";
  var pendingMsg = t.clientsV;
  var expiryDate = "—";
  var domain     = tr("la web pública", "la web pública");

  if (clientData) {
    var plans = (window.SRV_CONFIG || {}).PLANS || {};
    var p = plans[clientData.subscription_plan];
    var planLbl = p ? (lang === "es" ? p.label_es : p.label_ca) : clientData.subscription_plan;
    planText = (clientData.name || clientName || "—") + " · " + planLbl;

    statusText = {
      active:    tr("Actiu", "Activo"),
      expired:   tr("Caducat", "Caducado"),
      paused:    tr("Pausat", "Pausado"),
      cancelled: tr("Cancel·lat", "Cancelado"),
    }[clientData.subscription_status] || t.statusV;

    if (clientData.subscription_expires_at) {
      expiryDate = new Date(clientData.subscription_expires_at)
        .toLocaleDateString(locale, { day: "numeric", month: "long" });
    }

    domain = clientData.slug ? clientData.slug + ".cat" : domain;

    if (clientData.last_sync_at) {
      var d = new Date(clientData.last_sync_at);
      lastSync = d.toLocaleDateString(locale, { weekday: "short", day: "numeric", month: "short" })
        + " · " + d.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
    }
  }

  var subText = t.sub.replace("{date}", expiryDate).replace("{domain}", domain);

  if (pendingCount !== null) {
    pendingMsg = pendingCount === 0
      ? tr("Cap missatge pendent", "Ningún mensaje pendiente")
      : pendingCount + " " + tr("sense resposta automàtica", "sin respuesta automática");
  }

  return (
    <div className="srv-auth">
      <div className="srv-auth-lang"><LangToggle lang={lang} setLang={setLang} /></div>
      <div className="srv-auth-card expired">
        <div className="srv-auth-mark" style={{color: "var(--terra-700)"}}>{t.mark}</div>
        <h1 className="srv-auth-title t-h1">{t.title}</h1>
        <p className="srv-auth-sub">{subText}</p>
        <div className="exp-cta-row">
          <a
            className="btn primary"
            href={waUrl || "#"}
            target="_blank"
            rel="noopener noreferrer"
            style={{textDecoration: "none"}}
          >
            <i className="ph ph-arrow-clockwise"></i>{t.renew}
          </a>
          <a
            className="btn ghost"
            href={waUrl || "#"}
            target="_blank"
            rel="noopener noreferrer"
            style={{textDecoration: "none"}}
          >
            <i className="ph ph-chat-circle-dots"></i>{t.help}
          </a>
        </div>
        <dl className="exp-facts">
          <div><dt>{t.plan}</dt><dd>{planText}</dd></div>
          <div><dt>{t.status}</dt><dd style={{color: "var(--terra-700)"}}>{statusText}</dd></div>
          <div><dt>{t.last}</dt><dd>{daysSinceExpiry != null ? (lastSync + " · " + daysSinceExpiry + " " + tr("dies", "días")) : lastSync}</dd></div>
          <div><dt>{t.clients}</dt><dd>{pendingMsg}</dd></div>
        </dl>
        <p className="srv-auth-foot t-pullquote" style={{fontSize: 14, color: "var(--ink-3)"}}>{t.foot}</p>
      </div>
    </div>
  );
}

window.Expired = Expired;