import { motion } from "framer-motion";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { CreditCard, Link2, ShieldCheck, ArrowLeft, Tv, LogOut } from "lucide-react";

/**
 * MemberHub — landing screen shown after a successful MAC+PIN device
 * login. Three luxury action cards:
 *   1. Subscribe — opens the Premium Activation form (React port of
 *      the existing nadi_kr_signup PHP page).
 *   2. Pair — opens the device pairing portal at /pair.
 *   3. Privacy — opens the in-app Privacy Policy.
 */
const HubCard = ({
  icon: Icon,
  title,
  subtitle,
  onClick,
  testId,
}: {
  icon: React.ElementType;
  title: string;
  subtitle: string;
  onClick: () => void;
  testId: string;
}) => (
  <button
    type="button"
    onClick={onClick}
    data-testid={testId}
    className="group relative flex-1 rounded-2xl sm:rounded-3xl overflow-hidden text-start cursor-pointer min-h-[140px] sm:min-h-[220px] border-transparent outline-none"
  >
    <div className="absolute inset-0 glass-card" />
    <div
      className="absolute -inset-px rounded-2xl sm:rounded-3xl pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity"
      style={{
        boxShadow:
          "0 0 50px hsla(40, 80%, 55%, 0.3), inset 0 0 40px hsla(40, 80%, 55%, 0.08)",
        border: "1px solid hsla(40, 80%, 55%, 0.4)",
      }}
    />
    <div className="relative z-10 h-full flex flex-col items-center justify-center gap-2.5 sm:gap-5 p-4 sm:p-8 text-center">
      <div
        className="w-12 h-12 sm:w-16 sm:h-16 rounded-xl sm:rounded-2xl glass flex items-center justify-center"
        style={{ border: "1px solid hsla(40, 80%, 55%, 0.35)" }}
      >
        <Icon
          className="w-6 h-6 sm:w-8 sm:h-8 text-primary gold-glow"
          strokeWidth={1.4}
        />
      </div>
      <h2 className="font-display text-base sm:text-xl tracking-[0.25em] gold-text">
        {title}
      </h2>
      <p className="text-muted-foreground text-[11px] sm:text-xs leading-snug max-w-[16ch] sm:max-w-xs tracking-wide">
        {subtitle}
      </p>
    </div>
  </button>
);

const MemberHub = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // Gate: redirect to /device-login if no valid session
    try {
      const raw = localStorage.getItem("nadi_device_session");
      if (!raw) {
        navigate("/device-login", { replace: true });
        return;
      }
      const s = JSON.parse(raw);
      if (!s?.success) {
        navigate("/device-login", { replace: true });
      }
    } catch {
      navigate("/device-login", { replace: true });
    }
  }, [navigate]);

  const logout = () => {
    localStorage.removeItem("nadi_device_session");
    navigate("/welcome");
  };

  return (
    <div
      className="relative h-screen w-full overflow-hidden flex flex-col"
      data-testid="member-hub-page"
    >
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: "url('/images/nebula-bg.png')" }}
      />
      <div className="absolute inset-0 bg-background/55" />

      <header className="relative z-10 flex items-center justify-between px-4 sm:px-6 pt-4 sm:pt-6">
        <button
          onClick={() => navigate("/welcome")}
          className="w-10 h-10 rounded-full glass flex items-center justify-center"
          data-testid="member-hub-back"
          aria-label="Back"
        >
          <ArrowLeft className="w-4 h-4 text-muted-foreground rtl:rotate-180" />
        </button>
        <div className="flex items-center gap-2">
          <Tv className="w-4 h-4 text-primary" />
          <span className="font-display text-base sm:text-lg tracking-[0.3em] gold-text">
            NADIPLAYER
          </span>
        </div>
        <button
          onClick={logout}
          className="px-3 h-10 rounded-full glass flex items-center gap-1.5 text-muted-foreground hover:text-foreground"
          data-testid="member-hub-logout"
        >
          <LogOut className="w-3.5 h-3.5" />
          <span className="hidden sm:inline text-[10px] tracking-[0.25em] uppercase">
            Logout
          </span>
        </button>
      </header>

      <motion.main
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
        className="relative z-10 flex-1 flex flex-col items-center justify-center px-4 py-6 sm:py-10"
      >
        <div className="text-center mb-5 sm:mb-10">
          <p className="text-muted-foreground text-[10px] sm:text-xs tracking-[0.4em] uppercase">
            Premium Activation Hub
          </p>
          <h1
            className="font-display text-xl sm:text-3xl tracking-[0.2em] gold-text mt-1.5"
            style={{ fontFamily: "Cinzel, serif" }}
          >
            Welcome
          </h1>
        </div>

        <div className="flex flex-col md:flex-row gap-3 sm:gap-6 md:gap-8 w-full max-w-sm sm:max-w-2xl md:max-w-4xl">
          <HubCard
            icon={CreditCard}
            title="SUBSCRIBE"
            subtitle="Choose your plan & activate Premium · ad-free, 4K HW acceleration."
            onClick={() => navigate("/subscribe")}
            testId="member-hub-subscribe-btn"
          />
          <HubCard
            icon={Link2}
            title="PAIR"
            subtitle="Pair a TV / device with your account using a 6-digit PIN."
            onClick={() => navigate("/pair")}
            testId="member-hub-pair-btn"
          />
          <HubCard
            icon={ShieldCheck}
            title="PRIVACY"
            subtitle="Read our Privacy Policy and how your data is handled."
            onClick={() => navigate("/privacy")}
            testId="member-hub-privacy-btn"
          />
        </div>

        <p className="text-muted-foreground/70 text-[10px] sm:text-[11px] tracking-[0.3em] uppercase mt-6 sm:mt-10 text-center">
          © 2026 NadiPlayer · nadi.kr
        </p>
      </motion.main>
    </div>
  );
};

export default MemberHub;
