"use client";

import { useState } from "react";
import { Check, X, Clock } from "lucide-react";
import { motion } from "framer-motion";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import Container from "@/components/shared/Container";
import AnimateOnScroll from "@/components/shared/AnimateOnScroll";
import PricingCalculator from "@/components/sections/PricingCalculator";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
import { content } from "@/lib/content";
import { staggerContainer, staggerItem } from "@/lib/animations";

const pricing = content.ar.pricing;

export default function PricingPage() {
  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
    "monthly"
  );

  return (
    <>
      <Navbar />
      <main className="min-h-screen">
        {/* Hero */}
        <section className="pt-24 pb-12 bg-gradient-to-b from-sky-50/50 to-white">
          <Container className="text-center">
            <AnimateOnScroll>
              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-navy-800">
                {pricing.title}
              </h1>
              <p className="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
                {pricing.subtitle}
              </p>
            </AnimateOnScroll>

            {/* Billing Toggle */}
            <AnimateOnScroll delay={0.2}>
              <div className="mt-8 inline-flex items-center gap-1 rounded-lg bg-slate-100 p-1">
                <button
                  onClick={() => setBillingCycle("monthly")}
                  className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${
                    billingCycle === "monthly"
                      ? "bg-white text-navy-800 shadow-sm"
                      : "text-slate-600 hover:text-slate-900"
                  }`}
                >
                  {pricing.monthly}
                </button>
                <button
                  onClick={() => setBillingCycle("yearly")}
                  className={`rounded-md px-5 py-2 text-sm font-medium transition-all flex items-center gap-2 ${
                    billingCycle === "yearly"
                      ? "bg-white text-navy-800 shadow-sm"
                      : "text-slate-600 hover:text-slate-900"
                  }`}
                >
                  {pricing.yearly}
                  <Badge className="bg-emerald-100 text-emerald-700 text-[10px]">
                    {pricing.yearlyDiscount}
                  </Badge>
                </button>
              </div>
            </AnimateOnScroll>
          </Container>
        </section>

        {/* Pricing Cards */}
        <section className="py-16">
          <Container>
            <motion.div
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, amount: 0.2 }}
              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6 items-stretch"
            >
              {pricing.plans.map((plan) => (
                <motion.div
                  key={plan.name}
                  variants={staggerItem}
                  className={`relative flex flex-col rounded-2xl border bg-white p-5 lg:p-6 shadow-sm transition-shadow hover:shadow-md ${
                    plan.highlighted
                      ? "border-2 border-sky-500 shadow-sky-100"
                      : "border-slate-200"
                  }`}
                >
                  {/* Badge for highlighted plan */}
                  {"badge" in plan && plan.badge && (
                    <div className="absolute -top-3 start-1/2 -translate-x-1/2 rtl:translate-x-1/2">
                      <Badge className="bg-sky-500 text-white px-3 py-1 text-xs">
                        {plan.badge}
                      </Badge>
                    </div>
                  )}

                  {/* Plan Header */}
                  <div className="text-center mb-4">
                    <h3 className="text-xl font-bold text-navy-800">
                      {plan.name}
                    </h3>
                    <p className="mt-1 text-xs text-slate-500">
                      {plan.subtitle}
                    </p>
                  </div>

                  {/* Price */}
                  <div className="text-center mb-1">
                    <span className="text-3xl lg:text-4xl font-bold text-navy-800">
                      {plan.price}
                    </span>
                  </div>
                  {plan.period && (
                    <p className="text-center text-sm text-slate-500 mb-3">
                      {plan.period}
                    </p>
                  )}

                  {/* Platform Fee */}
                  <div className="text-center mb-4">
                    <span className="inline-flex items-center gap-1.5 rounded-full bg-sky-50 px-3 py-1.5 text-xs font-medium text-sky-700">
                      <span>نسبة المنصة:</span>
                      <span className="font-bold">{plan.platformFee}</span>
                      <span className="text-sky-500">{pricing.collectionsLabel}</span>
                    </span>
                  </div>

                  {/* Trial Badge */}
                  <div className="flex justify-center mb-5">
                    <span className="inline-flex items-center gap-1 text-xs text-slate-500">
                      <Clock className="w-3 h-3" />
                      {pricing.trialBadge}
                    </span>
                  </div>

                  <hr className="border-slate-100 mb-5" />

                  {/* Features */}
                  <ul className="flex-1 space-y-2.5 mb-6">
                    {plan.features.map((feature) => (
                      <li
                        key={feature.text}
                        className="flex items-start gap-2.5"
                      >
                        {feature.included ? (
                          <Check className="h-4 w-4 text-emerald-500 shrink-0 mt-0.5" />
                        ) : (
                          <X className="h-4 w-4 text-slate-300 shrink-0 mt-0.5" />
                        )}
                        <span
                          className={`text-sm leading-snug ${
                            feature.included
                              ? "text-slate-700"
                              : "text-slate-400"
                          }`}
                        >
                          {feature.text}
                        </span>
                      </li>
                    ))}
                  </ul>

                  {/* CTA */}
                  <Button
                    className={`w-full py-3 h-11 text-sm font-semibold ${
                      plan.highlighted
                        ? "bg-sky-500 text-white hover:bg-sky-600"
                        : "bg-slate-100 text-navy-800 hover:bg-slate-200"
                    }`}
                  >
                    {plan.cta}
                  </Button>
                </motion.div>
              ))}
            </motion.div>
          </Container>
        </section>

        {/* Pricing Calculator */}
        <PricingCalculator />

        {/* FAQ */}
        <section className="py-16 bg-white">
          <Container className="max-w-3xl">
            <AnimateOnScroll>
              <h2 className="text-2xl sm:text-3xl font-bold text-navy-800 text-center mb-10">
                الأسئلة الشائعة
              </h2>
            </AnimateOnScroll>

            <AnimateOnScroll delay={0.1}>
              <Accordion className="space-y-2">
                {pricing.faq.map((item, index) => (
                  <AccordionItem
                    key={index}
                    className="rounded-lg border border-slate-200 bg-white px-4"
                  >
                    <AccordionTrigger className="py-4 text-base font-medium text-navy-800 hover:no-underline">
                      {item.q}
                    </AccordionTrigger>
                    <AccordionContent className="text-slate-600 leading-relaxed">
                      {item.a}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </AnimateOnScroll>
          </Container>
        </section>
      </main>
      <Footer />
    </>
  );
}
