"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { Check, X, Zap, ChevronRight, Star, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

export interface PricingPlan {
  id: string;
  name: string;
  monthly: number | null;
  yearly: number | null;
  description: string;
  cta: string;
  ctaHref: string;
  popular: boolean;
  features: { label: string; included: boolean }[];
  color: string;
  badgeColor: string;
  glow?: boolean;
}

const faqPricing = [
  {
    q: "Can I upgrade or downgrade at any time?",
    a: "Yes. You can upgrade immediately and your new limits apply right away. Downgrading takes effect at the end of your billing cycle.",
  },
  {
    q: "What payment methods do you accept?",
    a: "We accept all major credit/debit cards, UPI, net banking, and international payments via Stripe. Indian users can also pay via Razorpay.",
  },
  {
    q: "Is there a yearly discount?",
    a: "Yes! Annual plans save you ~27% compared to monthly billing. The savings appear automatically when you toggle to Yearly.",
  },
  {
    q: "What is the Pro Max plan exactly?",
    a: "Pro Max is our enterprise tier for agencies, studios, and power users who need unlimited processing, API access, and white-glove support. Pricing is custom based on volume.",
  },
];

export function PricingContent({ plans }: { plans: PricingPlan[] }) {
  const [yearly, setYearly] = useState(false);

  return (
    <div className="min-h-screen pt-24 pb-16 px-4">
      <div className="fixed inset-0 bg-radial-violet pointer-events-none" />
      <div className="fixed inset-0 bg-grid pointer-events-none opacity-40" />

      <div className="container mx-auto max-w-6xl relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-12"
        >
          <Badge className="bg-violet-500/15 text-violet-300 border-violet-500/30 mb-4">
            <Sparkles className="w-3.5 h-3.5 mr-1.5" />
            Pricing
          </Badge>
          <h1 className="text-4xl md:text-5xl font-black mb-4">
            Simple, <span className="gradient-text">Honest Pricing</span>
          </h1>
          <p className="text-zinc-400 max-w-lg mx-auto">
            Start free. Upgrade when you&apos;re ready. No surprises, no hidden fees.
          </p>

          <div className="flex items-center justify-center gap-4 mt-8">
            <span className={cn("text-sm font-medium", !yearly ? "text-white" : "text-zinc-500")}>
              Monthly
            </span>
            <button
              type="button"
              onClick={() => setYearly(!yearly)}
              className={cn(
                "relative w-12 h-6 rounded-full transition-colors duration-200",
                yearly ? "bg-violet-600" : "bg-zinc-700"
              )}
            >
              <span
                className={cn(
                  "absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform duration-200",
                  yearly && "translate-x-6"
                )}
              />
            </button>
            <span className={cn("text-sm font-medium", yearly ? "text-white" : "text-zinc-500")}>
              Yearly
              <Badge className="ml-2 bg-emerald-500/15 text-emerald-400 border-emerald-500/30 text-xs">
                Save 27%
              </Badge>
            </span>
          </div>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-6 mb-16">
          {plans.map((plan, i) => (
            <motion.div
              key={plan.id}
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className={cn(
                "relative glass-card p-8 flex flex-col",
                `border ${plan.color}`,
                plan.popular && "scale-[1.02]",
                plan.glow && "glow-violet"
              )}
            >
              {plan.popular && (
                <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
                  <Badge className="bg-gradient-to-r from-violet-600 to-violet-500 text-white border-0 shadow-lg shadow-violet-900/40 px-4 py-1">
                    <Star className="w-3 h-3 mr-1 fill-white" />
                    Most Popular
                  </Badge>
                </div>
              )}

              <div className="mb-6">
                <h3 className={cn("text-lg font-bold mb-1", plan.badgeColor)}>{plan.name}</h3>
                <p className="text-xs text-zinc-500 mb-4">{plan.description}</p>
                {plan.monthly !== null ? (
                  <div>
                    <div className="flex items-baseline gap-1">
                      <span className="text-4xl font-black text-white">
                        ₹{yearly ? Math.round((plan.yearly ?? 0) / 12) : plan.monthly}
                      </span>
                      <span className="text-zinc-500 text-sm">/mo</span>
                    </div>
                    {yearly && plan.yearly !== 0 && (
                      <p className="text-xs text-zinc-500 mt-1">Billed ₹{plan.yearly}/year</p>
                    )}
                  </div>
                ) : (
                  <div>
                    <div className="text-3xl font-black text-white">Custom</div>
                    <p className="text-xs text-zinc-500 mt-1">Contact for pricing</p>
                  </div>
                )}
              </div>

              <ul className="space-y-3 mb-8 flex-1">
                {plan.features.map((f, j) => (
                  <li key={j} className="flex items-center gap-3 text-sm">
                    {f.included ? (
                      <Check className="w-4 h-4 text-emerald-400 flex-shrink-0" />
                    ) : (
                      <X className="w-4 h-4 text-zinc-700 flex-shrink-0" />
                    )}
                    <span className={f.included ? "text-zinc-200" : "text-zinc-600"}>
                      {f.label}
                    </span>
                  </li>
                ))}
              </ul>

              <Link href={plan.ctaHref}>
                <Button
                  className={cn(
                    "w-full h-11",
                    plan.popular
                      ? "bg-gradient-to-r from-violet-600 to-violet-500 hover:from-violet-500 hover:to-violet-400 text-white border-0 shadow-lg shadow-violet-900/30"
                      : "bg-white/8 hover:bg-white/12 text-white border border-white/12"
                  )}
                >
                  {plan.popular && <Zap className="w-4 h-4 mr-2" />}
                  {plan.cta}
                  <ChevronRight className="w-4 h-4 ml-1" />
                </Button>
              </Link>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="glass-card p-6 mb-16 text-center"
        >
          <p className="text-zinc-400 text-sm">
            All plans include SSL security, 99.9% uptime SLA, and access to new features.
            Pro Max users get early access to all beta features.
          </p>
        </motion.div>

        <div className="max-w-2xl mx-auto">
          <h2 className="text-2xl font-bold text-center mb-8">Pricing FAQ</h2>
          <div className="space-y-4">
            {faqPricing.map((item) => (
              <div key={item.q} className="glass-card p-5">
                <h3 className="text-sm font-semibold text-white mb-2">{item.q}</h3>
                <p className="text-sm text-zinc-400">{item.a}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}