'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowLeft, X, Bed, Bath, Maximize, MapPin, Building2, BarChart3 } from 'lucide-react'
import { getCompareList, clearCompare, removeFromCompare, CompareItem } from '@/lib/compare-store'
import { formatPrice } from '@/lib/utils'

const TYPE_LABELS: Record<string, string> = {
  APARTMENT: 'شقة',
  VILLA: 'فيلا',
  COMMERCIAL: 'تجاري',
  LAND: 'أرض',
  RIAD: 'رياض',
}

const STATUS_LABELS: Record<string, string> = {
  AVAILABLE: 'متاح',
  RESERVED: 'محجوز',
  SOLD: 'مباع',
}

type Row = { label: string; render: (item: CompareItem) => React.ReactNode }

const ROWS: Row[] = [
  { label: 'السعر', render: i => <span className="text-blue-600 font-bold text-lg">{formatPrice(i.price)}</span> },
  { label: 'النوع', render: i => TYPE_LABELS[i.type] || i.type },
  { label: 'الحالة', render: i => <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
    i.status === 'SOLD' ? 'bg-red-100 text-red-700' : i.status === 'RESERVED' ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700'
  }`}>{STATUS_LABELS[i.status] || i.status}</span> },
  { label: 'المدينة', render: i => i.city },
  { label: 'الحي', render: i => i.neighborhood || '—' },
  { label: 'المساحة', render: i => `${i.area} م²` },
  { label: 'غرف النوم', render: i => i.bedrooms ?? '—' },
  { label: 'الحمامات', render: i => i.bathrooms ?? '—' },
  { label: 'الميزات', render: i => (i.features?.length ?? 0) > 0 ? i.features.join('، ') : '—' },
]

export default function ComparePage() {
  const [items, setItems] = useState<CompareItem[]>([])

  useEffect(() => {
    setItems(getCompareList())
    const handler = () => setItems(getCompareList())
    window.addEventListener('compare-update', handler)
    return () => window.removeEventListener('compare-update', handler)
  }, [])

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      <div className="container mx-auto px-4 py-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <Link href="/" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 text-sm mb-3">
              <ArrowLeft className="w-4 h-4 rotate-180" /> العودة للرئيسية
            </Link>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <BarChart3 className="w-6 h-6 text-blue-600" /> مقارنة العقارات
            </h1>
          </div>
          {items.length > 0 && (
            <button onClick={clearCompare} className="text-sm text-gray-400 hover:text-red-500 transition-colors">
              إزالة الكل
            </button>
          )}
        </div>

        {items.length === 0 ? (
          <div className="text-center py-20 bg-white rounded-2xl border shadow-sm">
            <BarChart3 className="w-16 h-16 mx-auto mb-4 text-gray-200" />
            <h2 className="text-xl font-bold text-gray-700 mb-2">لا توجد عقارات للمقارنة</h2>
            <p className="text-gray-400 mb-6">أضف عقارات للمقارنة بالضغط على أيقونة <BarChart3 className="w-4 h-4 inline" /> في بطاقات العقارات</p>
            <Link href="/search" className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-xl font-medium hover:bg-blue-700 transition-colors">
              استعرض العقارات
            </Link>
          </div>
        ) : items.length < 2 ? (
          <div className="text-center py-16 bg-white rounded-2xl border shadow-sm">
            <h2 className="text-lg font-bold text-gray-700 mb-2">أضف عقاراً آخر للمقارنة</h2>
            <p className="text-gray-400">تحتاج إلى عقارين على الأقل لإجراء المقارنة</p>
          </div>
        ) : (
          <div className="bg-white rounded-2xl border shadow-sm overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-right">
                <thead>
                  <tr>
                    <th className="p-4 bg-gray-50 border-b font-medium text-gray-500 w-40">المواصفة</th>
                    {items.map(item => (
                      <th key={item.id} className="p-4 bg-gray-50 border-b text-center min-w-[220px]">
                        <div className="relative">
                          <button
                            onClick={() => removeFromCompare(item.id)}
                            className="absolute -top-2 -left-2 p-1 bg-red-100 text-red-500 rounded-full hover:bg-red-200 transition-colors"
                          >
                            <X className="w-3 h-3" />
                          </button>
                          <div className="relative h-32 rounded-xl overflow-hidden mb-3">
                            <Image src={item.image || '/placeholder-property.svg'} alt={item.title} fill className="object-cover" sizes="220px" />
                          </div>
                          <Link href={`/properties/${item.id}`} className="font-bold text-sm hover:text-blue-600 transition-colors line-clamp-1">
                            {item.title}
                          </Link>
                        </div>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {ROWS.map((row, idx) => (
                    <tr key={idx} className={idx % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}>
                      <td className="p-4 font-medium text-gray-600 border-b">{row.label}</td>
                      {items.map(item => (
                        <td key={item.id} className="p-4 text-center border-b text-sm">
                          {row.render(item)}
                        </td>
                      ))}
                    </tr>
                  ))}
                  <tr>
                    <td className="p-4" />
                    {items.map(item => (
                      <td key={item.id} className="p-4 text-center border-t">
                        <Link
                          href={`/properties/${item.id}`}
                          className="inline-flex items-center gap-1 text-blue-600 text-sm font-medium hover:text-blue-700"
                        >
                          <Building2 className="w-4 h-4" /> عرض التفاصيل
                        </Link>
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}