'use client'

import { useEffect, useState, useCallback } from 'react'
import { Star, Loader2, MessageSquare, User, AlertCircle, CheckCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function CraftsmanReviews({ craftsmanId }: { craftsmanId: string }) {
  const [reviews, setReviews] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)
  const [comment, setComment] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const load = useCallback(async () => {
    try {
      const res = await fetch(`/api/craftsmen/${craftsmanId}/reviews`)
      if (res.ok) setReviews(await res.json())
    } catch {}
    finally { setLoading(false) }
  }, [craftsmanId])

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

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!rating) { setError('اختر تقييماً'); return }
    if (!comment.trim()) { setError('اكتب تعليقاً'); return }
    setSaving(true)
    setError('')
    try {
      const res = await fetch(`/api/craftsmen/${craftsmanId}/reviews`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ rating, comment }),
      })
      if (!res.ok) {
        const data = await res.json()
        setError(data.error || 'حدث خطأ')
        return
      }
      setSuccess('تم إرسال تقييمك بنجاح')
      setComment('')
      setRating(0)
      load()
      setTimeout(() => setSuccess(''), 3000)
    } catch {
      setError('حدث خطأ في الاتصال')
    } finally { setSaving(false) }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-2">
        <MessageSquare className="w-5 h-5 text-blue-600" />
        <h2 className="text-lg font-bold">التقييمات والتعليقات</h2>
        <span className="text-sm text-gray-400">({reviews.length})</span>
      </div>

      {/* Submit Review */}
      <form onSubmit={submit} className="bg-white border rounded-2xl p-5 space-y-4">
        <h3 className="font-bold text-sm text-gray-700">أضف تقييمك</h3>

        {error && (
          <div className="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>
        )}
        {success && (
          <div className="p-3 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm flex items-center gap-2">
            <CheckCircle className="w-4 h-4 shrink-0" />{success}
          </div>
        )}

        <div className="flex items-center gap-1">
          {[1, 2, 3, 4, 5].map(n => (
            <button key={n} type="button"
              onClick={() => setRating(n)}
              onMouseEnter={() => setHoverRating(n)}
              onMouseLeave={() => setHoverRating(0)}
              className={`p-1 transition-colors ${(hoverRating || rating) >= n ? 'text-amber-400' : 'text-gray-200 hover:text-amber-300'}`}>
              <Star className={`w-7 h-7 ${(hoverRating || rating) >= n ? 'fill-amber-400' : ''}`} />
            </button>
          ))}
        </div>

        <textarea value={comment} onChange={e => setComment(e.target.value)}
          placeholder="شارك تجربتك مع هذا الحرفي..."
          rows={3} maxLength={500}
          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" />

        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-400">{comment.length}/500</span>
          <Button type="submit" disabled={saving} size="sm" className="gap-1.5">
            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Star className="w-4 h-4" />}
            إرسال التقييم
          </Button>
        </div>
      </form>

      {/* Reviews List */}
      {loading ? (
        <div className="text-center py-8"><Loader2 className="w-6 h-6 animate-spin mx-auto text-blue-400" /></div>
      ) : reviews.length === 0 ? (
        <div className="text-center py-8 text-gray-400 text-sm">
          <MessageSquare className="w-8 h-8 mx-auto mb-2 opacity-30" />
          لا توجد تقييمات بعد. كن أول من يقيم!
        </div>
      ) : (
        <div className="space-y-4">
          {reviews.map(r => (
            <div key={r.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                    <User className="w-4 h-4 text-blue-600" />
                  </div>
                  <span className="font-medium text-sm">{r.user?.name || 'مستخدم'}</span>
                </div>
                <div className="flex gap-0.5">
                  {[1, 2, 3, 4, 5].map(n => (
                    <Star key={n} className={`w-4 h-4 ${n <= r.rating ? 'fill-amber-400 text-amber-400' : 'text-gray-200'}`} />
                  ))}
                </div>
              </div>
              <p className="text-sm text-gray-600">{r.comment}</p>
              <p className="text-xs text-gray-400 mt-2">{new Date(r.createdAt).toLocaleDateString('ar-MA')}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}