import { useState, useEffect } from 'react';
import { useDownloadStore, MAIN_QUEUE_ID, getSiteLogin } from '../store/useDownloadStore';
import { useSettingsStore } from '../store/useSettingsStore';
import { FolderPlus, Settings, Shield, RefreshCw, FileText, HardDrive, Database, Link, ArrowRight, Play, ChevronDown, ChevronRight, Video, Film, Music } from 'lucide-react';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import { DuplicateResolutionModal, DuplicateConflict } from './DuplicateResolutionModal';
import { categoryForFileName, fileNameFromUrl, isMediaUrl } from '../utils/downloads';

interface RawMediaFormat {
  format_id?: string;
  ext?: string;
  resolution?: string;
  format_note?: string;
  vcodec?: string;
  acodec?: string;
  height?: number;
  filesize?: number;
  filesize_approx?: number;
}

interface ParsedDownloadItem {
  url: string;
  file: string;
  size?: string;
  sizeBytes?: number;
  status?: string;
  isMedia?: boolean;
  formats?: { name: string; selector: string; ext: string; detail: string; type: string; bytes: number }[];
  selectedFormat?: number;
}

const isVideo = (f: RawMediaFormat) => {
  const vcodec = f.vcodec?.toLowerCase();
  return vcodec && vcodec !== 'none';
};

const isAudio = (f: RawMediaFormat) => {
  const acodec = f.acodec?.toLowerCase();
  const vcodec = f.vcodec?.toLowerCase();
  return acodec && acodec !== 'none' && (!vcodec || vcodec === 'none');
};

const formatSize = (f: RawMediaFormat) => f.filesize ?? f.filesize_approx ?? 0;

const matchesHeight = (f: RawMediaFormat, height: number | null) => {
  if (height === null) return true;

  const note = f.format_note || "";
  if (height === 2160 && (note.includes("2160p") || note.toLowerCase().includes("4k"))) return true;
  if (height === 1440 && note.includes("1440p")) return true;
  if (height === 1080 && note.includes("1080p")) return true;
  if (height === 720 && note.includes("720p")) return true;
  if (height === 480 && note.includes("480p")) return true;
  if (height === 360 && note.includes("360p")) return true;

  if (f.resolution) {
    const parts = f.resolution.split('x').map(n => parseInt(n, 10));
    if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
      const maxDim = Math.max(parts[0], parts[1]);
      switch (height) {
        case 2160: if (maxDim >= 3800) return true; break;
        case 1440: if (maxDim >= 2500 && maxDim < 3800) return true; break;
        case 1080: if (maxDim >= 1900 && maxDim < 2500) return true; break;
        case 720:  if (maxDim >= 1200 && maxDim < 1900) return true; break;
        case 480:  if (maxDim >= 800 && maxDim < 1200) return true; break;
        case 360:  if (maxDim >= 600 && maxDim < 800) return true; break;
      }
    }
  }

  const formatHeight = f.height;
  if (!formatHeight) return false;

  let tolerance = 100;
  if (height >= 2160) tolerance = 600;
  else if (height >= 1440) tolerance = 400;
  else if (height >= 1080) tolerance = 300;
  else if (height >= 720) tolerance = 200;

  return formatHeight <= height && formatHeight >= height - tolerance;
};

const hasVideoFormat = (formats: RawMediaFormat[], height: number | null, container: string) => {
  return formats.some(f => {
    if (!isVideo(f) || !matchesHeight(f, height)) return false;
    return container === 'mkv' || f.ext?.toLowerCase() === container.toLowerCase();
  });
};

const hasAudioFormat = (formats: RawMediaFormat[], ext: string | null) => {
  return formats.some(f => {
    if (!isAudio(f)) return false;
    if (!ext) return true;
    return f.ext?.toLowerCase() === ext.toLowerCase();
  });
};

const estimatedVideoBytes = (formats: RawMediaFormat[], height: number | null, container: string) => {
  let maxVideo = 0;
  for (const f of formats) {
    if (isVideo(f) && matchesHeight(f, height) && (container === 'mkv' || f.ext?.toLowerCase() === container.toLowerCase())) {
      const size = formatSize(f);
      if (size > maxVideo) maxVideo = size;
    }
  }
  if (maxVideo === 0) return null;

  let maxAudio = estimatedAudioBytes(formats, container === 'webm' ? 'webm' : 'm4a') || estimatedAudioBytes(formats, null) || 0;
  return maxVideo + maxAudio;
};

const estimatedAudioBytes = (formats: RawMediaFormat[], ext: string | null): number | null => {
  let maxPreferred = 0;
  for (const f of formats) {
    if (isAudio(f)) {
      if (!ext || f.ext?.toLowerCase() === ext.toLowerCase()) {
        const size = formatSize(f);
        if (size > maxPreferred) maxPreferred = size;
      }
    }
  }
  if (maxPreferred > 0 || !ext) return maxPreferred > 0 ? maxPreferred : null;
  return estimatedAudioBytes(formats, null);
};

const formatBytes = (bytes: number) => {
  if (bytes === 0) return 'Unknown size';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
};

const parseMediaFormats = (jsonStr: string) => {
  try {
    const data = JSON.parse(jsonStr);
    let title = data.title || 'Media';
    title = title.replace(/[\/\\?%*:|"<>]/g, '-');
    const rawFormats: RawMediaFormat[] = data.formats || [];

    const options = [];

    const standardResolutions = [
      { h: 2160, name: "4K" },
      { h: 1440, name: "1440p" },
      { h: 1080, name: "1080p" },
      { h: 720, name: "720p" },
      { h: 480, name: "480p" },
      { h: 360, name: "360p" }
    ];

    const availableResolutions = standardResolutions.filter(res =>
      rawFormats.some(f => isVideo(f) && matchesHeight(f, res.h))
    );

    const videoQualities: { h: number | null, name: string }[] = [{ h: null, name: "Best" }, ...availableResolutions];
    const videoContainers = [
      { ext: "mp4", name: "MP4" },
      { ext: "mkv", name: "MKV" },
      { ext: "webm", name: "WebM" }
    ];

    for (const q of videoQualities) {
      for (const c of videoContainers) {
        if (!hasVideoFormat(rawFormats, q.h, c.ext)) continue;
        const est = estimatedVideoBytes(rawFormats, q.h, c.ext);
        const filter = q.h ? `[height<=${q.h}]` : '';

        let selector = `bestvideo${filter}+bestaudio/best${filter}`;
        if (c.ext === 'mp4') {
          selector = `bestvideo${filter}[ext=mp4]+bestaudio[ext=m4a]/best${filter}[ext=mp4]/bestvideo${filter}+bestaudio/best${filter}`;
        } else if (c.ext === 'webm') {
          selector = `bestvideo${filter}[ext=webm]+bestaudio[ext=webm]/best${filter}[ext=webm]/bestvideo${filter}+bestaudio/best${filter}`;
        }

        options.push({
          name: `${q.name} ${c.name}`,
          selector,
          ext: c.ext,
          detail: est ? `~${formatBytes(est)}` : '',
          type: 'Video',
          bytes: est || 0
        });
      }
    }

    if (hasAudioFormat(rawFormats, null)) {
      const est = estimatedAudioBytes(rawFormats, null);
      options.push({
        name: "Audio MP3",
        selector: "bestaudio/best",
        ext: "mp3",
        detail: est ? `~${formatBytes(est)}` : '',
        type: 'Audio',
        bytes: est || 0
      });
    }

    if (hasAudioFormat(rawFormats, "m4a")) {
      const est = estimatedAudioBytes(rawFormats, "m4a");
      options.push({
        name: "Audio M4A",
        selector: "bestaudio[ext=m4a]/bestaudio/best",
        ext: "m4a",
        detail: est ? `~${formatBytes(est)}` : '',
        type: 'Audio',
        bytes: est || 0
      });
    }

    if (hasAudioFormat(rawFormats, "webm") || hasAudioFormat(rawFormats, "opus")) {
      const est = estimatedAudioBytes(rawFormats, "webm") || estimatedAudioBytes(rawFormats, "opus");
      options.push({
        name: "Audio Opus",
        selector: "bestaudio[ext=webm]/bestaudio/best",
        ext: "opus",
        detail: est ? `~${formatBytes(est)}` : '',
        type: 'Audio',
        bytes: est || 0
      });
    }

    return { title, formats: options };
  } catch (e) {
    return null;
  }
};

export const AddDownloadsModal = () => {
  const {
    isAddModalOpen,
    pendingAddUrls,
    pendingAddReferer,
    pendingAddFilename,
    toggleAddModal,
    addDownload,
    queues
  } = useDownloadStore();
  const { defaultDownloadPath } = useSettingsStore();

  const [selectedQueueId, setSelectedQueueId] = useState<string>(MAIN_QUEUE_ID);

  const [urls, setUrls] = useState('');
  const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(null);
  const [parsedItems, setParsedItems] = useState<ParsedDownloadItem[]>([]);

  const [conflicts, setConflicts] = useState<DuplicateConflict[]>([]);
  const [showingDuplicates, setShowingDuplicates] = useState(false);
  const [pendingStartFlag, setPendingStartFlag] = useState(false);
  const [resolvedLocation, setResolvedLocation] = useState('');

  // Right Form
  const [saveLocation, setSaveLocation] = useState(defaultDownloadPath);
  const [connections, setConnections] = useState(16);
  const [speedLimitEnabled, setSpeedLimitEnabled] = useState(false);
  const [speedLimit, setSpeedLimit] = useState('1024');
  const [freeSpace, setFreeSpace] = useState('Unknown');

  const [useAuth, setUseAuth] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const [advancedExpanded, setAdvancedExpanded] = useState(false);
  const [checksumEnabled, setChecksumEnabled] = useState(false);
  const [checksumAlgo, setChecksumAlgo] = useState('SHA-256');
  const [checksumValue, setChecksumValue] = useState('');
  const [headers, setHeaders] = useState('');
  const [cookies, setCookies] = useState('');
  const [mirrors, setMirrors] = useState('');

  useEffect(() => {
    if (isAddModalOpen) {
      setSaveLocation(defaultDownloadPath);
      setUrls(pendingAddUrls || '');
      setParsedItems([]);
      setSelectedItemIndex(null);
      setSelectedQueueId(queues.find(q => q.isMain)?.id || MAIN_QUEUE_ID);
      setUseAuth(false);
      setUsername('');
      setPassword('');
      setAdvancedExpanded(false);
      setChecksumEnabled(false);
      setChecksumAlgo('SHA-256');
      setChecksumValue('');
      setHeaders(pendingAddReferer ? `Referer: ${pendingAddReferer}` : '');
      setCookies('');
      setMirrors('');
    }
  }, [
    isAddModalOpen,
    pendingAddUrls,
    pendingAddReferer,
    defaultDownloadPath,
    queues
  ]);

  useEffect(() => {
    if (!saveLocation) return;
    invoke<string>('get_free_space', { path: saveLocation })
      .then(space => setFreeSpace(space))
      .catch(() => setFreeSpace('Unknown'));
  }, [saveLocation, isAddModalOpen]);

  // Metadata parser
  useEffect(() => {
    const lines = urls.split('\n').map(u => u.trim()).filter(u => u.length > 0);

    // Immediately display items in loading state
    const initialItems: ParsedDownloadItem[] = lines.map(url => {
      const fallbackFile = lines.length === 1 && pendingAddFilename
        ? pendingAddFilename
        : fileNameFromUrl(url);
      return { url, file: fallbackFile, size: '-', status: 'Loading', isMedia: isMediaUrl(url) };
    });
    setParsedItems(initialItems);

    if (lines.length === 0) {
      setSelectedItemIndex(null);
      return;
    } else if (selectedItemIndex === null || selectedItemIndex >= lines.length) {
      setSelectedItemIndex(0);
    }

    const timer = setTimeout(async () => {
      const updatedItems = [...initialItems];
      let firstReadyIndex: number | null = null;

      for (let i = 0; i < lines.length; i++) {
        const url = lines[i];
        try {
          new URL(url);
          if (isMediaUrl(url)) {
            const settingsStore = useSettingsStore.getState();
            const { mediaCookieSource } = settingsStore;
            const browserArg = mediaCookieSource !== 'none' ? mediaCookieSource : null;
            const login = getSiteLogin(url, settingsStore);
            let keychainPassword = null;
            if (login) {
              try {
                keychainPassword = await invoke<string>('get_keychain_password', { id: login.id });
              } catch (e) {
                console.warn("Could not fetch keychain password:", e);
              }
            }

            const jsonStr = await invoke<string>('fetch_media_metadata', { 
              url, 
              cookieBrowser: browserArg,
              username: login?.username || null,
              password: keychainPassword
            });
            const mediaData = parseMediaFormats(jsonStr);
            if (mediaData && mediaData.formats.length > 0) {
              updatedItems[i] = {
                url,
                file: `${mediaData.title}.${mediaData.formats[0].ext}`,
                size: mediaData.formats[0].detail || 'Unknown (Media)',
                sizeBytes: mediaData.formats[0].bytes,
                status: 'Ready',
                isMedia: true,
                formats: mediaData.formats,
                selectedFormat: 0
              };
            } else {
              throw new Error("Invalid media metadata or no formats found");
            }
          } else {
            const settingsStore = useSettingsStore.getState();
            const login = getSiteLogin(url, settingsStore);
            let keychainPassword = null;
            if (login) {
              try {
                keychainPassword = await invoke<string>('get_keychain_password', { id: login.id });
              } catch (e) {
                console.warn("Could not fetch keychain password:", e);
              }
            }
            const meta = await invoke<{filename: string, size: string, size_bytes: number}>('fetch_metadata', { 
              url,
              username: login?.username || null,
              password: keychainPassword
            });
            updatedItems[i] = {
              url,
              file: lines.length === 1 && pendingAddFilename ? pendingAddFilename : meta.filename,
              size: meta.size,
              sizeBytes: meta.size_bytes,
              status: 'Ready'
            };
          }
          if (firstReadyIndex === null) firstReadyIndex = i;
        } catch (e) {
          console.error("Meta fetch failed", e);
          updatedItems[i] = { ...updatedItems[i], size: 'Unknown', sizeBytes: 0, status: 'Error' };
        }
        setParsedItems([...updatedItems]);
      }

      if (firstReadyIndex !== null) {
        setSelectedItemIndex(firstReadyIndex);
      }
    }, 400);

    return () => clearTimeout(timer);
  }, [urls, pendingAddFilename]);

  if (!isAddModalOpen) return null;

  const handleBrowse = async () => {
    try {
      const selected = await open({
        directory: true,
        multiple: false,
        defaultPath: saveLocation.startsWith('~') ? undefined : saveLocation
      });
      if (selected && typeof selected === 'string') {
        setSaveLocation(selected);
      }
    } catch (e) {
      console.error("Failed to select folder:", e);
    }
  };

  const handleStart = async (startImmediately: boolean) => {
    let finalLocation = saveLocation;
    const settings = useSettingsStore.getState();
    if (settings.askWhereToSaveEachFile && parsedItems.length > 0) {
      try {
        const selected = await open({
          directory: true,
          multiple: false,
          defaultPath: finalLocation.startsWith('~') ? undefined : finalLocation
        });
        if (selected && typeof selected === 'string') {
          finalLocation = selected;
        } else {
          return; // Cancelled
        }
      } catch (e) {
        console.error("Failed to select folder:", e);
      }
    }

    setResolvedLocation(finalLocation);
    const store = useDownloadStore.getState();
    const newConflicts: DuplicateConflict[] = [];

    for (let i = 0; i < parsedItems.length; i++) {
      const item = parsedItems[i];
      let finalFile = item.file;
      if (item.isMedia && item.formats && item.selectedFormat !== undefined) {
         const selectedFormat = item.formats[item.selectedFormat];
         const baseName = finalFile.substring(0, finalFile.lastIndexOf('.')) || finalFile;
         finalFile = `${baseName}.${selectedFormat.ext}`;
      }

      const isUrlDupe = store.downloads.some(d => d.url === item.url && d.status !== 'failed' && d.status !== 'completed');
      if (isUrlDupe) {
          newConflicts.push({ id: i.toString(), fileName: finalFile, reason: { type: 'url', msg: 'URL already in queue' }, resolution: 'rename' });
      } else {
         const fileExistsInStore = store.downloads.some(d => {
             const dest = d.destination || settings.defaultDownloadPath || '~/Downloads';
             return dest === finalLocation && d.fileName === finalFile && d.status !== 'failed';
         });
         
         let fileExistsOnDisk = false;
         try {
             const cleanLocation = finalLocation.endsWith('/') ? finalLocation.slice(0, -1) : finalLocation;
             fileExistsOnDisk = await invoke<boolean>('check_file_exists', { path: `${cleanLocation}/${finalFile}` });
         } catch (e) {}

         if (fileExistsInStore || fileExistsOnDisk) {
             newConflicts.push({ id: i.toString(), fileName: finalFile, reason: { type: 'file', msg: 'File exists at destination' }, resolution: 'rename' });
         }
      }
    }

    if (newConflicts.length > 0) {
       setConflicts(newConflicts);
       setPendingStartFlag(startImmediately);
       setShowingDuplicates(true);
       return;
    }

    await executeAddDownloads(startImmediately, finalLocation);
  };

  const executeAddDownloads = async (startImmediately: boolean, finalLocation: string, resolutions?: { id: string, resolution: 'rename' | 'replace' | 'skip' }[]) => {
      let itemsToAdd = [...parsedItems];

      if (resolutions) {
         for (const res of resolutions) {
             const idx = parseInt(res.id);
             const item = itemsToAdd[idx];
             if (!item) continue;

             if (res.resolution === 'skip') {
                 itemsToAdd[idx] = null as any; // mark for skip
             } else if (res.resolution === 'rename') {
                 let finalFile = item.file;
                 if (item.isMedia && item.formats && item.selectedFormat !== undefined) {
                    const selectedFormat = item.formats[item.selectedFormat];
                    const baseName = finalFile.substring(0, finalFile.lastIndexOf('.')) || finalFile;
                    finalFile = `${baseName}.${selectedFormat.ext}`;
                 }
                 const cleanLocation = finalLocation.endsWith('/') ? finalLocation.slice(0, -1) : finalLocation;
                 
                 let count = 1;
                 const base = finalFile.substring(0, finalFile.lastIndexOf('.')) || finalFile;
                 const ext = finalFile.includes('.') ? finalFile.substring(finalFile.lastIndexOf('.')) : '';
                 let newName = finalFile;
                 let exists = true;
                 
                 while (exists) {
                     newName = `${base} (${count})${ext}`;
                     const storeHas = useDownloadStore.getState().downloads.some(d => {
                         const dest = d.destination || useSettingsStore.getState().defaultDownloadPath || '~/Downloads';
                         return dest === finalLocation && d.fileName === newName && d.status !== 'failed';
                     });
                     let diskHas = false;
                     try { diskHas = await invoke<boolean>('check_file_exists', { path: `${cleanLocation}/${newName}` }); } catch(e) {}
                     exists = storeHas || diskHas;
                     count++;
                 }
                 
                 itemsToAdd[idx] = { ...item, file: newName };
             } else if (res.resolution === 'replace') {
                 let finalFile = item.file;
                 if (item.isMedia && item.formats && item.selectedFormat !== undefined) {
                    const selectedFormat = item.formats[item.selectedFormat];
                    const baseName = finalFile.substring(0, finalFile.lastIndexOf('.')) || finalFile;
                    finalFile = `${baseName}.${selectedFormat.ext}`;
                 }
                 const cleanLocation = finalLocation.endsWith('/') ? finalLocation.slice(0, -1) : finalLocation;
                 const fullPath = `${cleanLocation}/${finalFile}`;

                 const store = useDownloadStore.getState();
                 const existingItem = store.downloads.find(d => {
                     const dest = d.destination || useSettingsStore.getState().defaultDownloadPath || '~/Downloads';
                     return (d.url === item.url || (dest === finalLocation && d.fileName === finalFile)) && d.status !== 'failed';
                 });

                 if (existingItem) {
                     await store.removeDownload(existingItem.id);
                 }
                 
                 try { await invoke('delete_file', { path: fullPath }); } catch(e) {}
             }
         }
      }

      itemsToAdd = itemsToAdd.filter(Boolean);

      for (const item of itemsToAdd) {
        try {
          const id = crypto.randomUUID();
          let finalFile = item.file;
          let formatSelector = undefined;

          if (item.isMedia && item.formats && item.selectedFormat !== undefined) {
            const selectedFormat = item.formats[item.selectedFormat];
            formatSelector = selectedFormat.selector;
            if (!finalFile.endsWith(`.${selectedFormat.ext}`)) {
                const baseName = finalFile.substring(0, finalFile.lastIndexOf('.')) || finalFile;
                finalFile = `${baseName}.${selectedFormat.ext}`;
            }
          }

          addDownload({
            id,
            url: item.url,
            fileName: finalFile,
            status: startImmediately ? 'queued' : 'paused',
            category: categoryForFileName(finalFile),
            dateAdded: new Date().toISOString(),
            connections: Number(connections),
            speedLimit: speedLimitEnabled ? `${speedLimit}K` : undefined,
            username: useAuth ? username.trim() : undefined,
            password: useAuth ? password.trim() : undefined,
            headers: headers.trim() || undefined,
            checksum: checksumEnabled && checksumValue.trim()
              ? `${checksumAlgo}=${checksumValue.trim()}`
              : undefined,
            cookies: cookies.trim() || undefined,
            mirrors: mirrors.trim() || undefined,
            destination: finalLocation,
            isMedia: item.isMedia,
            mediaFormatSelector: formatSelector,
            queueId: selectedQueueId
          });
        } catch (e) {
          console.error("Invalid URL or failed to add:", e);
        }
      }
      toggleAddModal(false);
  };

  const SummaryBox = ({ title, value, icon: Icon, color }: any) => (
    <div className="flex flex-col bg-bg-input/50 border border-border-modal/40 rounded-lg p-2.5 shadow-sm">
      <div className="flex items-center gap-1.5 text-text-muted mb-1">
        <Icon size={12} className={color} />
        <span className="text-[10px] font-bold uppercase tracking-wider">{title}</span>
      </div>
      <span className="text-sm font-semibold text-text-primary truncate">{value}</span>
    </div>
  );

  const requiredBytes = parsedItems.reduce((acc, item) => acc + (item.sizeBytes || 0), 0);
  const requiredStr = requiredBytes > 0
    ? (requiredBytes < 1024 * 1024 ? `${(requiredBytes / 1024).toFixed(1)} KB`
       : requiredBytes < 1024 * 1024 * 1024 ? `${(requiredBytes / 1024 / 1024).toFixed(1)} MB`
       : `${(requiredBytes / 1024 / 1024 / 1024).toFixed(2)} GB`)
    : 'Unknown';

  return (
    <>
      {showingDuplicates && (
        <DuplicateResolutionModal 
          conflicts={conflicts} 
          onConfirm={(resolutions) => {
            setShowingDuplicates(false);
            executeAddDownloads(pendingStartFlag, resolvedLocation, resolutions);
          }} 
          onCancel={() => setShowingDuplicates(false)} 
        />
      )}
    <div className="app-modal-backdrop fixed inset-0 z-50 flex items-center justify-center">
      <div className="app-modal w-[900px] h-[650px] flex flex-col overflow-hidden text-sm">

        {/* Main Content Split */}
        <div className="flex flex-1 overflow-hidden">

          {/* Left Column: URLs and Preview */}
          <div className="w-[55%] border-r border-border-modal flex flex-col bg-main-bg/50">
            <div className="p-5 flex-1 flex flex-col gap-5">

              <div className="flex flex-col gap-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2 text-text-primary font-semibold">
                    <Link size={16} className="text-blue-500" />
                    Download Links
                  </div>
                </div>
                <textarea
                  className="w-full h-32 bg-bg-input/80 border border-border-modal rounded-lg p-3 text-[13px] text-text-primary focus:outline-none focus:border-accent resize-none font-mono shadow-inner transition-colors"
                  placeholder="Paste HTTP, HTTPS, FTP, or SFTP URLs here..."
                  value={urls}
                  onChange={(e) => setUrls(e.target.value)}
                />
                <div className="flex justify-between items-center px-1">
                  <span className="text-[11px] text-text-muted font-medium">{parsedItems.length} valid link(s) detected</span>
                  <button className="flex items-center gap-1.5 text-[11px] text-blue-500 hover:text-blue-400 font-medium">
                    <RefreshCw size={12} /> Refresh Metadata
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-4 gap-3">
                <SummaryBox title="Files" value={parsedItems.length} icon={FileText} color="text-blue-500" />
                <SummaryBox title="Required" value={requiredStr} icon={Database} color="text-orange-500" />
                <SummaryBox title="Free" value={freeSpace} icon={HardDrive} color="text-green-500" />
                <SummaryBox title="Unknown" value={parsedItems.filter(i => !i.sizeBytes).length} icon={FileText} color="text-purple-500" />
              </div>

              <div className="flex flex-col gap-2 flex-1 overflow-hidden">
                <div className="flex items-center gap-2 text-text-primary font-semibold">
                  <ArrowRight size={16} className="text-blue-500" />
                  Preview
                </div>
                <div className="flex-1 border border-border-modal rounded-lg overflow-hidden bg-bg-input/30 flex flex-col">
                  <div className="bg-sidebar-bg/50 border-b border-border-modal px-3 py-2 flex text-[11px] font-semibold text-text-muted uppercase tracking-wider">
                    <div className="flex-[2]">File</div>
                    <div className="flex-1">Size</div>
                    <div className="flex-[1.5]">Status</div>
                  </div>
                  <div className="flex-1 overflow-y-auto p-2 space-y-1">
                    {parsedItems.length === 0 ? (
                      <div className="h-full flex items-center justify-center text-text-muted text-xs italic">
                        No links added yet.
                      </div>
                    ) : (
                      parsedItems.map((item, i) => (
                        <div
                          key={i}
                          onClick={() => setSelectedItemIndex(i)}
                          className={`flex flex-col text-xs px-2 py-2 cursor-pointer rounded-md transition-all group ${
                            selectedItemIndex === i
                              ? 'bg-blue-500/10 border border-blue-500/30 shadow-sm'
                              : 'hover:bg-item-hover border border-transparent'
                          }`}
                        >
                          <div className="flex items-center w-full">
                            <div className="flex-[2] text-text-primary font-medium truncate pr-2" title={item.file}>{item.file}</div>
                            <div className={`flex-1 font-mono ${item.status === 'Loading' ? 'text-text-muted/50' : 'text-text-muted'}`}>{item.size || 'Unknown'}</div>
                            <div className={`flex-[1.5] font-medium ${item.status === 'Error' ? 'text-red-500' : item.status === 'Loading' ? 'text-orange-400' : 'text-blue-500'}`}>
                              {item.status === 'Loading' ? (
                                <div className="flex items-center gap-1.5">
                                  <RefreshCw size={12} className="animate-spin" /> Fetching...
                                </div>
                              ) : (
                                item.status || 'Ready'
                              )}
                            </div>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>

            </div>
          </div>

          {/* Right Column: Settings */}
          <div className="w-[45%] flex flex-col overflow-y-auto bg-bg-modal">
            <div className="p-6 space-y-7">

              {/* Media Format (Dynamic) */}
              {selectedItemIndex !== null && parsedItems[selectedItemIndex]?.isMedia && (
                <section className="app-card relative overflow-hidden p-4">
                  <div className="absolute top-0 right-0 p-2 opacity-10">
                    <Video size={48} />
                  </div>
                  <div className="flex items-center gap-2 text-sm font-semibold text-text-primary mb-3 relative z-10">
                    <Video size={16} className="text-purple-500" /> Media Format
                  </div>

                  {parsedItems[selectedItemIndex].status === 'Loading' ? (
                    <div className="flex flex-col items-center justify-center py-6 gap-3 relative z-10">
                      <RefreshCw size={24} className="animate-spin text-purple-500" />
                      <span className="text-xs text-text-muted font-medium animate-pulse">Fetching media streams...</span>
                    </div>
                  ) : parsedItems[selectedItemIndex].formats ? (
                    <div className="space-y-3 relative z-10">
                      <div className="flex flex-col gap-1.5">
                        <label className="text-[10px] uppercase font-bold tracking-wider text-text-muted">Available Streams</label>
                        <div className="flex flex-col gap-1 max-h-48 overflow-y-auto pr-1">
                          {parsedItems[selectedItemIndex].formats!.map((f: any, idx: number) => {
                          const isSelected = parsedItems[selectedItemIndex].selectedFormat === idx;
                          const Icon = f.type === 'Audio' ? Music : Film;
                          return (
                            <div
                              key={idx}
                              onClick={() => {
                                const newItems = [...parsedItems];
                                newItems[selectedItemIndex].selectedFormat = idx;
                                newItems[selectedItemIndex].size = f.detail || 'Unknown';
                                newItems[selectedItemIndex].sizeBytes = f.bytes || 0;
                                // Update filename extension
                                const baseName = newItems[selectedItemIndex].file.substring(0, newItems[selectedItemIndex].file.lastIndexOf('.')) || newItems[selectedItemIndex].file;
                                newItems[selectedItemIndex].file = `${baseName}.${f.ext}`;
                                setParsedItems(newItems);
                              }}
                              className={`flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer text-xs border transition-all ${
                                isSelected ? 'bg-purple-500/10 border-purple-500/30 text-purple-600 dark:text-purple-400 font-semibold shadow-sm' : 'bg-bg-input border-border-modal text-text-secondary hover:border-border-modal/80 hover:bg-item-hover/50'
                              }`}
                            >
                              <div className="flex items-center gap-2">
                                <Icon size={14} className={isSelected ? 'text-purple-500' : 'text-text-muted'} />
                                <span>{f.name}</span>
                              </div>
                              <span className="font-mono text-[11px] opacity-80">{f.detail}</span>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                  ) : (
                    <div className="flex flex-col items-center justify-center py-4 relative z-10">
                      <span className="text-xs text-red-400 font-medium">Failed to load media streams.</span>
                    </div>
                  )}
                </section>
              )}

              {/* Save Location */}
              <section>
                <div className="flex items-center gap-2 text-sm font-semibold text-text-primary mb-3">
                  <FolderPlus size={16} className="text-blue-500" /> Save Location
                </div>
                <div className="flex gap-2">
                  <input
                    type="text"
                    readOnly
                    value={saveLocation}
                    className="flex-1 bg-bg-input border border-border-modal rounded-md px-3 py-1.5 text-xs text-text-muted font-mono"
                  />
                  <button
                    onClick={handleBrowse}
                    className="bg-item-hover hover:bg-item-hover/80 text-text-primary border border-border-modal px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
                  >
                    Browse
                  </button>
                </div>
              </section>

              {/* Transfer Settings */}
              <section>
                <div className="flex items-center gap-2 text-sm font-semibold text-text-primary mb-3">
                  <Settings size={16} className="text-blue-500" /> Transfer Settings
                </div>
                  <div className="flex flex-col gap-3">
                    <div className="flex items-center justify-between">
                      <label className="text-xs text-text-secondary font-medium">Target Queue</label>
                      <select value={selectedQueueId} onChange={e=>setSelectedQueueId(e.target.value)} className="w-32 bg-bg-input border border-border-modal rounded-lg px-2 py-1 text-xs text-text-primary focus:border-accent focus:outline-none">
                        {queues.map(q => (
                          <option key={q.id} value={q.id}>{q.name}</option>
                        ))}
                      </select>
                    </div>

                    <div className="flex items-center justify-between">
                      <label className="text-xs text-text-secondary font-medium">Connections per File</label>
                    <div className="flex items-center gap-2">
                      <input type="range" min="1" max="16" value={connections} onChange={e=>setConnections(Number(e.target.value))} className="w-24 accent-blue-500" disabled={parsedItems.some(i => i.isMedia)} />
                      <span className="text-xs text-text-primary font-mono w-4 text-right">{connections}</span>
                    </div>
                  </div>

                  <div className="flex items-center justify-between">
                    <label className="flex items-center gap-2 text-xs text-text-secondary font-medium cursor-pointer">
                      <input type="checkbox" checked={speedLimitEnabled} onChange={e=>setSpeedLimitEnabled(e.target.checked)} className="rounded border-border-modal text-blue-500 focus:ring-blue-500/20" />
                      Limit speed per file
                    </label>
                    {speedLimitEnabled && (
                      <div className="flex items-center gap-1.5">
                        <input type="number" value={speedLimit} onChange={e=>setSpeedLimit(e.target.value)} className="w-16 bg-bg-input border border-border-modal rounded-lg px-2 py-1 text-xs font-mono text-text-primary focus:border-accent focus:outline-none" />
                        <span className="text-[10px] text-text-muted">KiB/s</span>
                      </div>
                    )}
                  </div>
                </div>
              </section>

              {/* Authorization */}
              <section>
                <div className="flex items-center gap-2 text-sm font-semibold text-text-primary mb-3">
                  <Shield size={16} className="text-blue-500" /> Authorization
                </div>
                <label className="flex items-center gap-2 text-xs text-text-secondary font-medium cursor-pointer mb-3">
                  <input type="checkbox" checked={useAuth} onChange={e=>setUseAuth(e.target.checked)} className="rounded border-border-modal text-blue-500 focus:ring-blue-500/20" />
                  Use authorization
                </label>

                {useAuth && (
                  <div className="space-y-2.5 pl-5 border-l-2 border-border-modal/50">
                    <input type="text" value={username} onChange={e=>setUsername(e.target.value)} placeholder="Username" className="w-full bg-bg-input border border-border-modal rounded-lg px-3 py-1.5 text-xs text-text-primary focus:border-accent focus:outline-none" />
                    <input type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="Password" className="w-full bg-bg-input border border-border-modal rounded-lg px-3 py-1.5 text-xs text-text-primary focus:border-accent focus:outline-none" />
                  </div>
                )}
              </section>

              {/* Advanced */}
              <section className="pt-2 border-t border-border-modal/50">
                <button
                  onClick={() => setAdvancedExpanded(!advancedExpanded)}
                  className="flex items-center gap-2 text-sm font-semibold text-text-primary w-full hover:text-blue-500 transition-colors"
                >
                  {advancedExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                  Advanced Transfer
                </button>

                {advancedExpanded && (
                  <div className="mt-4 space-y-4 pl-6">
                    <label className="flex items-center gap-2 text-xs text-text-secondary font-medium cursor-pointer">
                      <input type="checkbox" checked={checksumEnabled} onChange={e=>setChecksumEnabled(e.target.checked)} className="rounded border-border-modal text-blue-500 focus:ring-blue-500/20" />
                      Verify Checksum
                    </label>

                    {checksumEnabled && (
                      <div className="flex gap-2">
                        <select value={checksumAlgo} onChange={e=>setChecksumAlgo(e.target.value)} className="w-24 bg-bg-input border border-border-modal rounded-lg px-2 text-xs text-text-primary focus:border-accent focus:outline-none">
                          <option>MD5</option><option>SHA-1</option><option>SHA-256</option>
                        </select>
                        <input type="text" value={checksumValue} onChange={e=>setChecksumValue(e.target.value)} placeholder="Expected digest" className="flex-1 bg-bg-input border border-border-modal rounded-lg px-3 py-1.5 text-xs font-mono text-text-primary focus:border-accent focus:outline-none" />
                      </div>
                    )}

                    <div>
                      <label className="block text-[10px] uppercase font-bold tracking-wider text-text-muted mb-1">Headers</label>
                      <textarea value={headers} onChange={e=>setHeaders(e.target.value)} className="w-full h-12 bg-bg-input border border-border-modal rounded-lg px-3 py-1.5 text-xs font-mono text-text-primary focus:border-accent focus:outline-none resize-none" />
                    </div>
                    <div>
                      <label className="block text-[10px] uppercase font-bold tracking-wider text-text-muted mb-1">Cookies</label>
                      <input type="text" value={cookies} onChange={e=>setCookies(e.target.value)} placeholder="name=value; other=value" className="w-full bg-bg-input border border-border-modal rounded-lg px-3 py-1.5 text-xs font-mono text-text-primary focus:border-accent focus:outline-none" />
                    </div>
                    <div>
                      <label className="block text-[10px] uppercase font-bold tracking-wider text-text-muted mb-1">Mirrors</label>
                      <textarea value={mirrors} onChange={e=>setMirrors(e.target.value)} className="w-full h-12 bg-bg-input border border-border-modal rounded-lg px-3 py-1.5 text-xs font-mono text-text-primary focus:border-accent focus:outline-none resize-none" />
                    </div>
                  </div>
                )}
              </section>

            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="p-4 bg-sidebar-bg/50 border-t border-border-modal flex items-center shrink-0">
          <div className="text-[11px] text-text-muted font-medium flex-1">
            {parsedItems.length === 0 ? "Paste one or more links." : `Ready to add ${parsedItems.length} download(s).`}
          </div>
          <div className="flex gap-2.5">
            <button onClick={() => toggleAddModal(false)} className="app-button border-transparent bg-transparent px-4 text-xs text-text-secondary">
              Cancel
            </button>
            <button
              onClick={() => handleStart(false)}
              disabled={parsedItems.length === 0}
              className="app-button px-4 text-xs disabled:opacity-50"
            >
              Add to Queue
            </button>
            <button
              onClick={() => handleStart(true)}
              disabled={parsedItems.length === 0}
              className="app-button app-button-primary px-5 text-xs disabled:opacity-50"
            >
              <Play size={12} fill="currentColor" /> Start Downloads
            </button>
          </div>
        </div>

      </div>
    </div>
    </>
  );
};