import { useQuery } from "@tanstack/react-query";
import { Speaker } from "@shared/schema";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Loader2 } from "lucide-react";
import { useLanguage } from "@/hooks/use-language";
import { useRoute } from "wouter";

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

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

  const speaker = speakers?.find(s => s.id === speakerId);

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

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

  return (
    <div className="container mx-auto py-8">
      <Card className="max-w-2xl mx-auto">
        <CardContent className="pt-6">
          <div className="flex flex-col items-center space-y-6">
            {/* Image Section */}
            <div className="w-48 h-48 rounded-full overflow-hidden border">
              <img
                src={speaker.imageUrl}
                alt={language === 'en' ? speaker.name : speaker.nameAr}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Name and Title Section */}
            <div className="text-center">
              <h1 className="text-3xl font-bold mb-2">
                {language === 'en' ? speaker.name : speaker.nameAr}
              </h1>
              <p className="text-xl text-muted-foreground">
                {language === 'en' ? speaker.title : speaker.titleAr}
              </p>
            </div>

            {/* Organization and Position */}
            <div className="text-center">
              <p className="text-lg">
                {language === 'en' ? speaker.organization : speaker.organizationAr}
              </p>
              <p className="text-lg text-muted-foreground">
                {language === 'en' ? speaker.position : speaker.positionAr}
              </p>
            </div>

            {/* Biography Section */}
            <div className="w-full">
              <h2 className="text-xl font-semibold mb-3 text-center">
                {t("Biography", "السيرة الذاتية")}
              </h2>
              <p className="text-muted-foreground text-center">
                {language === 'en' ? speaker.bio : speaker.bioAr}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}