'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { Check, ChevronDown, Users, Camera, Clock, Shield, QrCode, Sparkles, Loader2, MessageCircle, Star } from 'lucide-react';
import { useLanguage } from '@/hooks/use-language';
import { t } from '@/lib/i18n';
import { toast } from '@/hooks/use-toast';
import { useAuth } from '@/components/auth-provider';
import { callFunction } from '@/lib/firebase';

// SAR pricing — Saudi market first
const eventPlans = [
  {
    id: 'basic',
    nameAr: 'أساسي',
    nameEn: 'Basic',
    price: 149,
    currency: 'ريال',
    per: 'مناسبة',
    perEn: 'per event',
    featuresAr: ['مناسبة واحدة', 'QR ورابط مشاركة', 'حتى 300 صورة', 'تخزين 14 يوم', 'تحميل يدوي للصور'],
    featuresEn: ['Single event', 'QR & share link', 'Up to 300 photos', '14-day storage', 'Manual photo download'],
    highlight: false,
    cta: 'ابدأ مجانًا',
    ctaEn: 'Start free',
  },
  {
    id: 'standard',
    nameAr: 'بلس',
    nameEn: 'Plus',
    price: 299,
    currency: 'ريال',
    per: 'مناسبة',
    perEn: 'per event',
    featuresAr: ['حتى 1,500 صورة', 'فيديوهات قصيرة', 'تخزين 30 يوم', 'تحميل ZIP', 'موافقة قبل العرض', 'QR جاهز للطباعة'],
    featuresEn: ['Up to 1,500 photos', 'Short videos', '30-day storage', 'ZIP download', 'Host approval', 'Print-ready QR'],
    highlight: true,
    badge: 'الأكثر طلبًا',
    badgeEn: 'Most popular',
    cta: 'اختر بلس',
    ctaEn: 'Choose Plus',
  },
  {
    id: 'premium',
    nameAr: 'بريميوم',
    nameEn: 'Premium',
    price: 499,
    currency: 'ريال',
    per: 'مناسبة',
    perEn: 'per event',
    featuresAr: ['حتى 5,000 صورة', 'فيديوهات طويلة', 'تخزين 90 يوم', 'قسم رجال/نساء', 'QR بتصاميم متعددة', 'دعم واتساب'],
    featuresEn: ['Up to 5,000 photos', 'Long videos', '90-day storage', 'Men/women sections', 'Custom QR designs', 'WhatsApp support'],
    highlight: false,
    cta: 'اختر بريميوم',
    ctaEn: 'Choose Premium',
  },
];

const venuePlans = [
  { nameAr: 'القاعات — مبتدئ', price: 799, perAr: 'شهريًا', featuresAr: ['6 مناسبات/شهر', 'شعار القاعة', 'QR لكل مناسبة', 'تقارير استخدام'] },
  { nameAr: 'القاعات — نمو', price: 1499, perAr: 'شهريًا', featuresAr: ['15 مناسبة/شهر', 'White-label جزئي', 'حسابات موظفين', 'تدريب فريق المبيعات'], highlight: true },
  { nameAr: 'القاعات — برو', price: 2999, perAr: 'شهريًا', featuresAr: ['40 مناسبة/شهر', 'Branding كامل', 'مدير حساب', 'دعم أولوية'] },
];

function AccordionItem({ question, answer }: { question: string; answer: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-zinc-800">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between py-5 text-start"
      >
        <span className="font-medium text-sm sm:text-base">{question}</span>
        <ChevronDown className={`h-5 w-5 text-zinc-500 transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>
      {open && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          className="pb-5 text-sm text-zinc-400 leading-relaxed"
        >
          {answer}
        </motion.div>
      )}
    </div>
  );
}

const WHATSAPP_NUMBER = '966500000000'; // TODO: replace with real number

function WhatsAppCTA({ lang }: { lang: string }) {
  const isAr = lang === 'ar';
  const msg = encodeURIComponent(isAr ? 'مرحبا، أريد الاستفسار عن باقات Momira للمناسبات' : 'Hi, I want to ask about Momira event packages');
  return (
    <a
      href={`https://wa.me/${WHATSAPP_NUMBER}?text=${msg}`}
      target="_blank"
      rel="noopener noreferrer"
      className="inline-flex items-center gap-2 h-12 px-6 rounded-full bg-emerald-500 hover:bg-emerald-400 text-white font-semibold transition-colors"
    >
      <MessageCircle className="h-5 w-5" />
      {isAr ? 'تواصل واتساب' : 'WhatsApp Us'}
    </a>
  );
}

export default function PricingPage() {
  const router = useRouter();
  const { lang } = useLanguage();
  const { user } = useAuth();
  const isAr = lang === 'ar';
  const [activeTab, setActiveTab] = useState<'events' | 'venues'>('events');
  const [buyingTier, setBuyingTier] = useState<string | null>(null);

  const handleBuy = async (tierId: string) => {
    if (!user) {
      router.push(`/auth?redirect=/pricing`);
      return;
    }
    setBuyingTier(tierId);
    try {
      const origin = typeof window !== 'undefined' ? window.location.origin : 'https://once.film';
      const res = (await callFunction('createCheckoutSession')({
        tier: tierId,
        origin,
        successUrl: `${origin}/dashboard?payment=success`,
        cancelUrl: `${origin}/pricing?payment=cancelled`,
      })) as { data: { url: string; sessionId: string } };
      if (res.data?.url) {
        window.location.href = res.data.url;
      } else {
        throw new Error('No checkout URL returned');
      }
    } catch (err: any) {
      console.error('Checkout error:', err);
      toast({ title: isAr ? 'فشل في إنشاء جلسة الدفع' : 'Failed to create checkout session', variant: 'destructive' });
    } finally {
      setBuyingTier(null);
    }
  };

  const faqs = [
    { q: t(lang, 'pricingFaq1Q'), a: t(lang, 'pricingFaq1A') },
    { q: t(lang, 'pricingFaq2Q'), a: t(lang, 'pricingFaq2A') },
    { q: t(lang, 'pricingFaq3Q'), a: t(lang, 'pricingFaq3A') },
    { q: t(lang, 'pricingFaq4Q'), a: t(lang, 'pricingFaq4A') },
    { q: t(lang, 'pricingFaq5Q'), a: t(lang, 'pricingFaq5A') },
    { q: t(lang, 'pricingFaq6Q'), a: t(lang, 'pricingFaq6A') },
    { q: t(lang, 'pricingFaq7Q'), a: t(lang, 'pricingFaq7A') },
    { q: t(lang, 'pricingFaq8Q'), a: t(lang, 'pricingFaq8A') },
    { q: t(lang, 'pricingFaq9Q'), a: t(lang, 'pricingFaq9A') },
  ];

  return (
    <div className="min-h-screen bg-background" dir={isAr ? 'rtl' : 'ltr'}>
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
          <Link href="/" className="text-lg font-bold">Momira</Link>
          <Link
            href="/event/create"
            className="inline-flex items-center h-9 px-4 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
          >
            {t(lang, 'createEvent')}
          </Link>
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-6 py-16">
        {/* Hero */}
        <div className="text-center mb-12">
          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
            {isAr ? 'باقات واضحة، بدون اشتراكات' : 'Simple pricing, no subscriptions'}
          </h1>
          <p className="text-lg text-zinc-400">
            {isAr ? 'ادفع مرة واحدة لكل مناسبة. لا تجديد، لا مفاجآت.' : 'Pay once per event. No renewals, no surprises.'}
          </p>
        </div>

        {/* Tab switcher */}
        <div className="flex justify-center mb-10">
          <div className="flex p-1 rounded-xl bg-zinc-900 border border-zinc-800 gap-1">
            <button
              onClick={() => setActiveTab('events')}
              className={`px-5 h-9 rounded-lg text-sm font-medium transition-colors ${activeTab === 'events' ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white' : 'text-zinc-400 hover:text-white'}`}
            >
              {isAr ? 'المناسبات' : 'Events'}
            </button>
            <button
              onClick={() => setActiveTab('venues')}
              className={`px-5 h-9 rounded-lg text-sm font-medium transition-colors ${activeTab === 'venues' ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white' : 'text-zinc-400 hover:text-white'}`}
            >
              {isAr ? 'القاعات والمصورون' : 'Venues & Photographers'}
            </button>
          </div>
        </div>

        {/* Event plans */}
        {activeTab === 'events' && (
          <div className="grid sm:grid-cols-3 gap-5 mb-16">
            {eventPlans.map((plan) => (
              <div
                key={plan.id}
                className={`relative rounded-2xl border p-6 flex flex-col gap-4 ${plan.highlight ? 'border-amber-300/50 bg-amber-300/5' : 'border-zinc-800 bg-zinc-900/30'}`}
              >
                {'badge' in plan && plan.badge && (
                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-amber-300 text-zinc-950 text-xs font-bold px-3 py-1 rounded-full">
                    {isAr ? plan.badge : (plan as any).badgeEn}
                  </span>
                )}
                <div>
                  <h3 className="text-xl font-bold">{isAr ? plan.nameAr : plan.nameEn}</h3>
                  <div className="flex items-baseline gap-1 mt-2">
                    <span className="text-4xl font-bold">{plan.price}</span>
                    <span className="text-zinc-400 text-sm">{isAr ? plan.currency : 'SAR'} / {isAr ? plan.per : plan.perEn}</span>
                  </div>
                </div>
                <ul className="space-y-2 flex-1">
                  {(isAr ? plan.featuresAr : plan.featuresEn).map((f, i) => (
                    <li key={i} className="flex items-start gap-2 text-sm text-zinc-300">
                      <Check className="h-4 w-4 text-emerald-400 mt-0.5 shrink-0" />
                      {f}
                    </li>
                  ))}
                </ul>
                <button
                  onClick={() => handleBuy(plan.id)}
                  disabled={buyingTier === plan.id}
                  className={`w-full h-11 rounded-xl font-semibold text-sm transition-colors flex items-center justify-center gap-2 disabled:opacity-60 ${plan.highlight ? 'bg-amber-300 text-zinc-950 hover:bg-amber-200' : 'bg-zinc-800 text-white hover:bg-zinc-700'}`}
                >
                  {buyingTier === plan.id ? (
                    <><Loader2 className="h-4 w-4 animate-spin" /> {isAr ? 'جاري التحويل...' : 'Redirecting...'}</>
                  ) : (
                    isAr ? plan.cta : plan.ctaEn
                  )}
                </button>
              </div>
            ))}
          </div>
        )}

        {/* Venue plans */}
        {activeTab === 'venues' && (
          <div className="grid sm:grid-cols-3 gap-5 mb-16">
            {venuePlans.map((plan, i) => (
              <div
                key={i}
                className={`rounded-2xl border p-6 flex flex-col gap-4 ${plan.highlight ? 'border-amber-300/50 bg-amber-300/5' : 'border-zinc-800 bg-zinc-900/30'}`}
              >
                <div>
                  <h3 className="text-lg font-bold">{plan.nameAr}</h3>
                  <div className="flex items-baseline gap-1 mt-2">
                    <span className="text-4xl font-bold">{plan.price}</span>
                    <span className="text-zinc-400 text-sm">ريال / {plan.perAr}</span>
                  </div>
                </div>
                <ul className="space-y-2 flex-1">
                  {plan.featuresAr.map((f, j) => (
                    <li key={j} className="flex items-start gap-2 text-sm text-zinc-300">
                      <Check className="h-4 w-4 text-emerald-400 mt-0.5 shrink-0" />
                      {f}
                    </li>
                  ))}
                </ul>
                <WhatsAppCTA lang={lang} />
              </div>
            ))}
          </div>
        )}

        {/* WhatsApp CTA banner */}
        <div className="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-8 mb-16 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div>
            <h3 className="text-xl font-bold mb-1">{isAr ? 'هل لديك سؤال؟' : 'Have a question?'}</h3>
            <p className="text-zinc-400 text-sm">{isAr ? 'تواصل معنا عبر واتساب وسنرد خلال دقائق' : 'Chat with us on WhatsApp — we reply in minutes'}</p>
          </div>
          <WhatsAppCTA lang={lang} />
        </div>

        {/* FAQ */}
        <div className="mb-16">
          <h2 className="text-2xl font-bold text-center mb-8">{t(lang, 'faq')}</h2>
          <div className="rounded-2xl border border-zinc-800 bg-zinc-900/20 overflow-hidden px-6">
            {faqs.map((faq, i) => (
              <AccordionItem key={i} question={faq.q} answer={faq.a} />
            ))}
          </div>
        </div>

        {/* Bottom CTA */}
        <div className="text-center">
          <h2 className="text-3xl font-bold mb-4">{isAr ? 'جرّب مناسبة مجانية الآن' : 'Try a free event now'}</h2>
          <p className="text-zinc-400 mb-8">{isAr ? 'لا تحتاج بطاقة ائتمان' : 'No credit card required'}</p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link
              href="/event/create"
              className="inline-flex items-center justify-center h-12 px-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20"
            >
              {isAr ? 'ابدأ مجانًا' : 'Start for free'}
            </Link>
            <WhatsAppCTA lang={lang} />
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="py-12 px-6 border-t border-zinc-900 text-center text-sm text-zinc-500">
        <div className="flex flex-wrap justify-center gap-4 mb-3">
          <Link href="/privacy" className="hover:text-zinc-300">{isAr ? 'الخصوصية' : 'Privacy'}</Link>
          <Link href="/terms" className="hover:text-zinc-300">{isAr ? 'الشروط' : 'Terms'}</Link>
          <Link href="/contact" className="hover:text-zinc-300">{isAr ? 'تواصل معنا' : 'Contact'}</Link>
        </div>
        <p>{t(lang, 'appName')} - {t(lang, 'footerTagline')}</p>
      </footer>
    </div>
  );
}