jukebox-vibe/web/src/App.tsx

import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
import {
  fetchChannels, fetchSounds, fetchAnalytics, playSound, playUrl, downloadUrl, setVolumeLive, getVolume,
  adminStatus, adminLogin, adminLogout, adminDelete, adminRename,
  fetchCategories, partyStart, partyStop, subscribeEvents,
  getSelectedChannels, setSelectedChannel, uploadFile,
} from './api';
import type { VoiceChannelInfo, Sound, Category, AnalyticsResponse } from './types';
import { getCookie, setCookie } from './cookies';

const THEMES = [
  { id: 'default', color: '#5865f2', label: 'Discord' },
  { id: 'purple', color: '#9b59b6', label: 'Midnight' },
  { id: 'forest', color: '#2ecc71', label: 'Forest' },
  { id: 'sunset', color: '#e67e22', label: 'Sunset' },
  { id: 'ocean', color: '#3498db', label: 'Ocean' },
];

const CAT_PALETTE = [
  '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6',
  '#f97316', '#06b6d4', '#ef4444', '#a855f7', '#84cc16',
  '#d946ef', '#0ea5e9', '#f43f5e', '#10b981',
];

type Tab = 'all' | 'favorites' | 'recent';

type UploadItem = {
  id: string;
  file: File;
  status: 'waiting' | 'uploading' | 'done' | 'error';
  progress: number;
  savedName?: string;
  error?: string;
};

export default function App() {
  /* ── Data ── */
  const [sounds, setSounds] = useState<Sound[]>([]);
  const [total, setTotal] = useState(0);
  const [folders, setFolders] = useState<Array<{ key: string; name: string; count: number }>>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [analytics, setAnalytics] = useState<AnalyticsResponse>({
    totalSounds: 0,
    totalPlays: 0,
    mostPlayed: [],
  });

  /* ── Navigation ── */
  const [activeTab, setActiveTab] = useState<Tab>('all');
  const [activeFolder, setActiveFolder] = useState('');
  const [query, setQuery] = useState('');
  const [importUrl, setImportUrl] = useState('');
  const [importBusy, setImportBusy] = useState(false);

  // Download modal state
  const [dlModal, setDlModal] = useState<{
    url: string; type: 'youtube' | 'instagram' | 'mp3' | null;
    filename: string; phase: 'input' | 'downloading' | 'done' | 'error';
    savedName?: string; error?: string;
  } | null>(null);

  /* ── Channels ── */
  const [channels, setChannels] = useState<VoiceChannelInfo[]>([]);
  const [selected, setSelected] = useState('');
  const selectedRef = useRef('');
  const [channelOpen, setChannelOpen] = useState(false);

  /* ── Playback ── */
  const [volume, setVolume] = useState(1);
  const [lastPlayed, setLastPlayed] = useState('');

  /* ── Preferences ── */
  const [favs, setFavs] = useState<Record<string, boolean>>({});
  const [theme, setTheme] = useState(() => localStorage.getItem('jb-theme') || 'default');
  const [cardSize, setCardSize] = useState(() => parseInt(localStorage.getItem('jb-card-size') || '110'));

  /* ── Party ── */
  const [chaosMode, setChaosMode] = useState(false);
  const [partyActiveGuilds, setPartyActiveGuilds] = useState<string[]>([]);
  const chaosModeRef = useRef(false);
  const volDebounceRef = useRef<ReturnType<typeof setTimeout>>();

  /* ── Admin ── */
  const [isAdmin, setIsAdmin] = useState(false);
  const [showAdmin, setShowAdmin] = useState(false);
  const [adminPwd, setAdminPwd] = useState('');
  const [adminSounds, setAdminSounds] = useState<Sound[]>([]);
  const [adminLoading, setAdminLoading] = useState(false);
  const [adminQuery, setAdminQuery] = useState('');
  const [adminSelection, setAdminSelection] = useState<Record<string, boolean>>({});
  const [renameTarget, setRenameTarget] = useState('');
  const [renameValue, setRenameValue] = useState('');

  /* ── Drag & Drop Upload ── */
  const [isDragging, setIsDragging] = useState(false);
  const [uploads, setUploads] = useState<UploadItem[]>([]);
  const [showUploads, setShowUploads] = useState(false);
  const dragCounterRef = useRef(0);
  const uploadDismissRef = useRef<ReturnType<typeof setTimeout>>();

  /* ── Voice Stats ── */
  interface VoiceStats {
    voicePing: number | null;
    gatewayPing: number;
    status: string;
    channelName: string | null;
    connectedSince: string | null;
  }
  const [voiceStats, setVoiceStats] = useState<VoiceStats | null>(null);
  const [showConnModal, setShowConnModal] = useState(false);

  /* ── UI ── */
  const [notification, setNotification] = useState<{ msg: string; type: 'info' | 'error' } | null>(null);
  const [clock, setClock] = useState('');
  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; sound: Sound } | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);

  /* ── Refs ── */
  useEffect(() => { chaosModeRef.current = chaosMode; }, [chaosMode]);
  useEffect(() => { selectedRef.current = selected; }, [selected]);

  /* ── Drag & Drop: globale Window-Listener ── */
  useEffect(() => {
    const onDragEnter = (e: DragEvent) => {
      if (Array.from(e.dataTransfer?.items ?? []).some(i => i.kind === 'file')) {
        dragCounterRef.current++;
        setIsDragging(true);
      }
    };
    const onDragLeave = () => {
      dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
      if (dragCounterRef.current === 0) setIsDragging(false);
    };
    const onDragOver = (e: DragEvent) => e.preventDefault();
    const onDrop = (e: DragEvent) => {
      e.preventDefault();
      dragCounterRef.current = 0;
      setIsDragging(false);
      const files = Array.from(e.dataTransfer?.files ?? []).filter(f =>
        /\.(mp3|wav)$/i.test(f.name)
      );
      if (files.length) handleFileDrop(files);
    };
    window.addEventListener('dragenter', onDragEnter);
    window.addEventListener('dragleave', onDragLeave);
    window.addEventListener('dragover', onDragOver);
    window.addEventListener('drop', onDrop);
    return () => {
      window.removeEventListener('dragenter', onDragEnter);
      window.removeEventListener('dragleave', onDragLeave);
      window.removeEventListener('dragover', onDragOver);
      window.removeEventListener('drop', onDrop);
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isAdmin]);

  /* ── Helpers ── */
  const notify = useCallback((msg: string, type: 'info' | 'error' = 'info') => {
    setNotification({ msg, type });
    setTimeout(() => setNotification(null), 3000);
  }, []);
  const soundKey = useCallback((s: Sound) => s.relativePath ?? s.fileName, []);
  const YTDLP_HOSTS = ['youtube.com', 'www.youtube.com', 'm.youtube.com', 'youtu.be', 'music.youtube.com', 'instagram.com', 'www.instagram.com'];
  /** Auto-prepend https:// if missing */
  const normalizeUrl = useCallback((value: string): string => {
    const v = value.trim();
    if (!v) return v;
    if (/^https?:\/\//i.test(v)) return v;
    return 'https://' + v;
  }, []);
  const isSupportedUrl = useCallback((value: string) => {
    try {
      const parsed = new URL(normalizeUrl(value));
      const host = parsed.hostname.toLowerCase();
      if (parsed.pathname.toLowerCase().endsWith('.mp3')) return true;
      if (YTDLP_HOSTS.some(h => host === h || host.endsWith('.' + h))) return true;
      return false;
    } catch {
      return false;
    }
  }, [normalizeUrl]);
  const getUrlType = useCallback((value: string): 'youtube' | 'instagram' | 'mp3' | null => {
    try {
      const parsed = new URL(normalizeUrl(value));
      const host = parsed.hostname.toLowerCase();
      if (host.includes('youtube') || host === 'youtu.be') return 'youtube';
      if (host.includes('instagram')) return 'instagram';
      if (parsed.pathname.toLowerCase().endsWith('.mp3')) return 'mp3';
      return null;
    } catch { return null; }
  }, [normalizeUrl]);

  const guildId = selected ? selected.split(':')[0] : '';
  const channelId = selected ? selected.split(':')[1] : '';

  const selectedChannel = useMemo(() =>
    channels.find(c => `${c.guildId}:${c.channelId}` === selected),
  [channels, selected]);

  /* ── Clock ── */
  useEffect(() => {
    const update = () => {
      const now = new Date();
      const h = String(now.getHours()).padStart(2, '0');
      const m = String(now.getMinutes()).padStart(2, '0');
      const s = String(now.getSeconds()).padStart(2, '0');
      setClock(`${h}:${m}:${s}`);
    };
    update();
    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, []);

  /* ── Init ── */
  useEffect(() => {
    (async () => {
      try {
        const [ch, selMap] = await Promise.all([fetchChannels(), getSelectedChannels()]);
        setChannels(ch);
        if (ch.length) {
          const g = ch[0].guildId;
          const serverCid = selMap[g];
          const match = serverCid && ch.find(x => x.guildId === g && x.channelId === serverCid);
          setSelected(match ? `${g}:${serverCid}` : `${ch[0].guildId}:${ch[0].channelId}`);
        }
      } catch (e: any) { notify(e?.message || 'Channel-Fehler', 'error'); }
      try { setIsAdmin(await adminStatus()); } catch { }
      try { const c = await fetchCategories(); setCategories(c.categories || []); } catch { }
    })();
  }, []);

  /* ── Theme ── */
  useEffect(() => {
    if (theme === 'default') document.body.removeAttribute('data-theme');
    else document.body.setAttribute('data-theme', theme);
    localStorage.setItem('jb-theme', theme);
  }, [theme]);

  /* ── Card size ── */
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--card-size', cardSize + 'px');
    const ratio = cardSize / 110;
    r.style.setProperty('--card-emoji', Math.round(28 * ratio) + 'px');
    r.style.setProperty('--card-font', Math.max(9, Math.round(11 * ratio)) + 'px');
    localStorage.setItem('jb-card-size', String(cardSize));
  }, [cardSize]);

  /* ── SSE ── */
  useEffect(() => {
    const unsub = subscribeEvents((msg) => {
      if (msg?.type === 'party') {
        setPartyActiveGuilds(prev => {
          const s = new Set(prev);
          if (msg.active) s.add(msg.guildId); else s.delete(msg.guildId);
          return Array.from(s);
        });
      } else if (msg?.type === 'snapshot') {
        setPartyActiveGuilds(Array.isArray(msg.party) ? msg.party : []);
        try {
          const sel = msg?.selected || {};
          const g = selectedRef.current?.split(':')[0];
          if (g && sel[g]) setSelected(`${g}:${sel[g]}`);
        } catch { }
        try {
          const vols = msg?.volumes || {};
          const g = selectedRef.current?.split(':')[0];
          if (g && typeof vols[g] === 'number') setVolume(vols[g]);
        } catch { }
        try {
          const np = msg?.nowplaying || {};
          const g = selectedRef.current?.split(':')[0];
          if (g && typeof np[g] === 'string') setLastPlayed(np[g]);
        } catch { }
        try {
          const vs = msg?.voicestats || {};
          const g = selectedRef.current?.split(':')[0];
          if (g && vs[g]) setVoiceStats(vs[g]);
        } catch { }
      } else if (msg?.type === 'channel') {
        const g = selectedRef.current?.split(':')[0];
        if (msg.guildId === g) setSelected(`${msg.guildId}:${msg.channelId}`);
      } else if (msg?.type === 'volume') {
        const g = selectedRef.current?.split(':')[0];
        if (msg.guildId === g && typeof msg.volume === 'number') setVolume(msg.volume);
      } else if (msg?.type === 'nowplaying') {
        const g = selectedRef.current?.split(':')[0];
        if (msg.guildId === g) setLastPlayed(msg.name || '');
      } else if (msg?.type === 'voicestats') {
        const g = selectedRef.current?.split(':')[0];
        if (msg.guildId === g) {
          setVoiceStats({
            voicePing: msg.voicePing,
            gatewayPing: msg.gatewayPing,
            status: msg.status,
            channelName: msg.channelName,
            connectedSince: msg.connectedSince,
          });
        }
      }
    });
    return () => { try { unsub(); } catch { } };
  }, []);

  useEffect(() => {
    setChaosMode(guildId ? partyActiveGuilds.includes(guildId) : false);
  }, [selected, partyActiveGuilds]);

  /* ── Data Fetch ── */
  useEffect(() => {
    (async () => {
      try {
        let folderParam = '__all__';
        if (activeTab === 'recent') folderParam = '__recent__';
        else if (activeFolder) folderParam = activeFolder;
        const s = await fetchSounds(query, folderParam, undefined, false);
        setSounds(s.items);
        setTotal(s.total);
        setFolders(s.folders);
      } catch (e: any) { notify(e?.message || 'Sounds-Fehler', 'error'); }
    })();
  }, [activeTab, activeFolder, query, refreshKey]);

  useEffect(() => {
    void loadAnalytics();
  }, [refreshKey]);

  /* ── Favs persistence ── */
  useEffect(() => {
    const c = getCookie('favs');
    if (c) try { setFavs(JSON.parse(c)); } catch { }
  }, []);

  useEffect(() => {
    try { setCookie('favs', JSON.stringify(favs)); } catch { }
  }, [favs]);

  /* ── Volume sync ── */
  useEffect(() => {
    if (selected) {
      (async () => {
        try { const v = await getVolume(guildId); setVolume(v); } catch { }
      })();
    }
  }, [selected]);

  /* ── Close dropdowns on outside click ── */
  useEffect(() => {
    const handler = () => { setChannelOpen(false); setCtxMenu(null); };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, []);

  useEffect(() => {
    if (showAdmin && isAdmin) {
      void loadAdminSounds();
    }
  }, [showAdmin, isAdmin]);

  /* ── Actions ── */
  async function loadAnalytics() {
    try {
      const data = await fetchAnalytics();
      setAnalytics(data);
    } catch { }
  }

  async function handlePlay(s: Sound) {
    if (!selected) return notify('Bitte einen Voice-Channel auswählen', 'error');
    try {
      await playSound(s.name, guildId, channelId, volume, s.relativePath);
      setLastPlayed(s.name);
      void loadAnalytics();
    } catch (e: any) { notify(e?.message || 'Play fehlgeschlagen', 'error'); }
  }

  // Open download modal instead of downloading directly
  function handleUrlImport() {
    const trimmed = normalizeUrl(importUrl);
    if (!trimmed) return notify('Bitte einen Link eingeben', 'error');
    if (!isSupportedUrl(trimmed)) return notify('Nur YouTube, Instagram oder direkte MP3-Links', 'error');
    const urlType = getUrlType(trimmed);
    // Pre-fill filename for MP3 links (basename without .mp3), empty for YT/IG
    let defaultName = '';
    if (urlType === 'mp3') {
      try { defaultName = new URL(trimmed).pathname.split('/').pop()?.replace(/\.mp3$/i, '') ?? ''; } catch {}
    }
    setDlModal({ url: trimmed, type: urlType, filename: defaultName, phase: 'input' });
  }

  // Actual download triggered from modal
  async function handleModalDownload() {
    if (!dlModal) return;
    setDlModal(prev => prev ? { ...prev, phase: 'downloading' } : null);
    try {
      let savedName: string | undefined;
      const fn = dlModal.filename.trim() || undefined;
      if (selected && guildId && channelId) {
        const result = await playUrl(dlModal.url, guildId, channelId, volume, fn);
        savedName = result.saved;
      } else {
        const result = await downloadUrl(dlModal.url, fn);
        savedName = result.saved;
      }
      setDlModal(prev => prev ? { ...prev, phase: 'done', savedName } : null);
      setImportUrl('');
      setRefreshKey(k => k + 1);
      void loadAnalytics();
      // Auto-close after 2.5s
      setTimeout(() => setDlModal(null), 2500);
    } catch (e: any) {
      setDlModal(prev => prev ? { ...prev, phase: 'error', error: e?.message || 'Fehler' } : null);
    }
  }

  async function handleFileDrop(files: File[]) {
    if (!isAdmin) {
      notify('Admin-Login erforderlich zum Hochladen', 'error');
      return;
    }
    if (uploadDismissRef.current) clearTimeout(uploadDismissRef.current);

    const items: UploadItem[] = files.map(f => ({
      id: Math.random().toString(36).slice(2),
      file: f,
      status: 'waiting',
      progress: 0,
    }));
    setUploads(items);
    setShowUploads(true);

    const updated = [...items];
    for (let i = 0; i < updated.length; i++) {
      updated[i] = { ...updated[i], status: 'uploading' };
      setUploads([...updated]);
      try {
        const savedName = await uploadFile(
          updated[i].file,
          pct => {
            updated[i] = { ...updated[i], progress: pct };
            setUploads([...updated]);
          },
        );
        updated[i] = { ...updated[i], status: 'done', progress: 100, savedName };
      } catch (e: any) {
        updated[i] = { ...updated[i], status: 'error', error: e?.message ?? 'Fehler' };
      }
      setUploads([...updated]);
    }

    // Sound-Liste aktualisieren
    setRefreshKey(k => k + 1);
    void loadAnalytics();

    // Auto-Dismiss nach 3s
    uploadDismissRef.current = setTimeout(() => {
      setShowUploads(false);
      setUploads([]);
    }, 3500);
  }

  async function handleStop() {
    if (!selected) return;
    setLastPlayed('');
    try { await fetch(`/api/stop?guildId=${encodeURIComponent(guildId)}`, { method: 'POST' }); } catch { }
  }

  async function handleRandom() {
    if (!displaySounds.length || !selected) return;
    const rnd = displaySounds[Math.floor(Math.random() * displaySounds.length)];
    handlePlay(rnd);
  }

  async function toggleParty() {
    if (chaosMode) {
      await handleStop();
      try { await partyStop(guildId); } catch { }
    } else {
      if (!selected) return notify('Bitte einen Channel auswählen', 'error');
      try { await partyStart(guildId, channelId); } catch { }
    }
  }

  async function handleChannelSelect(ch: VoiceChannelInfo) {
    const v = `${ch.guildId}:${ch.channelId}`;
    setSelected(v);
    setChannelOpen(false);
    try { await setSelectedChannel(ch.guildId, ch.channelId); } catch { }
  }

  function toggleFav(key: string) {
    setFavs(prev => ({ ...prev, [key]: !prev[key] }));
  }

  async function loadAdminSounds() {
    setAdminLoading(true);
    try {
      const data = await fetchSounds('', '__all__', undefined, false);
      setAdminSounds(data.items || []);
    } catch (e: any) {
      notify(e?.message || 'Admin-Sounds konnten nicht geladen werden', 'error');
    } finally {
      setAdminLoading(false);
    }
  }

  function toggleAdminSelection(path: string) {
    setAdminSelection(prev => ({ ...prev, [path]: !prev[path] }));
  }

  function startRename(sound: Sound) {
    setRenameTarget(soundKey(sound));
    setRenameValue(sound.name);
  }

  function cancelRename() {
    setRenameTarget('');
    setRenameValue('');
  }

  async function submitRename() {
    if (!renameTarget) return;
    const baseName = renameValue.trim().replace(/\.(mp3|wav)$/i, '');
    if (!baseName) {
      notify('Bitte einen gültigen Namen eingeben', 'error');
      return;
    }
    try {
      await adminRename(renameTarget, baseName);
      notify('Sound umbenannt');
      cancelRename();
      setRefreshKey(k => k + 1);
      if (showAdmin) await loadAdminSounds();
    } catch (e: any) {
      notify(e?.message || 'Umbenennen fehlgeschlagen', 'error');
    }
  }

  async function deleteAdminPaths(paths: string[]) {
    if (paths.length === 0) return;
    try {
      await adminDelete(paths);
      notify(paths.length === 1 ? 'Sound gelöscht' : `${paths.length} Sounds gelöscht`);
      setAdminSelection({});
      cancelRename();
      setRefreshKey(k => k + 1);
      if (showAdmin) await loadAdminSounds();
    } catch (e: any) {
      notify(e?.message || 'Löschen fehlgeschlagen', 'error');
    }
  }

  async function handleAdminLogin() {
    try {
      const ok = await adminLogin(adminPwd);
      if (ok) {
        setIsAdmin(true);
        setAdminPwd('');
        notify('Admin eingeloggt');
      }
      else notify('Falsches Passwort', 'error');
    } catch { notify('Login fehlgeschlagen', 'error'); }
  }

  async function handleAdminLogout() {
    try {
      await adminLogout();
      setIsAdmin(false);
      setAdminSelection({});
      cancelRename();
      notify('Ausgeloggt');
    } catch { }
  }

  /* ── Computed ── */
  const displaySounds = useMemo(() => {
    if (activeTab === 'favorites') return sounds.filter(s => favs[s.relativePath ?? s.fileName]);
    return sounds;
  }, [sounds, activeTab, favs]);

  const favCount = useMemo(() => Object.values(favs).filter(Boolean).length, [favs]);

  const visibleFolders = useMemo(() =>
    folders.filter(f => !['__all__', '__recent__', '__top3__'].includes(f.key)),
  [folders]);

  const folderColorMap = useMemo(() => {
    const m: Record<string, string> = {};
    visibleFolders.forEach((f, i) => { m[f.key] = CAT_PALETTE[i % CAT_PALETTE.length]; });
    return m;
  }, [visibleFolders]);

  const firstOfInitial = useMemo(() => {
    const seen = new Set<string>();
    const result = new Set<number>();
    displaySounds.forEach((s, idx) => {
      const ch = s.name.charAt(0).toUpperCase();
      if (!seen.has(ch)) { seen.add(ch); result.add(idx); }
    });
    return result;
  }, [displaySounds]);

  const channelsByGuild = useMemo(() => {
    const groups: Record<string, VoiceChannelInfo[]> = {};
    channels.forEach(c => {
      if (!groups[c.guildName]) groups[c.guildName] = [];
      groups[c.guildName].push(c);
    });
    return groups;
  }, [channels]);

  const adminFilteredSounds = useMemo(() => {
    const q = adminQuery.trim().toLowerCase();
    if (!q) return adminSounds;
    return adminSounds.filter(s => {
      const key = soundKey(s).toLowerCase();
      return s.name.toLowerCase().includes(q)
        || (s.folder || '').toLowerCase().includes(q)
        || key.includes(q);
    });
  }, [adminQuery, adminSounds, soundKey]);

  const selectedAdminPaths = useMemo(() =>
    Object.keys(adminSelection).filter(k => adminSelection[k]),
  [adminSelection]);

  const selectedVisibleCount = useMemo(() =>
    adminFilteredSounds.filter(s => !!adminSelection[soundKey(s)]).length,
  [adminFilteredSounds, adminSelection, soundKey]);

  const allVisibleSelected = adminFilteredSounds.length > 0 && selectedVisibleCount === adminFilteredSounds.length;
  const analyticsTop = analytics.mostPlayed.slice(0, 10);
  const totalSoundsDisplay = analytics.totalSounds || total;

  const clockMain = clock.slice(0, 5);
  const clockSec = clock.slice(5);

  /* ════════════════════════════════════════════
     RENDER
     ════════════════════════════════════════════ */
  return (
    <div className="app">
      {chaosMode && <div className="party-overlay active" />}

      {/* ═══ TOPBAR ═══ */}
      <header className="topbar">
        <div className="topbar-left">
          <div className="app-logo">
            <span className="material-icons" style={{ fontSize: 16, color: 'white' }}>music_note</span>
          </div>
          <span className="app-title">Jukebox420</span>

          {/* Channel Dropdown */}
          <div className="channel-dropdown" onClick={e => e.stopPropagation()}>
            <button
              className={`channel-btn ${channelOpen ? 'open' : ''}`}
              onClick={() => setChannelOpen(!channelOpen)}
            >
              <span className="material-icons cb-icon">headset</span>
              {selected && <span className="channel-status" />}
              <span className="channel-label">{selectedChannel ? `${selectedChannel.channelName}${selectedChannel.members ? ` (${selectedChannel.members})` : ''}` : 'Channel...'}</span>
              <span className={`material-icons chevron`}>expand_more</span>
            </button>
            {channelOpen && (
              <div className="channel-menu visible">
                {Object.entries(channelsByGuild).map(([guild, chs]) => (
                  <React.Fragment key={guild}>
                    <div className="channel-menu-header">{guild}</div>
                    {chs.map(ch => (
                      <div
                        key={`${ch.guildId}:${ch.channelId}`}
                        className={`channel-option ${`${ch.guildId}:${ch.channelId}` === selected ? 'active' : ''}`}
                        onClick={() => handleChannelSelect(ch)}
                      >
                        <span className="material-icons co-icon">volume_up</span>
                        {ch.channelName}{ch.members ? ` (${ch.members})` : ''}
                      </div>
                    ))}
                  </React.Fragment>
                ))}
                {channels.length === 0 && (
                  <div className="channel-option" style={{ color: 'var(--text-faint)', cursor: 'default' }}>
                    Keine Channels verfügbar
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="clock-wrap">
          <div className="clock">{clockMain}<span className="clock-seconds">{clockSec}</span></div>
        </div>

        <div className="topbar-right">
          {lastPlayed && (
            <div className="now-playing">
              <div className="np-waves active">
                <div className="np-wave-bar" /><div className="np-wave-bar" />
                <div className="np-wave-bar" /><div className="np-wave-bar" />
              </div>
              <span className="np-label">Last Played:</span> <span className="np-name">{lastPlayed}</span>
            </div>
          )}
          {selected && (
            <div className="connection" onClick={() => setShowConnModal(true)} style={{cursor:'pointer'}} title="Verbindungsdetails">
              <span className="conn-dot" />
              Verbunden
              {voiceStats?.voicePing != null && (
                <span className="conn-ping">{voiceStats.voicePing}ms</span>
              )}
            </div>
          )}
          <button
            className={`admin-btn-icon ${isAdmin ? 'active' : ''}`}
            onClick={() => setShowAdmin(true)}
            title="Admin"
          >
            <span className="material-icons">settings</span>
          </button>
        </div>
      </header>

      {/* ═══ TOOLBAR ═══ */}
      <div className="toolbar">
        <div className="cat-tabs">
          <button
            className={`cat-tab ${activeTab === 'all' ? 'active' : ''}`}
            onClick={() => { setActiveTab('all'); setActiveFolder(''); }}
          >
            Alle
            <span className="tab-count">{total}</span>
          </button>
          <button
            className={`cat-tab ${activeTab === 'recent' ? 'active' : ''}`}
            onClick={() => { setActiveTab('recent'); setActiveFolder(''); }}
          >
            Neu hinzugefügt
          </button>
          <button
            className={`cat-tab ${activeTab === 'favorites' ? 'active' : ''}`}
            onClick={() => { setActiveTab('favorites'); setActiveFolder(''); }}
          >
            Favoriten
            {favCount > 0 && <span className="tab-count">{favCount}</span>}
          </button>
        </div>

        <div className="search-wrap">
          <span className="material-icons search-icon">search</span>
          <input
            className="search-input"
            type="text"
            placeholder="Suchen..."
            value={query}
            onChange={e => setQuery(e.target.value)}
          />
          {query && (
            <button className="search-clear" onClick={() => setQuery('')}>
              <span className="material-icons" style={{ fontSize: 14 }}>close</span>
            </button>
          )}
        </div>

        <div className="url-import-wrap">
          <span className="material-icons url-import-icon">
            {getUrlType(importUrl) === 'youtube' ? 'smart_display'
              : getUrlType(importUrl) === 'instagram' ? 'photo_camera'
              : 'link'}
          </span>
          <input
            className="url-import-input"
            type="text"
            placeholder="YouTube / Instagram / MP3-Link..."
            value={importUrl}
            onChange={e => setImportUrl(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') void handleUrlImport(); }}
          />
          {importUrl && (
            <span className={`url-import-tag ${isSupportedUrl(importUrl) ? 'valid' : 'invalid'}`}>
              {getUrlType(importUrl) === 'youtube' ? 'YT'
                : getUrlType(importUrl) === 'instagram' ? 'IG'
                : getUrlType(importUrl) === 'mp3' ? 'MP3'
                : '?'}
            </span>
          )}
          <button
            className="url-import-btn"
            onClick={() => { void handleUrlImport(); }}
            disabled={importBusy || (!!importUrl && !isSupportedUrl(importUrl))}
            title="Sound herunterladen"
          >
            {importBusy ? 'Lädt...' : 'Download'}
          </button>
        </div>

        <div className="toolbar-spacer" />

        <div className="volume-control">
          <span
            className="material-icons vol-icon"
            onClick={() => {
              const newVol = volume > 0 ? 0 : 0.5;
              setVolume(newVol);
              if (guildId) setVolumeLive(guildId, newVol).catch(() => {});
            }}
          >
            {volume === 0 ? 'volume_off' : volume < 0.5 ? 'volume_down' : 'volume_up'}
          </span>
          <input
            type="range"
            className="vol-slider"
            min={0}
            max={1}
            step={0.01}
            value={volume}
            onChange={e => {
              const v = parseFloat(e.target.value);
              setVolume(v);
              if (guildId) {
                if (volDebounceRef.current) clearTimeout(volDebounceRef.current);
                volDebounceRef.current = setTimeout(() => {
                  setVolumeLive(guildId, v).catch(() => {});
                }, 120);
              }
            }}
            style={{ '--vol': `${Math.round(volume * 100)}%` } as React.CSSProperties}
          />
          <span className="vol-pct">{Math.round(volume * 100)}%</span>
        </div>

        <button className="tb-btn random" onClick={handleRandom} title="Zufälliger Sound">
          <span className="material-icons tb-icon">shuffle</span>
          Random
        </button>

        <button
          className={`tb-btn party ${chaosMode ? 'active' : ''}`}
          onClick={toggleParty}
          title="Party Mode"
        >
          <span className="material-icons tb-icon">{chaosMode ? 'celebration' : 'auto_awesome'}</span>
          {chaosMode ? 'Party!' : 'Party'}
        </button>

        <button className="tb-btn stop" onClick={handleStop} title="Alle stoppen">
          <span className="material-icons tb-icon">stop</span>
          Stop
        </button>

        <div className="size-control" title="Button-Größe">
          <span className="material-icons sc-icon">grid_view</span>
          <input
            type="range"
            className="size-slider"
            min={80}
            max={160}
            value={cardSize}
            onChange={e => setCardSize(parseInt(e.target.value))}
          />
        </div>

        <div className="theme-selector">
          {THEMES.map(t => (
            <div
              key={t.id}
              className={`theme-dot ${theme === t.id ? 'active' : ''}`}
              style={{ background: t.color }}
              title={t.label}
              onClick={() => setTheme(t.id)}
            />
          ))}
        </div>
      </div>

      <div className="analytics-strip">
        <div className="analytics-card">
          <span className="material-icons analytics-icon">library_music</span>
          <div className="analytics-copy">
            <span className="analytics-label">Sounds gesamt</span>
            <strong className="analytics-value">{totalSoundsDisplay}</strong>
          </div>
        </div>

        <div className="analytics-card analytics-wide">
          <span className="material-icons analytics-icon">leaderboard</span>
          <div className="analytics-copy">
            <span className="analytics-label">Most Played</span>
            <div className="analytics-top-list">
              {analyticsTop.length === 0 ? (
                <span className="analytics-muted">Noch keine Plays</span>
              ) : (
                analyticsTop.map((item, idx) => (
                  <span className="analytics-chip" key={item.relativePath}>
                    {idx + 1}. {item.name} ({item.count})
                  </span>
                ))
              )}
            </div>
          </div>
        </div>
      </div>

      {/* ═══ FOLDER CHIPS ═══ */}
      {activeTab === 'all' && visibleFolders.length > 0 && (
        <div className="category-strip">
          {visibleFolders.map(f => {
            const color = folderColorMap[f.key] || '#888';
            const isActive = activeFolder === f.key;
            return (
              <button
                key={f.key}
                className={`cat-chip ${isActive ? 'active' : ''}`}
                onClick={() => setActiveFolder(isActive ? '' : f.key)}
                style={isActive ? { borderColor: color, color } : undefined}
              >
                <span className="cat-dot" style={{ background: color }} />
                {f.name.replace(/\s*\(\d+\)\s*$/, '')}
                <span className="cat-count">{f.count}</span>
              </button>
            );
          })}
        </div>
      )}

      {/* ═══ MAIN ═══ */}
      <main className="main">
        {displaySounds.length === 0 ? (
          <div className="empty-state visible">
            <div className="empty-emoji">{activeTab === 'favorites' ? '⭐' : '🔇'}</div>
            <div className="empty-title">
              {activeTab === 'favorites'
                ? 'Noch keine Favoriten'
                : query
                  ? `Kein Sound für "${query}" gefunden`
                  : 'Keine Sounds vorhanden'}
            </div>
            <div className="empty-desc">
              {activeTab === 'favorites'
                ? 'Klick den Stern auf einem Sound!'
                : 'Hier gibt\'s noch nichts zu hören.'}
            </div>
          </div>
        ) : (
          <div className="sound-grid">
            {displaySounds.map((s, idx) => {
              const key = s.relativePath ?? s.fileName;
              const isFav = !!favs[key];
              const isPlaying = lastPlayed === s.name;
              const isNew = s.isRecent || s.badges?.includes('new');
              const initial = s.name.charAt(0).toUpperCase();
              const showInitial = firstOfInitial.has(idx);
              const folderColor = s.folder ? (folderColorMap[s.folder] || 'var(--accent)') : 'var(--accent)';

              return (
                <div
                  key={key}
                  className={`sound-card ${isPlaying ? 'playing' : ''} ${showInitial ? 'has-initial' : ''}`}
                  style={{ animationDelay: `${Math.min(idx * 20, 400)}ms` }}
                  onClick={e => {
                    const card = e.currentTarget;
                    const rect = card.getBoundingClientRect();
                    const ripple = document.createElement('div');
                    ripple.className = 'ripple';
                    const sz = Math.max(rect.width, rect.height);
                    ripple.style.width = ripple.style.height = sz + 'px';
                    ripple.style.left = (e.clientX - rect.left - sz / 2) + 'px';
                    ripple.style.top = (e.clientY - rect.top - sz / 2) + 'px';
                    card.appendChild(ripple);
                    setTimeout(() => ripple.remove(), 500);
                    handlePlay(s);
                  }}
                  onContextMenu={e => {
                    e.preventDefault();
                    e.stopPropagation();
                    setCtxMenu({
                      x: Math.min(e.clientX, window.innerWidth - 170),
                      y: Math.min(e.clientY, window.innerHeight - 140),
                      sound: s,
                    });
                  }}
                  title={`${s.name}${s.folder ? ` (${s.folder})` : ''}`}
                >
                  {isNew && <span className="new-badge">NEU</span>}
                  <span
                    className={`fav-star ${isFav ? 'active' : ''}`}
                    onClick={e => { e.stopPropagation(); toggleFav(key); }}
                  >
                    <span className="material-icons fav-icon">{isFav ? 'star' : 'star_border'}</span>
                  </span>
                  {showInitial && <span className="sound-emoji" style={{ color: folderColor }}>{initial}</span>}
                  <span className="sound-name">{s.name}</span>
                  {s.folder && <span className="sound-duration">{s.folder}</span>}
                  <div className="playing-indicator">
                    <div className="wave-bar" /><div className="wave-bar" />
                    <div className="wave-bar" /><div className="wave-bar" />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </main>

      {/* ═══ CONTEXT MENU ═══ */}
      {ctxMenu && (
        <div
          className="ctx-menu visible"
          style={{ left: ctxMenu.x, top: ctxMenu.y }}
          onClick={e => e.stopPropagation()}
        >
          <div className="ctx-item" onClick={() => { handlePlay(ctxMenu.sound); setCtxMenu(null); }}>
            <span className="material-icons ctx-icon">play_arrow</span>
            Abspielen
          </div>
          <div className="ctx-item" onClick={() => {
            toggleFav(ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName);
            setCtxMenu(null);
          }}>
            <span className="material-icons ctx-icon">
              {favs[ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName] ? 'star' : 'star_border'}
            </span>
            Favorit
          </div>
          {isAdmin && (
            <>
              <div className="ctx-sep" />
              <div className="ctx-item danger" onClick={async () => {
                const path = ctxMenu.sound.relativePath ?? ctxMenu.sound.fileName;
                await deleteAdminPaths([path]);
                setCtxMenu(null);
              }}>
                <span className="material-icons ctx-icon">delete</span>
                Löschen
              </div>
            </>
          )}
        </div>
      )}

      {/* ═══ CONNECTION MODAL ═══ */}
      {showConnModal && voiceStats && (() => {
        const uptimeSec = voiceStats.connectedSince
          ? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
          : 0;
        const h = Math.floor(uptimeSec / 3600);
        const m = Math.floor((uptimeSec % 3600) / 60);
        const s = uptimeSec % 60;
        const uptimeStr = h > 0
          ? `${h}h ${String(m).padStart(2,'0')}m ${String(s).padStart(2,'0')}s`
          : m > 0
            ? `${m}m ${String(s).padStart(2,'0')}s`
            : `${s}s`;
        const pingColor = (ms: number | null) =>
          ms == null ? 'var(--muted)' : ms < 80 ? 'var(--green)' : ms < 150 ? '#f0a830' : '#e04040';
        return (
          <div className="conn-modal-overlay" onClick={() => setShowConnModal(false)}>
            <div className="conn-modal" onClick={e => e.stopPropagation()}>
              <div className="conn-modal-header">
                <span className="material-icons" style={{fontSize:20,color:'var(--green)'}}>cell_tower</span>
                <span>Verbindungsdetails</span>
                <button className="conn-modal-close" onClick={() => setShowConnModal(false)}>
                  <span className="material-icons">close</span>
                </button>
              </div>
              <div className="conn-modal-body">
                <div className="conn-stat">
                  <span className="conn-stat-label">Voice Ping</span>
                  <span className="conn-stat-value">
                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.voicePing)}} />
                    {voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
                  </span>
                </div>
                <div className="conn-stat">
                  <span className="conn-stat-label">Gateway Ping</span>
                  <span className="conn-stat-value">
                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.gatewayPing)}} />
                    {voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
                  </span>
                </div>
                <div className="conn-stat">
                  <span className="conn-stat-label">Status</span>
                  <span className="conn-stat-value" style={{color: voiceStats.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
                    {voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
                  </span>
                </div>
                <div className="conn-stat">
                  <span className="conn-stat-label">Kanal</span>
                  <span className="conn-stat-value">{voiceStats.channelName || '---'}</span>
                </div>
                <div className="conn-stat">
                  <span className="conn-stat-label">Verbunden seit</span>
                  <span className="conn-stat-value">{uptimeStr}</span>
                </div>
              </div>
            </div>
          </div>
        );
      })()}

      {/* ═══ TOAST ═══ */}
      {notification && (
        <div className={`toast ${notification.type}`}>
          <span className="material-icons toast-icon">
            {notification.type === 'error' ? 'error_outline' : 'check_circle'}
          </span>
          {notification.msg}
        </div>
      )}

      {/* ═══ ADMIN PANEL ═══ */}
      {showAdmin && (
        <div className="admin-overlay" onClick={e => { if (e.target === e.currentTarget) setShowAdmin(false); }}>
          <div className="admin-panel">
            <h3>
              Admin
              <button className="admin-close" onClick={() => setShowAdmin(false)}>
                <span className="material-icons" style={{ fontSize: 18 }}>close</span>
              </button>
            </h3>
            {!isAdmin ? (
              <div>
                <div className="admin-field">
                  <label>Passwort</label>
                  <input
                    type="password"
                    value={adminPwd}
                    onChange={e => setAdminPwd(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && handleAdminLogin()}
                    placeholder="Admin-Passwort..."
                  />
                </div>
                <button className="admin-btn-action primary" onClick={handleAdminLogin}>Login</button>
              </div>
            ) : (
              <div className="admin-shell">
                <div className="admin-header-row">
                  <p className="admin-status">Eingeloggt als Admin</p>
                  <div className="admin-actions-inline">
                    <button
                      className="admin-btn-action outline"
                      onClick={() => { void loadAdminSounds(); }}
                      disabled={adminLoading}
                    >
                      Aktualisieren
                    </button>
                    <button className="admin-btn-action outline" onClick={handleAdminLogout}>Logout</button>
                  </div>
                </div>

                <div className="admin-field admin-search-field">
                  <label>Sounds verwalten</label>
                  <input
                    type="text"
                    value={adminQuery}
                    onChange={e => setAdminQuery(e.target.value)}
                    placeholder="Nach Name, Ordner oder Pfad filtern..."
                  />
                </div>

                <div className="admin-bulk-row">
                  <label className="admin-select-all">
                    <input
                      type="checkbox"
                      checked={allVisibleSelected}
                      onChange={e => {
                        const checked = e.target.checked;
                        const next = { ...adminSelection };
                        adminFilteredSounds.forEach(s => { next[soundKey(s)] = checked; });
                        setAdminSelection(next);
                      }}
                    />
                    <span>Alle sichtbaren auswählen ({selectedVisibleCount}/{adminFilteredSounds.length})</span>
                  </label>

                  <button
                    className="admin-btn-action danger"
                    disabled={selectedAdminPaths.length === 0}
                    onClick={async () => {
                      if (!window.confirm(`Wirklich ${selectedAdminPaths.length} Sound(s) löschen?`)) return;
                      await deleteAdminPaths(selectedAdminPaths);
                    }}
                  >
                    Ausgewählte löschen
                  </button>
                </div>

                <div className="admin-list-wrap">
                  {adminLoading ? (
                    <div className="admin-empty">Lade Sounds...</div>
                  ) : adminFilteredSounds.length === 0 ? (
                    <div className="admin-empty">Keine Sounds gefunden.</div>
                  ) : (
                    <div className="admin-list">
                      {adminFilteredSounds.map(sound => {
                        const key = soundKey(sound);
                        const editing = renameTarget === key;
                        return (
                          <div className="admin-item" key={key}>
                            <label className="admin-item-check">
                              <input
                                type="checkbox"
                                checked={!!adminSelection[key]}
                                onChange={() => toggleAdminSelection(key)}
                              />
                            </label>

                            <div className="admin-item-main">
                              <div className="admin-item-name">{sound.name}</div>
                              <div className="admin-item-meta">
                                {sound.folder ? `Ordner: ${sound.folder}` : 'Root'}
                                {' · '}
                                {key}
                              </div>
                              {editing && (
                                <div className="admin-rename-row">
                                  <input
                                    value={renameValue}
                                    onChange={e => setRenameValue(e.target.value)}
                                    onKeyDown={e => {
                                      if (e.key === 'Enter') void submitRename();
                                      if (e.key === 'Escape') cancelRename();
                                    }}
                                    placeholder="Neuer Name..."
                                  />
                                  <button className="admin-btn-action primary" onClick={() => { void submitRename(); }}>
                                    Speichern
                                  </button>
                                  <button className="admin-btn-action outline" onClick={cancelRename}>
                                    Abbrechen
                                  </button>
                                </div>
                              )}
                            </div>

                            {!editing && (
                              <div className="admin-item-actions">
                                <button className="admin-btn-action outline" onClick={() => startRename(sound)}>
                                  Umbenennen
                                </button>
                                <button
                                  className="admin-btn-action danger ghost"
                                  onClick={async () => {
                                    if (!window.confirm(`Sound "${sound.name}" löschen?`)) return;
                                    await deleteAdminPaths([key]);
                                  }}
                                >
                                  Löschen
                                </button>
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {/* ── Drag & Drop Overlay ── */}
      {isDragging && (
        <div className="drop-overlay">
          <div className="drop-zone">
            <span className="material-icons drop-icon">cloud_upload</span>
            <div className="drop-title">MP3 & WAV hier ablegen</div>
            <div className="drop-sub">Mehrere Dateien gleichzeitig möglich</div>
          </div>
        </div>
      )}

      {/* ── Upload-Queue ── */}
      {showUploads && uploads.length > 0 && (
        <div className="upload-queue">
          <div className="uq-header">
            <span className="material-icons" style={{ fontSize: 16 }}>upload</span>
            <span>
              {uploads.every(u => u.status === 'done' || u.status === 'error')
                ? `${uploads.filter(u => u.status === 'done').length} von ${uploads.length} hochgeladen`
                : `Lade hoch… (${uploads.filter(u => u.status === 'done').length}/${uploads.length})`}
            </span>
            <button className="uq-close" onClick={() => { setShowUploads(false); setUploads([]); }}>
              <span className="material-icons" style={{ fontSize: 14 }}>close</span>
            </button>
          </div>
          <div className="uq-list">
            {uploads.map(u => (
              <div key={u.id} className={`uq-item uq-${u.status}`}>
                <span className="material-icons uq-file-icon">audio_file</span>
                <div className="uq-info">
                  <div className="uq-name" title={u.savedName ?? u.file.name}>
                    {u.savedName ?? u.file.name}
                  </div>
                  <div className="uq-size">{(u.file.size / 1024).toFixed(0)} KB</div>
                </div>
                {(u.status === 'waiting' || u.status === 'uploading') && (
                  <div className="uq-progress-wrap">
                    <div className="uq-progress-bar" style={{ width: `${u.progress}%` }} />
                  </div>
                )}
                <span className={`material-icons uq-status-icon uq-status-${u.status}`}>
                  {u.status === 'done' ? 'check_circle' :
                   u.status === 'error' ? 'error' :
                   u.status === 'uploading' ? 'sync' : 'schedule'}
                </span>
                {u.status === 'error' && <div className="uq-error">{u.error}</div>}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── Download Modal ── */}
      {dlModal && (
        <div className="dl-modal-overlay" onClick={() => dlModal.phase !== 'downloading' && setDlModal(null)}>
          <div className="dl-modal" onClick={e => e.stopPropagation()}>
            <div className="dl-modal-header">
              <span className="material-icons" style={{ fontSize: 20 }}>
                {dlModal.type === 'youtube' ? 'smart_display' : dlModal.type === 'instagram' ? 'photo_camera' : 'audio_file'}
              </span>
              <span>
                {dlModal.phase === 'input' ? 'Sound herunterladen'
                  : dlModal.phase === 'downloading' ? 'Wird heruntergeladen...'
                  : dlModal.phase === 'done' ? 'Fertig!'
                  : 'Fehler'}
              </span>
              {dlModal.phase !== 'downloading' && (
                <button className="dl-modal-close" onClick={() => setDlModal(null)}>
                  <span className="material-icons" style={{ fontSize: 16 }}>close</span>
                </button>
              )}
            </div>

            <div className="dl-modal-body">
              {/* URL badge */}
              <div className="dl-modal-url">
                <span className={`dl-modal-tag ${dlModal.type ?? ''}`}>
                  {dlModal.type === 'youtube' ? 'YouTube' : dlModal.type === 'instagram' ? 'Instagram' : 'MP3'}
                </span>
                <span className="dl-modal-url-text" title={dlModal.url}>
                  {dlModal.url.length > 60 ? dlModal.url.slice(0, 57) + '...' : dlModal.url}
                </span>
              </div>

              {/* Filename input (input phase only) */}
              {dlModal.phase === 'input' && (
                <div className="dl-modal-field">
                  <label className="dl-modal-label">Dateiname</label>
                  <div className="dl-modal-input-wrap">
                    <input
                      className="dl-modal-input"
                      type="text"
                      placeholder={dlModal.type === 'mp3' ? 'Dateiname...' : 'Wird automatisch erkannt...'}
                      value={dlModal.filename}
                      onChange={e => setDlModal(prev => prev ? { ...prev, filename: e.target.value } : null)}
                      onKeyDown={e => { if (e.key === 'Enter') void handleModalDownload(); }}
                      autoFocus
                    />
                    <span className="dl-modal-ext">.mp3</span>
                  </div>
                  <span className="dl-modal-hint">Leer lassen = automatischer Name</span>
                </div>
              )}

              {/* Progress (downloading phase) */}
              {dlModal.phase === 'downloading' && (
                <div className="dl-modal-progress">
                  <div className="dl-modal-spinner" />
                  <span>
                    {dlModal.type === 'youtube' || dlModal.type === 'instagram'
                      ? 'Audio wird extrahiert...'
                      : 'MP3 wird heruntergeladen...'}
                  </span>
                </div>
              )}

              {/* Success */}
              {dlModal.phase === 'done' && (
                <div className="dl-modal-success">
                  <span className="material-icons dl-modal-check">check_circle</span>
                  <span>Gespeichert als <b>{dlModal.savedName}</b></span>
                </div>
              )}

              {/* Error */}
              {dlModal.phase === 'error' && (
                <div className="dl-modal-error">
                  <span className="material-icons" style={{ color: '#e74c3c' }}>error</span>
                  <span>{dlModal.error}</span>
                </div>
              )}
            </div>

            {/* Actions */}
            {dlModal.phase === 'input' && (
              <div className="dl-modal-actions">
                <button className="dl-modal-cancel" onClick={() => setDlModal(null)}>Abbrechen</button>
                <button className="dl-modal-submit" onClick={() => void handleModalDownload()}>
                  <span className="material-icons" style={{ fontSize: 16 }}>download</span>
                  Herunterladen
                </button>
              </div>
            )}
            {dlModal.phase === 'error' && (
              <div className="dl-modal-actions">
                <button className="dl-modal-cancel" onClick={() => setDlModal(null)}>Schliessen</button>
                <button className="dl-modal-submit" onClick={() => setDlModal(prev => prev ? { ...prev, phase: 'input', error: undefined } : null)}>
                  <span className="material-icons" style={{ fontSize: 16 }}>refresh</span>
                  Nochmal
                </button>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}