import Game from '@/components/Game';
import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
import Link from 'next/link';
import { PrismaClient } from '@prisma/client';

export const dynamic = 'force-dynamic';

const prisma = new PrismaClient();

interface PageProps {
    params: Promise<{ genre: string }>;
}

export default async function GenrePage({ params }: PageProps) {
    const { genre } = await params;
    const decodedGenre = decodeURIComponent(genre);
    const dailyPuzzle = await getOrCreateDailyPuzzle(decodedGenre);
    const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
    const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });

    const now = new Date();
    const activeSpecials = specials.filter(s => {
        const isStarted = !s.launchDate || s.launchDate <= now;
        const isEnded = s.endDate && s.endDate < now;
        return isStarted && !isEnded;
    });

    const upcomingSpecials = specials.filter(s => {
        return s.launchDate && s.launchDate > now;
    });

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

                    {/* Genres */}
                    {genres.map(g => (
                        <Link
                            key={g.id}
                            href={`/${g.name}`}
                            style={{
                                fontWeight: g.name === decodedGenre ? 'bold' : 'normal',
                                textDecoration: g.name === decodedGenre ? 'underline' : 'none',
                                color: g.name === decodedGenre ? 'black' : '#4b5563'
                            }}
                        >
                            {g.name}
                        </Link>
                    ))}

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

                    {/* Specials */}
                    {activeSpecials.map(s => (
                        <Link
                            key={s.id}
                            href={`/special/${s.name}`}
                            style={{
                                color: '#be185d', // Pink-700
                                textDecoration: 'none',
                                fontWeight: '500'
                            }}
                        >
                            ★ {s.name}
                        </Link>
                    ))}
                </div>

                {/* Upcoming Specials */}
                {upcomingSpecials.length > 0 && (
                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
                        Coming soon: {upcomingSpecials.map(s => (
                            <span key={s.id} style={{ marginLeft: '0.5rem' }}>
                                ★ {s.name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString('de-DE', {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: 'numeric',
                                    timeZone: process.env.TZ
                                }) : ''})
                                {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
                            </span>
                        ))}
                    </div>
                )}
            </div>
            <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
        </>
    );
}