import { useState } from "react";
import { X, Upload, Save, Camera } from "lucide-react";
import { type Video, type UpdateVideo, updateVideoSchema } from "@shared/schema";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { useMutation } from "@tanstack/react-query";
import ThumbnailGenerator from "./thumbnail-generator";

interface VideoEditModalProps {
  video: Video;
  isOpen: boolean;
  onClose: () => void;
}

export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModalProps) {
  const [title, setTitle] = useState(video.title);
  const [description, setDescription] = useState(video.description || "");
  const [category, setCategory] = useState(video.category || "");
  const [tags, setTags] = useState((video.tags || []).join(", "));
  const [isPublic, setIsPublic] = useState(video.isPublic);
  const [customThumbnail, setCustomThumbnail] = useState<File | null>(null);
  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(video.customThumbnailUrl);
  const [showThumbnailGenerator, setShowThumbnailGenerator] = useState(false);
  
  const { toast } = useToast();

  const updateVideoMutation = useMutation({
    mutationFn: async (updates: UpdateVideo) => {
      // For demonstration purposes, we'll simulate a successful update
      // In a real implementation, this would update metadata in the storage system
      return new Promise((resolve) => {
        setTimeout(() => resolve({ success: true }), 500);
      });
    },
    onSuccess: () => {
      toast({ 
        title: "Thumbnail uspešno shranjen!", 
        description: "Spremembe so shranjene lokalno"
      });
      queryClient.invalidateQueries({ queryKey: ["/api/videos"] });
      onClose();
    },
    onError: () => {
      toast({ 
        title: "Napaka pri shranjevanju", 
        description: "Poskusite znova",
        variant: "destructive" 
      });
    }
  });

  const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setCustomThumbnail(file);
      const reader = new FileReader();
      reader.onload = () => setThumbnailPreview(reader.result as string);
      reader.readAsDataURL(file);
    }
  };

  const handleThumbnailFromVideo = (thumbnailDataUrl: string) => {
    setThumbnailPreview(thumbnailDataUrl);
    setCustomThumbnail(null); // Clear file input since we're using generated thumbnail
    setShowThumbnailGenerator(false);
    toast({ title: "Thumbnail ustvarjen iz videoposnetka!" });
  };

  const handleSave = () => {
    try {
      const tagsArray = tags.split(",").map(tag => tag.trim()).filter(tag => tag.length > 0);
      
      const updates: UpdateVideo = {
        title: title.trim(),
        description: description.trim(),
        category: category.trim(),
        tags: tagsArray,
        isPublic
      };

      // Store the thumbnail locally for demonstration
      if (thumbnailPreview) {
        // In a real implementation, this would upload to cloud storage
        localStorage.setItem(`thumbnail_${video.id}`, thumbnailPreview);
        updates.customThumbnailUrl = thumbnailPreview;
      }

      updateVideoMutation.mutate(updates);
    } catch (error) {
      toast({ 
        title: "Error", 
        description: "Please check your input data",
        variant: "destructive" 
      });
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div 
        className="video-edit-modal bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
        style={{ backgroundColor: '#1f2937' }}
      >
        <div className="p-6">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-white">
              Edit Video
            </h2>
            <Button
              onClick={onClose}
              variant="ghost"
              size="sm"
              className="text-gray-300 hover:text-white"
              data-testid="button-close-edit"
            >
              <X className="w-5 h-5" />
            </Button>
          </div>

          {/* Form */}
          <div className="space-y-4">
            {/* Title */}
            <div>
              <Label className="block text-sm font-medium text-white mb-2">
                Title
              </Label>
              <Input
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Enter video title"
                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
                data-testid="input-video-title"
              />
            </div>

            {/* Description */}
            <div>
              <Label className="block text-sm font-medium text-white mb-2">
                Description
              </Label>
              <Textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Describe the video content"
                rows={4}
                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
                data-testid="input-video-description"
              />
            </div>

            {/* Category */}
            <div>
              <Label className="block text-sm font-medium text-white mb-2">
                Category
              </Label>
              <Input
                value={category}
                onChange={(e) => setCategory(e.target.value)}
                placeholder="e.g. Education, Entertainment, Technology"
                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
                data-testid="input-video-category"
              />
            </div>

            {/* Tags */}
            <div>
              <Label className="block text-sm font-medium text-white mb-2">
                Tags (separated by commas)
              </Label>
              <Input
                value={tags}
                onChange={(e) => setTags(e.target.value)}
                placeholder="e.g. tutorial, web development, react"
                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
                data-testid="input-video-tags"
              />
            </div>

            {/* Thumbnail Upload */}
            <div>
              <Label className="block text-sm font-medium text-white mb-2">
                Thumbnail Image
              </Label>
              <div className="space-y-3">
                {thumbnailPreview && (
                  <div className="w-48 h-27 rounded overflow-hidden border">
                    <img 
                      src={thumbnailPreview} 
                      alt="Thumbnail preview" 
                      className="w-full h-full object-cover"
                    />
                  </div>
                )}
                
                <div className="flex gap-2">
                  <Button
                    type="button"
                    onClick={() => setShowThumbnailGenerator(true)}
                    variant="outline"
                    className="flex-1"
                    data-testid="button-generate-from-video"
                  >
                    <Camera className="w-4 h-4 mr-2" />
                    Generate from Video
                  </Button>
                  
                  <Label className="cursor-pointer flex-1">
                    <input
                      type="file"
                      accept="image/*"
                      onChange={handleThumbnailChange}
                      className="hidden"
                      data-testid="input-thumbnail-upload"
                    />
                    <div 
                      className="flex items-center justify-center gap-2 px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors border text-sm font-medium h-10 text-white border-gray-500"
                      style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
                    >
                      <Upload className="w-4 h-4" />
                      <span>Upload Image</span>
                    </div>
                  </Label>
                </div>
              </div>
            </div>

            {/* Privacy */}
            <div className="flex items-center gap-3">
              <input
                type="checkbox"
                id="public-video"
                checked={isPublic}
                onChange={(e) => setIsPublic(e.target.checked)}
                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                data-testid="checkbox-public-video"
              />
              <Label htmlFor="public-video" className="text-sm font-medium text-white">
                Public Video
              </Label>
            </div>
          </div>

          {/* Footer */}
          <div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-600">
            <Button
              onClick={onClose}
              variant="outline"
              data-testid="button-cancel-edit"
            >
              Cancel
            </Button>
            <Button
              onClick={handleSave}
              disabled={updateVideoMutation.isPending || !title.trim()}
              className="bg-blue-600 hover:bg-blue-700"
              data-testid="button-save-video"
            >
              {updateVideoMutation.isPending ? (
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  Saving...
                </div>
              ) : (
                <div className="flex items-center gap-2">
                  <Save className="w-4 h-4" />
                  Save
                </div>
              )}
            </Button>
          </div>
        </div>
      </div>

      {/* Thumbnail Generator Modal */}
      <ThumbnailGenerator
        videoUrl={video.videoUrl}
        videoTitle={video.title}
        isOpen={showThumbnailGenerator}
        onClose={() => setShowThumbnailGenerator(false)}
        onThumbnailSelect={handleThumbnailFromVideo}
      />
    </div>
  );
}