/**
 * Premium status card shown at the top of the Account page.
 *
 *  • Active subscriber (days_remaining > 0)
 *      → Gold "PREMIUM SUBSCRIBER" badge, days countdown, expiry date.
 *  • Expired subscriber (days_remaining === 0)
 *      → "Subscription expired" pill, renew CTA → /trial-expired.
 *  • Guest (not logged in)
 *      → Soft "Upgrade to Premium" pitch, ad-free experience copy,
 *        "Sign in" CTA. NO in-app purchase button (Play Store choice B).
 *  • Admin
 *      → Lightweight "Admin" badge, no countdown.
 */

import { motion } from "framer-motion";
import { Crown, Clock3, Sparkles, LogIn, ShieldCheck } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

import { useAuth } from "@/hooks/useAuth";
import { useEntitlement } from "@/hooks/useEntitlement";
import { FocusableButton } from "@/components/focusable";

const formatDate = (iso: string | null): string => {
  if (!iso) return "—";
  try {
    const d = new Date(iso);
    return d.toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "2-digit",
    });
  } catch {
    return iso.slice(0, 10);
  }
};

const PremiumStatusCard = () => {
  const { user } = useAuth();
  const { userIsPremium, userExpired, daysRemaining, expiryAt } = useEntitlement();
  const { t } = useTranslation();
  const nav = useNavigate();

  // Admin variant
  if (user?.role === "admin") {
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        data-testid="premium-status-admin"
        className="glass-card rounded-2xl p-4 flex items-center gap-3"
        style={{ border: "1px solid hsla(40, 80%, 55%, 0.35)" }}
      >
        <div className="w-11 h-11 rounded-xl glass flex items-center justify-center shrink-0">
          <ShieldCheck className="w-5 h-5 text-primary" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-foreground text-sm font-medium">
            {t("premium.adminBadge", "Administrator account")}
          </p>
          <p className="text-muted-foreground text-[11px]">
            {t("premium.adminHint", "All features unlocked, no ads.")}
          </p>
        </div>
      </motion.div>
    );
  }

  // Guest variant — soft upgrade pitch (the standard one we use everywhere)
  if (!user) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        data-testid="premium-status-guest"
        className="relative glass-card rounded-2xl p-4 overflow-hidden"
      >
        <div
          className="absolute inset-0 pointer-events-none opacity-50"
          style={{
            background:
              "radial-gradient(circle at 0% 0%, hsla(40,80%,55%,0.18), transparent 60%)",
          }}
        />
        <div className="relative flex items-start gap-3">
          <div
            className="w-11 h-11 rounded-xl glass flex items-center justify-center shrink-0"
            style={{
              border: "1px solid hsla(40, 80%, 55%, 0.45)",
              boxShadow: "0 0 30px hsla(40, 80%, 55%, 0.25)",
            }}
          >
            <Sparkles className="w-5 h-5 text-primary gold-glow" strokeWidth={1.6} />
          </div>
          <div className="flex-1 min-w-0">
            <p
              className="text-foreground text-sm font-medium"
              data-testid="premium-status-guest-pitch"
            >
              {t(
                "premium.upgradePitch",
                "Upgrade to a Premium Account to enjoy an ad-free experience and exclusive features.",
              )}
            </p>
            <FocusableButton
              focusKey="premium-guest-signin"
              onEnter={() => nav("/login")}
              onClick={() => nav("/login")}
              data-testid="premium-status-guest-login-btn"
              className="mt-3 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass border border-primary/40 hover:bg-primary/15 text-primary text-[11px] font-medium tracking-[0.2em] uppercase transition-colors outline-none"
              focusClassName="ring-2 ring-primary/60 bg-primary/15"
            >
              <LogIn className="w-3 h-3" />
              {t("premium.haveSubscription", "I have a subscription · Sign in")}
            </FocusableButton>
          </div>
        </div>
      </motion.div>
    );
  }

  // Logged-in expired variant
  if (userExpired) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        data-testid="premium-status-expired"
        className="glass-card rounded-2xl p-4 border border-destructive/40"
      >
        <div className="flex items-start gap-3">
          <div className="w-11 h-11 rounded-xl glass flex items-center justify-center shrink-0">
            <Clock3 className="w-5 h-5 text-destructive" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-foreground text-sm font-medium">
              {t("premium.expiredTitle", "Subscription expired")}
            </p>
            <p
              data-testid="premium-status-expired-pitch"
              className="text-muted-foreground text-[11px] mt-1"
            >
              {t(
                "premium.upgradePitch",
                "Upgrade to a Premium Account to enjoy an ad-free experience and exclusive features.",
              )}
            </p>
            <FocusableButton
              focusKey="premium-renew"
              onEnter={() => nav("/trial-expired")}
              onClick={() => nav("/trial-expired")}
              data-testid="premium-status-renew-btn"
              className="mt-3 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary/80 hover:bg-primary text-primary-foreground text-[11px] font-medium tracking-[0.2em] uppercase transition-colors outline-none"
              focusClassName="ring-2 ring-primary/60"
            >
              {t("premium.renewNow", "Renew now")}
            </FocusableButton>
          </div>
        </div>
      </motion.div>
    );
  }

  // Active premium variant
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      data-testid="premium-status-active"
      className="relative glass-card rounded-2xl p-4 overflow-hidden"
      style={{
        border: "1px solid hsla(40, 80%, 55%, 0.55)",
        boxShadow:
          "0 0 60px hsla(40, 80%, 55%, 0.18), inset 0 0 30px hsla(40, 80%, 55%, 0.06)",
      }}
    >
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(circle at 100% 0%, hsla(40,80%,55%,0.22), transparent 55%)",
        }}
      />
      <div className="relative flex items-start gap-3">
        <div
          className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0"
          style={{
            background:
              "linear-gradient(135deg, hsla(40,80%,55%,0.35), hsla(40,80%,55%,0.08))",
            border: "1px solid hsla(40, 80%, 55%, 0.6)",
            boxShadow: "0 0 24px hsla(40, 80%, 55%, 0.4)",
          }}
        >
          <Crown
            className="w-6 h-6 text-primary gold-glow"
            strokeWidth={1.5}
            data-testid="premium-status-crown"
          />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span
              data-testid="premium-status-badge"
              className="text-[10px] tracking-[0.3em] uppercase font-semibold gold-text"
            >
              {t("premium.goldBadge", "Gold Account")}
            </span>
            <span className="text-[10px] tracking-[0.25em] uppercase text-muted-foreground">
              · {t("premium.adFreeTag", "Ad-free")}
            </span>
          </div>
          <p
            className="font-display text-2xl tracking-[0.1em] text-foreground mt-1.5"
            data-testid="premium-status-days"
          >
            {t("premium.daysRemaining", { count: daysRemaining ?? 0, defaultValue: "{{count}} days remaining" })}
          </p>
          <p
            className="text-muted-foreground text-[11px] mt-0.5"
            data-testid="premium-status-expiry"
          >
            {t("premium.expiresOn", "Expires on")} {formatDate(expiryAt)}
          </p>
          <p
            className="text-muted-foreground/90 text-[11px] mt-3 leading-relaxed"
            data-testid="premium-welcome-message"
          >
            {t(
              "premium.welcomeMessage",
              "You are using the Premium Version! Enjoy an ad-free experience, advanced hardware acceleration for 4K support, and priority technical assistance. (Note: NadiPlayer is a media player only; no content or playlists are provided).",
            )}
          </p>
        </div>
      </div>
    </motion.div>
  );
};

export default PremiumStatusCard;
