import { prisma } from '@/lib/prisma'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowLeft, MapPin, Star, Phone, Mail, Check, Wrench, MessageCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { CraftsmanReviews } from '@/components/craftsmen/craftsman-reviews'
import { CraftsmanMapWrapper } from '@/components/craftsmen/craftsman-map-wrapper'
import { PortfolioGallery } from '@/components/craftsmen/portfolio-gallery'
import { notFound } from 'next/navigation'

export default async function CraftsmanDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const craftsman = await prisma.craftsman.findUnique({ where: { id } })
  if (!craftsman) notFound()

  const services = Array.isArray(craftsman.services) ? craftsman.services : []
  const portfolio = Array.isArray(craftsman.portfolio) ? craftsman.portfolio as string[] : []

  return (
    <div className="min-h-screen bg-gray-50 py-10" dir="rtl">
      <div className="container mx-auto px-4 max-w-4xl">
        <Link href="/craftsmen" className="inline-flex items-center gap-2 text-gray-500 hover:text-gray-700 mb-6 text-sm">
          <ArrowLeft className="w-4 h-4 rotate-180" /> العودة للحرفيين
        </Link>

        <div className="bg-white rounded-3xl shadow-lg border overflow-hidden">
          <div className="bg-gradient-to-l from-blue-600 to-blue-700 p-8 text-white relative">
          {craftsman.coverImage && (
            <div className="absolute inset-0 opacity-25">
              <Image src={craftsman.coverImage} alt="" fill className="object-cover" />
            </div>
          )}
          <div className="relative flex items-center gap-5">
            <div className="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center text-3xl font-bold overflow-hidden border-4 border-white/40">
              {craftsman.image ? (
                <Image src={craftsman.image} alt={craftsman.name} width={80} height={80} className="w-full h-full object-cover" />
              ) : (
                craftsman.name.charAt(0)
              )}
            </div>
              <div>
                <h1 className="text-2xl font-bold">{craftsman.name}</h1>
                <p className="text-blue-100 text-lg">{craftsman.profession}</p>
                <div className="flex items-center gap-4 mt-2 text-sm text-blue-100">
                  <span className="flex items-center gap-1"><MapPin className="w-4 h-4" />{craftsman.city}</span>
                  <span className="flex items-center gap-1"><Star className="w-4 h-4 fill-amber-400 text-amber-400" />{craftsman.rating.toFixed(1)} ({craftsman.reviewCount})</span>
                  {craftsman.isAvailable && <span className="flex items-center gap-1"><Check className="w-4 h-4 text-green-300" />متاح</span>}
                </div>
              </div>
            </div>
          </div>

          <div className="p-8 space-y-8">
            <div>
              <h2 className="text-lg font-bold mb-3">الوصف</h2>
              <p className="text-gray-600 leading-relaxed">{craftsman.description || 'لا يوجد وصف'}</p>
            </div>

            {services.length > 0 && (
              <div>
                <h2 className="text-lg font-bold mb-4">الخدمات والأسعار</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {services.map((s: any, i: number) => (
                    <div key={i} className="flex justify-between items-center p-4 bg-gray-50 rounded-xl border">
                      <span className="font-medium text-gray-800">{s.name}</span>
                      <span className="font-bold text-blue-600">{s.price} {s.unit || 'درهم'}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {portfolio.length > 0 && (
              <div>
                <h2 className="text-lg font-bold mb-4">أعمال سابقة</h2>
                <PortfolioGallery images={portfolio} name={craftsman.name} />
              </div>
            )}

            <div className="flex flex-col sm:flex-row gap-3 pt-4 border-t">
              {craftsman.phone && (
                <a href={`tel:${craftsman.phone}`} className="flex-1">
                  <Button className="w-full gap-2 rounded-xl"><Phone className="w-4 h-4" />اتصل: {craftsman.phone}</Button>
                </a>
              )}
              {craftsman.phone && (
                <a href={`https://wa.me/${craftsman.phone.replace(/\D/g, '')}?text=${encodeURIComponent('مرحباً، أود الاستفسار عن خدماتك')}`} target="_blank" rel="noopener noreferrer" className="flex-1">
                  <Button variant="outline" className="w-full gap-2 rounded-xl border-green-500 text-green-600 hover:bg-green-50"><MessageCircle className="w-4 h-4" />واتساب</Button>
                </a>
              )}
              {craftsman.email && (
                <a href={`mailto:${craftsman.email}`} className="flex-1">
                  <Button variant="outline" className="w-full gap-2 rounded-xl"><Mail className="w-4 h-4" />راسل: {craftsman.email}</Button>
                </a>
              )}
            </div>

            <div>
              <h2 className="text-lg font-bold mb-3 flex items-center gap-2"><MapPin className="w-5 h-5 text-blue-600" />الموقع</h2>
              <CraftsmanMapWrapper lat={craftsman.latitude} lng={craftsman.longitude} name={craftsman.name} />
            </div>

            <div className="pt-4 border-t">
              <CraftsmanReviews craftsmanId={craftsman.id} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}