import { useState } from 'react';
import { Upload, Mic, Type, Video, Download } from 'lucide-react';

export default function AdCreator() {
  const [mediaFile, setMediaFile] = useState(null);
  const [adText, setAdText] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [generatedVideo, setGeneratedVideo] = useState(null);
  const [previewUrl, setPreviewUrl] = useState(null); // Added state for preview URL

  const handleMediaUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      // Revoke previous URL to prevent memory leaks
      if (previewUrl) {
        URL.revokeObjectURL(previewUrl);
      }
      const newPreviewUrl = URL.createObjectURL(file);
      setPreviewUrl(newPreviewUrl);
      setMediaFile(file); // Store the actual file instead of the URL
    }
  };

  // Cleanup function to prevent memory leaks
  const cleanup = () => {
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl);
    }
  };

  const handleRemoveMedia = () => {
    cleanup();
    setPreviewUrl(null);
    setMediaFile(null);
  };

  const generateAd = () => {
    setIsGenerating(true);
    // Simulate AI processing
    setTimeout(() => {
      setIsGenerating(false);
      setGeneratedVideo(true);
    }, 2000);
  };

  // Clean up URLs when component unmounts
  useEffect(() => {
    return () => cleanup();
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-50">
      <div className="max-w-6xl mx-auto px-4 py-8">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">AI Ad Creator</h1>
          <p className="text-lg text-gray-600">Create professional ads in minutes with AI</p>
        </div>

        {/* Main Content */}
        <div className="grid md:grid-cols-2 gap-8">
          {/* Left Column - Input */}
          <div className="space-y-6">
            {/* Media Upload */}
            <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
              <div className="text-center">
                {!previewUrl ? (
                  <label className="cursor-pointer block">
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-12 hover:border-blue-500 transition-colors">
                      <Upload className="mx-auto h-12 w-12 text-gray-400" />
                      <p className="mt-2 text-sm text-gray-500">Upload media (image or video)</p>
                      <input type="file" className="hidden" onChange={handleMediaUpload} accept="image/*,video/*" />
                    </div>
                  </label>
                ) : (
                  <div className="relative">
                    <img src={previewUrl} alt="Preview" className="rounded-lg w-full" />
                    <button 
                      onClick={handleRemoveMedia}
                      className="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-600"
                    >
                      ×
                    </button>
                  </div>
                )}
              </div>
            </div>

            {/* Text Input */}
            <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
              <div className="space-y-4">
                <div className="flex items-center gap-2 text-gray-700 mb-2">
                  <Type className="h-5 w-5" />
                  <h3 className="font-medium">Ad Script</h3>
                </div>
                <textarea
                  value={adText}
                  onChange={(e) => setAdText(e.target.value)}
                  className="w-full h-32 p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="Enter your ad script here..."
                />
              </div>
            </div>

            {/* Generate Button */}
            <button
              onClick={generateAd}
              disabled={!mediaFile || !adText || isGenerating}
              className={`w-full py-4 rounded-xl font-medium text-white ${
                !mediaFile || !adText || isGenerating
                  ? 'bg-gray-400'
                  : 'bg-blue-600 hover:bg-blue-700'
              } transition-colors`}
            >
              {isGenerating ? 'Generating...' : 'Generate Ad'}
            </button>
          </div>

          {/* Right Column - Preview */}
          <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
            <div className="space-y-6">
              <div className="flex items-center gap-2 text-gray-700 mb-4">
                <Video className="h-5 w-5" />
                <h3 className="font-medium">Preview</h3>
              </div>
              
              {generatedVideo ? (
                <div className="space-y-6">
                  <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
                    <p className="text-gray-500">Generated video preview</p>
                  </div>
                  
                  {/* Features */}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <Mic className="h-4 w-4 text-blue-600" />
                        <span className="text-sm font-medium">AI Voiceover</span>
                      </div>
                      <div className="h-8 bg-gray-200 rounded-full overflow-hidden">
                        <div className="h-full w-3/4 bg-blue-600 rounded-full" />
                      </div>
                    </div>
                    
                    <div className="p-4 bg-gray-50 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <Type className="h-4 w-4 text-blue-600" />
                        <span className="text-sm font-medium">Captions</span>
                      </div>
                      <div className="h-8 bg-gray-200 rounded-full overflow-hidden">
                        <div className="h-full w-full bg-blue-600 rounded-full" />
                      </div>
                    </div>
                  </div>

                  {/* Download Button */}
                  <button className="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white rounded-lg flex items-center justify-center gap-2">
                    <Download className="h-5 w-5" />
                    Download Video
                  </button>
                </div>
              ) : (
                <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
                  <p className="text-gray-500">Upload media and add text to preview</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}