import { useQuery } from "@tanstack/react-query";
import { Session, Speaker } from "@shared/schema";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { format } from "date-fns";
import { Loader2, Calendar, MapPin, Clock, Users } from "lucide-react";
import { useLanguage } from "@/hooks/use-language";
import { useRoute } from "wouter";
import { QuestionForm } from "@/components/question/question-form"; //Potentially needs to be updated based on which QuestionForm is needed.

type SessionWithSpeakers = Session & {
  speakers: Speaker[];
};

export default function SessionDetailPage() {
  const { language, t } = useLanguage();
  const [, params] = useRoute("/sessions/:id");
  const sessionId = params?.id ? parseInt(params.id) : null;

  const { data: session, isLoading } = useQuery<SessionWithSpeakers>({
    queryKey: [`/api/sessions/${sessionId}`],
    enabled: !!sessionId,
  });

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

  if (!session) {
    return (
      <div className="text-center">
        <h2 className="text-2xl font-bold">
          {t("Session not found", "الجلسة غير موجودة")}
        </h2>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      <Card>
        <CardHeader>
          <CardTitle>
            {language === 'en' ? session.sessionTitle : session.sessionTitleAr}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <p className="text-muted-foreground">
              {language === 'en' ? session.sessionDescription : session.sessionDescriptionAr}
            </p>

            <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                {format(new Date(session.sessionDate), "PPP")}
              </div>
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4" />
                {format(new Date(`2000-01-01T${session.sessionTime}`), "p")}
              </div>
              <div className="flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                {language === 'en' ? session.venue : session.venueAr}
              </div>
            </div>

            {session.speakers?.length > 0 && (
              <div className="space-y-4">
                <h3 className="text-lg font-semibold flex items-center gap-2">
                  <Users className="h-4 w-4" />
                  {t("Speakers", "المتحدثون")}
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {session.speakers.map((speaker) => (
                    <Card key={speaker.id}>
                      <CardContent className="pt-6">
                        <div className="flex items-center gap-4">
                          <div className="w-16 h-16 rounded-full overflow-hidden border">
                            <img
                              src={speaker.imageUrl}
                              alt={language === 'en' ? speaker.name : speaker.nameAr}
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div>
                            <h4 className="font-semibold">
                              {language === 'en' ? speaker.name : speaker.nameAr}
                            </h4>
                            <p className="text-sm text-muted-foreground">
                              {language === 'en' ? speaker.title : speaker.titleAr}
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>{t("Ask a Question", "اطرح سؤالاً")}</CardTitle>
        </CardHeader>
        <CardContent>
          <QuestionForm sessionId={sessionId} />
        </CardContent>
      </Card>
    </div>
  );
}