'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import { useRouter } from 'next/navigation'
import { useSession } from 'next-auth/react'
import {
  Building2, MapPin, DollarSign, Image as ImageIcon,
  Check, ChevronRight, ChevronLeft, Loader2, Upload, X, Sparkles,
  Search as SearchIcon
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { VALID_PROPERTY_TYPES, PROPERTY_TYPE_LABELS, MOROCCAN_CITIES, PropertyType, PropertyStatus } from '@/lib/validations'

// ── Types ─────────────────────────────────────────────────────────
type Step = 1 | 2 | 3 | 4
type FormData = {
  title: string; description: string; type: PropertyType; status: PropertyStatus
  price: string; area: string; bedrooms: string; bathrooms: string; floor: string
  city: string; neighborhood: string; address: string
  latitude: number; longitude: number; boundaries: any
  features: string[]; images: string[]
  has3D: boolean; hasVirtualTour: boolean
  guestName: string; guestPhone: string
}

const STEPS = [
  { num: 1, label: 'المعلومات الأساسية', icon: <Building2 className="w-5 h-5" /> },
  { num: 2, label: 'السعر والمواصفات',    icon: <DollarSign className="w-5 h-5" /> },
  { num: 3, label: 'الموقع',              icon: <MapPin className="w-5 h-5" /> },
  { num: 4, label: 'الصور والمميزات',     icon: <ImageIcon className="w-5 h-5" /> },
]

const FEATURES_LIST = ['مسبح', 'حديقة', 'موقف سيارات', 'مصعد', 'أمن 24/7', 'تكييف مركزي', 'غرفة خادمة', 'مستودع', 'شرفة', 'إطلالة بحرية', 'قرب المدارس', 'قرب المستشفى']

const INIT: FormData = {
  title: '', description: '', type: 'APARTMENT', status: 'AVAILABLE',
  price: '', area: '', bedrooms: '', bathrooms: '', floor: '',
  city: '', neighborhood: '', address: '',
  latitude: 33.5731, longitude: -7.5898, boundaries: null,
  features: [], images: [], has3D: false, hasVirtualTour: false,
  guestName: '', guestPhone: '',
}

// ── Leaflet Map for Step 3 ─────────────────────────────────────
function LocationMap({ latitude, longitude, onPick, propertyType }: {
  latitude: number; longitude: number
  onPick: (lat: number, lng: number) => void
  propertyType: string
}) {
  const containerRef = useRef<HTMLDivElement>(null)
  const mapRef = useRef<any>(null)
  const markerRef = useRef<any>(null)

  useEffect(() => {
    if (!containerRef.current || mapRef.current) return

    const init = async () => {
      const L = (await import('leaflet')).default

      delete (L.Icon.Default.prototype as any)._getIconUrl
      L.Icon.Default.mergeOptions({
        iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
        iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',
      })

      const map = L.map(containerRef.current!, {
        center: [latitude, longitude],
        zoom: 11,
        zoomControl: true,
        scrollWheelZoom: true,
      })

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap',
        maxZoom: 19,
      }).addTo(map)

      const pin = L.marker([latitude, longitude], { draggable: true }).addTo(map)
      pin.on('dragend', () => {
        const { lat, lng } = pin.getLatLng()
        onPick(lat, lng)
      })

      map.on('click', (e: any) => {
        const { lat, lng } = e.latlng
        pin.setLatLng([lat, lng])
        onPick(lat, lng)
      })

      mapRef.current = map
      markerRef.current = pin
    }

    init()
    return () => {
      if (mapRef.current) {
        mapRef.current.remove()
        mapRef.current = null
      }
    }
  }, [])

  // Sync marker position when form coordinates change externally
  useEffect(() => {
    if (markerRef.current) {
      markerRef.current.setLatLng([latitude, longitude])
    }
  }, [latitude, longitude])

  return (
    <div className="rounded-2xl overflow-hidden border bg-gray-100 h-96 relative">
      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
      <div className="absolute top-3 left-3 z-[1000] bg-white/90 backdrop-blur px-3 py-1.5 rounded-lg text-[10px] font-bold text-blue-600 shadow-sm border border-blue-100">
        {propertyType === 'LAND' ? '← اضغط على الخريطة لتحديد حدود الأرض' : 'حدد موقع العقار بالضغط أو السحب'}
      </div>
    </div>
  )
}

export default function NewPropertyPage() {
  const router = useRouter()
  const { data: session } = useSession()
  const [step, setStep]       = useState<Step>(1)
  const [form, setForm]       = useState<FormData>(INIT)
  const [errors, setErrors]   = useState<Partial<FormData>>({})
  const [loading, setLoading] = useState(false)
  const [aiLoading, setAiLoading] = useState(false)

  const set = (field: keyof FormData, value: any) => {
    setForm(f => ({ ...f, [field]: value }))
    setErrors(e => ({ ...e, [field]: undefined }))
  }

  const toggleFeature = (f: string) =>
    set('features', form.features.includes(f)
      ? form.features.filter(x => x !== f)
      : [...form.features, f])

  // ── Validate current step ──────────────────────────────────────
  const validate = (): boolean => {
    const e: any = {}
    if (step === 1) {
      if (!form.title.trim())       e.title = 'العنوان مطلوب'
      if (!form.description.trim()) e.description = 'الوصف مطلوب'
      if (!form.type)               e.type = 'نوع العقار مطلوب'
    }
    if (step === 2) {
      if (!form.price || isNaN(Number(form.price))) e.price = 'السعر مطلوب'
      if (!form.area  || isNaN(Number(form.area)))  e.area  = 'المساحة مطلوبة'
    }
    if (step === 3) {
      if (!form.city)         e.city    = 'المدينة مطلوبة'
      if (!form.neighborhood) e.neighborhood = 'الحي مطلوب'
    }
    if (step === 4 && !session) {
      if (!form.guestName.trim())  e.guestName = 'الاسم مطلوب للزوار'
      if (!form.guestPhone.trim()) e.guestPhone = 'رقم الهاتف مطلوب للزوار'
    }
    setErrors(e)
    return Object.keys(e).length === 0
  }

  const next = () => validate() && setStep(s => Math.min(s + 1, 4) as Step)
  const prev = () => setStep(s => Math.max(s - 1, 1) as Step)

  // ── AI: Auto-generate description ─────────────────────────────
  const generateDescription = async () => {
    if (!form.title || !form.type || !form.city) return
    setAiLoading(true)
    try {
      const res = await fetch('/api/ai/description', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: form.title, type: form.type, city: form.city, area: form.area, bedrooms: form.bedrooms }),
      })
      const data = await res.json()
      if (data.description) set('description', data.description)
    } catch {}
    finally { setAiLoading(false) }
  }

  // ── Submit ─────────────────────────────────────────────────────
  const submit = async () => {
    if (!validate()) return
    setLoading(true)
    try {
      const res = await fetch('/api/properties', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...form,
          price: Number(form.price),
          area: Number(form.area),
          bedrooms: form.bedrooms ? Number(form.bedrooms) : null,
          bathrooms: form.bathrooms ? Number(form.bathrooms) : null,
          floor: form.floor ? Number(form.floor) : null,
          latitude: form.latitude,
          longitude: form.longitude,
          boundaries: form.boundaries,
          guestName: form.guestName,
          guestPhone: form.guestPhone,
        }),
      })
      const data = await res.json()
      if (res.ok) router.push(`/properties/${data.property.id}`)
      else setErrors({ title: data.error })
    } catch { setErrors({ title: 'خطأ في الخادم' }) }
    finally { setLoading(false) }
  }

  const inputCls = (field: keyof FormData) =>
    `w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm ${errors[field] ? 'border-red-400 bg-red-50' : 'border-gray-200'}`

  return (
    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
      <div className="container mx-auto px-4 max-w-3xl">

        {/* Header */}
        <div className="mb-8">
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Building2 className="w-7 h-7 text-blue-600" />
            إضافة عقار جديد
          </h1>
          <p className="text-gray-500 text-sm mt-1">أكمل الخطوات الأربع لنشر عقارك</p>
        </div>

        {/* Steps indicator */}
        <div className="flex gap-2 mb-8">
          {STEPS.map((s, i) => (
            <div key={s.num} className="flex items-center flex-1">
              <div className={`flex items-center gap-2 flex-1`}>
                <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 font-bold text-sm transition-all ${
                  step > s.num ? 'bg-green-500 text-white' :
                  step === s.num ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' :
                  'bg-gray-200 text-gray-500'
                }`}>
                  {step > s.num ? <Check className="w-4 h-4" /> : s.num}
                </div>
                <span className={`text-xs hidden md:block font-medium ${step === s.num ? 'text-blue-600' : 'text-gray-400'}`}>
                  {s.label}
                </span>
              </div>
              {i < STEPS.length - 1 && (
                <div className={`h-0.5 flex-1 mx-2 transition-all ${step > s.num ? 'bg-green-400' : 'bg-gray-200'}`} />
              )}
            </div>
          ))}
        </div>

        {/* Form card */}
        <div className="bg-white rounded-2xl shadow-sm border p-6 md:p-8">

          {/* ── Step 1: Basic Info ─────────────────────────────── */}
          {step === 1 && (
            <div className="space-y-5">
              <h2 className="text-lg font-bold mb-6">المعلومات الأساسية</h2>

              <div>
                <label className="block text-sm font-medium mb-1.5">عنوان العقار *</label>
                <input className={inputCls('title')} value={form.title} onChange={e => set('title', e.target.value)}
                  placeholder="مثال: شقة فاخرة 3 غرف في مرس السلطان" />
                {errors.title && <p className="text-red-500 text-xs mt-1">{errors.title}</p>}
              </div>

              <div>
                <div className="flex justify-between items-center mb-1.5">
                  <label className="text-sm font-medium">وصف العقار *</label>
                  <Button type="button" variant="outline" size="sm" onClick={generateDescription}
                    disabled={aiLoading || !form.title} className="gap-1.5 text-xs h-7">
                    {aiLoading ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3 text-purple-500" />}
                    توليد بالذكاء الاصطناعي
                  </Button>
                </div>
                <textarea className={`${inputCls('description')} h-32 resize-none`}
                  value={form.description} onChange={e => set('description', e.target.value)}
                  placeholder="صف العقار بالتفصيل: الموقع، المميزات، المحيط..." />
                {errors.description && <p className="text-red-500 text-xs mt-1">{errors.description}</p>}
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1.5">نوع العقار *</label>
                  <select className={inputCls('type')} value={form.type} onChange={e => set('type', e.target.value)}>
                    {VALID_PROPERTY_TYPES.map(t => (
                      <option key={t} value={t}>{PROPERTY_TYPE_LABELS[t]}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1.5">حالة العقار</label>
                  <select className={inputCls('status')} value={form.status} onChange={e => set('status', e.target.value)}>
                    <option value="AVAILABLE">متاح</option>
                    <option value="RESERVED">محجوز</option>
                    <option value="SOLD">مباع</option>
                    <option value="RENTED">مؤجر</option>
                  </select>
                </div>
              </div>

              <div className="flex gap-6 pt-2">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" checked={form.has3D} onChange={e => set('has3D', e.target.checked)}
                    className="w-4 h-4 accent-purple-600" />
                  <span className="text-sm">يدعم التصميم 3D</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" checked={form.hasVirtualTour} onChange={e => set('hasVirtualTour', e.target.checked)}
                    className="w-4 h-4 accent-green-600" />
                  <span className="text-sm">يدعم جولة 360°</span>
                </label>
              </div>
            </div>
          )}

          {/* ── Step 2: Price & Specs ──────────────────────────── */}
          {step === 2 && (
            <div className="space-y-5">
              <h2 className="text-lg font-bold mb-6">السعر والمواصفات</h2>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1.5">السعر (درهم) *</label>
                  <input type="number" className={inputCls('price')} value={form.price}
                    onChange={e => set('price', e.target.value)} placeholder="1,500,000" />
                  {errors.price && <p className="text-red-500 text-xs mt-1">{errors.price}</p>}
                  {form.price && !isNaN(Number(form.price)) && (
                    <p className="text-xs text-blue-600 mt-1">
                      {Number(form.price).toLocaleString('ar-MA')} درهم
                    </p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1.5">المساحة (م²) *</label>
                  <input type="number" className={inputCls('area')} value={form.area}
                    onChange={e => set('area', e.target.value)} placeholder="120" />
                  {errors.area && <p className="text-red-500 text-xs mt-1">{errors.area}</p>}
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1.5">غرف النوم</label>
                  <input type="number" className={inputCls('bedrooms')} value={form.bedrooms}
                    onChange={e => set('bedrooms', e.target.value)} placeholder="3" min="0" max="20" />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1.5">الحمامات</label>
                  <input type="number" className={inputCls('bathrooms')} value={form.bathrooms}
                    onChange={e => set('bathrooms', e.target.value)} placeholder="2" min="0" max="10" />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1.5">الطابق</label>
                  <input type="number" className={inputCls('floor')} value={form.floor}
                    onChange={e => set('floor', e.target.value)} placeholder="3" min="0" />
                </div>
              </div>

              {form.price && form.area && (
                <div className="bg-blue-50 rounded-xl p-4 text-sm text-blue-700">
                  سعر المتر المربع:{' '}
                  <strong>{(Number(form.price) / Number(form.area)).toLocaleString('ar-MA', { maximumFractionDigits: 0 })} درهم/م²</strong>
                </div>
              )}
            </div>
          )}

          {/* ── Step 3: Location ──────────────────────────────── */}
          {step === 3 && (
            <div className="space-y-5">
              <h2 className="text-lg font-bold mb-6">الموقع الجغرافي</h2>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-1.5">المدينة *</label>
                  <select className={inputCls('city')} value={form.city} onChange={e => set('city', e.target.value)}>
                    <option value="">اختر المدينة</option>
                    {MOROCCAN_CITIES.map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                  {errors.city && <p className="text-red-500 text-xs mt-1">{errors.city}</p>}
                </div>
                <div>
                  <label className="block text-sm font-medium mb-1.5">الحي *</label>
                  <input className={inputCls('neighborhood')} value={form.neighborhood}
                    onChange={e => set('neighborhood', e.target.value)} placeholder="مرس السلطان، كاليفورنيا..." />
                  {errors.neighborhood && <p className="text-red-500 text-xs mt-1">{errors.neighborhood}</p>}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-1.5">العنوان التفصيلي</label>
                <input className={inputCls('address')} value={form.address}
                  onChange={e => set('address', e.target.value)} placeholder="شارع محمد الخامس، رقم 45..." />
              </div>

              <LocationMap
                latitude={form.latitude}
                longitude={form.longitude}
                propertyType={form.type}
                onPick={(lat, lng) => {
                  set('latitude', lat)
                  set('longitude', lng)
                }}
              />

              <div className="flex items-center gap-4 text-sm text-gray-500">
                <span>خط العرض: {form.latitude.toFixed(4)}</span>
                <span>خط الطول: {form.longitude.toFixed(4)}</span>
              </div>
            </div>
          )}

          {/* ── Step 4: Images & Features ─────────────────────── */}
          {step === 4 && (
            <div className="space-y-6">
              <h2 className="text-lg font-bold mb-6">الصور والمميزات</h2>

              {/* Image URLs */}
              <div>
                <label className="block text-sm font-medium mb-2">روابط الصور</label>
                <div className="space-y-2">
                  {[...form.images, ''].map((img, i) => (
                    <div key={i} className="flex gap-2">
                      <input
                        className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value={img}
                        onChange={e => {
                          const imgs = [...form.images]
                          imgs[i] = e.target.value
                          set('images', imgs.filter((_, idx) => idx < form.images.length || e.target.value))
                        }}
                        placeholder={`رابط الصورة ${i + 1} (https://...)`}
                        dir="ltr"
                      />
                      {i < form.images.length && (
                        <button onClick={() => set('images', form.images.filter((_, idx) => idx !== i))}
                          className="text-red-400 hover:text-red-600 p-2">
                          <X className="w-4 h-4" />
                        </button>
                      )}
                    </div>
                  ))}
                </div>
                <p className="text-xs text-gray-400 mt-1">أضف روابط صور Cloudinary أو Unsplash</p>
              </div>

              {/* Features */}
              <div>
                <label className="block text-sm font-medium mb-3">مميزات العقار</label>
                <div className="flex flex-wrap gap-2">
                  {FEATURES_LIST.map(f => (
                    <button key={f} type="button" onClick={() => toggleFeature(f)}
                      className={`px-4 py-2 rounded-full text-sm border transition-all ${
                        form.features.includes(f)
                          ? 'bg-blue-600 text-white border-blue-600'
                          : 'border-gray-200 text-gray-600 hover:border-blue-400'
                      }`}>
                      {f}
                    </button>
                  ))}
                </div>
              </div>

              {/* Guest Info */}
              {!session && (
                <div className="bg-amber-50 rounded-2xl p-6 border border-amber-100 space-y-4">
                  <h3 className="font-bold text-amber-900 flex items-center gap-2">
                    <Sparkles className="w-5 h-5" />
                    معلومات التواصل (نشره كزائر)
                  </h3>
                  <p className="text-xs text-amber-700">سيتم إنشاء حساب لك تلقائياً برقم هاتفك لتتمكن من إدارة إعلانك لاحقاً.</p>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-medium mb-1.5 text-amber-800">الاسم الكامل *</label>
                      <input className={inputCls('guestName')} value={form.guestName} onChange={e => set('guestName', e.target.value)}
                        placeholder="الاسم الثلاثي" />
                      {errors.guestName && <p className="text-red-500 text-[10px] mt-1">{errors.guestName}</p>}
                    </div>
                    <div>
                      <label className="block text-xs font-medium mb-1.5 text-amber-800">رقم الهاتف *</label>
                      <input className={inputCls('guestPhone')} value={form.guestPhone} onChange={e => set('guestPhone', e.target.value)}
                        placeholder="06XXXXXXXX" dir="ltr" />
                      {errors.guestPhone && <p className="text-red-500 text-[10px] mt-1">{errors.guestPhone}</p>}
                    </div>
                  </div>
                </div>
              )}

              {/* Summary */}
              <div className="bg-gray-50 rounded-xl p-5 text-sm space-y-2 border">
                <h3 className="font-bold mb-3">ملخص العقار</h3>
                <div className="grid grid-cols-2 gap-x-8 gap-y-1.5 text-gray-600">
                  <span>النوع:</span>         <span className="font-medium text-gray-900">{PROPERTY_TYPE_LABELS[form.type] ?? form.type}</span>
                  <span>المدينة:</span>        <span className="font-medium text-gray-900">{form.city || '—'}</span>
                  <span>السعر:</span>          <span className="font-medium text-blue-600">{form.price ? `${Number(form.price).toLocaleString('ar-MA')} درهم` : '—'}</span>
                  <span>المساحة:</span>        <span className="font-medium text-gray-900">{form.area ? `${form.area} م²` : '—'}</span>
                  <span>المميزات:</span>       <span className="font-medium text-gray-900">{form.features.length > 0 ? form.features.join('، ') : '—'}</span>
                  <span>عدد الصور:</span>      <span className="font-medium text-gray-900">{form.images.length}</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Navigation Buttons */}
        <div className="flex justify-between mt-6">
          <Button variant="outline" onClick={prev} disabled={step === 1} className="gap-2">
            <ChevronRight className="w-4 h-4" /> السابق
          </Button>
          {step < 4 ? (
            <Button onClick={next} className="gap-2">
              التالي <ChevronLeft className="w-4 h-4" />
            </Button>
          ) : (
            <Button onClick={submit} disabled={loading} className="gap-2 bg-green-600 hover:bg-green-700 px-8">
              {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
              نشر العقار
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}