import { notFound } from 'next/navigation';
import Link from 'next/link';
import { auth } from '@/lib/auth';
import { getWeatherSessionById } from '@/services/weather';
import { getUserTeams } from '@/services/teams';
import { WeatherBoard, WeatherLiveWrapper, WeatherInfoPanel } from '@/components/weather';
import { Badge } from '@/components/ui';
import { EditableWeatherTitle } from '@/components/ui/EditableWeatherTitle';

interface WeatherSessionPageProps {
  params: Promise<{ id: string }>;
}

export default async function WeatherSessionPage({ params }: WeatherSessionPageProps) {
  const { id } = await params;
  const authSession = await auth();

  if (!authSession?.user?.id) {
    return null;
  }

  const [session, userTeams] = await Promise.all([
    getWeatherSessionById(id, authSession.user.id),
    getUserTeams(authSession.user.id),
  ]);

  if (!session) {
    notFound();
  }

  return (
    <main className="mx-auto max-w-7xl px-4 py-8">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-2 text-sm text-muted mb-2">
          <Link href="/sessions?tab=weather" className="hover:text-foreground">
            Météo
          </Link>
          <span>/</span>
          <span className="text-foreground">{session.title}</span>
          {!session.isOwner && (
            <Badge variant="accent" className="ml-2">
              Partagé par {session.user.name || session.user.email}
            </Badge>
          )}
        </div>

        <div className="flex items-start justify-between">
          <div>
            <EditableWeatherTitle
              sessionId={session.id}
              initialTitle={session.title}
              isOwner={session.isOwner}
            />
          </div>
          <div className="flex items-center gap-3">
            <Badge variant="primary">{session.entries.length} membres</Badge>
            <span className="text-sm text-muted">
              {new Date(session.date).toLocaleDateString('fr-FR', {
                day: 'numeric',
                month: 'long',
                year: 'numeric',
              })}
            </span>
          </div>
        </div>
      </div>

      {/* Info sur les catégories */}
      <WeatherInfoPanel />

      {/* Live Wrapper + Board */}
      <WeatherLiveWrapper
        sessionId={session.id}
        sessionTitle={session.title}
        currentUserId={authSession.user.id}
        shares={session.shares}
        isOwner={session.isOwner}
        canEdit={session.canEdit}
        userTeams={userTeams}
      >
        <WeatherBoard
          sessionId={session.id}
          currentUserId={authSession.user.id}
          currentUser={{
            id: authSession.user.id,
            name: authSession.user.name ?? null,
            email: authSession.user.email ?? '',
          }}
          entries={session.entries}
          shares={session.shares}
          owner={{
            id: session.user.id,
            name: session.user.name ?? null,
            email: session.user.email ?? '',
          }}
          canEdit={session.canEdit}
        />
      </WeatherLiveWrapper>
    </main>
  );
}