'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { api } from '@/lib/api';
import { useLanguage } from '@/lib/language-context';
import { Star } from 'lucide-react';
import { useState } from 'react';

export default function SupportSurveyForm() {
    const { t } = useLanguage();
    const [rating, setRating] = useState(0);
    const [submitted, setSubmitted] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        subject: '',
        message: '',
    });

    const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
        e.preventDefault();
        setError('');
        if (rating < 1 || rating > 5) {
            setError(t('supportForm.ratingValidation'));
            return;
        }
        setLoading(true);
        const res = await api.content.submitSupportFeedback({
            name: formData.name,
            email: formData.email,
            subject: formData.subject,
            rating,
            message: formData.message,
        });
        if (!res.success) {
            setError(res.error || t('supportForm.failedToSubmit'));
            setLoading(false);
            return;
        }
        setSubmitted(true);
        setLoading(false);
    };

    if (submitted) {
        return (
            <Card className="max-w-xl mx-auto mt-12 bg-green-50 border-green-200">
                <CardContent className="pt-6 text-center">
                    <div className="flex justify-center mb-4">
                        <div className="p-3 bg-green-100 rounded-full">
                            <Star className="w-8 h-8 text-green-600 fill-green-600" />
                        </div>
                    </div>
                    <h3 className="text-2xl font-bold text-green-800 mb-2">{t('supportForm.thankYou')}</h3>
                    <p className="text-green-700">
                        {t('supportForm.feedbackReceived')}
                    </p>
                    <Button
                        variant="outline"
                        className="mt-6 border-green-600 text-green-700 hover:bg-green-100"
                        onClick={() => {
                            setSubmitted(false);
                            setRating(0);
                            setError('');
                            setFormData({ name: '', email: '', subject: '', message: '' });
                        }}
                    >
                        {t('supportForm.sendAnotherResponse')}
                    </Button>
                </CardContent>
            </Card>
        );
    }

    return (
        <Card className="max-w-2xl mx-auto mt-16 shadow-lg border-t-4 border-t-cyan-500">
            <CardHeader className="text-center">
                <CardTitle className="text-2xl font-bold text-gray-800">{t('supportForm.cardTitle')}</CardTitle>
                <CardDescription>
                    {t('supportForm.cardDescription')}
                </CardDescription>
            </CardHeader>
            <CardContent>
                <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label htmlFor="name">{t('common.name')}</Label>
                            <Input
                                id="name"
                                placeholder={t('supportForm.namePlaceholder')}
                                value={formData.name}
                                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                required
                            />
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="email">{t('common.email')}</Label>
                            <Input
                                id="email"
                                type="email"
                                placeholder={t('supportForm.emailPlaceholder')}
                                value={formData.email}
                                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                required
                            />
                        </div>
                    </div>

                    <div className="space-y-2">
                            <Label htmlFor="subject">{t('supportForm.subjectLabel')}</Label>
                        <Input
                            id="subject"
                            placeholder={t('supportForm.subjectPlaceholder')}
                            value={formData.subject}
                            onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                            required
                        />
                    </div>

                    <div className="space-y-2">
                        <Label>{t('supportForm.rateExperience')}</Label>
                        <div className="flex gap-2">
                            {[1, 2, 3, 4, 5].map((star) => (
                                <button
                                    key={star}
                                    type="button"
                                    onClick={() => setRating(star)}
                                    className="focus:outline-none transition-transform hover:scale-110"
                                >
                                    <Star
                                        className={`w-8 h-8 ${star <= rating
                                                ? 'text-yellow-400 fill-yellow-400'
                                                : 'text-gray-300'
                                            }`}
                                    />
                                </button>
                            ))}
                        </div>
                    </div>

                    <div className="space-y-2">
                            <Label htmlFor="message">{t('supportForm.messageLabel')}</Label>
                            <Textarea
                                id="message"
                                placeholder={t('supportForm.messagePlaceholder')}
                                className="min-h-[120px]"
                                value={formData.message}
                                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                                required
                            />
                        </div>

                    {error && <p className="text-sm text-red-600">{error}</p>}

                    <Button type="submit" disabled={loading} className="w-full bg-cyan-600 hover:bg-cyan-500 text-white font-semibold">
                        {loading ? t('supportForm.submitting') : t('supportForm.submitFeedback')}
                    </Button>
                </form>
            </CardContent>
        </Card>
    );
}
