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();

export default async function Home() {
  const dailyPuzzle = await getOrCreateDailyPuzzle(null); // Global puzzle
  const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
  const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });

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

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

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

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