import { notFound } from 'next/navigation';
import { auth } from '@/lib/auth';
import { getGifMoodSessionById } from '@/services/gif-mood';
import { getUserTeams } from '@/services/teams';
import { GifMoodBoard, GifMoodLiveWrapper } from '@/components/gif-mood';
import { Badge, SessionPageHeader } from '@/components/ui';

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

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

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

  const session = await getGifMoodSessionById(id, authSession.user.id);

  if (!session) {
    notFound();
  }

  const userTeams = await getUserTeams(authSession.user.id);

  return (
    <main className="mx-auto max-w-7xl px-4">
      <SessionPageHeader
        workshopType="gif-mood"
        sessionId={session.id}
        sessionTitle={session.title}
        isOwner={session.isOwner}
        canEdit={session.canEdit}
        ownerUser={session.user}
        date={session.date}
        badges={<Badge variant="primary">{session.items.length} GIFs</Badge>}
      />

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