'use client'

import { useEffect, useState, useCallback } from 'react'
import { PropertyCard } from '@/components/property/property-card'
import { Button } from '@/components/ui/button'
import {
  Search, SlidersHorizontal, Grid2X2, List,
  Loader2, Building2, ChevronDown, X, MapPin,
  TrendingDown, TrendingUp, Clock
} from 'lucide-react'

// =====================
// Types
// =====================
type Property = {
  id: string
  title: string
  price: number
  type: string
  status: string
  city: string
  neighborhood: string
  bedrooms: number | null
  bathrooms: number | null
  area: number
  images: string[]
  has3D: boolean
  hasVirtualTour: boolean
  isFeatured: boolean
  isVerified: boolean
  agent: { name: string; image: string | null }
}

type Filters = {
  city: string
  type: string
  maxPrice: string
  minArea: string
  bedrooms: string
  status: string
}

const CITIES = ['الدار البيضاء', 'الرباط', 'مراكش', 'فاس', 'طنجة', 'أكادير']
const TYPES = [
  { value: 'APARTMENT', label: 'شقة' },
  { value: 'VILLA', label: 'فيلا' },
  { value: 'COMMERCIAL', label: 'تجاري' },
  { value: 'LAND', label: 'أرض' },
  { value: 'RIAD', label: 'رياض' },
]
const PRICES = [
  { value: '500000', label: '500,000 درهم' },
  { value: '1000000', label: '1,000,000 درهم' },
  { value: '2000000', label: '2,000,000 درهم' },
  { value: '5000000', label: '5,000,000 درهم' },
  { value: '10000000', label: '10,000,000+ درهم' },
]

// =====================
// Skeleton Card
// =====================
function SkeletonCard() {
  return (
    <div className="bg-white rounded-xl overflow-hidden border animate-pulse">
      <div className="h-48 bg-gray-200" />
      <div className="p-4 space-y-3">
        <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-5 bg-gray-200 rounded w-1/3" />
        <div className="flex gap-4 pt-2 border-t">
          <div className="h-3 bg-gray-200 rounded w-1/4" />
          <div className="h-3 bg-gray-200 rounded w-1/4" />
          <div className="h-3 bg-gray-200 rounded w-1/4" />
        </div>
      </div>
    </div>
  )
}

// =====================
// Main Page
// =====================
export default function PropertiesPage() {
  const [properties, setProperties] = useState<Property[]>([])
  const [loading, setLoading] = useState(true)
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
  const [showFilters, setShowFilters] = useState(false)
  const [sortBy, setSortBy] = useState('newest')
  const [search, setSearch] = useState('')
  const [filters, setFilters] = useState<Filters>({
    city: '', type: '', maxPrice: '',
    minArea: '', bedrooms: '', status: ''
  })

  const LIMIT = 12

  const fetchProperties = useCallback(async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams()
      if (filters.city) params.set('city', filters.city)
      if (filters.type) params.set('type', filters.type)
      if (filters.maxPrice) params.set('maxPrice', filters.maxPrice)
      if (filters.status) params.set('status', filters.status)
      params.set('limit', String(LIMIT * page))
      const res = await fetch(`/api/properties?${params}`)
      const data = await res.json()
      let list: Property[] = data.properties || []

      // Client-side search filter
      if (search.trim()) {
        const q = search.toLowerCase()
        list = list.filter(p =>
          p.title.toLowerCase().includes(q) ||
          p.city.toLowerCase().includes(q) ||
          p.neighborhood.toLowerCase().includes(q)
        )
      }

      // Client-side sort
      list = [...list].sort((a, b) => {
        if (sortBy === 'price_asc') return a.price - b.price
        if (sortBy === 'price_desc') return b.price - a.price
        return 0 // newest = API default
      })

      setTotal(list.length)
      setProperties(list)
    } catch (err) {
      console.error(err)
    } finally {
      setLoading(false)
    }
  }, [filters, search, sortBy, page])

  useEffect(() => {
    const t = setTimeout(fetchProperties, 300)
    return () => clearTimeout(t)
  }, [fetchProperties])

  const activeFiltersCount = Object.values(filters).filter(Boolean).length

  const clearFilters = () => {
    setFilters({ city: '', type: '', maxPrice: '', minArea: '', bedrooms: '', status: '' })
    setSearch('')
    setPage(1)
  }

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

      {/* ── Header ── */}
      <div className="bg-white border-b sticky top-16 z-40 shadow-sm">
        <div className="container mx-auto px-4 py-3">
          <div className="flex flex-col md:flex-row gap-3 items-stretch md:items-center">

            {/* Search input */}
            <div className="relative flex-1 max-w-md">
              <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                type="text"
                value={search}
                onChange={e => { setSearch(e.target.value); setPage(1) }}
                placeholder="ابحث بالاسم أو المدينة أو الحي..."
                className="w-full pr-10 pl-4 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
              />
            </div>

            <div className="flex gap-2 items-center">
              {/* Filters toggle */}
              <Button
                variant="outline"
                size="sm"
                onClick={() => setShowFilters(!showFilters)}
                className={`gap-1.5 ${activeFiltersCount > 0 ? 'border-blue-500 text-blue-600' : ''}`}
              >
                <SlidersHorizontal className="w-4 h-4" />
                فلترة
                {activeFiltersCount > 0 && (
                  <span className="bg-blue-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {activeFiltersCount}
                  </span>
                )}
              </Button>

              {/* Sort */}
              <div className="relative">
                <select
                  value={sortBy}
                  onChange={e => setSortBy(e.target.value)}
                  className="appearance-none border rounded-lg px-3 py-2 pr-8 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
                >
                  <option value="newest">الأحدث</option>
                  <option value="price_asc">السعر: الأقل</option>
                  <option value="price_desc">السعر: الأعلى</option>
                </select>
                <ChevronDown className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
              </div>

              {/* View mode */}
              <div className="flex border rounded-lg overflow-hidden">
                <button
                  onClick={() => setViewMode('grid')}
                  className={`p-2 ${viewMode === 'grid' ? 'bg-blue-600 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'}`}
                >
                  <Grid2X2 className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setViewMode('list')}
                  className={`p-2 ${viewMode === 'list' ? 'bg-blue-600 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'}`}
                >
                  <List className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>

          {/* ── Filter Panel ── */}
          {showFilters && (
            <div className="mt-3 pt-3 border-t grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
              <select
                value={filters.city}
                onChange={e => { setFilters({ ...filters, city: e.target.value }); setPage(1) }}
                className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">كل المدن</option>
                {CITIES.map(c => <option key={c} value={c}>{c}</option>)}
              </select>

              <select
                value={filters.type}
                onChange={e => { setFilters({ ...filters, type: e.target.value }); setPage(1) }}
                className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">كل الأنواع</option>
                {TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
              </select>

              <select
                value={filters.maxPrice}
                onChange={e => { setFilters({ ...filters, maxPrice: e.target.value }); setPage(1) }}
                className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">أي سعر</option>
                {PRICES.map(p => <option key={p.value} value={p.value}>{p.label}</option>)}
              </select>

              <select
                value={filters.bedrooms}
                onChange={e => { setFilters({ ...filters, bedrooms: e.target.value }); setPage(1) }}
                className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">أي عدد غرف</option>
                <option value="1">1 غرفة</option>
                <option value="2">2 غرفة</option>
                <option value="3">3 غرف</option>
                <option value="4">4+ غرف</option>
              </select>

              <select
                value={filters.status}
                onChange={e => { setFilters({ ...filters, status: e.target.value }); setPage(1) }}
                className="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
              >
                <option value="">كل الحالات</option>
                <option value="AVAILABLE">متاح</option>
                <option value="RESERVED">محجوز</option>
                <option value="SOLD">مباع</option>
              </select>

              {activeFiltersCount > 0 && (
                <button
                  onClick={clearFilters}
                  className="flex items-center justify-center gap-1.5 text-sm text-red-500 hover:text-red-700 border border-red-200 rounded-lg px-3 py-2 hover:bg-red-50 transition-colors"
                >
                  <X className="w-4 h-4" /> مسح الكل
                </button>
              )}
            </div>
          )}
        </div>
      </div>

      {/* ── Results ── */}
      <div className="container mx-auto px-4 py-6">

        {/* Stats bar */}
        {!loading && (
          <div className="flex items-center justify-between mb-5">
            <div className="flex items-center gap-2 text-gray-600">
              <Building2 className="w-4 h-4 text-blue-600" />
              <span className="font-medium text-gray-900">{total.toLocaleString('ar-MA')}</span>
              <span className="text-sm">عقار متاح</span>
              {filters.city && (
                <span className="flex items-center gap-1 text-sm bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">
                  <MapPin className="w-3 h-3" /> {filters.city}
                </span>
              )}
            </div>
            <div className="text-sm text-gray-500 flex items-center gap-1.5">
              {sortBy === 'newest' && <><Clock className="w-4 h-4" /> الأحدث أولاً</>}
              {sortBy === 'price_asc' && <><TrendingUp className="w-4 h-4" /> السعر تصاعدي</>}
              {sortBy === 'price_desc' && <><TrendingDown className="w-4 h-4" /> السعر تنازلي</>}
            </div>
          </div>
        )}

        {/* Grid / List */}
        {loading ? (
          <div className={viewMode === 'grid'
            ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
            : 'space-y-4'}>
            {Array.from({ length: 8 }).map((_, i) => <SkeletonCard key={i} />)}
          </div>
        ) : properties.length === 0 ? (
          <div className="text-center py-20">
            <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Building2 className="w-10 h-10 text-gray-400" />
            </div>
            <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد نتائج</h3>
            <p className="text-gray-500 mb-4">جرّب تغيير الفلاتر أو مصطلح البحث</p>
            <Button onClick={clearFilters} variant="outline">مسح الفلاتر</Button>
          </div>
        ) : (
          <>
            <div className={viewMode === 'grid'
              ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
              : 'space-y-4'}>
              {properties.map(p => (
                <PropertyCard key={p.id} property={p} listMode={viewMode === 'list'} />
              ))}
            </div>

            {/* Load more */}
            {properties.length >= LIMIT * page && (
              <div className="text-center mt-10">
                <Button
                  variant="outline"
                  size="lg"
                  onClick={() => setPage(prev => prev + 1)}
                  className="px-10"
                >
                  تحميل المزيد
                </Button>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  )
}