import Game from '@/components/Game';
import NewsSection from '@/components/NewsSection';
import OnboardingTour from '@/components/OnboardingTour';
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({
    where: { active: true },
    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 id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
        <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
          <div className="tooltip">
            <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>Global</Link>
            <span className="tooltip-text">A random song from the entire collection</span>
          </div>

          {/* Genres */}
          {genres.map(g => (
            <div key={g.id} className="tooltip">
              <Link href={`/${g.name}`} style={{ color: '#4b5563', textDecoration: 'none' }}>
                {g.name}
              </Link>
              {g.subtitle && <span className="tooltip-text">{g.subtitle}</span>}
            </div>
          ))}

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

          {/* Active Specials */}
          {activeSpecials.map(s => (
            <div key={s.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div className="tooltip">
                <Link
                  href={`/special/${s.name}`}
                  style={{
                    color: '#be185d', // Pink-700
                    textDecoration: 'none',
                    fontWeight: '500'
                  }}
                >
                  ★ {s.name}
                </Link>
                {s.subtitle && <span className="tooltip-text">{s.subtitle}</span>}
              </div>
              {s.curator && (
                <span style={{ fontSize: '0.75rem', color: '#666' }}>
                  Curated by {s.curator}
                </span>
              )}
            </div>
          ))}
        </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>

      <div id="tour-news">
        <NewsSection />
      </div>

      <Game dailyPuzzle={dailyPuzzle} genre={null} />
      <OnboardingTour />
    </>
  );
}