import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useLanguage } from "@/hooks/use-language";
import { Session } from "@shared/schema";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { useAuth } from "@/hooks/use-auth";

export default function LiveStreamsPage() {
  const { t, language } = useLanguage();
  const { user } = useAuth();

  // Query active sessions with live streams
  const { data: sessions, isLoading: loadingSessions } = useQuery<Session[]>({
    queryKey: ["/api/sessions"],
    select: (sessions) => sessions.filter(session => {
      // Only show sessions with live stream URLs
      if (!session.liveStreamUrl) return false;

      // If it's a main session, show it to everyone
      if (session.sessionType === "main") return true;

      // For breakout sessions, only show if user is assigned to it
      if (session.sessionType === "breakout") {
        // Check if user has this session assigned
        return user?.sessionId === session.id;
      }

      return false;
    }),
  });

  if (loadingSessions) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    );
  }

  if (!sessions?.length) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
        <h2 className="text-2xl font-bold">
          {t("No Live Sessions", "لا توجد جلسات مباشرة")}
        </h2>
        <p className="text-muted-foreground">
          {t(
            "There are no live sessions available at the moment.",
            "لا توجد جلسات مباشرة متاحة في الوقت الحالي."
          )}
        </p>
        <Button asChild>
          <Link href="/sessions">
            {t("View All Sessions", "عرض جميع الجلسات")}
          </Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">
        {t("Live Sessions", "الجلسات المباشرة")}
      </h1>

      <div className="grid gap-6">
        {sessions.map((session) => (
          <Card key={session.id}>
            <CardHeader>
              <CardTitle>
                {language === 'ar' ? session.sessionTitleAr : session.sessionTitle}
                {session.sessionType === "breakout" && (
                  <span className="ml-2 text-sm text-muted-foreground">
                    {t("(Breakout Session)", "(جلسة منفصلة)")}
                  </span>
                )}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <p className="font-medium">{t("Venue", "المكان")}</p>
                  <p>{language === 'ar' ? session.venueAr : session.venue}</p>
                </div>
                <div>
                  <p className="font-medium">{t("Time", "الوقت")}</p>
                  <p>{new Date(session.sessionDate + ' ' + session.sessionTime).toLocaleString(
                    language === 'ar' ? 'ar-SA' : 'en-US'
                  )}</p>
                </div>
              </div>

              <Button asChild className="w-full">
                <Link href={`/live-streams/${session.id}`}>
                  {t("Watch Live Stream", "مشاهدة البث المباشر")}
                </Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}