FitnessApp/app/[tenant]/classes/page.tsx

export const dynamic = 'force-dynamic';
import React from 'react';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { prisma } from '@/lib/prisma';

interface PageProps {
  params: Promise<{ tenant: string }>;
}

export default async function TenantClassesPage({
  params }: PageProps) {
  const { tenant: tenantSlug } = await params;

  const tenant = await prisma.tenant.findUnique({
    where: { slug: tenantSlug },
    include: {
      classSessions: {
        orderBy: { startTime: 'asc' },
        include: {
          bookings: {
            include: { user: true },
          },
        },
      },
    },
  });

  if (!tenant) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-neutral-950 text-neutral-100 font-sans p-6 md:p-12">
      <div className="max-w-6xl mx-auto space-y-8">
        {/* Navigation Bar */}
        <div className="flex items-center justify-between border-b border-neutral-800 pb-4">
          <div className="flex items-center gap-3">
            <Link
              href="/"
              className="text-xs text-neutral-400 hover:text-white transition"
            >
              ← System Overview
            </Link>
            <span className="text-neutral-600">/</span>
            <span className="text-xs text-emerald-400 font-semibold uppercase tracking-wider">
              {tenant.name}
            </span>
          </div>

          <Link
            href={`/${tenantSlug}/instructor/classes`}
            className="text-xs px-3 py-1.5 rounded-lg bg-neutral-900 hover:bg-neutral-800 text-neutral-300 border border-neutral-800 transition flex items-center gap-1.5"
          >
            <span>Instructor Portal</span>
            <span>→</span>
          </Link>
        </div>

        {/* Header */}
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-white">Live Virtual Classes</h1>
          <p className="text-sm text-neutral-400 mt-1">
            Browse and join interactive, real-time fitness sessions powered by unbranded WebRTC.
          </p>
        </div>

        {/* Classes Grid */}
        <div className="space-y-4">
          {tenant.classSessions.length === 0 ? (
            <div className="bg-neutral-900 border border-dashed border-neutral-800 rounded-xl p-12 text-center">
              <p className="text-sm text-neutral-400">No classes currently scheduled for this gym.</p>
              <Link
                href={`/${tenantSlug}/instructor/classes`}
                className="mt-3 inline-block px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold rounded-lg transition"
              >
                Schedule Class in Instructor Portal
              </Link>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {tenant.classSessions.map((session) => (
                <div
                  key={session.id}
                  className="bg-neutral-900 border border-neutral-800 rounded-xl p-6 flex flex-col justify-between hover:border-neutral-700 transition"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-emerald-400 font-medium">Virtual Classroom</span>
                      <span className="text-[11px] font-mono text-neutral-500 bg-neutral-950 px-2 py-0.5 rounded border border-neutral-800">
                        {session.bookings.length} / {session.capacity} spots filled
                      </span>
                    </div>

                    <h3 className="text-lg font-bold text-white">{session.title}</h3>
                    {session.description && (
                      <p className="text-xs text-neutral-400 line-clamp-2">{session.description}</p>
                    )}

                    <div className="pt-2 text-xs text-neutral-500 font-mono space-y-0.5">
                      <div>Start: {new Date(session.startTime).toLocaleString()}</div>
                      <div>Room: {session.jitsiRoomId}</div>
                    </div>
                  </div>

                  <div className="mt-6 pt-4 border-t border-neutral-800/80 flex items-center justify-between gap-3">
                    <Link
                      href={`/${tenantSlug}/classroom/${session.id}?role=CLIENT`}
                      className="flex-1 text-center py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold rounded-lg shadow transition flex items-center justify-center gap-1.5"
                    >
                      <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
                      Join Live Classroom
                    </Link>

                    <Link
                      href={`/${tenantSlug}/classroom/${session.id}?role=INSTRUCTOR`}
                      className="px-3 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 text-xs font-medium rounded-lg transition"
                      title="Enter as Instructor / Host"
                    >
                      Host View
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}