import { useQuery } from "@tanstack/react-query";
import { Session, Speaker } from "@shared/schema";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { format } from "date-fns";
import { Loader2, Calendar, MapPin, Clock, Users, ChevronRight } from "lucide-react";
import { useLanguage } from "@/hooks/use-language";
import { Link } from "wouter";

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

export default function SessionsPage() {
  const { language, t } = useLanguage();

  const { data: sessions, isLoading } = useQuery<SessionWithSpeakers[]>({
    queryKey: ["/api/sessions"],
  });

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

  // Sort sessions by date and time
  const sortedSessions = sessions?.sort((a, b) => {
    const dateA = new Date(`${a.sessionDate}T${a.sessionTime}`);
    const dateB = new Date(`${b.sessionDate}T${b.sessionTime}`);
    return dateA.getTime() - dateB.getTime();
  });

  return (
    <div className="space-y-8">
      <h1 className="text-3xl font-bold">
        {t("Program", "البرنامج")}
      </h1>

      <div className="space-y-4">
        {sortedSessions?.map((session) => (
          <Card key={session.id}>
            <CardContent className="pt-6">
              <div className="space-y-4">
                <div>
                  <h3 className="text-xl font-semibold mb-2">
                    {language === 'en' ? session.sessionTitle : session.sessionTitleAr}
                  </h3>
                  <div className="grid md:grid-cols-3 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>
                </div>

                {session.speakers?.length > 0 && (
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Users className="h-4 w-4" />
                      {t("Speakers", "المتحدثون")}:
                    </div>
                    <div className="flex flex-wrap gap-4">
                      {session.speakers.map((speaker) => (
                        <div key={speaker.id} className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded-full overflow-hidden">
                            <img
                              src={speaker.imageUrl}
                              alt={language === 'en' ? speaker.name : speaker.nameAr}
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div>
                            <div className="font-medium">
                              {language === 'en' ? speaker.name : speaker.nameAr}
                            </div>
                            <div className="text-sm text-muted-foreground">
                              {language === 'en' ? speaker.title : speaker.titleAr}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                <div className="flex justify-end pt-4">
                  <Button asChild>
                    <Link href={`/sessions/${session.id}`}>
                      {t("View Details", "عرض التفاصيل")}
                      <ChevronRight className={`h-4 w-4 ${language === 'ar' ? 'rotate-180 me-2' : 'ms-2'}`} />
                    </Link>
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}