import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Camera, Send, X, Star } from 'lucide-react';
import { ImageUploader } from '@/components/shared/ImageUploader';

interface Review {
  id: string;
  userName: string;
  userAvatar: string;
  rating: number;
  comment: string;
  createdAt: string;
}

interface ReviewReplyDialogProps {
  review: Review;
  onReply: (reviewId: string, content: string, images?: string[]) => void;
  onClose: () => void;
}

export function ReviewReplyDialog({ review, onReply, onClose }: ReviewReplyDialogProps) {
  const [replyContent, setReplyContent] = useState('');
  const [images, setImages] = useState<string[]>([]);
  const [showPhotoUpload, setShowPhotoUpload] = useState(false);

  const handleSubmit = () => {
    if (replyContent.trim()) {
      onReply(review.id, replyContent, images);
      setReplyContent('');
      setImages([]);
      onClose();
    }
  };

  const handleImageUpload = (newImages: string[]) => {
    setImages([...images, ...newImages]);
    setShowPhotoUpload(false);
  };

  const removeImage = (index: number) => {
    setImages(images.filter((_, i) => i !== index));
  };

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star
        key={i}
        size={14}
        className={i < rating ? "text-yellow-400 fill-yellow-400" : "text-muted-foreground"}
      />
    ));
  };

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Reply to Review</DialogTitle>
        </DialogHeader>
        
        <div className="space-y-4">
          {/* Original Review */}
          <div className="bg-muted p-4 rounded-lg">
            <div className="flex gap-3">
              <Avatar className="h-10 w-10">
                <AvatarImage src={review.userAvatar} alt={review.userName} />
                <AvatarFallback>{review.userName.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center justify-between mb-2">
                  <div>
                    <h4 className="font-medium text-sm">{review.userName}</h4>
                    <p className="text-xs text-muted-foreground">{review.createdAt}</p>
                  </div>
                  <div className="flex items-center gap-1">
                    {renderStars(review.rating)}
                    <span className="text-xs ml-1">{review.rating}/5</span>
                  </div>
                </div>
                <p className="text-sm text-muted-foreground">{review.comment}</p>
              </div>
            </div>
          </div>

          {/* Reply Form */}
          <div className="space-y-3">
            <Textarea
              placeholder="Write your reply..."
              value={replyContent}
              onChange={(e) => setReplyContent(e.target.value)}
              rows={4}
              className="resize-none"
            />

            {/* Image Previews */}
            {images.length > 0 && (
              <div className="flex gap-2 flex-wrap">
                {images.map((image, index) => (
                  <div key={index} className="relative">
                    <img
                      src={image}
                      alt={`Upload ${index + 1}`}
                      className="w-20 h-20 rounded-lg object-cover"
                    />
                    <Button
                      variant="destructive"
                      size="sm"
                      className="absolute -top-2 -right-2 h-6 w-6 p-0 rounded-full"
                      onClick={() => removeImage(index)}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                ))}
              </div>
            )}

            {/* Actions */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setShowPhotoUpload(true)}
                  className="h-8"
                >
                  <Camera className="h-4 w-4 mr-1" />
                  Add Photos
                </Button>
              </div>
              
              <div className="flex items-center gap-2">
                <Button variant="outline" onClick={onClose}>
                  Cancel
                </Button>
                <Button
                  onClick={handleSubmit}
                  disabled={!replyContent.trim()}
                  className="bg-primary hover:bg-primary/90"
                >
                  <Send className="h-4 w-4 mr-1" />
                  Send Reply
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Photo Upload Dialog */}
        {showPhotoUpload && (
          <Dialog open={true} onOpenChange={() => setShowPhotoUpload(false)}>
            <DialogContent className="max-w-2xl">
              <DialogHeader>
                <DialogTitle>Subir Imágenes</DialogTitle>
              </DialogHeader>
              <ImageUploader
                onUploadComplete={(urls) => {
                  setImages([...images, ...urls]);
                  setShowPhotoUpload(false);
                }}
                maxFiles={5}
                category="review-reply"
              />
            </DialogContent>
          </Dialog>
        )}
      </DialogContent>
    </Dialog>
  );
}