import { useQuery } from "@tanstack/react-query";
import { Session, Transcription } from "@shared/schema";
import { useParams, useLocation } from "wouter";
import { useLanguage } from "@/hooks/use-language";
import { useAuth } from "@/hooks/use-auth";
import { Loader2 } from "lucide-react";
import ReactPlayer from "react-player";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card } from "@/components/ui/card";

const LiveStreamContent = ({session, transcriptions, t}: {
  session: Session, 
  transcriptions: Transcription[] | undefined, 
  t: any
}) => {
  return (
    <div className="container mx-auto p-6 space-y-8">
      <div className="text-center">
        <h1 className="text-3xl font-bold">{session.sessionTitle}</h1>
        <p className="text-muted-foreground" dir="rtl">
          {session.sessionTitleAr}
        </p>
      </div>

      {/* Video Player */}
      <div className="aspect-video rounded-lg overflow-hidden bg-muted">
        <ReactPlayer
          url={session.liveStreamUrl!}
          width="100%"
          height="100%"
          playing
          controls
        />
      </div>

      {/* Transcriptions */}
      <Tabs defaultValue="en" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="en">
            {t("English Transcription", "النص الإنجليزي")}
          </TabsTrigger>
          <TabsTrigger value="ar">
            {t("Arabic Transcription", "النص العربي")}
          </TabsTrigger>
        </TabsList>
        <TabsContent value="en">
          <Card className="p-4 space-y-4 max-h-[300px] overflow-y-auto">
            {transcriptions
              ?.sort((a, b) => 
                new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
              )
              .map((transcription) => (
                <div
                  key={transcription.id}
                  className="border-b last:border-0 pb-2 last:pb-0"
                >
                  <p>{transcription.translatedText}</p>
                  <time className="text-xs text-muted-foreground">
                    {new Date(transcription.createdAt).toLocaleTimeString()}
                  </time>
                </div>
              ))}
          </Card>
        </TabsContent>
        <TabsContent value="ar">
          <Card className="p-4 space-y-4 max-h-[300px] overflow-y-auto">
            {transcriptions
              ?.sort((a, b) => 
                new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
              )
              .map((transcription) => (
                <div
                  key={transcription.id}
                  className="border-b last:border-0 pb-2 last:pb-0"
                >
                  <p dir="rtl">{transcription.originalText}</p>
                  <time className="text-xs text-muted-foreground">
                    {new Date(transcription.createdAt).toLocaleTimeString()}
                  </time>
                </div>
              ))}
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}

export default function LiveStreamSinglePage() {
  const { id } = useParams<{ id: string }>();
  const { t } = useLanguage();
  const { user } = useAuth();

  // Query session details
  const { data: session, isLoading: loadingSession } = useQuery<Session>({
    queryKey: ["/api/sessions", id],
    enabled: !!id,
  });

  // Query approved transcriptions
  const { data: transcriptions } = useQuery<Transcription[]>({
    queryKey: ["/api/transcriptions"],
    select: (transcriptions) => 
      transcriptions?.filter(t => t.sessionId === Number(id) && t.status === "accepted"),
    refetchInterval: 5000, // Refresh every 5 seconds for real-time updates
  });

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

  if (!session) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen space-y-4">
        <h2 className="text-2xl font-bold">
          {t("Session Not Found", "الجلسة غير موجودة")}
        </h2>
      </div>
    );
  }

  return <LiveStreamContent session={session} transcriptions={transcriptions} t={t} />;
}