'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import {
  Search, Star, Building2, MapPin, Phone,
  MessageSquare, Award, SlidersHorizontal, Users
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { MOROCCAN_CITIES } from '@/lib/validations'

type Agent = {
  id: string; name: string; image: string | null; phone: string | null
  city: string; propertyCount: number; reviewCount: number
  avgRating: number; memberSince: string
}

function StarDisplay({ rating }: { rating: number }) {
  return (
    <div className="flex gap-0.5">
      {[1,2,3,4,5].map(s => (
        <Star key={s} className={`w-3.5 h-3.5 ${s <= Math.round(rating) ? 'fill-amber-400 text-amber-400' : 'text-gray-200 fill-gray-200'}`} />
      ))}
    </div>
  )
}

function AgentSkeleton() {
  return (
    <div className="bg-white rounded-2xl border shadow-sm p-5 animate-pulse">
      <div className="flex items-center gap-4 mb-4">
        <div className="w-16 h-16 bg-gray-200 rounded-2xl shrink-0" />
        <div className="flex-1 space-y-2">
          <div className="h-4 bg-gray-200 rounded w-3/4" />
          <div className="h-3 bg-gray-200 rounded w-1/2" />
          <div className="h-3 bg-gray-200 rounded w-1/3" />
        </div>
      </div>
      <div className="flex gap-2">
        <div className="h-8 bg-gray-200 rounded-xl flex-1" />
        <div className="h-8 bg-gray-200 rounded-xl flex-1" />
      </div>
    </div>
  )
}

export default function AgentsPage() {
  const [agents, setAgents]     = useState<Agent[]>([])
  const [loading, setLoading]   = useState(true)
  const [search, setSearch]     = useState('')
  const [city, setCity]         = useState('')
  const [sortBy, setSortBy]     = useState('properties')

  useEffect(() => {
    setLoading(true)
    const params = new URLSearchParams()
    if (city) params.set('city', city)
    fetch(`/api/agents?${params}`)
      .then(r => r.json())
      .then(d => setAgents(d.agents ?? []))
      .finally(() => setLoading(false))
  }, [city])

  const displayed = agents
    .filter(a => !search || a.name?.toLowerCase().includes(search.toLowerCase()) || a.city?.includes(search))
    .sort((a, b) => {
      if (sortBy === 'rating')     return b.avgRating - a.avgRating
      if (sortBy === 'reviews')    return b.reviewCount - a.reviewCount
      return b.propertyCount - a.propertyCount
    })

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">

      {/* Hero */}
      <div className="bg-gradient-to-br from-blue-900 to-indigo-900 py-14">
        <div className="container mx-auto px-4 text-center text-white">
          <div className="inline-flex items-center gap-2 bg-white/10 text-white/80 text-sm px-4 py-1.5 rounded-full mb-4">
            <Users className="w-4 h-4" /> فريق من الخبراء المعتمدين
          </div>
          <h1 className="text-4xl font-bold mb-3">وكلاء عقاريون معتمدون</h1>
          <p className="text-blue-100 text-lg max-w-xl mx-auto">
            تواصل مع أفضل الوكلاء العقاريين في المغرب وابدأ رحلة البحث عن عقارك
          </p>
        </div>
      </div>

      <div className="container mx-auto px-4 py-8">

        {/* Filters */}
        <div className="bg-white rounded-2xl border shadow-sm p-4 mb-8 flex flex-wrap gap-3 items-center">
          <div className="relative flex-1 min-w-48">
            <Search className="absolute right-3 top-3 w-4 h-4 text-gray-400" />
            <input
              value={search}
              onChange={e => setSearch(e.target.value)}
              placeholder="ابحث باسم الوكيل أو المدينة..."
              className="w-full pr-10 pl-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <select
            value={city}
            onChange={e => setCity(e.target.value)}
            className="border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
          >
            <option value="">كل المدن</option>
            {MOROCCAN_CITIES.map(c => <option key={c} value={c}>{c}</option>)}
          </select>

          <select
            value={sortBy}
            onChange={e => setSortBy(e.target.value)}
            className="border border-gray-200 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
          >
            <option value="properties">الأكثر عقارات</option>
            <option value="rating">الأعلى تقييماً</option>
            <option value="reviews">الأكثر مراجعات</option>
          </select>

          {!loading && (
            <span className="text-sm text-gray-500 bg-gray-100 px-3 py-2 rounded-xl whitespace-nowrap">
              {displayed.length} وكيل
            </span>
          )}
        </div>

        {/* Grid */}
        {loading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {Array.from({ length: 6 }).map((_, i) => <AgentSkeleton key={i} />)}
          </div>
        ) : displayed.length === 0 ? (
          <div className="text-center py-20 text-gray-400">
            <Users className="w-14 h-14 mx-auto mb-4 opacity-20" />
            <p className="text-lg font-medium">لا يوجد وكلاء مطابقون</p>
            <p className="text-sm mt-1">جرّب مدينة أخرى أو غيّر معايير البحث</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {displayed.map(agent => (
              <div key={agent.id} className="bg-white rounded-2xl border shadow-sm hover:shadow-md transition-all duration-300 p-5 group">

                {/* Header */}
                <div className="flex items-start gap-4 mb-4">
                  <Link href={`/agents/${agent.id}`} className="shrink-0">
                    <div className="relative w-16 h-16 rounded-2xl bg-blue-100 overflow-hidden border-2 border-transparent group-hover:border-blue-300 transition-colors">
                      {agent.image
                        ? <Image src={agent.image} alt={agent.name ?? ''} fill className="object-cover" sizes="64px" />
                        : <div className="w-full h-full flex items-center justify-center text-2xl font-black text-blue-600">{agent.name?.[0]}</div>
                      }
                    </div>
                  </Link>

                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2">
                      <Link href={`/agents/${agent.id}`}>
                        <h3 className="font-bold text-gray-900 hover:text-blue-600 transition-colors truncate">
                          {agent.name}
                        </h3>
                      </Link>
                      {agent.avgRating >= 4.5 && (
                        <span className="bg-amber-50 text-amber-700 text-xs px-2 py-0.5 rounded-full flex items-center gap-1 shrink-0">
                          <Award className="w-3 h-3" /> مميز
                        </span>
                      )}
                    </div>

                    <div className="flex items-center gap-1.5 mt-1">
                      <StarDisplay rating={agent.avgRating} />
                      {agent.avgRating > 0 && (
                        <span className="text-xs text-gray-500">
                          {agent.avgRating.toFixed(1)} ({agent.reviewCount})
                        </span>
                      )}
                    </div>

                    <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                      <MapPin className="w-3 h-3" />
                      {agent.city !== '—' ? agent.city : 'المغرب'}
                    </div>
                  </div>
                </div>

                {/* Stats */}
                <div className="grid grid-cols-2 gap-3 mb-4 bg-gray-50 rounded-xl p-3">
                  <div className="text-center">
                    <div className="text-xl font-black text-blue-600">{agent.propertyCount}</div>
                    <div className="text-xs text-gray-500 mt-0.5">عقار</div>
                  </div>
                  <div className="text-center">
                    <div className="text-xl font-black text-amber-500">
                      {agent.avgRating > 0 ? agent.avgRating.toFixed(1) : '—'}
                    </div>
                    <div className="text-xs text-gray-500 mt-0.5">متوسط التقييم</div>
                  </div>
                </div>

                {/* Actions */}
                <div className="flex gap-2">
                  {agent.phone && (
                    <Button variant="outline" size="sm" className="flex-1 gap-1.5" asChild>
                      <a href={`tel:${agent.phone}`}>
                        <Phone className="w-3.5 h-3.5" /> اتصال
                      </a>
                    </Button>
                  )}
                  <Button size="sm" className="flex-1 gap-1.5" asChild>
                    <Link href={`/agents/${agent.id}`}>
                      <Building2 className="w-3.5 h-3.5" /> عرض الملف
                    </Link>
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}