/**
 * TVTrialBadge — small persistent countdown chip shown ONLY on Samsung
 * Tizen and LG webOS while a guest is still inside the 30-day free
 * trial window. Sits at the BOTTOM CENTER of the screen so it never
 * overlaps the header menu / language picker (top-right) or the clock
 * / weather chips (BottomLeftBar / BottomRightBar). Disappears the
 * moment the trial hits 0 days (the full-screen TVGuestLockOverlay
 * takes over from there).
 *
 * Visibility rules — chip is shown iff ALL true:
 *   - Running on Tizen or webOS (`isSmartTV()`)
 *   - Visitor is NOT admin
 *   - Visitor is NOT logged-in premium (`devicePremium === false`)
 *   - `trial.days_remaining > 0`
 *
 * Colour escalates as the deadline approaches:
 *   - 15+ days   → gold (calm)
 *   - 6–14 days  → amber (warning)
 *   - 1–5 days   → red (urgent)
 */
import { motion } from "framer-motion";
import { Clock } from "lucide-react";
import { useTranslation } from "react-i18next";

import { useEntitlement } from "@/hooks/useEntitlement";
import { useAuth } from "@/hooks/useAuth";
import { isSmartTV } from "@/lib/platform";

const TVTrialBadge = () => {
  const { t } = useTranslation();
  const { user, isGuest } = useAuth();
  const { trial, isPremium } = useEntitlement();

  // Guard rails — bail out fast for every non-target visitor.
  if (!isSmartTV()) return null;
  if (user?.role === "admin") return null;
  if (isPremium) return null;
  if (!isGuest && user) return null; // logged-in non-premium → not our scope
  if (!trial) return null;
  if (trial.is_premium) return null;
  if (trial.days_remaining <= 0) return null; // lock overlay handles this

  const days = trial.days_remaining;
  // Colour escalation — closer to 0, more urgent. Re-balanced for the
  // new 30-day trial: gold for the first half, amber for the second
  // week, red for the final 5 days.
  let tone: "calm" | "warn" | "urgent";
  if (days <= 5) tone = "urgent";
  else if (days <= 14) tone = "warn";
  else tone = "calm";

  const palette = {
    calm: {
      border: "hsla(40, 80%, 55%, 0.45)",
      bg: "hsla(40, 80%, 12%, 0.78)",
      text: "hsl(40, 90%, 70%)",
      glow: "0 0 22px hsla(40, 80%, 55%, 0.22)",
    },
    warn: {
      border: "hsla(28, 90%, 55%, 0.55)",
      bg: "hsla(28, 90%, 12%, 0.82)",
      text: "hsl(28, 95%, 70%)",
      glow: "0 0 22px hsla(28, 90%, 55%, 0.30)",
    },
    urgent: {
      border: "hsla(0, 75%, 55%, 0.6)",
      bg: "hsla(0, 75%, 12%, 0.85)",
      text: "hsl(0, 90%, 72%)",
      glow: "0 0 26px hsla(0, 75%, 55%, 0.38)",
    },
  }[tone];

  return (
    <motion.div
      data-testid="tv-trial-badge"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[60] pointer-events-none select-none flex items-center gap-2 rounded-full px-4 py-2 backdrop-blur-md"
      style={{
        border: `1px solid ${palette.border}`,
        background: palette.bg,
        boxShadow: palette.glow,
      }}
    >
      <Clock
        className="w-4 h-4"
        style={{ color: palette.text }}
        strokeWidth={1.6}
      />
      <span
        className="text-xs font-medium tracking-wide whitespace-nowrap"
        style={{ color: palette.text }}
        data-testid="tv-trial-badge-text"
      >
        {days === 1
          ? t("tvTrial.oneDay", {
              defaultValue: "Trial: 1 day left",
            })
          : t("tvTrial.daysLeft", {
              defaultValue: "Trial: {{days}} days left",
              days,
            })}
      </span>
    </motion.div>
  );
};

export default TVTrialBadge;
