import { useState } from 'react';
import { Globe2, Download, Copy, Youtube, Instagram, Loader2 } from 'lucide-react';

export default function VideoTranscriber() {
  const [url, setUrl] = useState('');
  const [language, setLanguage] = useState('en');
  const [transcription, setTranscription] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const languages = {
    en: 'English',
    pt: 'Portuguese (Portugal)',
    es: 'Spanish',
    fr: 'French',
    de: 'German'
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    if (!url) {
      setError('Please enter a video URL');
      return;
    }

    setLoading(true);
    // Simulate transcription process
    setTimeout(() => {
      setTranscription("This is a simulated transcription of the video content. In a real application, this would be the actual transcribed text from the video's audio. The transcription would be processed through a backend service that handles the video download and audio extraction.");
      setLoading(false);
    }, 2000);
  };

  const handleCopy = () => {
    navigator.clipboard.writeText(transcription);
  };

  const handleDownload = () => {
    const blob = new Blob([transcription], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'transcription.txt';
    a.click();
    window.URL.revokeObjectURL(url);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-6">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-800 mb-8 text-center">
          Video Transcription Tool
        </h1>
        
        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Video URL
              </label>
              <div className="relative">
                <input
                  type="url"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  placeholder="Paste YouTube or Instagram video URL"
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
                />
                <div className="absolute right-3 top-3 flex space-x-2 text-gray-400">
                  <Youtube size={20} />
                  <Instagram size={20} />
                </div>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Target Language
              </label>
              <div className="relative">
                <select
                  value={language}
                  onChange={(e) => setLanguage(e.target.value)}
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none appearance-none"
                >
                  {Object.entries(languages).map(([code, name]) => (
                    <option key={code} value={code}>
                      {name}
                    </option>
                  ))}
                </select>
                <Globe2 className="absolute right-3 top-3 text-gray-400" size={20} />
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-colors flex items-center justify-center space-x-2"
            >
              {loading ? (
                <>
                  <Loader2 className="animate-spin" size={20} />
                  <span>Transcribing...</span>
                </>
              ) : (
                <span>Start Transcription</span>
              )}
            </button>
            
            {error && (
              <p className="text-red-500 text-sm">{error}</p>
            )}
          </form>
        </div>

        {transcription && (
          <div className="bg-white rounded-xl shadow-lg p-6">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-semibold text-gray-800">
                Transcription Result
              </h2>
              <div className="flex space-x-2">
                <button
                  onClick={handleCopy}
                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  title="Copy to clipboard"
                >
                  <Copy size={20} className="text-gray-600" />
                </button>
                <button
                  onClick={handleDownload}
                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                  title="Download as text file"
                >
                  <Download size={20} className="text-gray-600" />
                </button>
              </div>
            </div>
            
            <div className="bg-gray-50 rounded-lg p-4">
              <textarea
                value={transcription}
                onChange={(e) => setTranscription(e.target.value)}
                className="w-full min-h-[200px] bg-transparent border-none outline-none resize-y"
                placeholder="Transcription will appear here..."
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}