import { useState } from "react";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Star, X } from "lucide-react";

interface SurveyModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const SurveyModal = ({ isOpen, onClose }: SurveyModalProps) => {
  const [rating, setRating] = useState<number | null>(null);
  const [submitted, setSubmitted] = useState(false);

  const handleRatingClick = (stars: number) => {
    setRating(stars);
  };

  const handleSubmit = () => {
    if (rating !== null) {
      // Handle survey submission
      console.log('Survey submitted with rating:', rating);
      setSubmitted(true);
      setTimeout(() => {
        onClose();
        setSubmitted(false);
        setRating(null);
      }, 2000);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <div className="flex items-center justify-between">
            <DialogTitle>Rate Our Service</DialogTitle>
            <Button
              variant="ghost"
              size="sm"
              onClick={onClose}
              className="h-6 w-6 p-0"
              aria-label="Close survey"
            >
              <X className="h-4 w-4" />
            </Button>
          </div>
          <DialogDescription>
            Your feedback helps us improve our grant funding services.
          </DialogDescription>
        </DialogHeader>

        {!submitted ? (
          <Card>
            <CardContent className="p-6 space-y-6">
              <div className="text-center">
                <h3 className="text-lg font-semibold mb-4">How would you rate your experience?</h3>
                
                {/* Star Rating */}
                <div className="flex justify-center space-x-2 mb-6">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <button
                      key={star}
                      onClick={() => handleRatingClick(star)}
                      className="p-1 hover:scale-110 transition-transform duration-200"
                      aria-label={`Rate ${star} star${star > 1 ? 's' : ''}`}
                    >
                      <Star 
                        className={`w-8 h-8 ${
                          rating && star <= rating 
                            ? 'fill-yellow-400 text-yellow-400' 
                            : 'text-gray-300 hover:text-yellow-300'
                        } transition-colors duration-200`}
                      />
                    </button>
                  ))}
                </div>

                <div className="flex space-x-3">
                  <Button variant="outline" onClick={onClose} className="flex-1">
                    Maybe Later
                  </Button>
                  <Button 
                    onClick={handleSubmit} 
                    disabled={rating === null}
                    className="flex-1"
                  >
                    Submit Rating
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardContent className="p-6 text-center">
              <div className="text-4xl mb-4">🎉</div>
              <h3 className="text-lg font-semibold mb-2">Thank you for your feedback!</h3>
              <p className="text-muted-foreground">
                Your {rating}-star rating has been recorded.
              </p>
            </CardContent>
          </Card>
        )}
      </DialogContent>
    </Dialog>
  );
};