import Link from 'next/link'
import { prisma } from '@/lib/prisma'
import { ArrowLeft, Wrench, Search, MapPin } from 'lucide-react'
import { CraftsmanCard } from '@/components/craftsmen/craftsman-card'

export const metadata = { title: 'الحرفيون', description: 'ابحث عن أفضل الحرفيين المتخصصين في مدينتك' }

export default async function CraftsmenPage({ searchParams }: { searchParams: Promise<{ city?: string; profession?: string }> }) {
  const params = await searchParams
  const where: any = { isVerified: true }
  if (params.city) where.city = params.city
  if (params.profession) where.profession = params.profession

  const craftsmen = await prisma.craftsman.findMany({
    where, take: 50, orderBy: { rating: 'desc' },
  })
  const cities = await prisma.craftsman.findMany({ where: { isVerified: true }, distinct: ['city'], select: { city: true } })
  const professions = await prisma.craftsman.findMany({ where: { isVerified: true }, distinct: ['profession'], select: { profession: true } })

  return (
    <div className="min-h-screen bg-gray-50 py-10" dir="rtl">
      <div className="container mx-auto px-4">
        <div className="flex items-center gap-3 mb-8">
          <Link href="/" className="text-gray-400 hover:text-gray-600"><ArrowLeft className="w-5 h-5 rotate-180" /></Link>
          <div>
            <h1 className="text-2xl sm:text-3xl font-bold">الحرفيون المتخصصون</h1>
            <p className="text-gray-500 text-sm">ابحث عن حرفي متخصص في مدينتك</p>
          </div>
        </div>

        <div className="flex flex-wrap gap-3 mb-8">
          <form className="flex flex-wrap gap-3 items-center">
            <select name="profession" className="border border-gray-200 rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option value="">كل التخصصات</option>
              {professions.map((p: any) => <option key={p.profession} value={p.profession} selected={params.profession === p.profession}>{p.profession}</option>)}
            </select>
            <select name="city" className="border border-gray-200 rounded-xl px-4 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option value="">كل المدن</option>
              {cities.map((c: any) => <option key={c.city} value={c.city} selected={params.city === c.city}>{c.city}</option>)}
            </select>
            <button type="submit" className="bg-blue-600 text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-blue-700 transition-colors flex items-center gap-2">
              <Search className="w-4 h-4" /> بحث
            </button>
          </form>
        </div>

        {craftsmen.length === 0 ? (
          <div className="text-center py-20 text-gray-400">
            <Wrench className="w-16 h-16 mx-auto mb-4 opacity-20" />
            <p className="text-lg">لا يوجد حرفيون في هذا التخصص أو المدينة حالياً</p>
            <Link href="/craftsmen" className="text-blue-600 hover:underline mt-2 inline-block">عرض الكل</Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {craftsmen.map(c => <CraftsmanCard key={c.id} craftsman={c as any} />)}
          </div>
        )}
      </div>
    </div>
  )
}