"use client";

import { useState, useEffect, Suspense } from "react";
import { useAuth } from "@/lib/AuthContext";
import { useRouter, useSearchParams } from "next/navigation";
import { Crown, Zap, Check, ChevronLeft, Loader2 } from "lucide-react";
import ErrorFeedback from "@/components/ErrorFeedback";

const TIERS = [
  {
    id: "free",
    name: "Free",
    price: "$0",
    period: "forever",
    icon: Zap,
    color: "text-gray-400",
    bgColor: "bg-gray-900/50",
    borderColor: "border-gray-700/50",
    features: [
      "10 AI messages per day",
      "NurBuddy persona only",
      "Basic halal monitor (10 queries/day)",
      "Browse marketplace",
      "Standard FLH earning rate",
    ],
    cta: "Current Plan",
    disabled: true,
  },
  {
    id: "premium",
    name: "Premium",
    usd: 4.99,
    price: "$4.99",
    period: "per month",
    priceId: "price_premium_monthly",
    icon: Crown,
    color: "text-[#D4AF37]",
    bgColor: "bg-gradient-to-br from-[#D4AF37]/20 to-[#0a0a0f]",
    borderColor: "border-[#D4AF37]/50",
    features: [
      "100 AI messages per day",
      "All 4 coach personas",
      "Unlimited halal monitor queries",
      "Sell on marketplace (up to 20 items)",
      "2x FLH earning rate",
      "Forum posting access",
      "Priority support",
    ],
    cta: "Go Premium",
    badge: "MOST POPULAR",
    highlighted: true,
  },
  {
    id: "pro",
    name: "Pro",
    usd: 9.99,
    price: "$9.99",
    period: "per month",
    priceId: "price_pro_monthly",
    icon: Crown,
    color: "text-purple-400",
    bgColor: "bg-purple-900/20",
    borderColor: "border-purple-500/30",
    features: [
      "Unlimited AI messages",
      "All 6 coach personas",
      "Unlimited halal monitor queries",
      "Sell on marketplace (unlimited items)",
      "3x FLH earning rate",
      "Forum posting access",
      "Priority support",
      "Early access to new features",
      "Featured listings on marketplace",
    ],
    cta: "Go Pro",
    badge: "",
    highlighted: false,
  },
];

function UpgradeContent() {
  const { user, token, loading } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();

  const [checkoutLoading, setCheckoutLoading] = useState<string | null>(null);
  const [message, setMessage] = useState<{
    type: "success" | "error" | "info";
    text: string;
  } | null>(null);

  const isPremium = user?.isPremium || user?.isPro;
  const isPro = user?.isPro;

  useEffect(() => {
    if (!loading && !token) router.push("/auth");
  }, [loading, token, router]);

  useEffect(() => {
    const upgrade = searchParams.get("upgrade");
    const canceled = searchParams.get("canceled");
    const tier = searchParams.get("tier");

    if (upgrade === "success") {
      setMessage({
        type: "success",
        text: tier
          ? `Welcome to ${tier === "pro" ? "Pro" : "Premium"}! 🎉`
          : "Upgrade successful! Welcome aboard 🎉",
      });
      // Clean URL
      const newUrl = window.location.pathname;
      window.history.replaceState({}, "", newUrl);
      // Refresh user data
      if (token) {
        fetch("/mobile/api/auth/me", {
          headers: { Authorization: `Bearer ${token}` },
        })
          .then((r) => r.json())
          .then((d) => {
            if (d.user) {
              // The AuthContext refreshUser will pick this up
              window.location.reload();
            }
          })
          .catch(() => {});
      }
    }

    if (canceled === "true") {
      setMessage({
        type: "info",
        text: "Checkout was canceled. No charges were made.",
      });
      const newUrl = window.location.pathname;
      window.history.replaceState({}, "", newUrl);
    }
  }, [searchParams, token]);

  const handleUpgrade = async (tierId: string, priceId: string) => {
    if (!token) return;
    setCheckoutLoading(tierId);
    setMessage(null);

    try {
      const res = await fetch("/mobile/api/upgrade/create-checkout", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ priceId }),
      });

      if (!res.ok) {
        const err = await res.json();
        throw new Error(err.error || "Upgrade failed");
      }

      const data = await res.json();
      if (data.url) {
        router.push(data.url);
      }
    } catch (err: unknown) {
      const message =
        err instanceof Error ? err.message : "Upgrade failed";
      setMessage({ type: "error", text: message });
      setTimeout(() => setMessage(null), 4000);
    } finally {
      setCheckoutLoading(null);
    }
  };

  if (loading) {
    return (
      <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
        <Loader2 size={24} className="animate-spin text-[#D4AF37]" />
      </div>
    );
  }

  if (!user) return null;

  return (
    <div className="min-h-dvh bg-[#0a0a0f] pb-24">
      {/* Header */}
      <div className="px-4 pt-6 pb-2 flex items-center gap-3">
        <button
          onClick={() => router.back()}
          className="w-9 h-9 rounded-full bg-[#111118] border border-gray-800/60 flex items-center justify-center active:scale-90 transition"
        >
          <ChevronLeft size={18} className="text-gray-400" />
        </button>
        <div>
          <h1 className="text-lg font-bold text-white">Choose your plan</h1>
          <p className="text-xs text-gray-500">Cancel anytime</p>
        </div>
      </div>

      {/* Trial Banner */}
      <div className="mx-4 mt-2 mb-5 bg-gradient-to-r from-[#D4AF37]/10 to-purple-900/10 border border-[#D4AF37]/20 rounded-2xl p-3">
        <div className="flex items-center gap-2">
          <SparklesIcon />
          <p className="text-sm text-[#D4AF37] font-medium">
            New accounts include a 7-day Premium trial — free
          </p>
        </div>
      </div>

      {/* Messages */}
      {message && message.type === "success" && (
        <div className="mx-4 mb-4">
          <div className="p-3 rounded-xl text-sm text-center bg-emerald-900/20 border border-emerald-800/40 text-emerald-400">
            {message.text}
          </div>
        </div>
      )}
      {message && message.type === "info" && (
        <div className="mx-4 mb-4">
          <div className="p-3 rounded-xl text-sm text-center bg-blue-900/20 border border-blue-800/40 text-blue-400">
            {message.text}
          </div>
        </div>
      )}
      {message && message.type === "error" && (
        <div className="mx-4 mb-4">
          <ErrorFeedback error={message.text} kind="upgrade" onRetry={() => setMessage(null)} context="upgrade" />
        </div>
      )}

      {/* Tier Cards */}
      <div className="px-4 space-y-4">
        {TIERS.map((tier) => {
          const Icon = tier.icon;
          const isActive =
            tier.id === "pro"
              ? isPro
              : tier.id === "premium"
                ? isPremium
                : true;
          const isDisabled = tier.disabled || isActive;

          return (
            <div
              key={tier.id}
              className={`relative rounded-2xl p-5 ${tier.bgColor} ${tier.borderColor} border ${
                tier.highlighted ? "ring-2 ring-[#D4AF37]/30" : ""
              }`}
            >
              {/* Badge */}
              {tier.badge && (
                <div className="absolute -top-2.5 right-4 bg-[#D4AF37] text-[#0a0a0f] text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full">
                  {tier.badge}
                </div>
              )}

              {/* Tier Header */}
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <Icon size={20} className={tier.color} />
                  <span className={`text-lg font-bold text-white`}>
                    {tier.name}
                  </span>
                </div>
                <div className="text-right">
                  <p className="text-xl font-bold text-white">{tier.price}</p>
                  {tier.period && (
                    <p className="text-xs text-gray-500">{tier.period}</p>
                  )}
                </div>
              </div>

              {/* Features */}
              <ul className="space-y-2 mb-4">
                {tier.features.map((feature, i) => (
                  <li
                    key={i}
                    className="flex items-start gap-2 text-sm text-gray-400"
                  >
                    <Check
                      size={14}
                      className={`mt-0.5 shrink-0 ${
                        tier.id === "free"
                          ? "text-gray-600"
                          : tier.id === "pro"
                            ? "text-purple-400"
                            : "text-[#D4AF37]"
                      }`}
                    />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              {/* CTA Button */}
              {tier.id !== "free" && (
                <button
                  onClick={() =>
                    !isActive && handleUpgrade(tier.id, tier.priceId!)
                  }
                  disabled={isDisabled || checkoutLoading === tier.id}
                  className={`w-full py-3 rounded-xl font-semibold text-sm active:opacity-80 disabled:opacity-50 transition flex items-center justify-center gap-2 ${
                    tier.id === "premium"
                      ? "bg-[#D4AF37] text-[#0a0a0f]"
                      : "bg-purple-600 text-white"
                  }`}
                >
                  {checkoutLoading === tier.id ? (
                    <>
                      <Loader2 size={16} className="animate-spin" />
                      Processing...
                    </>
                  ) : isActive ? (
                    "Current Plan"
                  ) : (
                    tier.cta
                  )}
                </button>
              )}

              {tier.id === "free" && (
                <div className="w-full py-3 rounded-xl bg-gray-900/50 border border-gray-700/30 text-gray-500 font-semibold text-sm text-center">
                  {tier.cta}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div className="px-4 mt-6 text-center">
        <p className="text-xs text-gray-600">
          Secure payments via Polar. Cancel anytime from your account settings.
        </p>
      </div>

      <div className="h-8" />
    </div>
  );
}

function SparklesIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="text-[#D4AF37] shrink-0"
    >
      <path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z" />
      <path d="M19 17l-1.5-2.5L15 15l1.5 2.5L15 20l2.5-1.5L19 20l-1.5-2.5z" />
    </svg>
  );
}

export default function UpgradePage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
          <Loader2 size={24} className="animate-spin text-[#D4AF37]" />
        </div>
      }
    >
      <UpgradeContent />
    </Suspense>
  );
}
