'use client'

import { useState, useEffect, useCallback } from 'react'
import { useRouter, useParams } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, Wrench, Loader2, CheckCircle, AlertCircle, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ImageUpload } from '@/components/ui/image-upload'

const PROFESSIONS = ['سباك', 'كهربائي', 'نجار', 'بناء', 'دهان', 'بلاط', 'حدادة', 'مكيفات', 'جبس', 'زجاج', 'أخرى']
const CITIES = [
  'الدار البيضاء', 'الرباط', 'مراكش', 'فاس', 'طنجة', 'أكادير', 'مكناس', 'وجدة',
  'القنيطرة', 'تازة', 'الناظور', 'سطات', 'آسفي', 'خريبكة', 'بني ملال', 'ورزازات',
]

export default function EditCraftsmanPage() {
  const router = useRouter()
  const params = useParams()
  const id = params.id as string
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [craftsman, setCraftsman] = useState<any>(null)
  const [form, setForm] = useState({
    name: '', phone: '', profession: '', description: '', city: '',
    image: '',
    services: [{ name: '', price: '' }],
  })

  const load = useCallback(async () => {
    try {
      const res = await fetch(`/api/craftsmen/${id}`)
      if (!res.ok) throw new Error('Not found')
      const data = await res.json()
      setCraftsman(data)
      setForm({
        name: data.name ?? '',
        phone: data.phone ?? '',
        profession: data.profession ?? '',
        description: data.description ?? '',
        city: data.city ?? '',
        image: data.image ?? '',
        services: data.services?.length ? data.services : [{ name: '', price: '' }],
      })
    } catch {
      setError('الحرفي غير موجود')
    } finally { setLoading(false) }
  }, [id])

  useEffect(() => { load() }, [load])

  const updateField = (field: string, value: string) => setForm(f => ({ ...f, [field]: value }))
  const updateService = (idx: number, field: string, value: string) => {
    setForm(f => {
      const services = [...f.services]
      services[idx] = { ...services[idx], [field]: value }
      return { ...f, services }
    })
  }
  const addService = () => setForm(f => ({ ...f, services: [...f.services, { name: '', price: '' }] }))
  const removeService = (idx: number) => setForm(f => ({ ...f, services: f.services.filter((_, i) => i !== idx) }))

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)
    setError('')
    try {
      const res = await fetch(`/api/craftsmen/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, services: form.services.filter(s => s.name) }),
      })
      if (!res.ok) {
        const data = await res.json()
        setError(data.error || 'حدث خطأ')
        return
      }
      router.push('/dashboard/craftsmen')
    } catch {
      setError('حدث خطأ في الاتصال')
    } finally { setSaving(false) }
  }

  const handleDelete = async () => {
    if (!confirm('تأكيد حذف هذا الحرفي؟')) return
    await fetch(`/api/craftsmen/${id}`, { method: 'DELETE' })
    router.push('/dashboard/craftsmen')
  }

  if (loading) return <div className="min-h-screen bg-gray-50 flex items-center justify-center"><Loader2 className="w-8 h-8 animate-spin text-blue-400" /></div>

  if (!craftsman && error) return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center gap-4" dir="rtl">
      <AlertCircle className="w-12 h-12 text-red-400" />
      <p className="text-gray-600">{error}</p>
      <Link href="/dashboard/craftsmen"><Button variant="outline">العودة</Button></Link>
    </div>
  )

  return (
    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
      <div className="container mx-auto px-4 max-w-2xl">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <Link href="/dashboard/craftsmen" className="text-gray-400 hover:text-gray-600"><ArrowLeft className="w-5 h-5 rotate-180" /></Link>
            <h1 className="text-2xl font-bold flex items-center gap-2"><Wrench className="w-6 h-6 text-blue-600" />تعديل الحرفي</h1>
          </div>
          <div className="flex items-center gap-2">
            <Badge className={craftsman?.isVerified ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}>
              {craftsman?.isVerified ? 'موثق' : 'قيد المراجعة'}
            </Badge>
            <Button variant="outline" size="sm" onClick={handleDelete} className="text-red-500 hover:bg-red-50 hover:text-red-600 gap-1">
              <Trash2 className="w-4 h-4" />حذف
            </Button>
          </div>
        </div>

        {error && (
          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm flex items-center gap-2">
            <AlertCircle className="w-4 h-4 shrink-0" />{error}
          </div>
        )}

        <form onSubmit={submit} className="space-y-4">
          <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-4">
            <h2 className="font-bold text-gray-800">المعلومات الشخصية</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <input value={form.name} onChange={e => updateField('name', e.target.value)} required placeholder="الاسم الكامل" className="px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
              <input value={form.phone} onChange={e => updateField('phone', e.target.value)} required placeholder="رقم الهاتف" className="px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
            </div>
          </div>

          <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-4">
            <h2 className="font-bold text-gray-800">معلومات الحرفية</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <select value={form.profession} onChange={e => updateField('profession', e.target.value)} required className="px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
                <option value="">اختر التخصص</option>
                {PROFESSIONS.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
              <select value={form.city} onChange={e => updateField('city', e.target.value)} required className="px-4 py-3 border border-gray-200 rounded-xl 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>
            </div>
            <textarea value={form.description} onChange={e => updateField('description', e.target.value)} required placeholder="وصف الحرفية والخبرات" rows={3} className="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none" />
            <ImageUpload currentImage={craftsman?.image} onUpload={url => updateField('image', url)} />
          </div>

          <div className="bg-white rounded-2xl border shadow-sm p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h2 className="font-bold text-gray-800">الخدمات والأسعار</h2>
              <button type="button" onClick={addService} className="text-sm text-blue-600 hover:underline">+ إضافة خدمة</button>
            </div>
            {form.services.map((svc, idx) => (
              <div key={idx} className="flex gap-3 items-center">
                <input value={svc.name} onChange={e => updateService(idx, 'name', e.target.value)} placeholder="اسم الخدمة" className="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                <input value={svc.price} onChange={e => updateService(idx, 'price', e.target.value)} placeholder="السعر (DH)" className="w-32 px-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                {form.services.length > 1 && (
                  <button type="button" onClick={() => removeService(idx)} className="text-red-400 hover:text-red-600 text-sm">حذف</button>
                )}
              </div>
            ))}
          </div>

          <Button type="submit" disabled={saving} className="w-full py-3">
            {saving ? <Loader2 className="w-5 h-5 animate-spin mx-auto" /> : <><CheckCircle className="w-5 h-5" /> حفظ التعديلات</>}
          </Button>
        </form>
      </div>
    </div>
  )
}