import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import { getOrCreateSpecialPuzzle } from '@/lib/dailyPuzzle';
import { Link } from '@/lib/navigation';
import { PrismaClient } from '@prisma/client';
import { getLocalizedValue } from '@/lib/i18n';
import { getTranslations } from 'next-intl/server';

export const dynamic = 'force-dynamic';

const prisma = new PrismaClient();

interface PageProps {
    params: Promise<{ locale: string; name: string }>;
}

export default async function SpecialPage({ params }: PageProps) {
    const { locale, name } = await params;
    const decodedName = decodeURIComponent(name);
    const tNav = await getTranslations('Navigation');

    const allSpecials = await prisma.special.findMany();
    const currentSpecial = allSpecials.find(s => getLocalizedValue(s.name, locale) === decodedName);

    const now = new Date();
    const isStarted = currentSpecial && (!currentSpecial.launchDate || currentSpecial.launchDate <= now);
    const isEnded = currentSpecial && (currentSpecial.endDate && currentSpecial.endDate < now);

    if (!currentSpecial || !isStarted) {
        return (
            <div style={{ textAlign: 'center', padding: '2rem' }}>
                <h1>Special Not Available</h1>
                <p>This special has not launched yet or does not exist.</p>
                <Link href="/">{tNav('home')}</Link>
            </div>
        );
    }

    if (isEnded) {
        return (
            <div style={{ textAlign: 'center', padding: '2rem' }}>
                <h1>Special Ended</h1>
                <p>This special event has ended.</p>
                <Link href="/">{tNav('home')}</Link>
            </div>
        );
    }

    // Need to handle getOrCreateSpecialPuzzle with localized name or ID
    // Ideally pass ID or full object, but existing function takes name string.
    // I'll need to update lib/dailyPuzzle.ts to handle this.
    const dailyPuzzle = await getOrCreateSpecialPuzzle(currentSpecial);

    const genres = await prisma.genre.findMany({
        where: { active: true },
    });
    genres.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));

    const specials = allSpecials; // Already fetched
    specials.sort((a, b) => getLocalizedValue(a.name, locale).localeCompare(getLocalizedValue(b.name, locale)));

    const activeSpecials = specials.filter(s => {
        const sStarted = !s.launchDate || s.launchDate <= now;
        const sEnded = s.endDate && s.endDate < now;
        return sStarted && !sEnded;
    });

    return (
        <>
            <div style={{ textAlign: 'center', padding: '1rem', background: '#fce7f3' }}>
                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>{tNav('global')}</Link>

                    {/* Genres */}
                    {genres.map(g => {
                        const gName = getLocalizedValue(g.name, locale);
                        return (
                            <Link
                                key={g.id}
                                href={`/${gName}`}
                                style={{
                                    color: '#4b5563',
                                    textDecoration: 'none'
                                }}
                            >
                                {gName}
                            </Link>
                        );
                    })}

                    {/* Separator if both exist */}
                    {genres.length > 0 && activeSpecials.length > 0 && (
                        <span style={{ color: '#d1d5db' }}>|</span>
                    )}

                    {/* Specials */}
                    {activeSpecials.map(s => {
                        const sName = getLocalizedValue(s.name, locale);
                        return (
                            <Link
                                key={s.id}
                                href={`/special/${sName}`}
                                style={{
                                    fontWeight: sName === decodedName ? 'bold' : 'normal',
                                    textDecoration: sName === decodedName ? 'underline' : 'none',
                                    color: sName === decodedName ? '#9d174d' : '#be185d'
                                }}
                            >
                                ★ {sName}
                            </Link>
                        );
                    })}
                </div>
            </div>
            <NewsSection locale={locale} />
            <Game
                dailyPuzzle={dailyPuzzle}
                genre={decodedName}
                isSpecial={true}
                maxAttempts={dailyPuzzle?.maxAttempts}
                unlockSteps={dailyPuzzle?.unlockSteps}
            />
        </>
    );
}