'use client'

import Link from 'next/link'
import { Check, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { useSiteSettings } from '@/hooks/use-site-settings'

const defaultPlans = [
  {
    name: 'الباقة المجانية',
    price: '0',
    description: 'مثالية للأفراد لاستكشاف المنصة',
    features: [
      { text: 'إدراج عقارين كحد أقصى', included: true },
      { text: 'حرفي واحد كحد أقصى', included: true },
      { text: 'صور أساسية للعقارات', included: true },
      { text: 'دردشة مع الوكلاء', included: true },
      { text: 'تصميم 3D تفاعلي', included: false },
      { text: 'جولات افتراضية 360°', included: false },
    ],
    buttonText: 'ابدأ الآن مجاناً',
    type: 'FREE'
  },
  {
    name: 'الباقة البرونزية',
    price: '299',
    description: 'للمبتدئين في المجال العقاري',
    features: [
      { text: 'إدراج 5 عقارات', included: true },
      { text: '3 حرفيين كحد أقصى', included: true },
      { text: 'صور وفيديو بجودة عالية', included: true },
      { text: 'دردشة مع الوكلاء', included: true },
      { text: 'تصميم 3D تفاعلي (محدود)', included: true },
      { text: 'جولات افتراضية 360°', included: false },
    ],
    buttonText: 'اختر البرونزية',
    type: 'BRONZE'
  },
  {
    name: 'الباقة الذهبية',
    price: '999',
    description: 'الباقة الأكثر شعبية للوكلاء والمكاتب',
    features: [
      { text: 'إدراج 50 عقار', included: true },
      { text: '10 حرفيين كحد أقصى', included: true },
      { text: 'تميز في نتائج البحث', included: true },
      { text: 'جولات افتراضية 360° غير محدودة', included: true },
      { text: 'تصميم 3D كامل لجميع العقارات', included: true },
      { text: 'دعم فني أولي 24/7', included: true },
    ],
    buttonText: 'اختر الذهبية',
    popular: true,
    type: 'GOLD'
  },
  {
    name: 'باقة بلاتينيوم',
    price: '1999',
    description: 'للمطورين والشركات الكبرى',
    features: [
      { text: 'إدراج غير محدود للعقارات', included: true },
      { text: 'حرفيين غير محدودين', included: true },
      { text: 'إعلانات ممولة شهرية', included: true },
      { text: 'جولات افتراضية 360° احترافية', included: true },
      { text: 'تصميم 3D مخصص بالكامل', included: true },
      { text: 'مدير حسابات مخصص', included: true },
    ],
    buttonText: 'تواصل معنا',
    type: 'PLATINUM'
  }
]

export function Pricing() {
  const s = useSiteSettings()
  const section = s.pricing ?? {}
  const storedPlans = Array.isArray(section.plans) && section.plans.length ? section.plans : defaultPlans

  const plans = storedPlans.map((plan: any) => {
    const features = Array.isArray(plan.features)
      ? plan.features.map((f: any) => (typeof f === 'string' ? { text: f, included: true } : { text: f.text || '', included: f.included !== false }))
      : []
    return {
      ...plan,
      features,
      buttonText: plan.buttonText || (plan.popular ? 'اختر الباقة' : 'اشترك الآن'),
      description: plan.description || plan.subtitle || '',
    }
  })

  return (
    <section className="py-24 bg-white" id="pricing">
      <div className="container mx-auto px-4 sm:px-6">
        <div className="text-center mb-16">
          <Badge variant="default" className="mb-4 bg-blue-600 text-white px-4 py-1 shadow-sm">
            {section.badge || 'باقات الاشتراك'}
          </Badge>
          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
            {section.title || 'اختر '}{' '}
            <span className="text-blue-600">
              {section.titleHighlight || 'الباقة المناسبة'}
            </span>
            {' '}{section.titleSuffix || 'لأعمالك'}
          </h2>
          <p className="text-gray-600 max-w-2xl mx-auto text-lg leading-relaxed">
            {section.subtitle || 'خطط أسعار مرنة تلبي جميع الاحتياجات، من الأفراد إلى الشركات الكبرى.'}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
          {plans.map((plan: any, i: number) => (
            <Card
              key={i}
              className={`relative p-7 sm:p-8 flex flex-col h-full border-2 transition-all duration-300 hover:shadow-xl rounded-2xl bg-white ${
                plan.popular ? 'border-blue-600 shadow-lg scale-105 z-10' : 'border-gray-200 hover:border-blue-200 hover:-translate-y-1'
              }`}
            >
              {plan.popular && (
                <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
                  <Badge className="bg-gradient-to-l from-blue-600 to-blue-700 text-white px-4 py-1 text-sm font-bold shadow-lg shadow-blue-600/30">
                    الأكثر مبيعاً
                  </Badge>
                </div>
              )}

              <div className="mb-8">
                <h3 className="text-xl font-bold mb-2 text-gray-900">{plan.name}</h3>
                <p className="text-sm text-gray-600 mb-5">{plan.description}</p>
                <div className="flex items-baseline gap-1">
                  <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
                  <span className="text-gray-400 font-medium">درهم / شهرياً</span>
                </div>
              </div>

              <div className="flex-grow space-y-3.5 mb-8">
                {plan.features?.map((feature: any, index: number) => (
                  <div key={index} className="flex items-start gap-3">
                    {feature.included ? (
                      <Check className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                    ) : (
                      <X className="w-5 h-5 text-gray-300 mt-0.5 shrink-0" />
                    )}
                    <span className={`text-sm ${feature.included ? 'text-gray-700' : 'text-gray-400 line-through'}`}>
                      {feature.text}
                    </span>
                  </div>
                ))}
              </div>

              <Button
                variant={plan.popular ? 'default' : 'outline'}
                className={`w-full py-6 text-base font-bold rounded-xl transition-all duration-300 ${
                  plan.popular
                    ? 'bg-gradient-to-l from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 shadow-lg shadow-blue-600/20 hover:shadow-xl'
                    : 'border-gray-200 text-gray-600 hover:bg-gray-50 hover:border-gray-300'
                }`}
                asChild
              >
                <Link href="/register">{plan.buttonText}</Link>
              </Button>
            </Card>
          ))}
        </div>

        <div className="mt-12 text-center">
          <p className="text-gray-500 text-sm">
            {section.footer || '* جميع الأسعار بالدرهم المغربي (MAD) وشاملة للضريبة. يمكنك تغيير باقتك في أي وقت.'}
          </p>
        </div>
      </div>
    </section>
  )
}