import { useState } from 'react';
import { apiDownloaderDownloadRetrieve, apiDownloaderDownloadCreate } from '@/api/generated/public/downloader';
import { type VideoInfoResponse, /*type VideoInfo*/ } from '@/api/generated/public/models';
import { FaLink, FaVideo, FaVolumeUp, FaFile, FaFont, FaCookie } from 'react-icons/fa';

// Common file extensions supported by ffmpeg
const FILE_EXTENSIONS = [
  { value: 'mp4', label: 'MP4 (H.264 + AAC, most compatible)' },
  { value: 'mkv', label: 'MKV (Flexible, lossless container)' },
  { value: 'webm', label: 'WebM (VP9/AV1 + Opus)' },
  { value: 'avi', label: 'AVI (Older format)' },
  { value: 'mov', label: 'MOV (Apple-friendly)' },
  { value: 'flv', label: 'FLV (Legacy)' },
  { value: 'ogg', label: 'OGG (Audio/Video)' },
];

export default function Downloader() {
  const [videoUrl, setVideoUrl] = useState('');
  const [videoInfo, setVideoInfo] = useState<null | VideoInfoResponse>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isDownloading, setIsDownloading] = useState(false);
  const [error, setError] = useState<null | { error: string }>(null);

  // Basic download options
  const [selectedVideoQuality, setSelectedVideoQuality] = useState<string>('');
  const [selectedAudioQuality, setSelectedAudioQuality] = useState<string>('');
  const [selectedExtension, setSelectedExtension] = useState<string>('mp4');
  
  // Playlist selection
  const [selectedVideos, setSelectedVideos] = useState<number[]>([]);
  
  // Advanced options (removed start_time, end_time, playlist_items)
  const [subtitles, setSubtitles] = useState<string>('');
  const [embedSubtitles, setEmbedSubtitles] = useState<boolean>(false);
  const [embedThumbnail, setEmbedThumbnail] = useState<boolean>(false);
  const [cookies, setCookies] = useState<string>('');
  const [showAdvanced, setShowAdvanced] = useState<boolean>(false);

  // Helper functions for playlist selection
  const toggleVideoSelection = (videoIndex: number) => {
    setSelectedVideos(prev => 
      prev.includes(videoIndex) 
        ? prev.filter(i => i !== videoIndex)
        : [...prev, videoIndex]
    );
  };

  const selectAllVideos = () => {
    if (videoInfo?.videos) {
      setSelectedVideos(videoInfo.videos.map((_, index) => index + 1));
    }
  };

  const deselectAllVideos = () => {
    setSelectedVideos([]);
  };

  // Get all available qualities from all videos for consistent UI
  const getAllVideoQualities = () => {
    if (!videoInfo?.videos) return [];
    const allQualities = new Set<string>();
    videoInfo.videos.forEach(video => {
      video.video_resolutions.forEach(quality => allQualities.add(quality));
    });
    return Array.from(allQualities).sort((a, b) => {
      const aNum = parseInt(a.replace('p', ''));
      const bNum = parseInt(b.replace('p', ''));
      return bNum - aNum; // Sort descending
    });
  };

  const getAllAudioQualities = () => {
    if (!videoInfo?.videos) return [];
    const allQualities = new Set<string>();
    videoInfo.videos.forEach(video => {
      video.audio_resolutions.forEach(quality => allQualities.add(quality));
    });
    return Array.from(allQualities).sort((a, b) => {
      const aNum = parseInt(a.replace('kbps', ''));
      const bNum = parseInt(b.replace('kbps', ''));
      return bNum - aNum; // Sort descending
    });
  };

  async function retrieveVideoInfo() {
    setIsLoading(true);
    setError(null);
    setVideoInfo(null);
    setSelectedVideos([]); // Reset selected videos
    try {
      const info = await apiDownloaderDownloadRetrieve({ url: videoUrl });
      setVideoInfo(info);
      // If it's a playlist, select all videos by default
      if (info.is_playlist && info.videos) {
        setSelectedVideos(info.videos.map((_, index) => index + 1));
      }
    } catch (err: any) {
      // Handle axios errors properly
      const errorMessage = err.response?.data?.error || err.message
      setError({ error: errorMessage });
      console.error('Retrieve video info error:', err);
    } finally {
      setIsLoading(false);
    }
  }

  async function handleDownload() {
    if (!videoUrl) {
      setError({ error: 'Please enter a URL first' });
      return;
    }

    setIsDownloading(true);
    setError(null);

    try {
      // Parse quality values (remove 'p' and 'kbps' suffixes)
      const videoQuality = selectedVideoQuality 
        ? parseInt(selectedVideoQuality.replace('p', ''))
        : undefined;
      const audioQuality = selectedAudioQuality
        ? parseInt(selectedAudioQuality.replace('kbps', ''))
        : undefined;

      // Make the download request with all parameters
      const response = await apiDownloaderDownloadCreate({
        url: videoUrl,
        ext: selectedExtension,
        video_quality: videoQuality || null,
        audio_quality: audioQuality || null,
        // Playlist selection
        selected_videos: videoInfo?.is_playlist && selectedVideos.length > 0 ? selectedVideos : null,
        // Advanced options
        subtitles: subtitles || null,
        embed_subtitles: embedSubtitles,
        embed_thumbnail: embedThumbnail,
        cookies: cookies || null,
      });

      // The response should be a Blob, trigger download
      const blob = new Blob([response as any], { type: 'application/octet-stream' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      
      // Better filename based on content type
      if (videoInfo?.is_playlist) {
        const playlistTitle = videoInfo.playlist_title || 'playlist';
        a.download = `${playlistTitle.replace(/[<>:"/\\|?*]/g, '_').trim()}.zip`;
      } else {
        const title = videoInfo?.videos?.[0]?.title || 'video';
        a.download = `${title.replace(/[<>:"/\\|?*]/g, '_').trim()}.${selectedExtension}`;
      }
      
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (err: any) {
      const errorMessage = err.response?.data?.error || err.message || 'Failed to download video';
      setError({ error: errorMessage });
      console.error('Download error:', err);
    } finally {
      setIsDownloading(false);
    }
  }

  return (
    <div className="p-8 w-full max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Video Downloader</h1>

      <div className="mb-6">
        <div className="flex items-center gap-2 mb-3">
          <FaLink className="text-gray-500" />
          <span className="text-sm font-medium">Video URL</span>
        </div>
        <input
          type="text"
          value={videoUrl}
          onChange={(e) => setVideoUrl(e.target.value)}
          placeholder="Paste video URL here (YouTube, TikTok, Vimeo, etc.)"
          className="w-full p-3 border rounded"
        />
      </div>

      <button
        onClick={retrieveVideoInfo}
        disabled={isLoading || !videoUrl}
        className="px-6 py-3 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed mx-2 mb-4"
      >
        {isLoading ? 'Loading...' : 'Retrieve Options'}
      </button>

      {error && (
        <div className="mt-6 mx-4 p-4 bg-red-100 text-red-700 rounded">
          Error: {error.error}
        </div>
      )}

      {videoInfo && (
        <div className="mt-8 mx-4 p-6 border rounded">
          {videoInfo.is_playlist ? (
            <div>
              <h2 className="text-xl font-semibold mb-4">
                📋 {videoInfo.playlist_title || 'Playlist'}
              </h2>
              <p className="text-gray-600 mb-6">
                {videoInfo.playlist_count} videos found
              </p>

              {/* Playlist Video Selection */}
              <div className="mb-6">
                <div className="flex items-center gap-4 mb-3">
                  <h3 className="text-lg font-medium">Select Videos to Download:</h3>
                  <div className="flex gap-2">
                    <button
                      onClick={selectAllVideos}
                      className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
                    >
                      Select All
                    </button>
                    <button
                      onClick={deselectAllVideos}
                      className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
                    >
                      Clear All
                    </button>
                  </div>
                </div>

                <div className="max-h-96 overflow-y-auto border rounded">
                  {videoInfo.videos.map((video, index) => {
                    const videoNumber = index + 1;
                    return (
                      <div key={video.id} className="p-3 border-b last:border-b-0 hover:bg-gray-50">
                        <label className="flex items-start gap-3 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={selectedVideos.includes(videoNumber)}
                            onChange={() => toggleVideoSelection(videoNumber)}
                            className="mt-1 w-4 h-4"
                          />
                          <div className="flex gap-3 flex-1">
                            {video.thumbnail && (
                              <img
                                src={video.thumbnail}
                                alt={video.title}
                                className="w-20 h-15 object-cover rounded flex-shrink-0"
                              />
                            )}
                            <div className="flex-1">
                              <div className="font-medium">
                                {videoNumber}. {video.title}
                              </div>
                              {video.duration && (
                                <div className="text-sm text-gray-600">
                                  Duration: {Math.floor(video.duration / 60)}:{String(video.duration % 60).padStart(2, '0')}
                                </div>
                              )}
                              <div className="text-xs text-gray-500 mt-1">
                                Quality: {video.video_resolutions.join(', ') || 'N/A'} | 
                                Audio: {video.audio_resolutions.join(', ') || 'N/A'}
                              </div>
                            </div>
                          </div>
                        </label>
                      </div>
                    );
                  })}
                </div>
                
                <div className="mt-3 text-sm text-gray-600">
                  {selectedVideos.length} of {videoInfo.videos.length} videos selected
                </div>
              </div>
            </div>
          ) : (
            <div>
              <h2 className="text-xl font-semibold mb-4">
                🎥 {videoInfo.videos[0]?.title || 'Video'}
              </h2>
              
              {videoInfo.videos[0]?.thumbnail && (
                <img 
                  src={videoInfo.videos[0].thumbnail} 
                  alt={videoInfo.videos[0].title} 
                  className="mt-4 w-1/3 max-w-sm rounded shadow mx-auto block"
                />
              )}
              
              {videoInfo.videos[0]?.duration && (
                <p className="mt-4 text-gray-600 text-center">
                  Duration: {Math.floor(videoInfo.videos[0].duration / 60)}:{String(videoInfo.videos[0].duration % 60).padStart(2, '0')}
                </p>
              )}
            </div>
          )}

          {/* Quality and Format Selection */}
          <div className="mt-8 mx-2 grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Video Quality Dropdown */}
            <div>
              <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                <FaVideo className="text-gray-500" />
                Video Quality (optional)
              </label>
              <select
                value={selectedVideoQuality}
                onChange={(e) => setSelectedVideoQuality(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">Best available</option>
                {getAllVideoQualities().map((res) => (
                  <option key={res} value={res}>{res}</option>
                ))}
              </select>
            </div>

            {/* Audio Quality Dropdown */}
            <div>
              <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                <FaVolumeUp className="text-gray-500" />
                Audio Quality (optional)
              </label>
              <select
                value={selectedAudioQuality}
                onChange={(e) => setSelectedAudioQuality(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">Best available</option>
                {getAllAudioQualities().map((res) => (
                  <option key={res} value={res}>{res}</option>
                ))}
              </select>
            </div>

            {/* File Extension Dropdown */}
            <div>
              <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                <FaFile className="text-gray-500" />
                File Format
              </label>
              <select
                value={selectedExtension}
                onChange={(e) => setSelectedExtension(e.target.value)}
                className="w-full p-2 border rounded"
              >
                {FILE_EXTENSIONS.map((ext) => (
                  <option key={ext.value} value={ext.value}>
                    {ext.label}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <button
            onClick={handleDownload}
            disabled={isDownloading || (videoInfo.is_playlist && selectedVideos.length === 0)}
            className="mt-8 mx-2 px-6 py-3 bg-green-500 text-white rounded hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
          >
            {isDownloading ? 'Downloading...' : (
              videoInfo.is_playlist 
                ? `Download Selected (${selectedVideos.length}) as ZIP` 
                : 'Download Video'
            )}
          </button>

          {videoInfo.is_playlist && selectedVideos.length === 0 && (
            <p className="mt-4 mx-2 text-sm text-red-600">
              Please select at least one video to download
            </p>
          )}

          {/* Advanced Options Toggle */}
          <div className="mt-10 mx-2 border-t pt-8">
            <button
              onClick={() => setShowAdvanced(!showAdvanced)}
              className="text-blue-500 hover:text-blue-700 font-medium flex items-center gap-2 mx-2"
            >
              {showAdvanced ? '▼' : '▶'} Advanced Options
            </button>

            {showAdvanced && (
              <div className="mt-6 space-y-6 p-6 rounded mx-2">
                {/* Subtitles */}
                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <FaFont className="text-gray-500" />
                    Subtitles (optional)
                  </label>
                  <input
                    type="text"
                    value={subtitles}
                    onChange={(e) => setSubtitles(e.target.value)}
                    placeholder="e.g., 'en', 'en,cs', or 'all'"
                    className="w-full p-2 border rounded"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Language codes (e.g., 'en', 'cs') or 'all' for all available
                  </p>
                </div>

                {/* Checkboxes Row */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={embedSubtitles}
                      onChange={(e) => setEmbedSubtitles(e.target.checked)}
                      className="w-4 h-4"
                    />
                    <span className="text-sm">Embed Subtitles (mkv/mp4 only)</span>
                  </label>

                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={embedThumbnail}
                      onChange={(e) => setEmbedThumbnail(e.target.checked)}
                      className="w-4 h-4"
                    />
                    <span className="text-sm">Embed Thumbnail</span>
                  </label>
                </div>

                {/* Cookies for Age-Restricted Content */}
                <div>
                  <label className="block text-sm font-medium mb-2 flex items-center gap-2">
                    <FaCookie className="text-gray-500" />
                    Cookies (for age-restricted content)
                  </label>
                  <textarea
                    value={cookies}
                    onChange={(e) => setCookies(e.target.value)}
                    placeholder="Paste cookies in Netscape format here..."
                    rows={4}
                    className="w-full p-2 border rounded font-mono text-xs"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Export cookies from your browser using extensions like "Get cookies.txt" or "cookies.txt".
                    Login to YouTube/Google first, then export cookies in Netscape format.
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}