/**
 * @file ReviewModal.tsx
 * @description Modal de avaliação pós-atendimento com estrelas interativas.
 */
import { useState } from 'react'
import { Star, X, Send } from 'lucide-react'
import { Button } from './ui/button'

interface ReviewModalProps {
    shopName: string
    appointmentId: string
    onSubmit: (rating: number, comment: string) => Promise<void>
    onClose: () => void
}

export function ReviewModal({ shopName, appointmentId, onSubmit, onClose }: ReviewModalProps) {
    const [rating, setRating] = useState(0)
    const [hovered, setHovered] = useState(0)
    const [comment, setComment] = useState('')
    const [submitting, setSubmitting] = useState(false)
    const [submitted, setSubmitted] = useState(false)

    const handleSubmit = async () => {
        if (rating === 0) return
        setSubmitting(true)
        try {
            await onSubmit(rating, comment)
            setSubmitted(true)
            setTimeout(onClose, 1800)
        } catch {
            alert('Erro ao enviar avaliação. Tente novamente.')
        } finally {
            setSubmitting(false)
        }
    }

    const labels = ['', 'Muito mau', 'Mau', 'Razoável', 'Bom', 'Excelente!']

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6 relative animate-in fade-in slide-in-from-bottom-4 duration-300">
                {/* Close */}
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 p-1 rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
                >
                    <X size={18} />
                </button>

                {submitted ? (
                    <div className="text-center py-4">
                        <div className="text-5xl mb-3">🎉</div>
                        <h3 className="text-xl font-bold text-slate-900">Obrigado pela avaliação!</h3>
                        <p className="text-sm text-slate-500 mt-1">O seu feedback ajuda outros clientes.</p>
                    </div>
                ) : (
                    <>
                        <div className="text-center mb-6">
                            <div className="w-14 h-14 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-md">
                                <Star size={28} className="text-white fill-white" />
                            </div>
                            <h3 className="text-xl font-bold text-slate-900">Avaliar atendimento</h3>
                            <p className="text-sm text-slate-500 mt-1">{shopName}</p>
                        </div>

                        {/* Stars */}
                        <div className="flex justify-center gap-2 mb-2">
                            {[1, 2, 3, 4, 5].map((star) => (
                                <button
                                    key={star}
                                    onClick={() => setRating(star)}
                                    onMouseEnter={() => setHovered(star)}
                                    onMouseLeave={() => setHovered(0)}
                                    className="transition-transform hover:scale-125 active:scale-110"
                                >
                                    <Star
                                        size={36}
                                        className={`transition-colors ${star <= (hovered || rating)
                                                ? 'text-indigo-400 fill-indigo-400'
                                                : 'text-slate-300'
                                            }`}
                                    />
                                </button>
                            ))}
                        </div>
                        <p className="text-center text-sm font-medium text-indigo-600 mb-5 h-5">
                            {labels[hovered || rating]}
                        </p>

                        {/* Comment */}
                        <textarea
                            value={comment}
                            onChange={(e) => setComment(e.target.value)}
                            placeholder="Quer deixar um comentário? (opcional)"
                            rows={3}
                            className="w-full border border-slate-200 rounded-xl p-3 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent mb-4 placeholder:text-slate-400"
                        />

                        <Button
                            onClick={handleSubmit}
                            disabled={rating === 0 || submitting}
                            className="w-full flex items-center justify-center gap-2"
                        >
                            <Send size={16} />
                            {submitting ? 'A enviar...' : 'Enviar Avaliação'}
                        </Button>
                    </>
                )}
            </div>
        </div>
    )
}
