'use client';

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

interface CuratorSpecial {
    id: number;
    name: string | { de?: string; en?: string };
    songCount: number;
}

export default function CuratorSpecialsClient() {
    const router = useRouter();
    const pathname = usePathname();
    const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
    const intlLocale = useLocale() as 'de' | 'en';
    const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
    const t = useTranslations('Curator');

    const [specials, setSpecials] = useState<CuratorSpecial[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchSpecials = async () => {
            try {
                setLoading(true);
                const res = await fetch('/api/curator/specials', {
                    headers: getCuratorAuthHeaders(),
                });
                if (!res.ok) {
                    if (res.status === 403) {
                        setError(t('specialForbidden'));
                    } else {
                        setError('Failed to load specials');
                    }
                    return;
                }
                const data = await res.json();
                setSpecials(data);
            } catch (e) {
                setError('Failed to load specials');
            } finally {
                setLoading(false);
            }
        };

        fetchSpecials();
    }, [t]);

    if (loading) {
        return (
            <div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
                <p>{t('loading')}</p>
            </div>
        );
    }

    if (error) {
        return (
            <div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
                <p style={{ color: 'red' }}>{error}</p>
                <Link
                    href="/curator"
                    style={{
                        display: 'inline-block',
                        marginTop: '1rem',
                        padding: '0.5rem 1rem',
                        background: '#6b7280',
                        color: 'white',
                        textDecoration: 'none',
                        borderRadius: '0.375rem',
                        fontSize: '0.9rem',
                    }}
                >
                    {t('backToDashboard') || 'Back to Dashboard'}
                </Link>
            </div>
        );
    }

    return (
        <div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
            <header style={{ marginBottom: '2rem' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>
                        {t('curateSpecialsTitle') || 'Curate Specials'}
                    </h1>
                    <Link
                        href="/curator"
                        style={{
                            padding: '0.5rem 1rem',
                            background: '#6b7280',
                            color: 'white',
                            textDecoration: 'none',
                            borderRadius: '0.375rem',
                            fontSize: '0.9rem',
                        }}
                    >
                        {t('backToDashboard') || 'Back to Dashboard'}
                    </Link>
                </div>
            </header>

            {specials.length === 0 ? (
                <div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
                    <p>{t('noSpecialsAssigned') || 'No specials assigned to you.'}</p>
                </div>
            ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                    {specials.map((special) => (
                        <Link
                            key={special.id}
                            href={`/curator/specials/${special.id}`}
                            style={{
                                display: 'block',
                                padding: '1.5rem',
                                background: '#f9fafb',
                                border: '1px solid #e5e7eb',
                                borderRadius: '0.5rem',
                                textDecoration: 'none',
                                color: 'inherit',
                                transition: 'all 0.2s',
                            }}
                            onMouseEnter={(e) => {
                                e.currentTarget.style.background = '#f3f4f6';
                                e.currentTarget.style.borderColor = '#d1d5db';
                            }}
                            onMouseLeave={(e) => {
                                e.currentTarget.style.background = '#f9fafb';
                                e.currentTarget.style.borderColor = '#e5e7eb';
                            }}
                        >
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                <div>
                                    <h2 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#111827' }}>
                                        {getLocalizedValue(special.name, locale)}
                                    </h2>
                                    <p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
                                        {special.songCount} {special.songCount === 1 ? 'song' : 'songs'}
                                    </p>
                                </div>
                                <div style={{ fontSize: '1.5rem', color: '#10b981' }}>→</div>
                            </div>
                        </Link>
                    ))}
                </div>
            )}
        </div>
    );
}