'use client'

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import {
  ArrowLeft, Save, Loader2, Check, Palette, Type, Megaphone,
  Layout, Globe, DollarSign, AlertTriangle, Menu, Map, Image,
  BarChart3, LucideIcon, MessageCircle, ShoppingBag, Newspaper,
  Layers, Wrench,
  Mail, Send, Info,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { applyBrandColors } from '@/lib/color-scale'

type Tab = 'hero' | 'services' | 'cta' | 'brand' | 'colors' | 'pricing' | 'navbar' | 'featuredProperties' | 'interactiveMap' | 'vision' | 'stats' | 'footer' | 'adsense' | 'promotions' | 'craftsmen' | 'email'

const TABS: { id: Tab; icon: React.ReactNode; label: string }[] = [
  { id: 'navbar',            icon: <Menu className="w-5 h-5" />,       label: 'الشريط العلوي' },
  { id: 'hero',              icon: <Megaphone className="w-5 h-5" />,   label: 'القسم الرئيسي (Hero)' },
  { id: 'featuredProperties',icon: <Layers className="w-5 h-5" />,     label: 'عقارات مميزة' },
  { id: 'interactiveMap',    icon: <Map className="w-5 h-5" />,        label: 'الخريطة التفاعلية' },
  { id: 'craftsmen',         icon: <Wrench className="w-5 h-5" />,     label: 'الحرفيون' },
  { id: 'vision',            icon: <Image className="w-5 h-5" />,      label: 'أداة Vision' },
  { id: 'stats',             icon: <BarChart3 className="w-5 h-5" />,  label: 'الإحصائيات' },
  { id: 'services',          icon: <Layout className="w-5 h-5" />,     label: 'الخدمات' },
  { id: 'pricing',           icon: <DollarSign className="w-5 h-5" />, label: 'الأسعار' },
  { id: 'cta',               icon: <Type className="w-5 h-5" />,       label: 'دعوة للعمل (CTA)' },
  { id: 'brand',             icon: <Globe className="w-5 h-5" />,      label: 'العلامة التجارية' },
  { id: 'colors',            icon: <Palette className="w-5 h-5" />,    label: 'الألوان' },
  { id: 'footer',            icon: <Newspaper className="w-5 h-5" />,  label: 'التذييل (Footer)' },
  { id: 'adsense',           icon: <ShoppingBag className="w-5 h-5" />,label: 'إعلانات AdSense' },
  { id: 'promotions',        icon: <Megaphone className="w-5 h-5" />,  label: 'الإشهارات' },
  { id: 'email',             icon: <Mail className="w-5 h-5" />,       label: 'البريد الإلكتروني' },
]

export default function HomeSettingsPage() {
  const [tab, setTab] = useState<Tab>('hero')
  const [settings, setSettings] = useState<any>({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)
  const [error, setError] = useState('')

  const loadSettings = useCallback(async () => {
    try {
      const res = await fetch('/api/settings')
      const data = await res.json()
      setSettings(data)
    } catch {}
    finally { setLoading(false) }
  }, [])

  useEffect(() => { loadSettings() }, [loadSettings])

  const update = (section: string, field: string, value: any) => {
    setSettings((prev: any) => ({
      ...prev,
      [section]: { ...prev[section], [field]: value },
    }))
  }

  const updateServiceItem = (index: number, field: string, value: any) => {
    const items = [...(settings.services?.items ?? [])]
    items[index] = { ...items[index], [field]: value }
    update('services', 'items', items)
  }

  const addService = () => {
    const items = [...(settings.services?.items ?? []), { icon: 'Star', title: 'خدمة جديدة', desc: 'وصف الخدمة', color: 'from-blue-500 to-blue-600', bg: 'bg-blue-50' }]
    update('services', 'items', items)
  }

  const removeService = (index: number) => {
    const items = (settings.services?.items ?? []).filter((_: any, i: number) => i !== index)
    update('services', 'items', items)
  }

  const updatePlanFeature = (planIndex: number, featureIndex: number, value: string) => {
    const plans = [...(settings.pricing?.plans ?? [])]
    const features = [...plans[planIndex].features]
    features[featureIndex] = value
    plans[planIndex] = { ...plans[planIndex], features }
    update('pricing', 'plans', plans)
  }

  const addPlanFeature = (planIndex: number) => {
    const plans = [...(settings.pricing?.plans ?? [])]
    plans[planIndex] = { ...plans[planIndex], features: [...plans[planIndex].features, 'ميزة جديدة'] }
    update('pricing', 'plans', plans)
  }

  const handleSave = async () => {
    setSaving(true)
    setError('')
    try {
      const res = await fetch('/api/settings', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(settings),
      })
      const data = await res.json()
      if (!res.ok) return setError(data.error || 'خطأ في الحفظ')
      applyBrandColors(settings?.colors)
      setSaved(true)
      setTimeout(() => setSaved(false), 2500)
    } catch {
      setError('خطأ في الاتصال')
    } finally { setSaving(false) }
  }

  const inputCls = "w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
  const labelCls = "block text-sm font-medium mb-1.5 text-gray-700"

  if (loading) return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
    </div>
  )

  return (
    <div className="py-8" dir="rtl">
      <div className="container mx-auto px-4 max-w-5xl">

        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <Link href="/dashboard/settings" className="text-gray-400 hover:text-gray-600">
              <ArrowLeft className="w-5 h-5 rotate-180" />
            </Link>
            <div>
              <h1 className="text-2xl font-bold">إدارة محتوى الصفحة الرئيسية</h1>
              <p className="text-gray-500 text-sm">تحكم في النصوص والألوان والمحتوى</p>
            </div>
          </div>
          <div className="flex gap-3">
            <Link href="/" target="_blank">
              <Button variant="outline" size="sm">معاينة الموقع</Button>
            </Link>
            <Button onClick={handleSave} disabled={saving} className="gap-2">
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : saved ? <Check className="w-4 h-4" /> : <Save className="w-4 h-4" />}
              {saved ? 'تم الحفظ!' : 'حفظ الكل'}
            </Button>
          </div>
        </div>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl px-4 py-3 mb-4 flex items-center gap-2">
            <AlertTriangle className="w-4 h-4 shrink-0" />{error}
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          {/* Sidebar Tabs */}
          <div className="md:col-span-1">
            <div className="bg-white rounded-2xl border shadow-sm overflow-hidden sticky top-8">
              {TABS.map(t => (
                <button key={t.id} onClick={() => setTab(t.id)}
                  className={`w-full flex items-center gap-3 px-4 py-3.5 text-sm font-medium transition-colors border-b border-gray-50 last:border-0 ${
                    tab === t.id ? 'bg-blue-50 text-blue-700 border-r-2 border-r-blue-600' : 'text-gray-600 hover:bg-gray-50'
                  }`}>
                  {t.icon} {t.label}
                </button>
              ))}
            </div>
          </div>

          {/* Content */}
          <div className="md:col-span-3 space-y-6">

            {/* Hero Tab */}
            {tab === 'hero' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">القسم الرئيسي (Hero)</h2>
                <div>
                  <label className={labelCls}>الشارة (Badge)</label>
                  <input className={inputCls} value={settings.hero?.badge ?? ''} onChange={e => update('hero', 'badge', e.target.value)} />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>العنوان الأساسي</label>
                    <input className={inputCls} value={settings.hero?.title ?? ''} onChange={e => update('hero', 'title', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>العنوان المميز (المتوهج)</label>
                    <input className={inputCls} value={settings.hero?.titleHighlight ?? ''} onChange={e => update('hero', 'titleHighlight', e.target.value)} />
                  </div>
                </div>
                <div>
                  <label className={labelCls}>الوصف</label>
                  <textarea className={`${inputCls} h-20 resize-none`} value={settings.hero?.subtitle ?? ''} onChange={e => update('hero', 'subtitle', e.target.value)} />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>نص الزر الأول</label>
                    <input className={inputCls} value={settings.hero?.cta1Text ?? ''} onChange={e => update('hero', 'cta1Text', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>نص الزر الثاني</label>
                    <input className={inputCls} value={settings.hero?.cta2Text ?? ''} onChange={e => update('hero', 'cta2Text', e.target.value)} />
                  </div>
                </div>
                <div>
                  <label className={labelCls}>رابط صورة الخلفية</label>
                  <input className={inputCls} value={settings.hero?.backgroundImage ?? ''} dir="ltr" onChange={e => update('hero', 'backgroundImage', e.target.value)} />
                </div>
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <label className={labelCls}>التدرج - بداية</label>
                    <input className={inputCls} value={settings.hero?.gradientFrom ?? ''} dir="ltr" onChange={e => update('hero', 'gradientFrom', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>التدرج - وسط</label>
                    <input className={inputCls} value={settings.hero?.gradientVia ?? ''} dir="ltr" onChange={e => update('hero', 'gradientVia', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>التدرج - نهاية</label>
                    <input className={inputCls} value={settings.hero?.gradientTo ?? ''} dir="ltr" onChange={e => update('hero', 'gradientTo', e.target.value)} />
                  </div>
                </div>
              </div>
            )}

            {/* Services Tab */}
            {tab === 'services' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <div className="flex justify-between items-center">
                  <h2 className="text-lg font-bold">الخدمات</h2>
                  <Button size="sm" variant="outline" onClick={addService}>+ إضافة خدمة</Button>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>عنوان القسم</label>
                    <input className={inputCls} value={settings.services?.title ?? ''} onChange={e => update('services', 'title', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>وصف القسم</label>
                    <input className={inputCls} value={settings.services?.subtitle ?? ''} onChange={e => update('services', 'subtitle', e.target.value)} />
                  </div>
                </div>
                <div className="space-y-4">
                  {(settings.services?.items ?? []).map((item: any, i: number) => (
                    <div key={i} className="border rounded-xl p-4 space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="text-xs font-bold text-blue-600">خدمة {i + 1}</span>
                        <button onClick={() => removeService(i)} className="text-xs text-red-500 hover:text-red-700">حذف</button>
                      </div>
                      <div className="grid grid-cols-2 gap-3">
                        <input className={inputCls} value={item.title} placeholder="العنوان" onChange={e => updateServiceItem(i, 'title', e.target.value)} />
                        <input className={inputCls} value={item.desc} placeholder="الوصف" onChange={e => updateServiceItem(i, 'desc', e.target.value)} />
                        <input className={inputCls} value={item.color} placeholder="التدرج (from-blue-500 to-blue-600)" dir="ltr" onChange={e => updateServiceItem(i, 'color', e.target.value)} />
                        <input className={inputCls} value={item.bg} placeholder="الخلفية (bg-blue-50)" dir="ltr" onChange={e => updateServiceItem(i, 'bg', e.target.value)} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* CTA Tab */}
            {tab === 'cta' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">دعوة للعمل (CTA)</h2>
                <div>
                  <label className={labelCls}>العنوان</label>
                  <input className={inputCls} value={settings.cta?.title ?? ''} onChange={e => update('cta', 'title', e.target.value)} />
                </div>
                <div>
                  <label className={labelCls}>الوصف</label>
                  <textarea className={`${inputCls} h-20 resize-none`} value={settings.cta?.subtitle ?? ''} onChange={e => update('cta', 'subtitle', e.target.value)} />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>نص الزر الأول</label>
                    <input className={inputCls} value={settings.cta?.cta1Text ?? ''} onChange={e => update('cta', 'cta1Text', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>نص الزر الثاني</label>
                    <input className={inputCls} value={settings.cta?.cta2Text ?? ''} onChange={e => update('cta', 'cta2Text', e.target.value)} />
                  </div>
                </div>
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <label className={labelCls}>التدرج - بداية</label>
                    <input className={inputCls} value={settings.cta?.gradientFrom ?? ''} dir="ltr" onChange={e => update('cta', 'gradientFrom', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>التدرج - وسط</label>
                    <input className={inputCls} value={settings.cta?.gradientVia ?? ''} dir="ltr" onChange={e => update('cta', 'gradientVia', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>التدرج - نهاية</label>
                    <input className={inputCls} value={settings.cta?.gradientTo ?? ''} dir="ltr" onChange={e => update('cta', 'gradientTo', e.target.value)} />
                  </div>
                </div>
              </div>
            )}

            {/* Brand Tab */}
            {tab === 'brand' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">العلامة التجارية</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>اسم الموقع</label>
                    <input className={inputCls} value={settings.brand?.name ?? ''} onChange={e => update('brand', 'name', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>البريد الإلكتروني</label>
                    <input className={inputCls} value={settings.brand?.email ?? ''} dir="ltr" onChange={e => update('brand', 'email', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>الهاتف</label>
                    <input className={inputCls} value={settings.brand?.phone ?? ''} dir="ltr" onChange={e => update('brand', 'phone', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>رقم واتساب</label>
                    <input className={inputCls} value={settings.brand?.whatsapp ?? ''} dir="ltr" placeholder="212600000000" onChange={e => update('brand', 'whatsapp', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>العنوان</label>
                    <input className={inputCls} value={settings.brand?.address ?? ''} onChange={e => update('brand', 'address', e.target.value)} />
                  </div>
                </div>
                <div>
                  <label className={labelCls}>وصف الموقع</label>
                  <textarea className={`${inputCls} h-20 resize-none`} value={settings.brand?.description ?? ''} onChange={e => update('brand', 'description', e.target.value)} />
                </div>
              </div>
            )}

            {/* Colors Tab */}
            {tab === 'colors' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">ألوان الموقع</h2>
                <div className="bg-blue-50 border border-blue-200 text-blue-700 text-sm rounded-xl p-3.5 flex items-start gap-2">
                  <Info className="w-5 h-5 shrink-0 mt-0.5" />
                  <span>اللون الأساسي يغيّر لون الموقع بالكامل (الأزرار، الروابط، الأقسام، التدرجات). اختر لونك المفضل وسيتم تطبيقه فور الحفظ.</span>
                </div>
                <div className="grid grid-cols-3 gap-6">
                  {[
                    { key: 'primary', label: 'اللون الأساسي', desc: 'يغيّر الموقع كله' },
                    { key: 'secondary', label: 'اللون الثانوي', desc: 'النقيض/المكمل' },
                    { key: 'accent', label: 'لون التمييز', desc: 'للتأكيد والبروز' },
                  ].map(c => (
                    <div key={c.key} className="space-y-3">
                      <label className={labelCls}>{c.label}</label>
                      <div className="flex items-center gap-3">
                        <input type="color" value={settings.colors?.[c.key] ?? '#2563eb'}
                          className="w-12 h-12 rounded-xl border-2 cursor-pointer" onChange={e => update('colors', c.key, e.target.value)} />
                        <input className={inputCls} value={settings.colors?.[c.key] ?? ''} dir="ltr"
                          onChange={e => update('colors', c.key, e.target.value)} />
                      </div>
                      <p className="text-xs text-gray-400">{c.desc}</p>
                    </div>
                  ))}
                </div>
                <div className="mt-4 p-4 bg-gray-50 rounded-xl">
                  <p className="text-xs font-medium text-gray-500 mb-2">معاينة الألوان:</p>
                  <div className="flex gap-3">
                    <div className="w-16 h-16 rounded-xl shadow-sm" style={{ backgroundColor: settings.colors?.primary ?? '#2563eb' }} />
                    <div className="w-16 h-16 rounded-xl shadow-sm" style={{ backgroundColor: settings.colors?.secondary ?? '#4f46e5' }} />
                    <div className="w-16 h-16 rounded-xl shadow-sm" style={{ backgroundColor: settings.colors?.accent ?? '#06b6d4' }} />
                  </div>
                </div>
              </div>
            )}

            {/* Pricing Tab */}
            {tab === 'pricing' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">صفحة الأسعار</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>عنوان قسم الأسعار</label>
                    <input className={inputCls} value={settings.pricing?.title ?? ''} onChange={e => update('pricing', 'title', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>وصف قسم الأسعار</label>
                    <input className={inputCls} value={settings.pricing?.subtitle ?? ''} onChange={e => update('pricing', 'subtitle', e.target.value)} />
                  </div>
                </div>
                <div className="space-y-4">
                  {(settings.pricing?.plans ?? []).map((plan: any, pi: number) => (
                    <div key={pi} className="border rounded-xl p-4 space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="font-bold">{plan.name}</span>
                        <div className="flex items-center gap-2">
                          {plan.popular && <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">الأكثر مبيعاً</span>}
                          <span className="text-sm font-bold">{plan.price} درهم</span>
                        </div>
                      </div>
                      <div className="space-y-2">
                        {plan.features?.map((f: string, fi: number) => (
                          <div key={fi} className="flex gap-2">
                            <input className={inputCls} value={f} onChange={e => updatePlanFeature(pi, fi, e.target.value)} />
                            <button onClick={() => {
                              const plans = [...settings.pricing.plans]
                              plans[pi] = { ...plans[pi], features: plans[pi].features.filter((_: any, j: number) => j !== fi) }
                              update('pricing', 'plans', plans)
                            }} className="text-red-400 hover:text-red-600 text-xs px-2">✕</button>
                          </div>
                        ))}
                        <button onClick={() => addPlanFeature(pi)} className="text-xs text-blue-600 hover:underline">+ إضافة ميزة</button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Navbar Tab */}
            {tab === 'navbar' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">الشريط العلوي (Navbar)</h2>
                <div>
                  <label className={labelCls}>اسم العلامة التجارية</label>
                  <input className={inputCls} value={settings.navbar?.brandName ?? ''} onChange={e => update('navbar', 'brandName', e.target.value)} />
                </div>
                <div>
                  <label className={labelCls}>روابط القائمة</label>
                  <p className="text-xs text-gray-400 mb-2">الروابط الحالية: {(settings.navbar?.links ?? []).map((l: any) => l.label).join('، ')}</p>
                  {(settings.navbar?.links ?? []).map((link: any, i: number) => (
                    <div key={i} className="flex gap-2 mb-2">
                      <input className={`${inputCls} flex-1`} value={link.label} placeholder="النص" onChange={e => {
                        const links = [...(settings.navbar?.links ?? [])]
                        links[i] = { ...links[i], label: e.target.value }
                        update('navbar', 'links', links)
                      }} />
                      <input className={`${inputCls} flex-1`} value={link.href} placeholder="/link" dir="ltr" onChange={e => {
                        const links = [...(settings.navbar?.links ?? [])]
                        links[i] = { ...links[i], href: e.target.value }
                        update('navbar', 'links', links)
                      }} />
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Featured Properties Tab */}
            {tab === 'featuredProperties' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">قسم العقارات المميزة</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>الشارة (Badge)</label>
                    <input className={inputCls} value={settings.featuredProperties?.badge ?? ''} onChange={e => update('featuredProperties', 'badge', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>العنوان</label>
                    <input className={inputCls} value={settings.featuredProperties?.title ?? ''} onChange={e => update('featuredProperties', 'title', e.target.value)} />
                  </div>
                  <div className="col-span-2">
                    <label className={labelCls}>الوصف</label>
                    <input className={inputCls} value={settings.featuredProperties?.subtitle ?? ''} onChange={e => update('featuredProperties', 'subtitle', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>نص زر عرض الكل</label>
                    <input className={inputCls} value={settings.featuredProperties?.viewAllText ?? ''} onChange={e => update('featuredProperties', 'viewAllText', e.target.value)} />
                  </div>
                </div>
              </div>
            )}

             {/* Interactive Map Tab */}
             {tab === 'interactiveMap' && (
               <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                 <h2 className="text-lg font-bold">الخريطة التفاعلية</h2>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="col-span-2">
                     <label className={labelCls}>العنوان</label>
                     <input className={inputCls} value={settings.interactiveMap?.title ?? ''} onChange={e => update('interactiveMap', 'title', e.target.value)} />
                   </div>
                   <div className="col-span-2">
                     <label className={labelCls}>الوصف</label>
                     <input className={inputCls} value={settings.interactiveMap?.subtitle ?? ''} onChange={e => update('interactiveMap', 'subtitle', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص البحث</label>
                     <input className={inputCls} value={settings.interactiveMap?.searchPlaceholder ?? ''} onChange={e => update('interactiveMap', 'searchPlaceholder', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص القائمة</label>
                     <input className={inputCls} value={settings.interactiveMap?.listTitle ?? ''} onChange={e => update('interactiveMap', 'listTitle', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>كل الأنواع</label>
                     <input className={inputCls} value={settings.interactiveMap?.allTypesText ?? ''} onChange={e => update('interactiveMap', 'allTypesText', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص رابط التفاصيل</label>
                     <input className={inputCls} value={settings.interactiveMap?.detailLinkText ?? ''} onChange={e => update('interactiveMap', 'detailLinkText', e.target.value)} />
                   </div>
                   <div className="col-span-2">
                     <label className={labelCls}>النص عند عدم الاختيار</label>
                     <input className={inputCls} value={settings.interactiveMap?.emptySelectionText ?? ''} onChange={e => update('interactiveMap', 'emptySelectionText', e.target.value)} />
                   </div>
                 </div>
               </div>
             )}

             {/* Craftsman Tab */}
             {tab === 'craftsman' as any && (
               <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                 <h2 className="text-lg font-bold">الحرفيون</h2>
                 <div className="flex items-center gap-3">
                   <input type="checkbox" id="craftsman-enabled" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                     checked={settings.craftsmen?.enabled !== false}
                     onChange={e => update('craftsmen', 'enabled', e.target.checked)} />
                   <label htmlFor="craftsman-enabled" className="text-sm font-medium">تفعيل قسم الحرفيين</label>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="col-span-2">
                     <label className={labelCls}>العنوان</label>
                     <input className={inputCls} value={settings.craftsmen?.title ?? ''} onChange={e => update('craftsmen', 'title', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>العنوان المميز</label>
                     <input className={inputCls} value={settings.craftsmen?.titleHighlight ?? ''} onChange={e => update('craftsmen', 'titleHighlight', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص "كل التخصصات"</label>
                     <input className={inputCls} value={settings.craftsmen?.allProfessionsText ?? ''} onChange={e => update('craftsmen', 'allProfessionsText', e.target.value)} />
                   </div>
                   <div className="col-span-2">
                     <label className={labelCls}>الوصف</label>
                     <input className={inputCls} value={settings.craftsmen?.subtitle ?? ''} onChange={e => update('craftsmen', 'subtitle', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>الشارة</label>
                     <input className={inputCls} value={settings.craftsmen?.badge ?? ''} onChange={e => update('craftsmen', 'badge', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص زر التسجيل</label>
                     <input className={inputCls} value={settings.craftsmen?.registerText ?? ''} onChange={e => update('craftsmen', 'registerText', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص "عرض الكل"</label>
                     <input className={inputCls} value={settings.craftsmen?.viewAllText ?? ''} onChange={e => update('craftsmen', 'viewAllText', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص "اختر حرفياً"</label>
                     <input className={inputCls} value={settings.craftsmen?.chooseText ?? ''} onChange={e => update('craftsmen', 'chooseText', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص "التفاصيل"</label>
                     <input className={inputCls} value={settings.craftsmen?.detailsText ?? ''} onChange={e => update('craftsmen', 'detailsText', e.target.value)} />
                   </div>
                   <div>
                     <label className={labelCls}>نص "اتصل"</label>
                     <input className={inputCls} value={settings.craftsmen?.contactText ?? ''} onChange={e => update('craftsmen', 'contactText', e.target.value)} />
                   </div>
                   <div className="col-span-2">
                     <label className={labelCls}>نص البحث</label>
                     <input className={inputCls} value={settings.craftsmen?.searchPlaceholder ?? ''} onChange={e => update('craftsmen', 'searchPlaceholder', e.target.value)} />
                   </div>
                   <div className="col-span-2">
                     <label className={labelCls}>نص فارغ (عند لا يوجد حرفيون)</label>
                     <input className={inputCls} value={settings.craftsmen?.emptyText ?? ''} onChange={e => update('craftsmen', 'emptyText', e.target.value)} />
                   </div>
                 </div>
               </div>
             )}

             {/* Vision Tab */}
            {tab === 'vision' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">أداة Vision</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>الشارة</label>
                    <input className={inputCls} value={settings.vision?.badge ?? ''} onChange={e => update('vision', 'badge', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>العنوان</label>
                    <input className={inputCls} value={settings.vision?.title ?? ''} onChange={e => update('vision', 'title', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>العنوان المميز</label>
                    <input className={inputCls} value={settings.vision?.titleHighlight ?? ''} onChange={e => update('vision', 'titleHighlight', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>تسمية المساحة</label>
                    <input className={inputCls} value={settings.vision?.areaLabel ?? ''} onChange={e => update('vision', 'areaLabel', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>تسمية السعر</label>
                    <input className={inputCls} value={settings.vision?.priceLabel ?? ''} onChange={e => update('vision', 'priceLabel', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>نص الحجز</label>
                    <input className={inputCls} value={settings.vision?.bookingText ?? ''} onChange={e => update('vision', 'bookingText', e.target.value)} />
                  </div>
                  <div className="col-span-2">
                    <label className={labelCls}>الوصف</label>
                    <textarea className={`${inputCls} h-20 resize-none`} value={settings.vision?.subtitle ?? ''} onChange={e => update('vision', 'subtitle', e.target.value)} />
                  </div>
                  <div className="col-span-2">
                    <label className={labelCls}>نص التلميح</label>
                    <input className={inputCls} value={settings.vision?.hintText ?? ''} onChange={e => update('vision', 'hintText', e.target.value)} />
                  </div>
                </div>
              </div>
            )}

            {/* Stats Tab */}
            {tab === 'stats' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">الإحصائيات</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div className="col-span-2">
                    <label className={labelCls}>العنوان</label>
                    <input className={inputCls} value={settings.stats?.title ?? ''} onChange={e => update('stats', 'title', e.target.value)} />
                  </div>
                  <div className="col-span-2">
                    <label className={labelCls}>الوصف</label>
                    <input className={inputCls} value={settings.stats?.subtitle ?? ''} onChange={e => update('stats', 'subtitle', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>تسمية العقارات</label>
                    <input className={inputCls} value={settings.stats?.propertiesLabel ?? ''} onChange={e => update('stats', 'propertiesLabel', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>تسمية الوكلاء</label>
                    <input className={inputCls} value={settings.stats?.agentsLabel ?? ''} onChange={e => update('stats', 'agentsLabel', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>تسمية الجولات</label>
                    <input className={inputCls} value={settings.stats?.toursLabel ?? ''} onChange={e => update('stats', 'toursLabel', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>تسمية التصميم 3D</label>
                    <input className={inputCls} value={settings.stats?.threeDLabel ?? ''} onChange={e => update('stats', 'threeDLabel', e.target.value)} />
                  </div>
                </div>
              </div>
            )}

            {/* Footer Tab */}
            {tab === 'footer' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">التذييل (Footer)</h2>
                <div className="grid grid-cols-2 gap-4">
                  <div className="col-span-2">
                    <label className={labelCls}>وصف الموقع</label>
                    <textarea className={`${inputCls} h-20 resize-none`} value={settings.footer?.description ?? ''} onChange={e => update('footer', 'description', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>النص السفلي (Copyright)</label>
                    <input className={inputCls} value={settings.footer?.copyright ?? ''} onChange={e => update('footer', 'copyright', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>عنوان الروابط السريعة</label>
                    <input className={inputCls} value={settings.footer?.quickLinksTitle ?? ''} onChange={e => update('footer', 'quickLinksTitle', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>عنوان الخدمات</label>
                    <input className={inputCls} value={settings.footer?.servicesTitle ?? ''} onChange={e => update('footer', 'servicesTitle', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>عنوان الاتصال</label>
                    <input className={inputCls} value={settings.footer?.contactTitle ?? ''} onChange={e => update('footer', 'contactTitle', e.target.value)} />
                  </div>
                </div>
              </div>
            )}

            {/* AdSense Tab */}
            {tab === 'adsense' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">إعلانات Google AdSense</h2>
                <div className="flex items-center gap-3 mb-4">
                  <input type="checkbox" id="adsense-enabled" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                    checked={settings.adsense?.enabled === true} onChange={e => update('adsense', 'enabled', e.target.checked)} />
                  <label htmlFor="adsense-enabled" className="text-sm font-medium">تفعيل الإعلانات</label>
                </div>
                <div className={`space-y-4 ${settings.adsense?.enabled ? '' : 'opacity-50 pointer-events-none'}`}>
                  <div>
                    <label className={labelCls}>معرف الناشر (Publisher ID)</label>
                    <input className={inputCls} value={settings.adsense?.publisherId ?? ''} dir="ltr" placeholder="ca-pub-xxxxxxxxxxxxxx" onChange={e => update('adsense', 'publisherId', e.target.value)} />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    {['topBanner', 'middleBanner', 'bottomBanner', 'sidebar'].map(slot => (
                      <div key={slot}>
                        <label className={labelCls}>معرف الإعلان - {slot}</label>
                        <input className={inputCls} value={settings.adsense?.adSlots?.[slot] ?? ''} dir="ltr" placeholder="1234567890"
                          onChange={e => {
                            const slots = { ...(settings.adsense?.adSlots ?? {}), [slot]: e.target.value }
                            setSettings((prev: any) => ({
                              ...prev,
                              adsense: { ...prev.adsense, adSlots: slots },
                            }))
                          }} />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* Promotions Tab */}
            {tab === 'promotions' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">الإشهارات والإعلانات الداخلية</h2>

                <div className="border rounded-xl p-4 space-y-4">
                  <h3 className="font-bold text-sm">الشريط الإعلاني العلوي</h3>
                  <div className="flex items-center gap-3">
                    <input type="checkbox" id="promo-enabled" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                      checked={settings.promotions?.topBanner?.enabled === true}
                      onChange={e => {
                        const tb = { ...(settings.promotions?.topBanner ?? {}), enabled: e.target.checked }
                        update('promotions', 'topBanner', tb)
                      }} />
                    <label htmlFor="promo-enabled" className="text-sm font-medium">تفعيل</label>
                  </div>
                  <div>
                    <label className={labelCls}>النص</label>
                    <input className={inputCls} value={settings.promotions?.topBanner?.text ?? ''} onChange={e => {
                      const tb = { ...(settings.promotions?.topBanner ?? {}), text: e.target.value }
                      update('promotions', 'topBanner', tb)
                    }} />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className={labelCls}>الرابط</label>
                      <input className={inputCls} value={settings.promotions?.topBanner?.link ?? ''} dir="ltr" onChange={e => {
                        const tb = { ...(settings.promotions?.topBanner ?? {}), link: e.target.value }
                        update('promotions', 'topBanner', tb)
                      }} />
                    </div>
                    <div>
                      <label className={labelCls}>لون الخلفية</label>
                      <div className="flex items-center gap-2">
                        <input type="color" value={settings.promotions?.topBanner?.backgroundColor ?? '#2563eb'}
                          className="w-10 h-10 rounded-lg border-2 cursor-pointer" onChange={e => {
                            const tb = { ...(settings.promotions?.topBanner ?? {}), backgroundColor: e.target.value }
                            update('promotions', 'topBanner', tb)
                          }} />
                        <input className={inputCls} value={settings.promotions?.topBanner?.backgroundColor ?? ''} dir="ltr" onChange={e => {
                          const tb = { ...(settings.promotions?.topBanner ?? {}), backgroundColor: e.target.value }
                          update('promotions', 'topBanner', tb)
                        }} />
                      </div>
                    </div>
                  </div>
                </div>

                <div className="border rounded-xl p-4 space-y-4">
                  <h3 className="font-bold text-sm">الإعلان (في hero badge)</h3>
                  <div className="flex items-center gap-3">
                    <input type="checkbox" id="announcement-enabled" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                      checked={settings.promotions?.announcement?.enabled === true}
                      onChange={e => {
                        const ann = { ...(settings.promotions?.announcement ?? {}), enabled: e.target.checked }
                        update('promotions', 'announcement', ann)
                      }} />
                    <label htmlFor="announcement-enabled" className="text-sm font-medium">تفعيل</label>
                  </div>
                  <div>
                    <label className={labelCls}>النص</label>
                    <input className={inputCls} value={settings.promotions?.announcement?.text ?? ''} onChange={e => {
                      const ann = { ...(settings.promotions?.announcement ?? {}), text: e.target.value }
                      update('promotions', 'announcement', ann)
                    }} />
                  </div>
                </div>
              </div>
            )}

            {tab === 'email' && (
              <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-5">
                <h2 className="text-lg font-bold">إعدادات البريد الإلكتروني (SMTP)</h2>
                <p className="text-sm text-gray-500">قم بإعداد خادم SMTP لإرسال الإشعارات البريدية للمستخدمين.</p>

                <div className="flex items-center gap-3">
                  <input type="checkbox" id="email-enabled" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                    checked={settings.email?.enabled === true}
                    onChange={e => { update('email', 'enabled', e.target.checked) }} />
                  <label htmlFor="email-enabled" className="text-sm font-medium">تفعيل إرسال البريد الإلكتروني</label>
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelCls}>خادم SMTP</label>
                    <input className={inputCls} value={settings.email?.host ?? ''} dir="ltr" placeholder="smtp.gmail.com" onChange={e => update('email', 'host', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>المنفذ</label>
                    <input className={inputCls} value={settings.email?.port ?? 587} dir="ltr" type="number" onChange={e => update('email', 'port', parseInt(e.target.value) || 587)} />
                  </div>
                  <div>
                    <label className={labelCls}>البريد الإلكتروني</label>
                    <input className={inputCls} value={settings.email?.user ?? ''} dir="ltr" placeholder="admin@example.com" onChange={e => update('email', 'user', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>كلمة المرور</label>
                    <input className={inputCls} value={settings.email?.pass ?? ''} dir="ltr" type="password" placeholder="••••••••" onChange={e => update('email', 'pass', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>اسم المرسل</label>
                    <input className={inputCls} value={settings.email?.fromName ?? ''} onChange={e => update('email', 'fromName', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>بريد المرسل</label>
                    <input className={inputCls} value={settings.email?.fromEmail ?? ''} dir="ltr" placeholder="noreply@example.com" onChange={e => update('email', 'fromEmail', e.target.value)} />
                  </div>
                  <div>
                    <label className={labelCls}>اتصال آمن (SSL)</label>
                    <div className="flex items-center gap-3 mt-2">
                      <input type="checkbox" id="email-secure" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                        checked={settings.email?.secure === true}
                        onChange={e => update('email', 'secure', e.target.checked)} />
                      <label htmlFor="email-secure" className="text-sm">نعم</label>
                    </div>
                  </div>
                </div>

                <div className="border-t pt-4">
                  <h3 className="font-bold text-sm mb-3">إشعارات تلقائية</h3>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <input type="checkbox" id="notify-contact" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                        checked={settings.email?.notifyOnContact !== false}
                        onChange={e => update('email', 'notifyOnContact', e.target.checked)} />
                      <label htmlFor="notify-contact" className="text-sm">إرسال إشعار عند استقبال رسالة جديدة من صفحة اتصل بنا</label>
                    </div>
                    <div className="flex items-center gap-3">
                      <input type="checkbox" id="notify-craftsman" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                        checked={settings.email?.notifyOnCraftsman !== false}
                        onChange={e => update('email', 'notifyOnCraftsman', e.target.checked)} />
                      <label htmlFor="notify-craftsman" className="text-sm">إرسال إشعار عند تسجيل حرفي جديد</label>
                    </div>
                    <div className="flex items-center gap-3">
                      <input type="checkbox" id="notify-message" className="w-5 h-5 rounded border-gray-300 text-blue-600"
                        checked={settings.email?.notifyOnMessage !== false}
                        onChange={e => update('email', 'notifyOnMessage', e.target.checked)} />
                      <label htmlFor="notify-message" className="text-sm">إرسال إشعار للمستخدم عند استقبال رسالة جديدة</label>
                    </div>
                  </div>
                </div>
              </div>
            )}

          </div>
        </div>
      </div>
    </div>
  )
}