import { useState } from 'react';

import { router } from '@inertiajs/react';

import { Button } from '@/Components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/Components/ui/dialog';
import { Textarea } from '@/Components/ui/textarea';
import { cn } from '@/lib/utils';
import type { MicroSurveyPrompt } from '@/types';

interface MicroSurveyModalProps {
    micro_survey_pending: MicroSurveyPrompt | false;
}

export default function MicroSurveyModal({ micro_survey_pending }: MicroSurveyModalProps) {
    const [open, setOpen] = useState<boolean>(!!micro_survey_pending);
    const [rating, setRating] = useState<string | null>(null);
    const [comment, setComment] = useState('');
    const [submitting, setSubmitting] = useState(false);

    if (!micro_survey_pending) {
        return null;
    }

    const handleSubmit = () => {
        if (!rating) return;

        setSubmitting(true);

        router.post(
            route('micro-survey.store'),
            { trigger: micro_survey_pending.trigger, rating, comment: comment || null },
            {
                preserveScroll: true,
                onFinish: () => {
                    setSubmitting(false);
                    setOpen(false);
                },
            },
        );
    };

    const handleDismiss = () => setOpen(false);

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Quick feedback</DialogTitle>
                    <DialogDescription>{micro_survey_pending.question}</DialogDescription>
                </DialogHeader>

                <div className="space-y-4 py-2">
                    <div className="flex gap-2">
                        {micro_survey_pending.ratings.map((r) => (
                            <button
                                key={r.value}
                                type="button"
                                aria-pressed={rating === r.value}
                                onClick={() => setRating(r.value)}
                                className={cn(
                                    'flex-1 rounded px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
                                    rating === r.value
                                        ? 'bg-primary text-primary-foreground'
                                        : 'bg-muted text-muted-foreground hover:bg-muted/80',
                                )}
                            >
                                {r.label}
                            </button>
                        ))}
                    </div>

                    {rating && (
                        <div>
                            <label htmlFor="survey-comment" className="mb-1 block text-sm font-medium text-foreground">
                                Any additional thoughts?{' '}
                                <span className="text-muted-foreground">(optional)</span>
                            </label>
                            <Textarea
                                id="survey-comment"
                                placeholder="Tell us more…"
                                value={comment}
                                onChange={(e) => setComment(e.target.value)}
                                rows={3}
                                maxLength={200}
                            />
                        </div>
                    )}
                </div>

                <DialogFooter className="gap-2 sm:gap-0">
                    <Button variant="ghost" onClick={handleDismiss} disabled={submitting}>
                        Remind me later
                    </Button>
                    <Button onClick={handleSubmit} disabled={!rating || submitting}>
                        {submitting ? 'Submitting…' : 'Submit'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}