"use client";

import { useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import { useToastStore } from "@/lib/stores/toast-store";
import { formatCurrency } from "@/lib/format";

// R14 A.2: prices stored as numbers; formatted via Intl.NumberFormat at
// render time so DE locale shows "20,00 €" while US locale shows "€20.00".
// The price field is kept in EUR — Stripe checkout still presents EUR
// regardless of display locale (multi-currency is a separate Group E task).
const PACKAGES: { id: string; credits: number; price: number; perCredit: number; savings: number; popular?: boolean; best?: boolean }[] = [
  { id: "credits_100", credits: 100, price: 20, perCredit: 0.2, savings: 0 },
  { id: "credits_250", credits: 250, price: 50, perCredit: 0.2, savings: 0 },
  { id: "credits_500", credits: 500, price: 90, perCredit: 0.18, savings: 10, popular: true },
  { id: "credits_750", credits: 750, price: 140, perCredit: 0.187, savings: 7 },
  { id: "credits_1000", credits: 1000, price: 170, perCredit: 0.17, savings: 15 },
  { id: "credits_2000", credits: 2000, price: 320, perCredit: 0.16, savings: 20, best: true },
];

const PRODUCT_IMAGE = "/credit-product.jpg";

function BuyCreditsForm() {
  const searchParams = useSearchParams();
  const canceled = searchParams.get("canceled");
  const addToast = useToastStore((s) => s.addToast);
  const [loading, setLoading] = useState<string | null>(null);
  const [promoOpen, setPromoOpen] = useState(false);
  const [promoCode, setPromoCode] = useState("");
  const [promoValidating, setPromoValidating] = useState(false);
  const [promoData, setPromoData] = useState<{
    code: string;
    discount_percent: number;
    bonus_credits: number;
  } | null>(null);
  const [promoError, setPromoError] = useState("");

  async function validatePromo() {
    if (!promoCode.trim()) return;
    setPromoValidating(true);
    setPromoError("");
    setPromoData(null);
    try {
      const res = await fetch("/api/promo/validate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: promoCode.trim() }),
      });
      const data = await res.json();
      if (res.ok && data.data) {
        setPromoData(data.data);
      } else {
        setPromoError(data.error || "Invalid promo code");
      }
    } catch {
      setPromoError("Failed to validate code");
    } finally {
      setPromoValidating(false);
    }
  }

  function getDiscountedPrice(price: number): string {
    if (!promoData?.discount_percent) return formatCurrency(price);
    const discounted = price * (1 - promoData.discount_percent / 100);
    return formatCurrency(discounted);
  }

  async function handlePurchase(packageId: string) {
    setLoading(packageId);
    try {
      const res = await fetch("/api/credits/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ packageId, promoCode: promoData?.code }),
      });
      const data = await res.json();
      if (data.url) {
        window.location.href = data.url;
      } else {
        addToast("error", data.error || "Failed to create checkout session");
      }
    } catch {
      addToast("error", "An error occurred. Please try again.");
    } finally {
      setLoading(null);
    }
  }

  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      {/* Header */}
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold text-white mb-3">
          Buy <span className="text-gold">AW Credits</span>
        </h1>
        <p className="text-text-muted text-lg max-w-2xl mx-auto">
          Credits are used to purchase galleries, videos, subscriptions, cam sessions, tips, and premium features.
        </p>
      </div>

      {canceled && (
        <div className="bg-yellow-500/10 border border-yellow-500/50 text-yellow-400 rounded-lg p-4 mb-8 text-sm text-center max-w-xl mx-auto">
          Payment was canceled. You can try again when you&apos;re ready.
        </div>
      )}

      {/* Promo Code */}
      <div className="max-w-md mx-auto mb-8">
        {!promoOpen ? (
          <button
            onClick={() => setPromoOpen(true)}
            className="text-gold hover:text-gold-light text-sm transition-colors flex items-center gap-1 mx-auto"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
            </svg>
            Have a promo code?
          </button>
        ) : (
          <div className="bg-surface rounded-xl border border-surface-light p-4 space-y-3">
            <div className="flex gap-2">
              <input
                type="text"
                value={promoCode}
                onChange={(e) => {
                  setPromoCode(e.target.value.toUpperCase());
                  setPromoError("");
                }}
                placeholder="Enter promo code"
                autoComplete="off"
                autoCorrect="off"
                autoCapitalize="characters"
                spellCheck={false}
                className="flex-1 bg-surface-light border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-text-muted focus:outline-none focus:ring-1 focus:ring-gold/50 uppercase tracking-wider"
              />
              <button
                onClick={validatePromo}
                disabled={promoValidating || !promoCode.trim()}
                className="bg-gold hover:bg-gold-light text-black font-semibold px-4 py-2 rounded-lg text-sm transition-all disabled:opacity-50"
              >
                {promoValidating ? "..." : "Apply"}
              </button>
            </div>
            {promoError && (
              <p className="text-red-400 text-xs">{promoError}</p>
            )}
            {promoData && (
              <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-3 text-sm">
                <p className="text-green-400 font-medium flex items-center gap-1">
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                  Code &ldquo;{promoData.code}&rdquo; applied!
                </p>
                <p className="text-green-300 text-xs mt-1">
                  {promoData.discount_percent > 0 && `${promoData.discount_percent}% discount on all packages`}
                  {promoData.discount_percent > 0 && promoData.bonus_credits > 0 && " + "}
                  {promoData.bonus_credits > 0 && `${promoData.bonus_credits} bonus credits`}
                </p>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Package Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {PACKAGES.map((pkg) => (
          <div
            key={pkg.id}
            className={`relative bg-surface rounded-2xl border overflow-hidden flex flex-col transition-all duration-300 hover:scale-[1.02] hover:shadow-xl ${
              pkg.popular
                ? "border-gold shadow-[0_0_20px_rgba(212,175,55,0.15)]"
                : pkg.best
                ? "border-green-500/50 shadow-[0_0_20px_rgba(34,197,94,0.1)]"
                : "border-surface-light hover:border-gold/50"
            }`}
          >
            {/* Badges */}
            {pkg.popular && (
              <div className="absolute top-0 left-0 right-0 bg-gradient-to-r from-gold to-gold-light text-black text-xs font-bold text-center py-1.5 uppercase tracking-wider">
                Most Popular
              </div>
            )}
            {pkg.best && (
              <div className="absolute top-0 left-0 right-0 bg-gradient-to-r from-green-600 to-green-500 text-white text-xs font-bold text-center py-1.5 uppercase tracking-wider">
                Best Value
              </div>
            )}

            <div className={`p-6 flex flex-col items-center flex-1 ${pkg.popular || pkg.best ? "pt-10" : ""}`}>
              {/* Product Image */}
              <div className="w-20 h-20 rounded-xl overflow-hidden mb-4 border border-surface-light">
                <Image
                  src={PRODUCT_IMAGE}
                  alt="AW Credits"
                  width={80}
                  height={80}
                  className="w-full h-full object-cover"
                  unoptimized
                />
              </div>

              {/* Credits Amount */}
              <div className="text-5xl font-extrabold text-gold mb-1">{pkg.credits.toLocaleString()}</div>
              <div className="text-text-muted text-sm font-medium mb-4">AW Credits</div>

              {/* Per-credit rate */}
              <div className="text-xs text-text-muted mb-1">
                {formatCurrency(pkg.perCredit)} per credit
              </div>

              {/* Savings Badge */}
              {pkg.savings > 0 && (
                <span className="inline-block bg-green-500/15 text-green-400 text-xs font-semibold px-3 py-1 rounded-full mb-4 border border-green-500/30">
                  Save {pkg.savings}%
                </span>
              )}
              {pkg.savings === 0 && <div className="mb-4" />}

              {/* Price — locale-aware via Intl.NumberFormat */}
              <div className="text-3xl font-bold text-white mb-6">
                {promoData?.discount_percent ? (
                  <span className="flex flex-col items-center gap-1">
                    <span className="line-through text-text-muted text-lg">{formatCurrency(pkg.price)}</span>
                    <span className="text-green-400">{getDiscountedPrice(pkg.price)}</span>
                  </span>
                ) : (
                  formatCurrency(pkg.price)
                )}
              </div>
              {promoData?.bonus_credits ? (
                <p className="text-green-400 text-xs font-semibold mb-2">
                  +{promoData.bonus_credits} bonus credits
                </p>
              ) : null}

              {/* Buy Button */}
              <button
                onClick={() => handlePurchase(pkg.id)}
                disabled={loading !== null}
                className={`w-full py-3 rounded-xl font-semibold text-sm transition-all duration-300 disabled:opacity-50 ${
                  pkg.popular
                    ? "bg-gradient-to-r from-gold to-gold-light text-black hover:shadow-[0_0_20px_rgba(212,175,55,0.3)]"
                    : pkg.best
                    ? "bg-gradient-to-r from-green-600 to-green-500 text-white hover:shadow-[0_0_20px_rgba(34,197,94,0.3)]"
                    : "bg-surface-light text-white hover:bg-gold hover:text-black"
                }`}
              >
                {loading === pkg.id ? (
                  <span className="flex items-center justify-center gap-2">
                    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                    </svg>
                    Redirecting...
                  </span>
                ) : (
                  "Buy Now"
                )}
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Footer */}
      <div className="mt-12 text-center space-y-2">
        <p className="text-xs text-text-muted">
          All prices are in EUR. Payments are processed securely by Stripe.
        </p>
        <p className="text-xs text-text-muted">
          Your card details are never stored on our servers. Credits are added to your account instantly after payment.
        </p>
      </div>
    </div>
  );
}

export default function BuyCreditsPage() {
  return (
    <Suspense fallback={
      <div className="flex items-center justify-center p-16">
        <div className="animate-spin h-8 w-8 border-2 border-gold border-t-transparent rounded-full" />
      </div>
    }>
      <BuyCreditsForm />
    </Suspense>
  );
}