workshop-manager/src/app/sessions/page.tsx

import { Suspense } from 'react';
import { auth } from '@/lib/auth';
import {
  getSessionsByUserId,
  getTeamCollaboratorSessionsForAdmin as getTeamSwotSessions,
} from '@/services/sessions';
import {
  getMotivatorSessionsByUserId,
  getTeamCollaboratorSessionsForAdmin as getTeamMotivatorSessions,
} from '@/services/moving-motivators';
import {
  getYearReviewSessionsByUserId,
  getTeamCollaboratorSessionsForAdmin as getTeamYearReviewSessions,
} from '@/services/year-review';
import {
  getWeeklyCheckInSessionsByUserId,
  getTeamCollaboratorSessionsForAdmin as getTeamWeeklyCheckInSessions,
} from '@/services/weekly-checkin';
import {
  getWeatherSessionsByUserId,
  getTeamCollaboratorSessionsForAdmin as getTeamWeatherSessions,
} from '@/services/weather';
import {
  getGifMoodSessionsByUserId,
  getTeamCollaboratorSessionsForAdmin as getTeamGifMoodSessions,
} from '@/services/gif-mood';
import { Card, PageHeader } from '@/components/ui';
import { withWorkshopType } from '@/lib/workshops';
import { WorkshopTabs } from './WorkshopTabs';
import { NewWorkshopDropdown } from './NewWorkshopDropdown';

function WorkshopTabsSkeleton() {
  return (
    <div className="space-y-6">
      {/* Tabs skeleton */}
      <div className="flex gap-2 pb-2">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="h-9 w-28 bg-card animate-pulse rounded-full" />
        ))}
      </div>
      {/* Cards skeleton */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="h-44 bg-card animate-pulse rounded-xl" />
        ))}
      </div>
    </div>
  );
}

export default async function SessionsPage() {
  const session = await auth();

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

  // Fetch sessions (owned + shared) and team collab sessions (for team admins, non-shared)
  const [
    swotSessions,
    motivatorSessions,
    yearReviewSessions,
    weeklyCheckInSessions,
    weatherSessions,
    gifMoodSessions,
    teamSwotSessions,
    teamMotivatorSessions,
    teamYearReviewSessions,
    teamWeeklyCheckInSessions,
    teamWeatherSessions,
    teamGifMoodSessions,
  ] = await Promise.all([
    getSessionsByUserId(session.user.id),
    getMotivatorSessionsByUserId(session.user.id),
    getYearReviewSessionsByUserId(session.user.id),
    getWeeklyCheckInSessionsByUserId(session.user.id),
    getWeatherSessionsByUserId(session.user.id),
    getGifMoodSessionsByUserId(session.user.id),
    getTeamSwotSessions(session.user.id),
    getTeamMotivatorSessions(session.user.id),
    getTeamYearReviewSessions(session.user.id),
    getTeamWeeklyCheckInSessions(session.user.id),
    getTeamWeatherSessions(session.user.id),
    getTeamGifMoodSessions(session.user.id),
  ]);

  // Add workshopType to each session for unified display
  const allSwotSessions = withWorkshopType(swotSessions, 'swot');
  const allMotivatorSessions = withWorkshopType(motivatorSessions, 'motivators');
  const allYearReviewSessions = withWorkshopType(yearReviewSessions, 'year-review');
  const allWeeklyCheckInSessions = withWorkshopType(weeklyCheckInSessions, 'weekly-checkin');
  const allWeatherSessions = withWorkshopType(weatherSessions, 'weather');
  const allGifMoodSessions = withWorkshopType(gifMoodSessions, 'gif-mood');

  const teamSwotWithType = withWorkshopType(teamSwotSessions, 'swot');
  const teamMotivatorWithType = withWorkshopType(teamMotivatorSessions, 'motivators');
  const teamYearReviewWithType = withWorkshopType(teamYearReviewSessions, 'year-review');
  const teamWeeklyCheckInWithType = withWorkshopType(teamWeeklyCheckInSessions, 'weekly-checkin');
  const teamWeatherWithType = withWorkshopType(teamWeatherSessions, 'weather');
  const teamGifMoodWithType = withWorkshopType(teamGifMoodSessions, 'gif-mood');

  // Combine and sort by updatedAt
  const allSessions = [
    ...allSwotSessions,
    ...allMotivatorSessions,
    ...allYearReviewSessions,
    ...allWeeklyCheckInSessions,
    ...allWeatherSessions,
    ...allGifMoodSessions,
  ].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());

  const hasNoSessions = allSessions.length === 0;
  const totalCount = allSessions.length;

  return (
    <main className="mx-auto max-w-7xl px-4">
      <PageHeader
        emoji="🗂️"
        title="Mes Ateliers"
        subtitle={
          totalCount > 0
            ? `${totalCount} atelier${totalCount > 1 ? 's' : ''} · Tous vos ateliers en un seul endroit`
            : 'Tous vos ateliers en un seul endroit'
        }
        actions={<NewWorkshopDropdown />}
      />

      {/* Content */}
      {hasNoSessions ? (
        <Card className="p-12 text-center">
          <div className="text-5xl mb-4">🚀</div>
          <h2 className="text-xl font-semibold text-foreground mb-2">
            Commencez votre premier atelier
          </h2>
          <p className="text-muted mb-6 max-w-md mx-auto">
            Créez un atelier SWOT pour analyser les forces et faiblesses, un Moving Motivators pour
            découvrir les motivations, un Year Review pour faire le bilan de l&apos;année, ou un
            Weekly Check-in pour le suivi hebdomadaire.
          </p>
          <div className="flex justify-center">
            <NewWorkshopDropdown />
          </div>
        </Card>
      ) : (
        <Suspense fallback={<WorkshopTabsSkeleton />}>
          <WorkshopTabs
            swotSessions={allSwotSessions}
            motivatorSessions={allMotivatorSessions}
            yearReviewSessions={allYearReviewSessions}
            weeklyCheckInSessions={allWeeklyCheckInSessions}
            weatherSessions={allWeatherSessions}
            gifMoodSessions={allGifMoodSessions}
            teamCollabSessions={[
              ...teamSwotWithType,
              ...teamMotivatorWithType,
              ...teamYearReviewWithType,
              ...teamWeeklyCheckInWithType,
              ...teamWeatherWithType,
              ...teamGifMoodWithType,
            ]}
          />
        </Suspense>
      )}
    </main>
  );
}