'use client';

// Diese Seite ist komplett client-seitig und nutzt Local Storage sowie
// Header-basierte Authentifizierung. Wir erzwingen daher eine dynamische
// Auslieferung, damit Next.js beim Build keine statische Vorab-Renderung
// von /curator versucht (die zu Fehlern führen kann).
export const dynamic = 'force-dynamic';

import { useEffect, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';

interface Genre {
    id: number;
    name: any;
}

interface Special {
    id: number;
    name: any;
}

interface Song {
    id: number;
    title: string;
    artist: string;
    filename: string;
    createdAt: string;
    releaseYear: number | null;
    activations?: number;
    puzzles?: any[];
    genres: Genre[];
    specials: Special[];
    excludeFromGlobal: boolean;
    averageRating?: number;
    ratingCount?: number;
}

interface CuratorInfo {
    id: number;
    username: string;
    isGlobalCurator: boolean;
    genreIds: number[];
    specialIds: number[];
}

function getCuratorAuthHeaders() {
    const authToken = localStorage.getItem('hoerdle_curator_auth');
    const username = localStorage.getItem('hoerdle_curator_username') || '';
    return {
        'Content-Type': 'application/json',
        'x-curator-auth': authToken || '',
        'x-curator-username': username,
    };
}

function getCuratorUploadHeaders() {
    const authToken = localStorage.getItem('hoerdle_curator_auth');
    const username = localStorage.getItem('hoerdle_curator_username') || '';
    return {
        'x-curator-auth': authToken || '',
        'x-curator-username': username,
    };
}

export default function CuratorPage() {
    const t = useTranslations('Curator');
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [curatorInfo, setCuratorInfo] = useState<CuratorInfo | null>(null);
    const [songs, setSongs] = useState<Song[]>([]);
    const [genres, setGenres] = useState<Genre[]>([]);
    const [specials, setSpecials] = useState<Special[]>([]);
    const [loading, setLoading] = useState(false);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [editTitle, setEditTitle] = useState('');
    const [editArtist, setEditArtist] = useState('');
    const [editReleaseYear, setEditReleaseYear] = useState<number | ''>('');
    const [editExcludeFromGlobal, setEditExcludeFromGlobal] = useState(false);
    const [editGenreIds, setEditGenreIds] = useState<number[]>([]);
    const [editSpecialIds, setEditSpecialIds] = useState<number[]>([]);
    const [message, setMessage] = useState('');

    // Upload state (analog zum Admin-Upload, aber vereinfacht)
    const [files, setFiles] = useState<File[]>([]);
    const [uploadGenreIds, setUploadGenreIds] = useState<number[]>([]);
    const [isUploading, setIsUploading] = useState(false);
    const [isDragging, setIsDragging] = useState(false);
    const [uploadProgress, setUploadProgress] = useState<{ current: number; total: number }>({
        current: 0,
        total: 0,
    });
    const [uploadResults, setUploadResults] = useState<any[]>([]);
    const fileInputRef = useRef<HTMLInputElement | null>(null);

    // Search / Sort / Pagination / Audio (ähnlich Admin-Song-Library)
    type SortField = 'id' | 'title' | 'artist' | 'createdAt' | 'releaseYear' | 'activations' | 'averageRating';
    type SortDirection = 'asc' | 'desc';
    const [sortField, setSortField] = useState<SortField>('artist');
    const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedFilter, setSelectedFilter] = useState<string>('');
    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(10);
    const [playingSongId, setPlayingSongId] = useState<number | null>(null);
    const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);

    useEffect(() => {
        const authToken = localStorage.getItem('hoerdle_curator_auth');
        const storedUsername = localStorage.getItem('hoerdle_curator_username');
        if (authToken === 'authenticated' && storedUsername) {
            setIsAuthenticated(true);
            setUsername(storedUsername);
            bootstrapCuratorData();
        }
    }, []);

    const bootstrapCuratorData = async () => {
        try {
            setLoading(true);
            await Promise.all([fetchCuratorInfo(), fetchSongs(), fetchGenres(), fetchSpecials()]);
        } finally {
            setLoading(false);
        }
    };

    const fetchCuratorInfo = async () => {
        const res = await fetch('/api/curator/me', {
            headers: getCuratorAuthHeaders(),
        });
        if (res.ok) {
            const data: CuratorInfo = await res.json();
            setCuratorInfo(data);
            localStorage.setItem('hoerdle_curator_is_global', String(data.isGlobalCurator));
        } else {
            setMessage(t('loadCuratorError'));
        }
    };

    const fetchSongs = async () => {
        const res = await fetch('/api/songs', {
            headers: getCuratorAuthHeaders(),
        });
        if (res.ok) {
            const data: Song[] = await res.json();
            setSongs(data);
        } else {
            setMessage(t('loadSongsError'));
        }
    };

    const fetchGenres = async () => {
        const res = await fetch('/api/genres');
        if (res.ok) {
            const data = await res.json();
            setGenres(data);
        }
    };

    const fetchSpecials = async () => {
        const res = await fetch('/api/specials');
        if (res.ok) {
            const data = await res.json();
            setSpecials(data);
        }
    };

    const handleLogin = async () => {
        setMessage('');
        try {
            const res = await fetch('/api/curator/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password }),
            });

            if (res.ok) {
                const data = await res.json();
                localStorage.setItem('hoerdle_curator_auth', 'authenticated');
                localStorage.setItem('hoerdle_curator_username', data.curator.username);
                localStorage.setItem('hoerdle_curator_is_global', String(data.curator.isGlobalCurator));
                setIsAuthenticated(true);
                setPassword('');
                await bootstrapCuratorData();
            } else {
                const err = await res.json().catch(() => null);
                setMessage(err?.error || t('loginFailed'));
            }
        } catch (e) {
            setMessage(t('loginNetworkError'));
        }
    };

    const handleLogout = () => {
        localStorage.removeItem('hoerdle_curator_auth');
        localStorage.removeItem('hoerdle_curator_username');
        localStorage.removeItem('hoerdle_curator_is_global');
        setIsAuthenticated(false);
        setCuratorInfo(null);
        setSongs([]);
        setMessage('');
    };

    const startEditing = (song: Song) => {
        setEditingId(song.id);
        setEditTitle(song.title);
        setEditArtist(song.artist);
        setEditReleaseYear(song.releaseYear || '');
        setEditExcludeFromGlobal(song.excludeFromGlobal || false);
        setEditGenreIds(song.genres.map(g => g.id));
        setEditSpecialIds(song.specials.map(s => s.id));
    };

    const cancelEditing = () => {
        setEditingId(null);
        setEditTitle('');
        setEditArtist('');
        setEditReleaseYear('');
        setEditExcludeFromGlobal(false);
        setEditGenreIds([]);
        setEditSpecialIds([]);
    };

    const saveEditing = async (id: number) => {
        if (!curatorInfo) return;
        setMessage('');
        const isGlobalCurator = curatorInfo.isGlobalCurator;

        // Nur Genres/Specials, für die der Kurator zuständig ist, dürfen aktiv geändert werden.
        const manageableGenreIds = editGenreIds.filter(gid => curatorInfo.genreIds.includes(gid));
        const manageableSpecialIds = editSpecialIds.filter(sid => curatorInfo.specialIds.includes(sid));

        try {
            const res = await fetch('/api/songs', {
                method: 'PUT',
                headers: getCuratorAuthHeaders(),
                body: JSON.stringify({
                    id,
                    title: editTitle,
                    artist: editArtist,
                    releaseYear: editReleaseYear === '' ? null : Number(editReleaseYear),
                    genreIds: manageableGenreIds,
                    specialIds: manageableSpecialIds,
                    excludeFromGlobal: isGlobalCurator ? editExcludeFromGlobal : undefined,
                }),
            });

            if (res.ok) {
                setEditingId(null);
                await fetchSongs();
                setMessage(t('songUpdated'));
            } else {
                const errText = await res.text();
                setMessage(t('saveError', { error: errText }));
            }
        } catch (e) {
            setMessage(t('saveNetworkError'));
        }
    };

    const canEditSong = (song: Song): boolean => {
        if (!curatorInfo) return false;
        const songGenreIds = song.genres.map(g => g.id);
        const songSpecialIds = song.specials.map(s => s.id);
        if (songGenreIds.length === 0 && songSpecialIds.length === 0) {
            // Songs ohne Genres/Specials dürfen von Kuratoren generell bearbeitet werden
            return true;
        }
        const hasGenre = songGenreIds.some(id => curatorInfo.genreIds.includes(id));
        const hasSpecial = songSpecialIds.some(id => curatorInfo.specialIds.includes(id));
        return hasGenre || hasSpecial;
    };

    const canDeleteSong = (song: Song): boolean => {
        if (!curatorInfo) return false;
        const songGenreIds = song.genres.map(g => g.id);
        const songSpecialIds = song.specials.map(s => s.id);
        const allGenresAllowed = songGenreIds.every(id => curatorInfo.genreIds.includes(id));
        const allSpecialsAllowed = songSpecialIds.every(id => curatorInfo.specialIds.includes(id));
        return allGenresAllowed && allSpecialsAllowed;
    };

    const handleDelete = async (song: Song) => {
        if (!canDeleteSong(song)) {
            setMessage(t('noDeletePermission'));
            return;
        }
        if (!confirm(t('deleteConfirm', { title: song.title }))) return;

        try {
            const res = await fetch('/api/songs', {
                method: 'DELETE',
                headers: getCuratorAuthHeaders(),
                body: JSON.stringify({ id: song.id }),
            });
            if (res.ok) {
                await fetchSongs();
                setMessage(t('songDeleted'));
            } else {
                const errText = await res.text();
                setMessage(t('deleteError', { error: errText }));
            }
        } catch (e) {
            setMessage(t('deleteNetworkError'));
        }
    };

    const handleSort = (field: SortField) => {
        if (sortField === field) {
            setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
        } else {
            setSortField(field);
            setSortDirection('asc');
        }
    };

    const handlePlayPause = (song: Song) => {
        if (playingSongId === song.id) {
            audioElement?.pause();
            setPlayingSongId(null);
        } else {
            audioElement?.pause();

            const audio = new Audio(`/api/audio/${song.filename}`);
            audio.onerror = () => {
                setPlayingSongId(null);
                setAudioElement(null);
                alert(`Audio file could not be loaded: ${song.filename}`);
            };

            audio.play()
                .then(() => {
                    setAudioElement(audio);
                    setPlayingSongId(song.id);
                })
                .catch(error => {
                    console.error('Playback error:', error);
                    setPlayingSongId(null);
                    setAudioElement(null);
                });

            // Reset Zustand, wenn der Track zu Ende gespielt ist
            audio.onended = () => {
                setPlayingSongId(null);
                setAudioElement(null);
            };
        }
    };

    const toggleUploadGenre = (genreId: number) => {
        setUploadGenreIds(prev =>
            prev.includes(genreId) ? prev.filter(id => id !== genreId) : [...prev, genreId]
        );
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const selected = Array.from(e.target.files || []);
        if (selected.length === 0) return;
        setFiles(prev => [...prev, ...selected]);
    };

    const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        e.stopPropagation();
        setIsDragging(true);
    };

    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        e.stopPropagation();
        if (!isDragging) {
            setIsDragging(true);
        }
    };

    const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        e.stopPropagation();
        setIsDragging(false);
    };

    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault();
        e.stopPropagation();
        setIsDragging(false);

        const droppedFiles = Array.from(e.dataTransfer.files || []).filter(
            f => f.type === 'audio/mpeg' || f.name.toLowerCase().endsWith('.mp3')
        );
        if (droppedFiles.length === 0) return;
        setFiles(prev => [...prev, ...droppedFiles]);
    };

    const handleBatchUpload = async (e: React.FormEvent) => {
        e.preventDefault();
        if (files.length === 0) return;

        setIsUploading(true);
        setUploadResults([]);
        setUploadProgress({ current: 0, total: files.length });
        setMessage('');

        const results: any[] = [];

        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            setUploadProgress({ current: i + 1, total: files.length });

            try {
                const formData = new FormData();
                formData.append('file', file);
                // excludeFromGlobal wird für Kuratoren serverseitig immer auf true gesetzt

                const res = await fetch('/api/songs', {
                    method: 'POST',
                    headers: getCuratorUploadHeaders(),
                    body: formData,
                });

                if (res.ok) {
                    const data = await res.json();
                    results.push({
                        filename: file.name,
                        success: true,
                        song: data.song,
                        validation: data.validation,
                    });
                } else if (res.status === 409) {
                    const data = await res.json();
                    results.push({
                        filename: file.name,
                        success: false,
                        isDuplicate: true,
                        duplicate: data.duplicate,
                        error: `Duplicate: Already exists as "${data.duplicate.title}" by "${data.duplicate.artist}"`,
                    });
                } else {
                    const errorText = await res.text();
                    results.push({
                        filename: file.name,
                        success: false,
                        error: `Upload failed (${res.status}): ${errorText.substring(0, 100)}`,
                    });
                }
            } catch (error) {
                results.push({
                    filename: file.name,
                    success: false,
                    error: `Network error: ${error instanceof Error ? error.message : 'Unknown error'}`,
                });
            }
        }

        setUploadResults(results);
        setFiles([]);
        setIsUploading(false);

        // Genres den erfolgreich hochgeladenen Songs zuweisen
        if (uploadGenreIds.length > 0) {
            const successfulUploads = results.filter(r => r.success && r.song);
            for (const result of successfulUploads) {
                try {
                    await fetch('/api/songs', {
                        method: 'PUT',
                        headers: getCuratorAuthHeaders(),
                        body: JSON.stringify({
                            id: result.song.id,
                            title: result.song.title,
                            artist: result.song.artist,
                            releaseYear: result.song.releaseYear,
                            genreIds: uploadGenreIds,
                        }),
                    });
                } catch {
                    // Fehler beim Genre-Assigning werden nur geloggt, nicht abgebrochen
                    console.error(`Failed to assign genres to ${result.song.title}`);
                }
            }
        }

        await fetchSongs();

        const successCount = results.filter(r => r.success).length;
        const duplicateCount = results.filter(r => r.isDuplicate).length;
        const failedCount = results.filter(r => !r.success && !r.isDuplicate).length;

        let msg = t('uploadSummary', { success: successCount, total: results.length });
        if (duplicateCount > 0) msg += `\n` + t('uploadSummaryDuplicates', { count: duplicateCount });
        if (failedCount > 0) msg += `\n` + t('uploadSummaryFailed', { count: failedCount });
        setMessage(msg);
    };

    if (!isAuthenticated) {
        return (
            <main style={{ maxWidth: '480px', margin: '2rem auto', padding: '1rem' }}>
                <h1 style={{ fontSize: '1.5rem', marginBottom: '1rem' }}>{t('loginTitle')}</h1>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                    <label>
                        {t('loginUsername')}
                        <input
                            type="text"
                            value={username}
                            onChange={e => setUsername(e.target.value)}
                            style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem' }}
                        />
                    </label>
                    <label>
                        {t('loginPassword')}
                        <input
                            type="password"
                            value={password}
                            onChange={e => setPassword(e.target.value)}
                            style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem' }}
                        />
                    </label>
                    <button
                        type="button"
                        onClick={handleLogin}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#111827',
                            color: 'white',
                            border: 'none',
                            borderRadius: '0.375rem',
                            cursor: 'pointer',
                            marginTop: '0.5rem',
                        }}
                    >
                        {t('loginButton')}
                    </button>
                    {message && (
                        <p style={{ color: '#b91c1c', marginTop: '0.5rem', whiteSpace: 'pre-line' }}>{message}</p>
                    )}
                </div>
            </main>
        );
    }

    // Filter, Sort & Pagination basierend auf Admin-Logik, aber auf Kuratoren-Rechte zugeschnitten
    const filteredSongs = songs.filter(song => {
        // Nur Songs anzeigen, die für den Kurator relevant sind
        if (curatorInfo && !canEditSong(song) && !canDeleteSong(song)) {
            return false;
        }

        // Filter nach Global/Genre/Special
        if (selectedFilter) {
            if (selectedFilter === 'no-global') {
                if (!song.excludeFromGlobal) return false;
            } else if (selectedFilter.startsWith('genre:')) {
                const genreId = Number(selectedFilter.split(':')[1]);
                if (!song.genres.some(g => g.id === genreId)) return false;
            } else if (selectedFilter.startsWith('special:')) {
                const specialId = Number(selectedFilter.split(':')[1]);
                if (!song.specials.some(s => s.id === specialId)) return false;
            }
        }

        if (searchQuery.trim()) {
            const q = searchQuery.toLowerCase();
            if (
                !song.title.toLowerCase().includes(q) &&
                !song.artist.toLowerCase().includes(q)
            ) {
                return false;
            }
        }

        return true;
    });

    const sortedSongs = [...filteredSongs].sort((a, b) => {
        const dir = sortDirection === 'asc' ? 1 : -1;
        switch (sortField) {
            case 'id':
                return (a.id - b.id) * dir;
            case 'title':
                return a.title.localeCompare(b.title) * dir;
            case 'artist':
                return a.artist.localeCompare(b.artist) * dir;
            case 'createdAt':
                return (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()) * dir;
            case 'releaseYear':
                return ((a.releaseYear || 0) - (b.releaseYear || 0)) * dir;
            case 'activations': {
                const av = a.activations ?? a.puzzles?.length ?? 0;
                const bv = b.activations ?? b.puzzles?.length ?? 0;
                return (av - bv) * dir;
            }
            case 'averageRating':
                return ((a.averageRating || 0) - (b.averageRating || 0)) * dir;
            default:
                return 0;
        }
    });

    const totalPages = Math.max(1, Math.ceil(sortedSongs.length / itemsPerPage));
    const page = Math.min(currentPage, totalPages);
    const startIndex = (page - 1) * itemsPerPage;
    const visibleSongs = sortedSongs.slice(startIndex, startIndex + itemsPerPage);

    return (
        <main style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
            <header
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginBottom: '1.5rem',
                }}
            >
                <div>
                    <h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>Kuratoren-Dashboard</h1>
                    {curatorInfo && (
                        <p style={{ color: '#4b5563', fontSize: '0.9rem' }}>
                            {t('loggedInAs', { username: curatorInfo.username })}
                            {curatorInfo.isGlobalCurator && t('globalCuratorSuffix')}
                        </p>
                    )}
                </div>
                <button
                    type="button"
                    onClick={handleLogout}
                    style={{
                        padding: '0.5rem 1rem',
                        background: '#6b7280',
                        color: 'white',
                        border: 'none',
                        borderRadius: '0.375rem',
                        cursor: 'pointer',
                    }}
                >
                    {t('logout')}
                </button>
            </header>

            {loading && <p>{t('loadingData')}</p>}
            {message && (
                <p style={{ marginBottom: '1rem', color: '#b91c1c', whiteSpace: 'pre-line' }}>{message}</p>
            )}

            <section style={{ marginBottom: '2rem' }}>
                <h2 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>{t('uploadSectionTitle')}</h2>
                <p style={{ marginBottom: '0.75rem', color: '#4b5563', fontSize: '0.9rem' }}>
                    {t('uploadSectionDescription')}
                </p>
                <form onSubmit={handleBatchUpload} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '640px' }}>
                    <div
                        onDragEnter={handleDragEnter}
                        onDragOver={handleDragOver}
                        onDragLeave={handleDragLeave}
                        onDrop={handleDrop}
                        style={{
                            border: isDragging ? '2px solid #4f46e5' : '2px dashed #d1d5db',
                            borderRadius: '0.5rem',
                            padding: '1.75rem',
                            textAlign: 'center',
                            background: isDragging ? '#eef2ff' : '#f9fafb',
                            cursor: 'pointer',
                            transition: 'all 0.2s',
                        }}
                        onClick={() => fileInputRef.current?.click()}
                    >
                        <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📁</div>
                        <p style={{ fontWeight: 'bold', marginBottom: '0.25rem' }}>
                            {files.length > 0
                                ? t('dropzoneTitleWithFiles', { count: files.length })
                                : t('dropzoneTitleEmpty')}
                        </p>
                        <p style={{ fontSize: '0.875rem', color: '#666' }}>{t('dropzoneSubtitle')}</p>
                        <input
                            ref={fileInputRef}
                            type="file"
                            accept="audio/mpeg"
                            multiple
                            onChange={handleFileChange}
                            style={{ display: 'none' }}
                        />
                    </div>

                    {files.length > 0 && (
                        <div style={{ marginBottom: '0.5rem' }}>
                            <p style={{ fontWeight: 'bold', marginBottom: '0.25rem' }}>{t('selectedFilesTitle')}</p>
                            <div
                                style={{
                                    maxHeight: '160px',
                                    overflowY: 'auto',
                                    background: '#f9fafb',
                                    padding: '0.5rem',
                                    borderRadius: '0.25rem',
                                }}
                            >
                                {files.map((file, index) => (
                                    <div key={index} style={{ padding: '0.25rem 0', fontSize: '0.875rem' }}>
                                        📄 {file.name}
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {isUploading && (
                        <div
                            style={{
                                marginBottom: '0.5rem',
                                padding: '0.75rem',
                                background: '#eef2ff',
                                borderRadius: '0.5rem',
                                fontSize: '0.875rem',
                            }}
                        >
                            <p style={{ fontWeight: 'bold', marginBottom: '0.25rem' }}>
                                {t('uploadProgress', {
                                    current: uploadProgress.current,
                                    total: uploadProgress.total,
                                })}
                            </p>
                            <div
                                style={{
                                    width: '100%',
                                    height: '8px',
                                    background: '#d1d5db',
                                    borderRadius: '4px',
                                    overflow: 'hidden',
                                }}
                            >
                                <div
                                    style={{
                                        width:
                                            uploadProgress.total > 0
                                                ? `${(uploadProgress.current / uploadProgress.total) * 100}%`
                                                : '0%',
                                        height: '100%',
                                        background: '#4f46e5',
                                        transition: 'width 0.3s',
                                    }}
                                />
                            </div>
                        </div>
                    )}

                    <div>
                        <div style={{ fontWeight: 500, marginBottom: '0.25rem' }}>{t('assignGenresLabel')}</div>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                            {genres
                                .filter(g => curatorInfo?.genreIds?.includes(g.id))
                                .map(genre => (
                                    <label
                                        key={genre.id}
                                        style={{
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: '0.25rem',
                                            padding: '0.25rem 0.5rem',
                                            borderRadius: '999px',
                                            background: uploadGenreIds.includes(genre.id) ? '#e5f3ff' : '#f3f4f6',
                                            fontSize: '0.8rem',
                                            cursor: 'pointer',
                                        }}
                                    >
                                        <input
                                            type="checkbox"
                                            checked={uploadGenreIds.includes(genre.id)}
                                            onChange={() => toggleUploadGenre(genre.id)}
                                        />
                                        {typeof genre.name === 'string' ? genre.name : genre.name?.de ?? genre.name?.en}
                                    </label>
                                ))}
                            {curatorInfo && curatorInfo.genreIds.length === 0 && (
                                <span style={{ fontSize: '0.8rem', color: '#9ca3af' }}>
                                    {t('noAssignedGenres')}
                                </span>
                            )}
                        </div>
                    </div>

                    <button
                        type="submit"
                        disabled={isUploading || files.length === 0}
                        style={{
                            padding: '0.5rem 1rem',
                            background: isUploading || files.length === 0 ? '#9ca3af' : '#111827',
                            color: 'white',
                            border: 'none',
                            borderRadius: '0.375rem',
                            cursor: isUploading || files.length === 0 ? 'not-allowed' : 'pointer',
                            alignSelf: 'flex-start',
                        }}
                    >
                        {isUploading ? t('uploadButtonUploading') : t('uploadButtonIdle')}
                    </button>

                    {uploadResults.length > 0 && (
                        <div
                            style={{
                                marginTop: '0.75rem',
                                padding: '0.75rem',
                                background: '#f9fafb',
                                borderRadius: '0.5rem',
                                fontSize: '0.85rem',
                            }}
                        >
                            {uploadResults.map((r, idx) => (
                                        <div key={idx} style={{ marginBottom: '0.25rem' }}>
                                            <strong>{r.filename}</strong> –{' '}
                                            {r.success
                                                ? t('uploadResultSuccess')
                                                : r.isDuplicate
                                                ? t('uploadResultDuplicate', { error: r.error })
                                                : t('uploadResultError', { error: r.error })}
                                        </div>
                            ))}
                        </div>
                    )}
                </form>
            </section>

            <section style={{ marginBottom: '2rem' }}>
                <h2 style={{ fontSize: '1.25rem', marginBottom: '0.75rem' }}>
                    {t('tracklistTitle', { count: filteredSongs.length })}
                </h2>
                <p style={{ marginBottom: '0.75rem', color: '#4b5563', fontSize: '0.9rem' }}>
                    {t('tracklistDescription')}
                </p>

                {/* Suche & Filter */}
                <div style={{ marginBottom: '0.75rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                    <input
                        type="text"
                        placeholder={t('searchPlaceholder')}
                        value={searchQuery}
                        onChange={e => {
                            setSearchQuery(e.target.value);
                            setCurrentPage(1);
                        }}
                        style={{
                            flex: '1',
                            minWidth: '200px',
                            padding: '0.4rem 0.6rem',
                            borderRadius: '0.25rem',
                            border: '1px solid #d1d5db',
                        }}
                    />
                    <select
                        value={selectedFilter}
                        onChange={e => {
                            setSelectedFilter(e.target.value);
                            setCurrentPage(1);
                        }}
                        style={{
                            minWidth: '180px',
                            padding: '0.4rem 0.6rem',
                            borderRadius: '0.25rem',
                            border: '1px solid #d1d5db',
                        }}
                    >
                        <option value="">{t('filterAll')}</option>
                        <option value="no-global">{t('filterNoGlobal')}</option>
                        <optgroup label="Genres">
                            {genres
                                .filter(g => curatorInfo?.genreIds?.includes(g.id))
                                .map(genre => (
                                    <option key={genre.id} value={`genre:${genre.id}`}>
                                        {typeof genre.name === 'string'
                                            ? genre.name
                                            : genre.name?.de ?? genre.name?.en}
                                    </option>
                                ))}
                        </optgroup>
                        <optgroup label="Specials">
                            {specials
                                .filter(s => curatorInfo?.specialIds?.includes(s.id))
                                .map(special => (
                                    <option key={special.id} value={`special:${special.id}`}>
                                        ★{' '}
                                        {typeof special.name === 'string'
                                            ? special.name
                                            : special.name?.de ?? special.name?.en}
                                    </option>
                                ))}
                        </optgroup>
                    </select>
                    {(searchQuery || selectedFilter) && (
                        <button
                            type="button"
                            onClick={() => {
                                setSearchQuery('');
                                setSelectedFilter('');
                                setCurrentPage(1);
                            }}
                            style={{
                                padding: '0.4rem 0.8rem',
                                borderRadius: '0.25rem',
                                border: '1px solid #d1d5db',
                                background: '#f3f4f6',
                                cursor: 'pointer',
                                fontSize: '0.85rem',
                            }}
                        >
                            {t('filterReset')}
                        </button>
                    )}
                </div>

                {visibleSongs.length === 0 ? (
                    <p>{t('noSongsInScope')}</p>
                ) : (
                    <>
                        <div style={{ overflowX: 'auto' }}>
                            <table
                                style={{
                                    width: '100%',
                                    borderCollapse: 'collapse',
                                    fontSize: '0.9rem',
                                }}
                            >
                                <thead>
                                    <tr style={{ borderBottom: '1px solid #e5e7eb' }}>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('id')}
                                        >
                                            {t('columnId')} {sortField === 'id' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th style={{ padding: '0.5rem' }}>{t('columnPlay')}</th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('title')}
                                        >
                                            {t('columnTitle')} {sortField === 'title' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('artist')}
                                        >
                                            {t('columnArtist')} {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('releaseYear')}
                                        >
                                            {t('columnYear')} {sortField === 'releaseYear' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th style={{ padding: '0.5rem' }}>{t('columnGenresSpecials')}</th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('createdAt')}
                                        >
                                            {t('columnAdded')} {sortField === 'createdAt' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('activations')}
                                        >
                                            {t('columnActivations')} {sortField === 'activations' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th
                                            style={{ padding: '0.5rem', cursor: 'pointer' }}
                                            onClick={() => handleSort('averageRating')}
                                        >
                                            {t('columnRating')} {sortField === 'averageRating' && (sortDirection === 'asc' ? '↑' : '↓')}
                                        </th>
                                        <th style={{ padding: '0.5rem' }}>{t('columnExcludeGlobal')}</th>
                                        <th style={{ padding: '0.5rem' }}>{t('columnActions')}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {visibleSongs.map(song => {
                                        const editable = canEditSong(song);
                                        const deletable = canDeleteSong(song);
                                        const isEditing = editingId === song.id;
                                        const ratingText =
                                            song.ratingCount && song.ratingCount > 0
                                                ? `${(song.averageRating || 0).toFixed(1)} (${song.ratingCount})`
                                                : '-';

                                        return (
                                            <tr key={song.id} style={{ borderBottom: '1px solid #f3f4f6' }}>
                                                <td style={{ padding: '0.5rem' }}>{song.id}</td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    <button
                                                        type="button"
                                                        onClick={() => handlePlayPause(song)}
                                                        style={{
                                                            border: 'none',
                                                            background: 'none',
                                                            cursor: 'pointer',
                                                            fontSize: '1.1rem',
                                                        }}
                                                        title={
                                                            playingSongId === song.id
                                                                ? t('pause')
                                                                : t('play')
                                                        }
                                                    >
                                                        {playingSongId === song.id ? '⏸️' : '▶️'}
                                                    </button>
                                                </td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    {isEditing ? (
                                                        <input
                                                            type="text"
                                                            value={editTitle}
                                                            onChange={e => setEditTitle(e.target.value)}
                                                            style={{ width: '100%', padding: '0.25rem' }}
                                                        />
                                                    ) : (
                                                        song.title
                                                    )}
                                                </td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    {isEditing ? (
                                                        <input
                                                            type="text"
                                                            value={editArtist}
                                                            onChange={e => setEditArtist(e.target.value)}
                                                            style={{ width: '100%', padding: '0.25rem' }}
                                                        />
                                                    ) : (
                                                        song.artist
                                                    )}
                                                </td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    {isEditing ? (
                                                        <input
                                                            type="number"
                                                            value={editReleaseYear}
                                                            onChange={e =>
                                                                setEditReleaseYear(
                                                                    e.target.value === '' ? '' : Number(e.target.value)
                                                                )
                                                            }
                                                            style={{ width: '5rem', padding: '0.25rem' }}
                                                        />
                                                    ) : song.releaseYear ? (
                                                        song.releaseYear
                                                    ) : (
                                                        '-'
                                                    )}
                                                </td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    {isEditing ? (
                                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                                                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                                                {genres
                                                                    .filter(g => curatorInfo?.genreIds?.includes(g.id))
                                                                    .map(genre => (
                                                                        <label
                                                                            key={genre.id}
                                                                            style={{
                                                                                display: 'flex',
                                                                                alignItems: 'center',
                                                                                gap: '0.25rem',
                                                                                padding: '0.15rem 0.4rem',
                                                                                borderRadius: '999px',
                                                                                background: editGenreIds.includes(genre.id)
                                                                                    ? '#e5f3ff'
                                                                                    : '#f3f4f6',
                                                                                fontSize: '0.8rem',
                                                                                cursor: 'pointer',
                                                                            }}
                                                                        >
                                                                            <input
                                                                                type="checkbox"
                                                                                checked={editGenreIds.includes(genre.id)}
                                                                                onChange={() =>
                                                                                    setEditGenreIds(prev =>
                                                                                        prev.includes(genre.id)
                                                                                            ? prev.filter(id => id !== genre.id)
                                                                                            : [...prev, genre.id]
                                                                                    )
                                                                                }
                                                                            />
                                                                            {typeof genre.name === 'string'
                                                                                ? genre.name
                                                                                : genre.name?.de ?? genre.name?.en}
                                                                        </label>
                                                                    ))}
                                                            </div>
                                                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                                                {song.genres
                                                                    .filter(
                                                                        g => !curatorInfo?.genreIds?.includes(g.id)
                                                                    )
                                                                    .map(g => (
                                                                        <span
                                                                            key={`fixed-g-${g.id}`}
                                                                            style={{
                                                                                padding: '0.1rem 0.4rem',
                                                                                borderRadius: '999px',
                                                                                background: '#e5e7eb',
                                                                                fontSize: '0.8rem',
                                                                            }}
                                                                        >
                                                                            {typeof g.name === 'string'
                                                                                ? g.name
                                                                                : g.name?.de ?? g.name?.en}
                                                                        </span>
                                                                    ))}
                                                                {song.specials.map(s => (
                                                                    <span
                                                                        key={`s-${s.id}`}
                                                                        style={{
                                                                            padding: '0.1rem 0.4rem',
                                                                            borderRadius: '999px',
                                                                            background: '#fee2e2',
                                                                            fontSize: '0.8rem',
                                                                        }}
                                                                    >
                                                                        {typeof s.name === 'string'
                                                                            ? s.name
                                                                            : s.name?.de ?? s.name?.en}
                                                                    </span>
                                                                ))}
                                                            </div>
                                                        </div>
                                                    ) : (
                                                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                                            {song.genres.map(g => (
                                                                <span
                                                                    key={`g-${g.id}`}
                                                                    style={{
                                                                        padding: '0.1rem 0.4rem',
                                                                        borderRadius: '999px',
                                                                        background: '#e5e7eb',
                                                                    }}
                                                                >
                                                                    {typeof g.name === 'string'
                                                                        ? g.name
                                                                        : g.name?.de ?? g.name?.en}
                                                                </span>
                                                            ))}
                                                            {song.specials.map(s => (
                                                                <span
                                                                    key={`s-${s.id}`}
                                                                    style={{
                                                                        padding: '0.1rem 0.4rem',
                                                                        borderRadius: '999px',
                                                                        background: '#fee2e2',
                                                                    }}
                                                                >
                                                                    {typeof s.name === 'string'
                                                                        ? s.name
                                                                        : s.name?.de ?? s.name?.en}
                                                                </span>
                                                            ))}
                                                        </div>
                                                    )}
                                                </td>
                                                <td style={{ padding: '0.5rem', whiteSpace: 'nowrap' }}>
                                                    {new Date(song.createdAt).toLocaleDateString()}
                                                </td>
                                                <td style={{ padding: '0.5rem', textAlign: 'center' }}>
                                                    {song.activations ?? song.puzzles?.length ?? 0}
                                                </td>
                                                <td style={{ padding: '0.5rem' }}>{ratingText}</td>
                                                <td style={{ padding: '0.5rem' }}>
                                                    {isEditing ? (
                                                        <input
                                                            type="checkbox"
                                                            checked={editExcludeFromGlobal}
                                                            onChange={e =>
                                                                setEditExcludeFromGlobal(e.target.checked)
                                                            }
                                                            disabled={!curatorInfo?.isGlobalCurator}
                                                        />
                                                    ) : song.excludeFromGlobal ? (
                                                        t('excludeGlobalYes')
                                                    ) : (
                                                        t('excludeGlobalNo')
                                                    )}
                                                    {!curatorInfo?.isGlobalCurator && (
                                                        <span
                                                            style={{
                                                                display: 'block',
                                                                fontSize: '0.75rem',
                                                                color: '#9ca3af',
                                                            }}
                                                        >
                                                            {t('excludeGlobalInfo')}
                                                        </span>
                                                    )}
                                                </td>
                                                <td
                                                    style={{
                                                        padding: '0.5rem',
                                                        whiteSpace: 'nowrap',
                                                    }}
                                                >
                                                    {isEditing ? (
                                                        <>
                                                            <button
                                                                type="button"
                                                                onClick={() => saveEditing(song.id)}
                                                                style={{
                                                                    marginRight: '0.5rem',
                                                                    padding: '0.25rem 0.5rem',
                                                                    background: '#10b981',
                                                                    color: 'white',
                                                                    border: 'none',
                                                                    borderRadius: '0.25rem',
                                                                    cursor: 'pointer',
                                                                }}
                                                            >
                                                                💾
                                                            </button>
                                                            <button
                                                                type="button"
                                                                onClick={cancelEditing}
                                                                style={{
                                                                    padding: '0.25rem 0.5rem',
                                                                    background: '#e5e7eb',
                                                                    border: 'none',
                                                                    borderRadius: '0.25rem',
                                                                    cursor: 'pointer',
                                                                }}
                                                            >
                                                                ✖
                                                            </button>
                                                        </>
                                                    ) : (
                                                        <>
                                                            <button
                                                                type="button"
                                                                onClick={() => startEditing(song)}
                                                                disabled={!editable}
                                                                style={{
                                                                    marginRight: '0.5rem',
                                                                    padding: '0.25rem 0.5rem',
                                                                    background: editable ? '#e5e7eb' : '#f3f4f6',
                                                                    color: '#111827',
                                                                    border: '1px solid #d1d5db',
                                                                    borderRadius: '0.25rem',
                                                                    cursor: editable ? 'pointer' : 'not-allowed',
                                                                }}
                                                            >
                                                                ✏️
                                                            </button>
                                                            <button
                                                                type="button"
                                                                onClick={() => handleDelete(song)}
                                                                disabled={!deletable}
                                                                style={{
                                                                    padding: '0.25rem 0.5rem',
                                                                    background: deletable ? '#b91c1c' : '#fca5a5',
                                                                    color: 'white',
                                                                    border: 'none',
                                                                    borderRadius: '0.25rem',
                                                                    cursor: deletable ? 'pointer' : 'not-allowed',
                                                                }}
                                                            >
                                                                🗑️
                                                            </button>
                                                        </>
                                                    )}
                                                </td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </table>
                        </div>

                        {/* Pagination & Page Size */}
                        <div
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                marginTop: '0.75rem',
                                fontSize: '0.875rem',
                                gap: '0.75rem',
                                flexWrap: 'wrap',
                            }}
                        >
                            <button
                                type="button"
                                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                disabled={page === 1}
                                style={{
                                    padding: '0.3rem 0.6rem',
                                    borderRadius: '0.25rem',
                                    border: '1px solid #d1d5db',
                                    background: page === 1 ? '#f3f4f6' : '#fff',
                                    cursor: page === 1 ? 'not-allowed' : 'pointer',
                                }}
                            >
                                {t('paginationPrev')}
                            </button>
                            <span style={{ color: '#666' }}>
                                {t('paginationLabel', { page, total: totalPages })}
                            </span>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                                <span>{t('pageSizeLabel')}</span>
                                <select
                                    value={itemsPerPage}
                                    onChange={e => {
                                        const value = parseInt(e.target.value, 10) || 10;
                                        const safeValue = Math.min(100, Math.max(1, value));
                                        setItemsPerPage(safeValue);
                                        setCurrentPage(1);
                                    }}
                                    style={{
                                        padding: '0.25rem 0.5rem',
                                        borderRadius: '0.25rem',
                                        border: '1px solid #d1d5db',
                                    }}
                                >
                                    {[10, 25, 50, 100].map(size => (
                                        <option key={size} value={size}>
                                            {size}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <button
                                type="button"
                                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                                disabled={page === totalPages}
                                style={{
                                    padding: '0.3rem 0.6rem',
                                    borderRadius: '0.25rem',
                                    border: '1px solid #d1d5db',
                                    background: page === totalPages ? '#f3f4f6' : '#fff',
                                    cursor: page === totalPages ? 'not-allowed' : 'pointer',
                                }}
                            >
                                {t('paginationNext')}
                            </button>
                        </div>
                    </>
                )}
            </section>
        </main>
    );
}