'use client'

import { useEffect, useState, useCallback, useMemo } from 'react'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import { MapPin, Search, Wrench, Loader2, ArrowLeft, Sparkles, Star } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { CraftsmanCard } from '@/components/craftsmen/craftsman-card'
import { useSiteSettings } from '@/hooks/use-site-settings'

const CraftsmanMap = dynamic(
  () => import('@/components/craftsmen/craftsman-map').then(m => m.CraftsmanMap),
  { ssr: false, loading: () => <div className="h-[400px] bg-gray-100 rounded-2xl flex items-center justify-center"><Loader2 className="w-8 h-8 animate-spin text-blue-400" /></div> }
)

const PROFESSIONS = ['سباك', 'كهربائي', 'نجار', 'بناء', 'دهان', 'بلاط', 'حدادة', 'مكيفات', 'جبس', 'زجاج']

export function CraftsmanSection() {
  const [craftsmen, setCraftsmen] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [selected, setSelected] = useState<any>(null)
  const [professionFilter, setProfessionFilter] = useState('')
  const [cityFilter, setCityFilter] = useState('')
  const s = useSiteSettings()
  const cs = s.craftsmen ?? {}

  if (cs.enabled === false) return null

  const load = useCallback(async () => {
    setLoading(true)
    const params = new URLSearchParams({ limit: '50' })
    if (professionFilter) params.set('profession', professionFilter)
    if (cityFilter) params.set('city', cityFilter)
    try {
      const res = await fetch(`/api/craftsmen?${params}`)
      const data = await res.json()
      setCraftsmen(data.craftsmen ?? [])
    } catch {}
    finally { setLoading(false) }
  }, [professionFilter, cityFilter])

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

  const cities = useMemo(() => {
    const set = new Set(craftsmen.map(c => c.city))
    return Array.from(set).sort()
  }, [craftsmen])

  return (
    <section className="py-20 bg-gradient-to-b from-gray-50 to-white" id="craftsmen">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 bg-blue-50 text-blue-600 text-sm font-medium px-4 py-2 rounded-full mb-4">
            <Wrench className="w-4 h-4" />
            {cs.badge || 'حرفيون محترفون'}
          </div>
          <h2 className="text-3xl md:text-4xl font-bold mb-3 text-gray-900">
            {cs.title || 'ابحث عن '}<span className="text-blue-600">{cs.titleHighlight || 'حرفي متخصص'}</span>
          </h2>
          <p className="text-gray-500 max-w-2xl mx-auto">
            {cs.subtitle || 'تصفح أفضل الحرفيين في مدينتك، قارن الأسعار، وتواصل مباشرة'}
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
          <div className="lg:col-span-2">
            <div className="bg-white rounded-2xl shadow-lg border overflow-hidden">
              <div className="p-3 border-b flex flex-wrap gap-2 items-center">
                <select value={professionFilter} onChange={e => setProfessionFilter(e.target.value)}
                  className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                  <option value="">{cs.allProfessionsText || 'كل التخصصات'}</option>
                  {PROFESSIONS.map(p => <option key={p} value={p}>{p}</option>)}
                </select>
                <select value={cityFilter} onChange={e => setCityFilter(e.target.value)}
                  className="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                  <option value="">{cs.allCitiesText || 'كل المدن'}</option>
                  {cities.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
                <span className="text-sm text-gray-500 bg-gray-100 px-3 py-2 rounded-lg">
                  <MapPin className="inline w-3.5 h-3.5 ml-1 text-blue-500" />
                  {loading ? '...' : `${craftsmen.length} حرفي`}
                </span>
              </div>
              <CraftsmanMap craftsmen={craftsmen} onSelect={setSelected} selectedId={selected?.id} />
            </div>
          </div>

          <div className="space-y-4">
            {selected ? (
              <div className="bg-blue-50 border border-blue-200 rounded-2xl p-5">
                <div className="flex items-center gap-3 mb-3">
                  <div className="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-lg">
                    {selected.name.charAt(0)}
                  </div>
                  <div>
                    <h3 className="font-bold">{selected.name}</h3>
                    <p className="text-sm text-blue-600">{selected.profession}</p>
                  </div>
                </div>
                <div className="flex items-center gap-1 text-sm text-gray-500 mb-2">
                  <Star className="w-4 h-4 fill-amber-400 text-amber-400" />
                  {selected.rating.toFixed(1)} ({selected.reviewCount} تقييم)
                </div>
                <p className="text-sm text-gray-600 line-clamp-3 mb-3">{selected.description}</p>
                <Button asChild className="w-full gap-1.5" size="sm">
                  <Link href={`/craftsmen/${selected.id}`}>عرض الملف الشخصي</Link>
                </Button>
              </div>
            ) : (
              <div className="bg-white rounded-2xl border shadow-sm p-8 text-center text-gray-400">
                <Wrench className="w-12 h-12 mx-auto mb-3 opacity-20" />
                <p className="text-sm font-medium">{cs.emptyText || 'انقر على علامة لرؤية تفاصيل الحرفي'}</p>
              </div>
            )}
          </div>
        </div>

        {/* Craftsmen grid */}
        {!loading && craftsmen.length > 0 && (
          <div className="mb-10">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {craftsmen.slice(0, 8).map(c => (
                <CraftsmanCard key={c.id} craftsman={c} />
              ))}
            </div>
          </div>
        )}

        <div className="text-center">
          <Button asChild variant="outline" className="gap-2 rounded-xl">
            <Link href="/craftsmen">
              {cs.viewAllText || 'عرض جميع الحرفيين'}
              <ArrowLeft className="w-4 h-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}