'use client';

import { useState, useEffect, useRef } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import { Link } from '@/lib/navigation';
import { getLocalizedValue } from '@/lib/i18n';


interface Special {
    id: number;
    name: any;
    subtitle?: any;
    maxAttempts: number;
    unlockSteps: string;
    launchDate?: string;
    endDate?: string;
    curator?: string;
    hidden?: boolean;
    _count?: {
        songs: number;
    };
}

interface Genre {
    id: number;
    name: any;
    subtitle?: any;
    active: boolean;
    _count?: {
        songs: number;
    };
}

interface DailyPuzzle {
    id: number;
    date: string;
    songId: number;
    genreId: number | null;
    specialId: number | null;
}

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

interface News {
    id: number;
    title: any;
    content: any;
    author: string | null;
    publishedAt: string;
    featured: boolean;
    specialId: number | null;
    special: {
        id: number;
        name: any;
    } | null;
}

interface PoliticalStatement {
    id: number;
    text: string;
    active?: boolean;
    source?: string;
    locale: string;
}

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

type SortField = 'id' | 'title' | 'artist' | 'createdAt' | 'releaseYear' | 'activations' | 'averageRating';
type SortDirection = 'asc' | 'desc';

export default function AdminPage({ params }: { params: { locale: string } }) {
    const t = useTranslations('Admin');
    const locale = useLocale();
    const [activeTab, setActiveTab] = useState<'de' | 'en'>('de');
    const [password, setPassword] = useState('');
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [files, setFiles] = useState<File[]>([]);
    const [message, setMessage] = useState('');
    const [isUploading, setIsUploading] = useState(false);
    const [uploadProgress, setUploadProgress] = useState<{ current: number, total: number }>({ current: 0, total: 0 });
    const [uploadResults, setUploadResults] = useState<any[]>([]);
    const [isDragging, setIsDragging] = useState(false);
    const [songs, setSongs] = useState<Song[]>([]);
    const [genres, setGenres] = useState<Genre[]>([]);
    const [newGenreName, setNewGenreName] = useState({ de: '', en: '' });
    const [newGenreSubtitle, setNewGenreSubtitle] = useState({ de: '', en: '' });
    const [newGenreActive, setNewGenreActive] = useState(true);
    const [editingGenreId, setEditingGenreId] = useState<number | null>(null);
    const [editGenreName, setEditGenreName] = useState({ de: '', en: '' });
    const [editGenreSubtitle, setEditGenreSubtitle] = useState({ de: '', en: '' });
    const [editGenreActive, setEditGenreActive] = useState(true);

    // Specials state
    const [specials, setSpecials] = useState<Special[]>([]);
    const [newSpecialName, setNewSpecialName] = useState({ de: '', en: '' });
    const [newSpecialSubtitle, setNewSpecialSubtitle] = useState({ de: '', en: '' });
    const [newSpecialMaxAttempts, setNewSpecialMaxAttempts] = useState(7);
    const [newSpecialUnlockSteps, setNewSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
    const [newSpecialUnlockStepsError, setNewSpecialUnlockStepsError] = useState<string | null>(null);
    const [newSpecialLaunchDate, setNewSpecialLaunchDate] = useState('');
    const [newSpecialEndDate, setNewSpecialEndDate] = useState('');
    const [newSpecialCurator, setNewSpecialCurator] = useState('');
    const [newSpecialHidden, setNewSpecialHidden] = useState(false);

    const [editingSpecialId, setEditingSpecialId] = useState<number | null>(null);
    const [editSpecialName, setEditSpecialName] = useState({ de: '', en: '' });
    const [editSpecialSubtitle, setEditSpecialSubtitle] = useState({ de: '', en: '' });
    const [editSpecialMaxAttempts, setEditSpecialMaxAttempts] = useState(7);
    const [editSpecialUnlockSteps, setEditSpecialUnlockSteps] = useState('[2,4,7,11,16,30,60]');
    const [editSpecialUnlockStepsError, setEditSpecialUnlockStepsError] = useState<string | null>(null);
    const [editSpecialLaunchDate, setEditSpecialLaunchDate] = useState('');
    const [editSpecialEndDate, setEditSpecialEndDate] = useState('');
    const [editSpecialCurator, setEditSpecialCurator] = useState('');
    const [editSpecialHidden, setEditSpecialHidden] = useState(false);

    // News state
    const [news, setNews] = useState<News[]>([]);
    const [newNewsTitle, setNewNewsTitle] = useState({ de: '', en: '' });
    const [newNewsContent, setNewNewsContent] = useState({ de: '', en: '' });
    const [newNewsAuthor, setNewNewsAuthor] = useState('');
    const [newNewsFeatured, setNewNewsFeatured] = useState(false);
    const [newNewsSpecialId, setNewNewsSpecialId] = useState<number | null>(null);
    const [editingNewsId, setEditingNewsId] = useState<number | null>(null);
    const [editNewsTitle, setEditNewsTitle] = useState({ de: '', en: '' });
    const [editNewsContent, setEditNewsContent] = useState({ de: '', en: '' });
    const [editNewsAuthor, setEditNewsAuthor] = useState('');
    const [editNewsFeatured, setEditNewsFeatured] = useState(false);
    const [editNewsSpecialId, setEditNewsSpecialId] = useState<number | null>(null);

    // Edit state
    const [editingId, setEditingId] = useState<number | null>(null);
    const [editTitle, setEditTitle] = useState('');
    const [editArtist, setEditArtist] = useState('');
    const [editReleaseYear, setEditReleaseYear] = useState<number | ''>('');
    const [editGenreIds, setEditGenreIds] = useState<number[]>([]);
    const [editSpecialIds, setEditSpecialIds] = useState<number[]>([]);
    const [editExcludeFromGlobal, setEditExcludeFromGlobal] = useState(false);

    // Post-upload state
    const [uploadedSong, setUploadedSong] = useState<Song | null>(null);
    const [uploadGenreIds, setUploadGenreIds] = useState<number[]>([]);
    const [uploadExcludeFromGlobal, setUploadExcludeFromGlobal] = useState(false);

    // Batch upload genre selection
    const [batchUploadGenreIds, setBatchUploadGenreIds] = useState<number[]>([]);

    // AI Categorization state
    const [isCategorizing, setIsCategorizing] = useState(false);
    const [categorizationResults, setCategorizationResults] = useState<any>(null);

    // Sort state
    const [sortField, setSortField] = useState<SortField>('artist');
    const [sortDirection, setSortDirection] = useState<SortDirection>('asc');

    // Search and pagination state (wird nur noch in Resten der alten Song Library verwendet, kann später entfernt werden)
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedGenreFilter, setSelectedGenreFilter] = useState<string>('');
    const [selectedSpecialFilter, setSelectedSpecialFilter] = useState<number | null>(null);
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 10;

    // Legacy Song-Library-Helper (Liste selbst ist obsolet; wir halten diese Werte nur, damit altes JSX nicht crasht)
    const paginatedSongs: Song[] = [];
    const totalPages = 1;

    // Audio state (für Daily Puzzles)
    const [playingSongId, setPlayingSongId] = useState<number | null>(null);
    const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);

    // Daily Puzzles state
    const [dailyPuzzles, setDailyPuzzles] = useState<any[]>([]);
    const [playingPuzzleId, setPlayingPuzzleId] = useState<number | null>(null);
    const [showDailyPuzzles, setShowDailyPuzzles] = useState(false);
    const [showSpecials, setShowSpecials] = useState(false);
    const [showGenres, setShowGenres] = useState(false);
    const [showNews, setShowNews] = useState(false);
    const [showPoliticalStatements, setShowPoliticalStatements] = useState(false);
    const [politicalStatementsLocale, setPoliticalStatementsLocale] = useState<'de' | 'en'>('de');
    const [politicalStatements, setPoliticalStatements] = useState<PoliticalStatement[]>([]);
    const [newPoliticalStatementText, setNewPoliticalStatementText] = useState('');
    const [newPoliticalStatementActive, setNewPoliticalStatementActive] = useState(true);
    const fileInputRef = useRef<HTMLInputElement>(null);

    // Curators state
    const [curators, setCurators] = useState<Curator[]>([]);
    const [showCurators, setShowCurators] = useState(false);
    const [editingCuratorId, setEditingCuratorId] = useState<number | null>(null);
    const [curatorUsername, setCuratorUsername] = useState('');
    const [curatorPassword, setCuratorPassword] = useState('');
    const [curatorIsGlobal, setCuratorIsGlobal] = useState(false);
    const [curatorGenreIds, setCuratorGenreIds] = useState<number[]>([]);
    const [curatorSpecialIds, setCuratorSpecialIds] = useState<number[]>([]);

    // Check for existing auth on mount
    useEffect(() => {
        const authToken = localStorage.getItem('hoerdle_admin_auth');
        if (authToken === 'authenticated') {
            setIsAuthenticated(true);
            fetchSongs();
            fetchGenres();
            fetchDailyPuzzles();
            fetchSpecials();
            fetchNews();
            fetchCurators();
        }
    }, []);

    const handleLogin = async () => {
        const res = await fetch('/api/admin/login', {
            method: 'POST',
            body: JSON.stringify({ password }),
        });
        if (res.ok) {
            localStorage.setItem('hoerdle_admin_auth', 'authenticated');
            setIsAuthenticated(true);
            fetchSongs();
            fetchGenres();
            fetchDailyPuzzles();
            fetchSpecials();
            fetchNews();
            fetchCurators();
        } else {
            alert(t('wrongPassword'));
        }
    };

    // Validate JSON for unlock steps
    const validateUnlockSteps = (value: string): string | null => {
        if (!value.trim()) {
            return t('unlockStepsRequired');
        }
        try {
            const parsed = JSON.parse(value);
            if (!Array.isArray(parsed)) {
                return t('unlockStepsMustBeArray');
            }
            if (parsed.some((item: any) => typeof item !== 'number' || item < 1)) {
                return t('unlockStepsMustBePositiveNumbers');
            }
            return null;
        } catch (e) {
            return t('unlockStepsInvalidJson');
        }
    };

    const handleLogout = () => {
        localStorage.removeItem('hoerdle_admin_auth');
        setIsAuthenticated(false);
        setPassword('');
        // Reset all state
        setSongs([]);
        setGenres([]);
        setSpecials([]);
        setDailyPuzzles([]);
        setCurators([]);
    };

    // Helper function to add auth headers to requests
    const getAuthHeaders = () => {
        const authToken = localStorage.getItem('hoerdle_admin_auth');
        return {
            'Content-Type': 'application/json',
            'x-admin-auth': authToken || ''
        };
    };

    const fetchSongs = async () => {
        const res = await fetch('/api/songs', {
            headers: getAuthHeaders()
        });
        if (res.ok) {
            const data = await res.json();
            setSongs(data);
        }
    };

    const fetchCurators = async () => {
        const res = await fetch('/api/curators', {
            headers: getAuthHeaders()
        });
        if (res.ok) {
            const data = await res.json();
            setCurators(data);
        }
    };

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

    const createGenre = async () => {
        if (!newGenreName.de.trim() && !newGenreName.en.trim()) return;
        const res = await fetch('/api/genres', {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                name: newGenreName,
                subtitle: newGenreSubtitle,
                active: newGenreActive
            }),
        });
        if (res.ok) {
            setNewGenreName({ de: '', en: '' });
            setNewGenreSubtitle({ de: '', en: '' });
            setNewGenreActive(true);
            fetchGenres();
        } else {
            alert('Failed to create genre');
        }
    };

    const startEditGenre = (genre: Genre) => {
        setEditingGenreId(genre.id);
        setEditGenreName(typeof genre.name === 'string' ? { de: genre.name, en: genre.name } : genre.name);
        setEditGenreSubtitle(genre.subtitle ? (typeof genre.subtitle === 'string' ? { de: genre.subtitle, en: genre.subtitle } : genre.subtitle) : { de: '', en: '' });
        setEditGenreActive(genre.active !== undefined ? genre.active : true);
    };

    const saveEditedGenre = async () => {
        if (editingGenreId === null) return;
        const res = await fetch('/api/genres', {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                id: editingGenreId,
                name: editGenreName,
                subtitle: editGenreSubtitle,
                active: editGenreActive
            }),
        });
        if (res.ok) {
            setEditingGenreId(null);
            fetchGenres();
        } else {
            alert('Failed to update genre');
        }
    };

    // Specials functions
    const fetchSpecials = async () => {
        const res = await fetch('/api/specials', {
            headers: getAuthHeaders()
        });
        if (res.ok) {
            const data = await res.json();
            setSpecials(data);
        }
    };

    const handleCreateSpecial = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newSpecialName.de.trim() && !newSpecialName.en.trim()) return;

        // Validate unlock steps
        const unlockStepsError = validateUnlockSteps(newSpecialUnlockSteps);
        if (unlockStepsError) {
            setNewSpecialUnlockStepsError(unlockStepsError);
            return;
        }
        setNewSpecialUnlockStepsError(null);

        const res = await fetch('/api/specials', {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                name: newSpecialName,
                subtitle: newSpecialSubtitle,
                maxAttempts: newSpecialMaxAttempts,
                unlockSteps: newSpecialUnlockSteps,
                launchDate: newSpecialLaunchDate || null,
                endDate: newSpecialEndDate || null,
                curator: newSpecialCurator || null,
                hidden: newSpecialHidden,
            }),
        });
        if (res.ok) {
            setNewSpecialName({ de: '', en: '' });
            setNewSpecialSubtitle({ de: '', en: '' });
            setNewSpecialMaxAttempts(7);
            setNewSpecialUnlockSteps('[2,4,7,11,16,30,60]');
            setNewSpecialUnlockStepsError(null);
            setNewSpecialLaunchDate('');
            setNewSpecialEndDate('');
            setNewSpecialCurator('');
            setNewSpecialHidden(false);
            fetchSpecials();
        } else {
            const errorData = await res.json().catch(() => ({}));
            alert(errorData.error || 'Failed to create special');
        }
    };

    const handleDeleteSpecial = async (id: number) => {
        if (!confirm('Delete this special?')) return;
        const res = await fetch('/api/specials', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ id }),
        });
        if (res.ok) fetchSpecials();
        else alert('Failed to delete special');
    };

    // Daily Puzzles functions
    const fetchDailyPuzzles = async () => {
        const res = await fetch('/api/admin/daily-puzzles', {
            headers: getAuthHeaders()
        });
        if (res.ok) {
            const data = await res.json();
            setDailyPuzzles(data);
        }
    };

    const handleDeletePuzzle = async (puzzleId: number) => {
        if (!confirm('Delete this daily puzzle? A new one will be generated automatically.')) return;
        const res = await fetch('/api/admin/daily-puzzles', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ puzzleId }),
        });
        if (res.ok) {
            fetchDailyPuzzles();
            alert('Puzzle deleted and regenerated successfully');
        } else {
            alert('Failed to delete puzzle');
        }
    };

    const handlePlayPuzzle = (puzzle: any) => {
        if (playingPuzzleId === puzzle.id) {
            // Pause
            audioElement?.pause();
            setPlayingPuzzleId(null);
            setAudioElement(null);
        } else {
            // Stop any currently playing audio
            if (audioElement) {
                audioElement.pause();
                setAudioElement(null);
            }

            const audio = new Audio(puzzle.song.audioUrl);
            audio.play()
                .then(() => {
                    setAudioElement(audio);
                    setPlayingPuzzleId(puzzle.id);
                })
                .catch((error) => {
                    console.error('Playback error:', error);
                    alert(`Failed to play audio: ${error.message}`);
                    setPlayingPuzzleId(null);
                    setAudioElement(null);
                });

            audio.onended = () => {
                setPlayingPuzzleId(null);
                setAudioElement(null);
            };
        }
    };

    const startEditSpecial = (special: Special) => {
        setEditingSpecialId(special.id);
        setEditSpecialName(typeof special.name === 'string' ? { de: special.name, en: special.name } : special.name);
        setEditSpecialSubtitle(special.subtitle ? (typeof special.subtitle === 'string' ? { de: special.subtitle, en: special.subtitle } : special.subtitle) : { de: '', en: '' });
        setEditSpecialMaxAttempts(special.maxAttempts);
        setEditSpecialUnlockSteps(special.unlockSteps);
        setEditSpecialUnlockStepsError(null);
        setEditSpecialLaunchDate(special.launchDate ? new Date(special.launchDate).toISOString().split('T')[0] : '');
        setEditSpecialEndDate(special.endDate ? new Date(special.endDate).toISOString().split('T')[0] : '');
        setEditSpecialCurator(special.curator || '');
        setEditSpecialHidden(special.hidden || false);
    };

    const saveEditedSpecial = async () => {
        if (editingSpecialId === null) return;

        // Validate unlock steps
        const unlockStepsError = validateUnlockSteps(editSpecialUnlockSteps);
        if (unlockStepsError) {
            setEditSpecialUnlockStepsError(unlockStepsError);
            return;
        }
        setEditSpecialUnlockStepsError(null);

        const res = await fetch('/api/specials', {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                id: editingSpecialId,
                name: editSpecialName,
                subtitle: editSpecialSubtitle,
                maxAttempts: editSpecialMaxAttempts,
                unlockSteps: editSpecialUnlockSteps,
                launchDate: editSpecialLaunchDate || null,
                endDate: editSpecialEndDate || null,
                curator: editSpecialCurator || null,
                hidden: editSpecialHidden,
            }),
        });
        if (res.ok) {
            setEditingSpecialId(null);
            setEditSpecialUnlockStepsError(null);
            fetchSpecials();
        } else {
            const errorData = await res.json().catch(() => ({}));
            alert(errorData.error || 'Failed to update special');
        }
    };

    // News functions
    const fetchNews = async () => {
        const res = await fetch('/api/news', {
            headers: getAuthHeaders()
        });
        if (res.ok) {
            const data = await res.json();
            setNews(data);
        }
    };

    // Political Statements functions (JSON-backed via API)
    const fetchPoliticalStatements = async (targetLocale: 'de' | 'en') => {
        const res = await fetch(`/api/political-statements?locale=${encodeURIComponent(targetLocale)}&admin=true`, {
            headers: getAuthHeaders(),
        });
        if (res.ok) {
            const data = await res.json();
            const enriched: PoliticalStatement[] = data.map((s: any) => ({
                id: s.id,
                text: s.text,
                active: s.active !== false,
                source: s.source,
                locale: targetLocale,
            }));
            setPoliticalStatements(prev => {
                const others = prev.filter(p => p.locale !== targetLocale);
                return [...others, ...enriched];
            });
        }
    };

    const handleCreatePoliticalStatement = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newPoliticalStatementText.trim()) return;

        const res = await fetch('/api/political-statements', {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                locale: politicalStatementsLocale,
                text: newPoliticalStatementText.trim(),
                active: newPoliticalStatementActive,
            }),
        });

        if (res.ok) {
            setNewPoliticalStatementText('');
            setNewPoliticalStatementActive(true);
            fetchPoliticalStatements(politicalStatementsLocale);
        } else {
            alert('Failed to create statement');
        }
    };

    const handleEditPoliticalStatementText = (locale: string, id: number, text: string) => {
        setPoliticalStatements(prev =>
            prev.map(s => (s.locale === locale && s.id === id ? { ...s, text } : s)),
        );
    };

    const handleEditPoliticalStatementActive = (locale: string, id: number, active: boolean) => {
        setPoliticalStatements(prev =>
            prev.map(s => (s.locale === locale && s.id === id ? { ...s, active } : s)),
        );
    };

    const handleSavePoliticalStatement = async (locale: string, id: number) => {
        const stmt = politicalStatements.find(s => s.locale === locale && s.id === id);
        if (!stmt) return;

        const res = await fetch('/api/political-statements', {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                locale,
                id,
                text: stmt.text,
                active: stmt.active !== false,
                source: stmt.source,
            }),
        });

        if (!res.ok) {
            alert('Failed to save statement');
            fetchPoliticalStatements(locale as 'de' | 'en');
        }
    };

    const handleDeletePoliticalStatement = async (locale: string, id: number) => {
        if (!confirm('Delete this statement?')) return;

        const res = await fetch('/api/political-statements', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ locale, id }),
        });

        if (res.ok) {
            setPoliticalStatements(prev => prev.filter(s => !(s.locale === locale && s.id === id)));
        } else {
            alert('Failed to delete statement');
        }
    };

    const handleCreateNews = async (e: React.FormEvent) => {
        e.preventDefault();
        if ((!newNewsTitle.de.trim() && !newNewsTitle.en.trim()) || (!newNewsContent.de.trim() && !newNewsContent.en.trim())) return;

        const res = await fetch('/api/news', {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                title: newNewsTitle,
                content: newNewsContent,
                author: newNewsAuthor || null,
                featured: newNewsFeatured,
                specialId: newNewsSpecialId
            }),
        });

        if (res.ok) {
            setNewNewsTitle({ de: '', en: '' });
            setNewNewsContent({ de: '', en: '' });
            setNewNewsAuthor('');
            setNewNewsFeatured(false);
            setNewNewsSpecialId(null);
            fetchNews();
        } else {
            alert('Failed to create news');
        }
    };

    const startEditNews = (newsItem: News) => {
        setEditingNewsId(newsItem.id);
        setEditNewsTitle(typeof newsItem.title === 'string' ? { de: newsItem.title, en: newsItem.title } : newsItem.title);
        setEditNewsContent(typeof newsItem.content === 'string' ? { de: newsItem.content, en: newsItem.content } : newsItem.content);
        setEditNewsAuthor(newsItem.author || '');
        setEditNewsFeatured(newsItem.featured);
        setEditNewsSpecialId(newsItem.specialId);
    };

    const saveEditedNews = async () => {
        if (editingNewsId === null) return;

        const res = await fetch('/api/news', {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                id: editingNewsId,
                title: editNewsTitle,
                content: editNewsContent,
                author: editNewsAuthor || null,
                featured: editNewsFeatured,
                specialId: editNewsSpecialId
            }),
        });

        if (res.ok) {
            setEditingNewsId(null);
            fetchNews();
        } else {
            alert('Failed to update news');
        }
    };

    const handleDeleteNews = async (id: number) => {
        if (!confirm('Delete this news item?')) return;

        const res = await fetch('/api/news', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ id }),
        });

        if (res.ok) {
            fetchNews();
        } else {
            alert('Failed to delete news');
        }
    };

    // Load specials and political statements after auth
    useEffect(() => {
        if (isAuthenticated) {
            fetchSpecials();
            fetchPoliticalStatements('de');
            fetchPoliticalStatements('en');
        }
    }, [isAuthenticated]);

    const deleteGenre = async (id: number) => {
        if (!confirm('Delete this genre?')) return;
        const res = await fetch('/api/genres', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ id }),
        });
        if (res.ok) {
            fetchGenres();
        } else {
            alert('Failed to delete genre');
        }
    };

    const handleAICategorization = async () => {
        if (!confirm('This will categorize all songs without genres using AI. Continue?')) return;

        setIsCategorizing(true);
        setCategorizationResults(null);

        try {
            let offset = 0;
            let hasMore = true;
            let allResults: any[] = [];
            let totalUncategorized = 0;
            let totalProcessed = 0;

            // Process in batches
            while (hasMore) {
                const res = await fetch('/api/categorize', {
                    method: 'POST',
                    headers: getAuthHeaders(),
                    body: JSON.stringify({ offset })
                });

                if (!res.ok) {
                    const error = await res.json();
                    alert(`Categorization failed: ${error.error || 'Unknown error'}`);
                    break;
                }

                const data = await res.json();
                totalUncategorized = data.totalUncategorized;
                totalProcessed = data.processed;
                hasMore = data.hasMore;
                offset = data.nextOffset || 0;

                // Accumulate results
                allResults = [...allResults, ...data.results];

                // Update UI with progress
                setCategorizationResults({
                    message: `Processing: ${totalProcessed} / ${totalUncategorized} songs...`,
                    totalProcessed: totalUncategorized,
                    totalCategorized: allResults.length,
                    results: allResults,
                    inProgress: hasMore
                });
            }

            // Final update
            setCategorizationResults({
                message: `Completed! Processed ${totalUncategorized} songs, categorized ${allResults.length}`,
                totalProcessed: totalUncategorized,
                totalCategorized: allResults.length,
                results: allResults,
                inProgress: false
            });

            fetchSongs(); // Refresh song list
            fetchGenres(); // Refresh genre counts
        } catch (error) {
            alert('Failed to categorize songs');
            console.error(error);
        } finally {
            setIsCategorizing(false);
        }
    };

    const resetCuratorForm = () => {
        setEditingCuratorId(null);
        setCuratorUsername('');
        setCuratorPassword('');
        setCuratorIsGlobal(false);
        setCuratorGenreIds([]);
        setCuratorSpecialIds([]);
    };

    const startEditCurator = (curator: Curator) => {
        setEditingCuratorId(curator.id);
        setCuratorUsername(curator.username);
        setCuratorPassword('');
        setCuratorIsGlobal(curator.isGlobalCurator);
        setCuratorGenreIds(curator.genreIds || []);
        setCuratorSpecialIds(curator.specialIds || []);
    };

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

    const toggleCuratorSpecial = (specialId: number) => {
        setCuratorSpecialIds(prev =>
            prev.includes(specialId) ? prev.filter(id => id !== specialId) : [...prev, specialId]
        );
    };

    const handleSaveCurator = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!curatorUsername.trim()) {
            alert('Bitte einen Benutzernamen eingeben.');
            return;
        }

        // Beim Anlegen eines neuen Kurators ist ein Passwort Pflicht.
        if (!editingCuratorId && !curatorPassword.trim()) {
            alert('Für neue Kuratoren muss ein Passwort gesetzt werden.');
            return;
        }

        const payload: any = {
            username: curatorUsername.trim(),
            isGlobalCurator: curatorIsGlobal,
            genreIds: curatorGenreIds,
            specialIds: curatorSpecialIds,
        };
        if (curatorPassword.trim()) {
            payload.password = curatorPassword;
        }

        const url = '/api/curators';
        const method = editingCuratorId ? 'PUT' : 'POST';

        if (editingCuratorId) {
            payload.id = editingCuratorId;
        }

        const res = await fetch(url, {
            method,
            headers: getAuthHeaders(),
            body: JSON.stringify(payload),
        });

        if (res.ok) {
            resetCuratorForm();
            fetchCurators();
        } else {
            alert('Failed to save curator');
        }
    };

    const handleDeleteCurator = async (id: number) => {
        if (!confirm('Kurator wirklich löschen?')) return;
        const res = await fetch('/api/curators', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ id }),
        });
        if (res.ok) {
            fetchCurators();
        } else {
            alert('Failed to delete curator');
        }
    };

    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 = [];

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

            try {
                console.log(`Uploading file ${i + 1}/${files.length}: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`);

                const formData = new FormData();
                formData.append('file', file);
                formData.append('excludeFromGlobal', String(uploadExcludeFromGlobal));

                const res = await fetch('/api/songs', {
                    method: 'POST',
                    headers: { 'x-admin-auth': localStorage.getItem('hoerdle_admin_auth') || '' },
                    body: formData,
                });

                console.log(`Response status for ${file.name}: ${res.status}`);

                if (res.ok) {
                    const data = await res.json();
                    console.log(`Upload successful for ${file.name}:`, data);
                    results.push({
                        filename: file.name,
                        success: true,
                        song: data.song,
                        validation: data.validation
                    });
                } else if (res.status === 409) {
                    // Duplicate detected
                    const data = await res.json();
                    console.log(`Duplicate detected for ${file.name}:`, data);
                    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();
                    console.error(`Upload failed for ${file.name} (${res.status}):`, errorText);
                    results.push({
                        filename: file.name,
                        success: false,
                        error: `Upload failed (${res.status}): ${errorText.substring(0, 100)}`
                    });
                }
            } catch (error) {
                console.error(`Network error for ${file.name}:`, error);
                results.push({
                    filename: file.name,
                    success: false,
                    error: `Network error: ${error instanceof Error ? error.message : 'Unknown error'}`
                });
            }
        }

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

        // Assign genres to successfully uploaded songs
        if (batchUploadGenreIds.length > 0) {
            const successfulUploads = results.filter(r => r.success && r.song);
            for (const result of successfulUploads) {
                try {
                    await fetch('/api/songs', {
                        method: 'PUT',
                        headers: getAuthHeaders(),
                        body: JSON.stringify({
                            id: result.song.id,
                            title: result.song.title,
                            artist: result.song.artist,
                            genreIds: batchUploadGenreIds
                        }),
                    });
                } catch (error) {
                    console.error(`Failed to assign genres to ${result.song.title}:`, error);
                }
            }
        }

        fetchSongs();
        fetchGenres();
        fetchSpecials(); // Update special counts

        // Auto-trigger categorization after uploads
        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;
        if (successCount > 0) {
            let msg = `✅ Uploaded ${successCount}/${files.length} songs successfully!`;
            if (duplicateCount > 0) {
                msg += `\n⚠️ Skipped ${duplicateCount} duplicate(s)`;
            }
            if (failedCount > 0) {
                msg += `\n❌ ${failedCount} failed`;
            }
            if (batchUploadGenreIds.length > 0) {
                const selectedGenreNames = genres
                    .filter(g => batchUploadGenreIds.includes(g.id))
                    .map(g => getLocalizedValue(g.name, activeTab))
                    .join(', ');
                msg += `\n🏷️ Assigned genres: ${selectedGenreNames}`;
            }
            msg += '\n\n🤖 Starting auto-categorization...';
            setMessage(msg);
            // Small delay to let user see the message
            setTimeout(() => {
                handleAICategorization();
            }, 1000);
        } else if (duplicateCount > 0 && failedCount === 0) {
            setMessage(`⚠️ All ${duplicateCount} file(s) were duplicates - nothing uploaded.`);
        } else {
            setMessage(`❌ All uploads failed.`);
        }
    };

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

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();
        e.dataTransfer.dropEffect = 'copy';
        if (!isDragging) setIsDragging(true);
    };

    const handleDragLeave = (e: React.DragEvent) => {
        e.preventDefault();
        e.stopPropagation();

        // Prevent flickering when dragging over children
        if (e.currentTarget.contains(e.relatedTarget as Node)) {
            return;
        }
        setIsDragging(false);
    };

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

        const droppedFiles = Array.from(e.dataTransfer.files);

        // Validate file types
        const validFiles: File[] = [];
        const invalidFiles: string[] = [];

        droppedFiles.forEach(file => {
            if (file.type === 'audio/mpeg' || file.name.toLowerCase().endsWith('.mp3')) {
                validFiles.push(file);
            } else {
                invalidFiles.push(`${file.name} (${file.type || 'unknown type'})`);
            }
        });

        if (invalidFiles.length > 0) {
            alert(`⚠️ The following files are not supported:\n\n${invalidFiles.join('\n')}\n\nOnly MP3 files are allowed.`);
        }

        if (validFiles.length > 0) {
            setFiles(validFiles);
        }
    };

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            const selectedFiles = Array.from(e.target.files);

            // Validate file types
            const validFiles: File[] = [];
            const invalidFiles: string[] = [];

            selectedFiles.forEach(file => {
                if (file.type === 'audio/mpeg' || file.name.toLowerCase().endsWith('.mp3')) {
                    validFiles.push(file);
                } else {
                    invalidFiles.push(`${file.name} (${file.type || 'unknown type'})`);
                }
            });

            if (invalidFiles.length > 0) {
                alert(`⚠️ The following files are not supported:\n\n${invalidFiles.join('\n')}\n\nOnly MP3 files are allowed.`);
            }

            if (validFiles.length > 0) {
                setFiles(validFiles);
            }
        }
    };

    const saveUploadedSongGenres = async () => {
        if (!uploadedSong) return;

        const res = await fetch('/api/songs', {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                id: uploadedSong.id,
                title: uploadedSong.title,
                artist: uploadedSong.artist,
                genreIds: uploadGenreIds
            }),
        });

        if (res.ok) {
            setUploadedSong(null);
            setUploadGenreIds([]);
            fetchSongs();
            fetchGenres();
            fetchSpecials(); // Update special counts if song was assigned to specials
            setMessage(prev => prev + '\n✅ Genres assigned successfully!');
        } else {
            alert('Failed to assign genres');
        }
    };

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

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

    const saveEditing = async (id: number) => {
        const res = await fetch('/api/songs', {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                id,
                title: editTitle,
                artist: editArtist,
                releaseYear: editReleaseYear === '' ? null : Number(editReleaseYear),
                genreIds: editGenreIds,
                specialIds: editSpecialIds,
                excludeFromGlobal: editExcludeFromGlobal
            }),
        });

        if (res.ok) {
            setEditingId(null);
            fetchSongs();
            fetchGenres();
            fetchSpecials(); // Update special counts
        } else {
            alert('Failed to update song');
        }
    };

    const handleDelete = async (id: number, title: string) => {
        if (!confirm(`Are you sure you want to delete "${title}"? This will also delete the file.`)) {
            return;
        }

        const res = await fetch('/api/songs', {
            method: 'DELETE',
            headers: getAuthHeaders(),
            body: JSON.stringify({ id }),
        });

        if (res.ok) {
            fetchSongs();
            fetchGenres();
            fetchSpecials(); // Update special counts
        } else {
            alert('Failed to delete song');
        }
    };

    const handlePlayPause = (song: Song) => {
        if (playingSongId === song.id) {
            // Pause current song
            audioElement?.pause();
            setPlayingSongId(null);
        } else {
            // Stop any currently playing song
            audioElement?.pause();

            // Play new song
            const audio = new Audio(`/api/audio/${song.filename}`);

            // Handle playback errors
            audio.onerror = () => {
                alert(`Failed to load audio file: ${song.filename}\nThe file may be corrupted or missing.`);
                setPlayingSongId(null);
                setAudioElement(null);
            };

            audio.play()
                .then(() => {
                    setAudioElement(audio);
                    setPlayingSongId(song.id);
                })
                .catch((error) => {
                    console.error('Playback error:', error);
                    alert(`Failed to play audio: ${error.message}`);
                    setPlayingSongId(null);
                    setAudioElement(null);
                });

            // Reset when song ends
            audio.onended = () => {
                setPlayingSongId(null);
                setAudioElement(null);
            };
        }
    };

    // Song Library ist in das Kuratoren-Dashboard umgezogen, daher keine Song-Filter/Pagination mehr im Admin nötig.

    if (!isAuthenticated) {
        return (
            <div className="container" style={{ justifyContent: 'center' }}>
                <h1 className="title" style={{ marginBottom: '1rem', fontSize: '1.5rem' }}>{t('login')}</h1>
                <input
                    type="password"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                    className="form-input"
                    style={{ marginBottom: '1rem', maxWidth: '300px' }}
                    placeholder={t('password')}
                />
                <button onClick={handleLogin} className="btn-primary">{t('loginButton')}</button>
            </div>
        );
    }

    return (
        <div className="admin-container">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
                <h1 className="title" style={{ margin: 0 }}>{t('title')}</h1>
                <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
                    <div style={{ display: 'flex', background: '#e5e7eb', borderRadius: '0.25rem', padding: '0.25rem' }}>
                        <button
                            type="button"
                            onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setActiveTab('de');
                            }}
                            style={{
                                padding: '0.25rem 0.75rem',
                                background: activeTab === 'de' ? 'white' : 'transparent',
                                borderRadius: '0.25rem',
                                border: 'none',
                                cursor: 'pointer',
                                fontWeight: activeTab === 'de' ? 'bold' : 'normal',
                                boxShadow: activeTab === 'de' ? '0 1px 2px rgba(0,0,0,0.1)' : 'none'
                            }}
                        >
                            DE
                        </button>
                        <button
                            type="button"
                            onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setActiveTab('en');
                            }}
                            style={{
                                padding: '0.25rem 0.75rem',
                                background: activeTab === 'en' ? 'white' : 'transparent',
                                borderRadius: '0.25rem',
                                border: 'none',
                                cursor: 'pointer',
                                fontWeight: activeTab === 'en' ? 'bold' : 'normal',
                                boxShadow: activeTab === 'en' ? '0 1px 2px rgba(0,0,0,0.1)' : 'none'
                            }}
                        >
                            EN
                        </button>
                    </div>
                    <button
                        onClick={handleLogout}
                        className="btn-secondary"
                        style={{
                            padding: '0.5rem 1rem',
                            backgroundColor: '#dc3545',
                            color: 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer',
                            fontSize: '0.9rem'
                        }}
                    >
                        🚪 {t('logout')}
                    </button>
                </div>
            </div>

            {/* Special Management */}
            <div className="admin-card" style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
                        {t('manageSpecials')}
                    </h2>
                    <button
                        onClick={() => setShowSpecials(!showSpecials)}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#f3f4f6',
                            border: '1px solid #d1d5db',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontSize: '0.875rem'
                        }}
                    >
                        {showSpecials ? t('hide') : t('show')}
                    </button>
                </div>
                {showSpecials && (
                    <>
                        <form onSubmit={handleCreateSpecial} style={{ marginBottom: '1rem' }} key={`special-form-${activeTab}`}>
                            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('name')}</label>
                                    <input type="text" placeholder={t('name')} value={newSpecialName[activeTab] || ''} onChange={e => setNewSpecialName({ ...newSpecialName, [activeTab]: e.target.value })} className="form-input" required key={`special-name-${activeTab}`} />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('subtitle')}</label>
                                    <input type="text" placeholder={t('subtitle')} value={newSpecialSubtitle[activeTab] || ''} onChange={e => setNewSpecialSubtitle({ ...newSpecialSubtitle, [activeTab]: e.target.value })} className="form-input" key={`special-subtitle-${activeTab}`} />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('maxAttempts')}</label>
                                    <input type="number" placeholder={t('maxAttempts')} value={newSpecialMaxAttempts} onChange={e => setNewSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                                        {t('unlockSteps')}
                                        {newSpecialUnlockStepsError && (
                                            <span
                                                title={newSpecialUnlockStepsError}
                                                style={{
                                                    color: '#ef4444',
                                                    cursor: 'help',
                                                    fontSize: '0.875rem'
                                                }}
                                            >
                                                ⚠️
                                            </span>
                                        )}
                                    </label>
                                    <input
                                        type="text"
                                        placeholder={t('unlockSteps')}
                                        value={newSpecialUnlockSteps}
                                        onChange={e => {
                                            const value = e.target.value;
                                            setNewSpecialUnlockSteps(value);
                                            const error = validateUnlockSteps(value);
                                            setNewSpecialUnlockStepsError(error);
                                        }}
                                        className="form-input"
                                        title={newSpecialUnlockStepsError || undefined}
                                        style={{
                                            width: '200px',
                                            borderColor: newSpecialUnlockStepsError ? '#ef4444' : undefined
                                        }}
                                    />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
                                    <input type="date" value={newSpecialLaunchDate} onChange={e => setNewSpecialLaunchDate(e.target.value)} className="form-input" />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('endDate')}</label>
                                    <input type="date" value={newSpecialEndDate} onChange={e => setNewSpecialEndDate(e.target.value)} className="form-input" />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                                    <input type="text" placeholder={t('curator')} value={newSpecialCurator} onChange={e => setNewSpecialCurator(e.target.value)} className="form-input" />
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column' }}>
                                    <label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
                                    <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
                                        <input
                                            type="checkbox"
                                            checked={newSpecialHidden}
                                            onChange={e => setNewSpecialHidden(e.target.checked)}
                                            style={{ width: '1rem', height: '1rem' }}
                                        />
                                        Hidden
                                    </label>
                                </div>
                                <button
                                    type="submit"
                                    className="btn-primary"
                                    style={{
                                        height: '38px',
                                        opacity: newSpecialUnlockStepsError ? 0.5 : 1,
                                        cursor: newSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
                                    }}
                                    disabled={!!newSpecialUnlockStepsError}
                                >
                                    {t('addSpecial')}
                                </button>
                            </div>
                        </form>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
                            {specials.map(special => (
                                <div
                                    key={special.id}
                                    style={{
                                        background: '#f3f4f6',
                                        padding: '0.25rem 0.75rem',
                                        borderRadius: '999px',
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: '0.5rem',
                                        fontSize: '0.875rem',
                                    }}
                                >
                                    <span>
                                        {special.hidden && <span title="Hidden from navigation">👁️‍🗨️</span>} {getLocalizedValue(special.name, activeTab)} ({special._count?.songs || 0})
                                    </span>
                                    {special.subtitle && (
                                        <span
                                            style={{
                                                fontSize: '0.75rem',
                                                color: '#666',
                                                marginLeft: '0.25rem',
                                            }}
                                        >
                                            - {getLocalizedValue(special.subtitle, activeTab)}
                                        </span>
                                    )}
                                    <button
                                        onClick={() => startEditSpecial(special)}
                                        className="btn-secondary"
                                        style={{ marginRight: '0.5rem' }}
                                    >
                                        {t('edit')}
                                    </button>
                                    <button
                                        onClick={() => handleDeleteSpecial(special.id)}
                                        className="btn-danger"
                                    >
                                        {t('delete')}
                                    </button>
                                </div>
                            ))}
                        </div>
                        {editingSpecialId !== null && (
                            <div style={{ marginTop: '1rem', padding: '1rem', background: '#f9fafb', borderRadius: '0.5rem' }}>
                                <h3>{t('editSpecial')}</h3>
                                <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'flex-end' }}>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('name')}</label>
                                        <input type="text" value={editSpecialName[activeTab] || ''} onChange={e => setEditSpecialName({ ...editSpecialName, [activeTab]: e.target.value })} className="form-input" key={`edit-special-name-${activeTab}`} />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('subtitle')}</label>
                                        <input type="text" value={editSpecialSubtitle[activeTab] || ''} onChange={e => setEditSpecialSubtitle({ ...editSpecialSubtitle, [activeTab]: e.target.value })} className="form-input" key={`edit-special-subtitle-${activeTab}`} />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('maxAttempts')}</label>
                                        <input type="number" value={editSpecialMaxAttempts} onChange={e => setEditSpecialMaxAttempts(Number(e.target.value))} className="form-input" min={1} style={{ width: '80px' }} />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                                            {t('unlockSteps')}
                                            {editSpecialUnlockStepsError && (
                                                <span
                                                    title={editSpecialUnlockStepsError}
                                                    style={{
                                                        color: '#ef4444',
                                                        cursor: 'help',
                                                        fontSize: '0.875rem'
                                                    }}
                                                >
                                                    ⚠️
                                                </span>
                                            )}
                                        </label>
                                        <input
                                            type="text"
                                            value={editSpecialUnlockSteps}
                                            onChange={e => {
                                                const value = e.target.value;
                                                setEditSpecialUnlockSteps(value);
                                                const error = validateUnlockSteps(value);
                                                setEditSpecialUnlockStepsError(error);
                                            }}
                                            className="form-input"
                                            title={editSpecialUnlockStepsError || undefined}
                                            style={{
                                                width: '200px',
                                                borderColor: editSpecialUnlockStepsError ? '#ef4444' : undefined
                                            }}
                                        />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('launchDate')}</label>
                                        <input type="date" value={editSpecialLaunchDate} onChange={e => setEditSpecialLaunchDate(e.target.value)} className="form-input" />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('endDate')}</label>
                                        <input type="date" value={editSpecialEndDate} onChange={e => setEditSpecialEndDate(e.target.value)} className="form-input" />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('curator')}</label>
                                        <input type="text" value={editSpecialCurator} onChange={e => setEditSpecialCurator(e.target.value)} className="form-input" />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666', visibility: 'hidden' }}>Hidden</label>
                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', height: '38px', cursor: 'pointer' }}>
                                            <input
                                                type="checkbox"
                                                checked={editSpecialHidden}
                                                onChange={e => setEditSpecialHidden(e.target.checked)}
                                                style={{ width: '1rem', height: '1rem' }}
                                            />
                                            Hidden
                                        </label>
                                    </div>
                                    <button
                                        onClick={saveEditedSpecial}
                                        className="btn-primary"
                                        style={{
                                            height: '38px',
                                            opacity: editSpecialUnlockStepsError ? 0.5 : 1,
                                            cursor: editSpecialUnlockStepsError ? 'not-allowed' : 'pointer'
                                        }}
                                        disabled={!!editSpecialUnlockStepsError}
                                    >
                                        {t('save')}
                                    </button>
                                    <button onClick={() => setEditingSpecialId(null)} className="btn-secondary" style={{ height: '38px' }}>{t('cancel')}</button>
                                </div>
                            </div>
                        )}
                    </>
                )}
            </div>

            {/* Genre Management */}
            <div className="admin-card" style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
                        {t('manageGenres')}
                    </h2>
                    <button
                        onClick={() => setShowGenres(!showGenres)}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#f3f4f6',
                            border: '1px solid #d1d5db',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontSize: '0.875rem'
                        }}
                    >
                        {showGenres ? t('hide') : t('show')}
                    </button>
                </div>
                {showGenres && (
                    <>
                        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
                            <input
                                type="text"
                                value={newGenreName[activeTab] || ''}
                                onChange={e => setNewGenreName({ ...newGenreName, [activeTab]: e.target.value })}
                                placeholder={t('newGenreName')}
                                className="form-input"
                                style={{ maxWidth: '200px' }}
                                key={`genre-name-${activeTab}`}
                            />
                            <input
                                type="text"
                                value={newGenreSubtitle[activeTab] || ''}
                                onChange={e => setNewGenreSubtitle({ ...newGenreSubtitle, [activeTab]: e.target.value })}
                                placeholder={t('subtitle')}
                                className="form-input"
                                style={{ maxWidth: '300px' }}
                                key={`genre-subtitle-${activeTab}`}
                            />
                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
                                <input
                                    type="checkbox"
                                    checked={newGenreActive}
                                    onChange={e => setNewGenreActive(e.target.checked)}
                                />
                                {t('active')}
                            </label>
                            <button onClick={createGenre} className="btn-primary">{t('addGenre')}</button>
                        </div>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
                            {genres.map(genre => (
                                <div key={genre.id} style={{
                                    background: genre.active ? '#f3f4f6' : '#fee2e2',
                                    opacity: genre.active ? 1 : 0.8,
                                    padding: '0.25rem 0.75rem',
                                    borderRadius: '999px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '0.5rem',
                                    fontSize: '0.875rem'
                                }}>
                                    <span>{getLocalizedValue(genre.name, activeTab)} ({genre._count?.songs || 0})</span>
                                    {genre.subtitle && <span style={{ fontSize: '0.75rem', color: '#666' }}>- {getLocalizedValue(genre.subtitle, activeTab)}</span>}
                                    <button onClick={() => startEditGenre(genre)} className="btn-secondary" style={{ padding: '0.1rem 0.5rem', fontSize: '0.75rem' }}>{t('edit')}</button>
                                    <button onClick={() => deleteGenre(genre.id)} className="btn-danger" style={{ padding: '0.1rem 0.5rem', fontSize: '0.75rem' }}>×</button>
                                </div>
                            ))}
                        </div>
                        {editingGenreId !== null && (
                            <div style={{ marginTop: '1rem', padding: '1rem', background: '#f9fafb', borderRadius: '0.5rem' }}>
                                <h3>{t('editGenre')}</h3>
                                <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end' }}>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('name')}</label>
                                        <input type="text" value={editGenreName[activeTab] || ''} onChange={e => setEditGenreName({ ...editGenreName, [activeTab]: e.target.value })} className="form-input" key={`edit-genre-name-${activeTab}`} />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <label style={{ fontSize: '0.75rem', color: '#666' }}>{t('subtitle')}</label>
                                        <input type="text" value={editGenreSubtitle[activeTab] || ''} onChange={e => setEditGenreSubtitle({ ...editGenreSubtitle, [activeTab]: e.target.value })} className="form-input" style={{ width: '300px' }} key={`edit-genre-subtitle-${activeTab}`} />
                                    </div>
                                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: '0.5rem' }}>
                                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
                                            <input
                                                type="checkbox"
                                                checked={editGenreActive}
                                                onChange={e => setEditGenreActive(e.target.checked)}
                                            />
                                            {t('active')}
                                        </label>
                                    </div>
                                    <button onClick={saveEditedGenre} className="btn-primary">{t('save')}</button>
                                    <button onClick={() => setEditingGenreId(null)} className="btn-secondary">{t('cancel')}</button>
                                </div>
                            </div>
                        )}

                        {/* AI Categorization */}
                        <div style={{ marginTop: '1.5rem', paddingTop: '1rem', borderTop: '1px solid #e5e7eb' }}>
                            <button
                                onClick={handleAICategorization}
                                disabled={isCategorizing || genres.length === 0}
                                className="btn-primary"
                                style={{
                                    opacity: isCategorizing || genres.length === 0 ? 0.5 : 1,
                                    cursor: isCategorizing || genres.length === 0 ? 'not-allowed' : 'pointer'
                                }}
                            >
                                {isCategorizing ? '🤖 Categorizing...' : '🤖 Auto-Categorize Songs with AI'}
                            </button>
                            {genres.length === 0 && (
                                <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
                                    Please create at least one genre first.
                                </p>
                            )}
                        </div>

                        {/* Categorization Results */}
                        {categorizationResults && (
                            <div style={{
                                marginTop: '1rem',
                                padding: '1rem',
                                background: '#f0fdf4',
                                border: '1px solid #86efac',
                                borderRadius: '0.5rem'
                            }}>
                                <h3 style={{ fontWeight: 'bold', marginBottom: '0.5rem', color: '#166534' }}>
                                    ✅ Categorization Complete
                                </h3>
                                <p style={{ fontSize: '0.875rem', marginBottom: '0.5rem' }}>
                                    {categorizationResults.message}
                                </p>
                                {categorizationResults.results && categorizationResults.results.length > 0 && (
                                    <div style={{ marginTop: '1rem' }}>
                                        <p style={{ fontWeight: 'bold', fontSize: '0.875rem', marginBottom: '0.5rem' }}>Updated Songs:</p>
                                        <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
                                            {categorizationResults.results.map((result: any) => (
                                                <div key={result.songId} style={{
                                                    padding: '0.5rem',
                                                    background: 'white',
                                                    borderRadius: '0.25rem',
                                                    marginBottom: '0.5rem',
                                                    fontSize: '0.875rem'
                                                }}>
                                                    <strong>{result.title}</strong> by {result.artist}
                                                    <div style={{ display: 'flex', gap: '0.25rem', marginTop: '0.25rem', flexWrap: 'wrap' }}>
                                                        {result.assignedGenres.map((genre: string) => (
                                                            <span key={genre} style={{
                                                                background: '#dbeafe',
                                                                padding: '0.1rem 0.4rem',
                                                                borderRadius: '0.25rem',
                                                                fontSize: '0.75rem'
                                                            }}>
                                                                {genre}
                                                            </span>
                                                        ))}
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                )}
                                <button
                                    onClick={() => setCategorizationResults(null)}
                                    style={{
                                        marginTop: '1rem',
                                        padding: '0.5rem 1rem',
                                        background: 'white',
                                        border: '1px solid #d1d5db',
                                        borderRadius: '0.25rem',
                                        cursor: 'pointer'
                                    }}
                                >
                                    Close
                                </button>
                            </div>
                        )}
                    </>
                )}
            </div>

            {/* News Management */}
            <div className="admin-card" style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
                        {t('manageNews')}
                    </h2>
                    <button
                        onClick={() => setShowNews(!showNews)}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#f3f4f6',
                            border: '1px solid #d1d5db',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontSize: '0.875rem'
                        }}
                    >
                        {showNews ? t('hide') : t('show')}
                    </button>
                </div>
                {showNews && (
                    <>
                        <form onSubmit={handleCreateNews} style={{ marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                <input
                                    type="text"
                                    value={newNewsTitle[activeTab] || ''}
                                    onChange={e => setNewNewsTitle({ ...newNewsTitle, [activeTab]: e.target.value })}
                                    placeholder={t('newsTitle')}
                                    className="form-input"
                                    required
                                    key={`news-title-${activeTab}`}
                                />
                                <textarea
                                    value={newNewsContent[activeTab] || ''}
                                    onChange={e => setNewNewsContent({ ...newNewsContent, [activeTab]: e.target.value })}
                                    placeholder={t('content')}
                                    className="form-input"
                                    rows={4}
                                    required
                                    style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
                                    key={`news-content-${activeTab}`}
                                />
                                <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
                                    <input
                                        type="text"
                                        value={newNewsAuthor}
                                        onChange={e => setNewNewsAuthor(e.target.value)}
                                        placeholder={t('author')}
                                        className="form-input"
                                        style={{ maxWidth: '200px' }}
                                    />
                                    <select
                                        value={newNewsSpecialId || ''}
                                        onChange={e => setNewNewsSpecialId(e.target.value ? Number(e.target.value) : null)}
                                        className="form-input"
                                        style={{ maxWidth: '200px' }}
                                    >
                                        <option value="">{t('noSpecialLink')}</option>
                                        {specials.map(s => (
                                            <option key={s.id} value={s.id}>{getLocalizedValue(s.name, activeTab)}</option>
                                        ))}
                                    </select>
                                    <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', cursor: 'pointer' }}>
                                        <input
                                            type="checkbox"
                                            checked={newNewsFeatured}
                                            onChange={e => setNewNewsFeatured(e.target.checked)}
                                        />
                                        {t('featured')}
                                    </label>
                                    <button type="submit" className="btn-primary">{t('addNews')}</button>
                                </div>
                            </div>
                        </form>

                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                            {news.map(newsItem => (
                                <div key={newsItem.id} style={{
                                    background: newsItem.featured ? '#fef3c7' : '#f3f4f6',
                                    padding: '0.75rem',
                                    borderRadius: '0.5rem',
                                    border: newsItem.featured ? '2px solid #f59e0b' : '1px solid #e5e7eb'
                                }}>
                                    {editingNewsId === newsItem.id ? (
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                            <input
                                                type="text"
                                                value={editNewsTitle[activeTab] || ''}
                                                onChange={e => setEditNewsTitle({ ...editNewsTitle, [activeTab]: e.target.value })}
                                                className="form-input"
                                                key={`edit-news-title-${activeTab}`}
                                            />
                                            <textarea
                                                value={editNewsContent[activeTab] || ''}
                                                onChange={e => setEditNewsContent({ ...editNewsContent, [activeTab]: e.target.value })}
                                                className="form-input"
                                                rows={4}
                                                style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
                                                key={`edit-news-content-${activeTab}`}
                                            />
                                            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
                                                <input
                                                    type="text"
                                                    value={editNewsAuthor}
                                                    onChange={e => setEditNewsAuthor(e.target.value)}
                                                    placeholder={t('author')}
                                                    className="form-input"
                                                    style={{ maxWidth: '200px' }}
                                                />
                                                <select
                                                    value={editNewsSpecialId || ''}
                                                    onChange={e => setEditNewsSpecialId(e.target.value ? Number(e.target.value) : null)}
                                                    className="form-input"
                                                    style={{ maxWidth: '200px' }}
                                                >
                                                    <option value="">{t('noSpecialLink')}</option>
                                                    {specials.map(s => (
                                                        <option key={s.id} value={s.id}>{getLocalizedValue(s.name, activeTab)}</option>
                                                    ))}
                                                </select>
                                                <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem' }}>
                                                    <input
                                                        type="checkbox"
                                                        checked={editNewsFeatured}
                                                        onChange={e => setEditNewsFeatured(e.target.checked)}
                                                    />
                                                    {t('featured')}
                                                </label>
                                                <button onClick={saveEditedNews} className="btn-primary">{t('save')}</button>
                                                <button onClick={() => setEditingNewsId(null)} className="btn-secondary">{t('cancel')}</button>
                                            </div>
                                        </div>
                                    ) : (
                                        <>
                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
                                                <div style={{ flex: 1 }}>
                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
                                                        {newsItem.featured && (
                                                            <span style={{
                                                                background: '#f59e0b',
                                                                color: 'white',
                                                                padding: '0.125rem 0.375rem',
                                                                borderRadius: '0.25rem',
                                                                fontSize: '0.625rem',
                                                                fontWeight: '600'
                                                            }}>
                                                                ⭐ FEATURED
                                                            </span>
                                                        )}
                                                        <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: '600' }}>{getLocalizedValue(newsItem.title, activeTab)}</h3>
                                                    </div>
                                                    <div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '0.5rem' }}>
                                                        {new Date(newsItem.publishedAt).toLocaleDateString('de-DE')}
                                                        {newsItem.author && ` • by ${newsItem.author}`}
                                                        {newsItem.special && ` • ★ ${getLocalizedValue(newsItem.special.name, activeTab)}`}
                                                    </div>
                                                    <p style={{ margin: 0, fontSize: '0.875rem', whiteSpace: 'pre-wrap' }}>
                                                        {getLocalizedValue(newsItem.content, activeTab).length > 150
                                                            ? getLocalizedValue(newsItem.content, activeTab).substring(0, 150) + '...'
                                                            : getLocalizedValue(newsItem.content, activeTab)}
                                                    </p>
                                                </div>
                                                <div style={{ display: 'flex', gap: '0.25rem', marginLeft: '1rem' }}>
                                                    <button onClick={() => startEditNews(newsItem)} className="btn-secondary" style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}>Edit</button>
                                                    <button onClick={() => handleDeleteNews(newsItem.id)} className="btn-danger" style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}>{t('delete')}</button>
                                                </div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            ))}
                            {news.length === 0 && (
                                <p style={{ color: '#666', fontSize: '0.875rem', textAlign: 'center', padding: '1rem' }}>
                                    {t('noNewsItems')}
                                </p>
                            )}
                        </div>
                    </>
                )}
            </div>

            {/* Political Statements Management */}
            <div className="admin-card" style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
                        Political Statements
                    </h2>
                    <button
                        onClick={() => setShowPoliticalStatements(!showPoliticalStatements)}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#f3f4f6',
                            border: '1px solid #d1d5db',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontSize: '0.875rem'
                        }}
                    >
                        {showPoliticalStatements ? t('hide') : t('show')}
                    </button>
                </div>
                {showPoliticalStatements && (
                    <>
                        {/* Language Tabs */}
                        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
                            {(['de', 'en'] as const).map(lang => (
                                <button
                                    key={lang}
                                    type="button"
                                    onClick={() => setPoliticalStatementsLocale(lang)}
                                    style={{
                                        padding: '0.4rem 0.8rem',
                                        borderRadius: '999px',
                                        border: '1px solid #d1d5db',
                                        background: politicalStatementsLocale === lang ? '#111827' : 'white',
                                        color: politicalStatementsLocale === lang ? 'white' : '#111827',
                                        fontSize: '0.8rem',
                                        cursor: 'pointer'
                                    }}
                                >
                                    {lang.toUpperCase()}
                                </button>
                            ))}
                        </div>

                        {/* Create Form */}
                        <form onSubmit={handleCreatePoliticalStatement} style={{ marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                <textarea
                                    value={newPoliticalStatementText}
                                    onChange={e => setNewPoliticalStatementText(e.target.value)}
                                    placeholder="Statement text"
                                    className="form-input"
                                    rows={3}
                                    required
                                />
                                <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
                                    <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem' }}>
                                        <input
                                            type="checkbox"
                                            checked={newPoliticalStatementActive}
                                            onChange={e => setNewPoliticalStatementActive(e.target.checked)}
                                        />
                                        Active
                                    </label>
                                    <button type="submit" className="btn-primary" style={{ fontSize: '0.875rem' }}>
                                        Add Statement ({politicalStatementsLocale.toUpperCase()})
                                    </button>
                                </div>
                            </div>
                        </form>

                        {/* List */}
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                            {politicalStatements
                                .filter(s => s.locale === politicalStatementsLocale)
                                .map(stmt => (
                                    <div
                                        key={`${stmt.locale}-${stmt.id}`}
                                        style={{
                                            background: stmt.active ? '#ecfdf5' : '#f3f4f6',
                                            padding: '0.75rem',
                                            borderRadius: '0.5rem',
                                            border: '1px solid #e5e7eb',
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5rem'
                                        }}
                                    >
                                        <textarea
                                            value={stmt.text}
                                            onChange={e => handleEditPoliticalStatementText(stmt.locale, stmt.id, e.target.value)}
                                            className="form-input"
                                            rows={3}
                                            style={{ fontSize: '0.85rem' }}
                                        />
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }}>
                                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.8rem' }}>
                                                <input
                                                    type="checkbox"
                                                    checked={stmt.active !== false}
                                                    onChange={e => handleEditPoliticalStatementActive(stmt.locale, stmt.id, e.target.checked)}
                                                />
                                                Active
                                            </label>
                                            <div style={{ display: 'flex', gap: '0.25rem' }}>
                                                <button
                                                    type="button"
                                                    className="btn-secondary"
                                                    style={{ padding: '0.25rem 0.6rem', fontSize: '0.75rem' }}
                                                    onClick={() => handleSavePoliticalStatement(stmt.locale, stmt.id)}
                                                >
                                                    Save
                                                </button>
                                                <button
                                                    type="button"
                                                    className="btn-danger"
                                                    style={{ padding: '0.25rem 0.6rem', fontSize: '0.75rem' }}
                                                    onClick={() => handleDeletePoliticalStatement(stmt.locale, stmt.id)}
                                                >
                                                    Delete
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            {politicalStatements.filter(s => s.locale === politicalStatementsLocale).length === 0 && (
                                <p style={{ color: '#666', fontSize: '0.875rem', textAlign: 'center', padding: '0.5rem' }}>
                                    No statements for this language yet.
                                </p>
                            )}
                        </div>
                    </>
                )}
            </div>

            {/* Curator Management */}
            <div className="admin-card" style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
                        {t('manageCurators')}
                    </h2>
                    <button
                        onClick={() => setShowCurators(!showCurators)}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#f3f4f6',
                            border: '1px solid #d1d5db',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontSize: '0.875rem'
                        }}
                    >
                        {showCurators ? t('hide') : t('show')}
                    </button>
                </div>
                {showCurators && (
                    <>
                        <form onSubmit={handleSaveCurator} style={{ marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
                                    <input
                                        type="text"
                                        value={curatorUsername}
                                        onChange={e => setCuratorUsername(e.target.value)}
                                        placeholder={t('curatorUsername')}
                                        className="form-input"
                                        style={{ minWidth: '200px', flex: '1 1 200px' }}
                                        required
                                    />
                                    <input
                                        type="password"
                                        value={curatorPassword}
                                        onChange={e => setCuratorPassword(e.target.value)}
                                        placeholder={t('curatorPassword')}
                                        className="form-input"
                                        style={{ minWidth: '200px', flex: '1 1 200px' }}
                                    />
                                    <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem' }}>
                                        <input
                                            type="checkbox"
                                            checked={curatorIsGlobal}
                                            onChange={e => setCuratorIsGlobal(e.target.checked)}
                                        />
                                        {t('isGlobalCurator')}
                                    </label>
                                </div>
                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
                                    <div style={{ flex: '1 1 200px' }}>
                                        <div style={{ fontWeight: 500, marginBottom: '0.25rem' }}>{t('assignedGenres')}</div>
                                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                            {genres.map(genre => (
                                                <label
                                                    key={genre.id}
                                                    style={{
                                                        display: 'flex',
                                                        alignItems: 'center',
                                                        gap: '0.25rem',
                                                        padding: '0.25rem 0.5rem',
                                                        borderRadius: '999px',
                                                        background: curatorGenreIds.includes(genre.id) ? '#e5f3ff' : '#f3f4f6',
                                                        fontSize: '0.8rem',
                                                        cursor: 'pointer'
                                                    }}
                                                >
                                                    <input
                                                        type="checkbox"
                                                        checked={curatorGenreIds.includes(genre.id)}
                                                        onChange={() => toggleCuratorGenre(genre.id)}
                                                    />
                                                    {typeof genre.name === 'string'
                                                        ? genre.name
                                                        : getLocalizedValue(genre.name, activeTab)}
                                                </label>
                                            ))}
                                        </div>
                                    </div>
                                    <div style={{ flex: '1 1 200px' }}>
                                        <div style={{ fontWeight: 500, marginBottom: '0.25rem' }}>{t('assignedSpecials')}</div>
                                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                            {specials.map(special => (
                                                <label
                                                    key={special.id}
                                                    style={{
                                                        display: 'flex',
                                                        alignItems: 'center',
                                                        gap: '0.25rem',
                                                        padding: '0.25rem 0.5rem',
                                                        borderRadius: '999px',
                                                        background: curatorSpecialIds.includes(special.id) ? '#fee2e2' : '#f3f4f6',
                                                        fontSize: '0.8rem',
                                                        cursor: 'pointer'
                                                    }}
                                                >
                                                    <input
                                                        type="checkbox"
                                                        checked={curatorSpecialIds.includes(special.id)}
                                                        onChange={() => toggleCuratorSpecial(special.id)}
                                                    />
                                                    {typeof special.name === 'string'
                                                        ? special.name
                                                        : getLocalizedValue(special.name, activeTab)}
                                                </label>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                                <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
                                    <button type="submit" className="btn-primary">
                                        {editingCuratorId ? t('save') : t('addCurator')}
                                    </button>
                                    {editingCuratorId && (
                                        <button
                                            type="button"
                                            className="btn-secondary"
                                            onClick={resetCuratorForm}
                                        >
                                            {t('cancel')}
                                        </button>
                                    )}
                                </div>
                            </div>
                        </form>

                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                            {curators.length === 0 && (
                                <p style={{ color: '#666', fontSize: '0.875rem' }}>{t('noCurators')}</p>
                            )}
                            {curators.map(curator => (
                                <div
                                    key={curator.id}
                                    style={{
                                        padding: '0.75rem',
                                        borderRadius: '0.5rem',
                                        border: '1px solid #e5e7eb',
                                        background: curator.isGlobalCurator ? '#eff6ff' : '#f9fafb',
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        gap: '0.5rem',
                                        flexWrap: 'wrap'
                                    }}
                                >
                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
                                        <div style={{ fontWeight: 600 }}>{curator.username}</div>
                                        <div style={{ fontSize: '0.8rem', color: '#4b5563' }}>
                                            {curator.isGlobalCurator && <span>Globaler Kurator · </span>}
                                            <span>
                                                {t('assignedGenres')}: {curator.genreIds.length}
                                            </span>
                                            {' · '}
                                            <span>
                                                {t('assignedSpecials')}: {curator.specialIds.length}
                                            </span>
                                        </div>
                                    </div>
                                    <div style={{ display: 'flex', gap: '0.25rem' }}>
                                        <button
                                            type="button"
                                            className="btn-secondary"
                                            style={{ padding: '0.25rem 0.6rem', fontSize: '0.8rem' }}
                                            onClick={() => startEditCurator(curator)}
                                        >
                                            {t('edit')}
                                        </button>
                                        <button
                                            type="button"
                                            className="btn-danger"
                                            style={{ padding: '0.25rem 0.6rem', fontSize: '0.8rem' }}
                                            onClick={() => handleDeleteCurator(curator.id)}
                                        >
                                            {t('delete')}
                                        </button>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </>
                )}
            </div>

            {/* Upload Songs wurde in das Kuratoren-Dashboard verlagert */}

            {/* Today's Daily Puzzles */}
            <div className="admin-card">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0 }}>
                        {t('todaysPuzzles')}
                    </h2>
                    <button
                        onClick={() => setShowDailyPuzzles(!showDailyPuzzles)}
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#f3f4f6',
                            border: '1px solid #d1d5db',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontSize: '0.875rem'
                        }}
                    >
                        {showDailyPuzzles ? '▼ Hide' : '▶ Show'}
                    </button>
                </div>
                {showDailyPuzzles && (dailyPuzzles.length === 0 ? (
                    <p style={{ color: '#6b7280' }}>{t('noPuzzlesToday')}</p>
                ) : (
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                        <thead>
                            <tr style={{ borderBottom: '2px solid #e5e7eb' }}>
                                <th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>{t('category')}</th>
                                <th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>{t('song')}</th>
                                <th style={{ padding: '0.75rem', textAlign: 'left', fontWeight: 'bold' }}>{t('artist')}</th>
                                <th style={{ padding: '0.75rem', textAlign: 'center', fontWeight: 'bold' }}>{t('actions')}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {dailyPuzzles.map(puzzle => (
                                <tr key={puzzle.id} style={{ borderBottom: '1px solid #e5e7eb' }}>
                                    <td style={{ padding: '0.75rem' }}>
                                        <span style={{
                                            background: puzzle.categoryType === 'global' ? '#dbeafe' : puzzle.categoryType === 'special' ? '#fce7f3' : '#f3f4f6',
                                            color: puzzle.categoryType === 'global' ? '#1e40af' : puzzle.categoryType === 'special' ? '#be185d' : '#374151',
                                            padding: '0.25rem 0.5rem',
                                            borderRadius: '0.25rem',
                                            fontSize: '0.875rem',
                                            fontWeight: '500'
                                        }}>
                                            {puzzle.category}
                                        </span>
                                    </td>
                                    <td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{puzzle.song.title}</td>
                                    <td style={{ padding: '0.75rem' }}>{puzzle.song.artist}</td>
                                    <td style={{ padding: '0.75rem', textAlign: 'center' }}>
                                        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'center' }}>
                                            <button
                                                onClick={() => handlePlayPuzzle(puzzle)}
                                                style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
                                                title={playingPuzzleId === puzzle.id ? "Pause" : "Play"}
                                            >
                                                {playingPuzzleId === puzzle.id ? '⏸️' : '▶️'}
                                            </button>
                                            <button
                                                onClick={() => handleDeletePuzzle(puzzle.id)}
                                                style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
                                                title={t('deletePuzzle')}
                                            >
                                                🗑️
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                ))}
            </div>

            {/* Song Library wurde in das Kuratoren-Dashboard verlagert */}

            <div className="admin-card" style={{ marginTop: '2rem', border: '1px solid #ef4444' }}>
                <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem', color: '#ef4444' }}>
                    Danger Zone
                </h2>
                <p style={{ marginBottom: '1rem', color: '#666' }}>
                    These actions are destructive and cannot be undone.
                </p>
                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
                    <button
                        onClick={async () => {
                            if (window.confirm('⚠️ WARNING: This will delete ALL data from the database (Songs, Genres, Specials, Puzzles) and re-import songs from the uploads folder.\n\nExisting genres and specials will be LOST and must be recreated manually.\n\nAre you sure you want to proceed?')) {
                                try {
                                    setMessage('Rebuilding database... this may take a while.');
                                    const res = await fetch('/api/admin/rebuild', { method: 'POST' });
                                    if (res.ok) {
                                        const data = await res.json();
                                        alert(data.message + '\n\nPlease recreate your Genres and Specials now.');
                                        window.location.reload();
                                    } else {
                                        alert('Rebuild failed. Check server logs.');
                                        setMessage('Rebuild failed.');
                                    }
                                } catch (e) {
                                    console.error(e);
                                    alert('Rebuild failed due to network error.');
                                }
                            }
                        }}
                        style={{
                            padding: '0.75rem 1.5rem',
                            background: '#ef4444',
                            color: 'white',
                            border: 'none',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontWeight: 'bold'
                        }}
                    >
                        ☢️ Rebuild Database
                    </button>

                    <button
                        onClick={async () => {
                            if (window.confirm('⚠️ WARNING: This will reset ALL user ratings for all songs to 0.\n\nThis action cannot be undone.\n\nAre you sure you want to proceed?')) {
                                try {
                                    setMessage('Resetting all ratings...');
                                    const res = await fetch('/api/admin/reset-ratings', {
                                        method: 'POST',
                                        headers: getAuthHeaders()
                                    });
                                    if (res.ok) {
                                        const data = await res.json();
                                        alert(data.message);
                                        fetchSongs();
                                        setMessage('');
                                    } else {
                                        alert('Failed to reset ratings. Check server logs.');
                                        setMessage('Reset failed.');
                                    }
                                } catch (e) {
                                    console.error(e);
                                    alert('Reset failed due to network error.');
                                    setMessage('');
                                }
                            }
                        }}
                        style={{
                            padding: '0.75rem 1.5rem',
                            background: '#f59e0b',
                            color: 'white',
                            border: 'none',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontWeight: 'bold'
                        }}
                    >
                        🔄 Reset All User Ratings
                    </button>

                    <button
                        onClick={async () => {
                            if (window.confirm('⚠️ WARNING: This will delete ALL daily puzzles (activations) from the database.\n\nThis means all songs will show 0 activations.\n\nThis action cannot be undone.\n\nAre you sure you want to proceed?')) {
                                try {
                                    setMessage('Resetting all activations...');
                                    const res = await fetch('/api/admin/reset-activations', {
                                        method: 'POST',
                                        headers: getAuthHeaders()
                                    });
                                    if (res.ok) {
                                        const data = await res.json();
                                        alert(data.message);
                                        fetchSongs();
                                        fetchDailyPuzzles();
                                        setMessage('');
                                    } else {
                                        alert('Failed to reset activations. Check server logs.');
                                        setMessage('Reset failed.');
                                    }
                                } catch (e) {
                                    console.error(e);
                                    alert('Reset failed due to network error.');
                                    setMessage('');
                                }
                            }
                        }}
                        style={{
                            padding: '0.75rem 1.5rem',
                            background: '#f59e0b',
                            color: 'white',
                            border: 'none',
                            borderRadius: '0.25rem',
                            cursor: 'pointer',
                            fontWeight: 'bold'
                        }}
                    >
                        🔄 Reset All Activations
                    </button>
                </div>
            </div>
        </div>
    );
}
