import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ChevronDown, ChevronUp, Download } from "lucide-react";

const sessions = [
  {
    title: "Advanced Imaging Techniques",
    time: "1:00 PM - 4:00 PM",
    subSessions: [
      {
        title: "Deep Learning in MRI",
        speakers: ["Dr. Sarah Lee", "Dr. Omar Patel"],
      },
      {
        title: "AI in CT Scan Interpretation",
        speakers: ["Dr. Mei Lin"],
      },
      {
        title: "Radiomics and Predictive Analytics",
        speakers: ["Dr. Robert King", "Dr. Alicia Kim"],
      },
      {
        title: "Virtual Colonoscopy Advances",
        speakers: ["Dr. Chen Wu"],
      },
    ],
  },
  {
    title: "Interventional Radiology",
    time: "1:00 PM - 4:00 PM",
    subSessions: [
      {
        title: "Vascular Interventions",
        speakers: ["Dr. Helena Ortiz"],
      },
      {
        title: "Embolization Techniques",
        speakers: ["Dr. Jonas Meyer", "Dr. Priya Desai"],
      },
      {
        title: "Image-Guided Biopsies",
        speakers: ["Dr. Steven Rao"],
      },
      {
        title: "Thermal Ablation Innovations",
        speakers: ["Dr. Fatima Noor"]
      },
    ],
  },
  {
    title: "Pediatric Imaging",
    time: "1:00 PM - 4:00 PM",
    subSessions: [
      {
        title: "Neuroimaging in Pediatrics",
        speakers: ["Dr. Lena Ahmed"],
      },
      {
        title: "Pediatric Chest Radiography",
        speakers: ["Dr. Erik Johansson"],
      },
      {
        title: "Congenital Disorders Imaging",
        speakers: ["Dr. Ana Gomes", "Dr. Tim Ng"],
      },
      {
        title: "Sedation Protocols in Imaging",
        speakers: ["Dr. Rachel Singh"]
      },
    ],
  },
];

const speakerImages: Record<string, string> = {
  "Dr. Sarah Lee": "https://randomuser.me/api/portraits/women/44.jpg",
  "Dr. Omar Patel": "https://randomuser.me/api/portraits/men/45.jpg",
  "Dr. Mei Lin": "https://randomuser.me/api/portraits/women/46.jpg",
  "Dr. Robert King": "https://randomuser.me/api/portraits/men/47.jpg",
  "Dr. Alicia Kim": "https://randomuser.me/api/portraits/women/48.jpg",
  "Dr. Chen Wu": "https://randomuser.me/api/portraits/men/49.jpg",
  "Dr. Helena Ortiz": "https://randomuser.me/api/portraits/women/50.jpg",
  "Dr. Jonas Meyer": "https://randomuser.me/api/portraits/men/51.jpg",
  "Dr. Priya Desai": "https://randomuser.me/api/portraits/women/52.jpg",
  "Dr. Steven Rao": "https://randomuser.me/api/portraits/men/53.jpg",
  "Dr. Fatima Noor": "https://randomuser.me/api/portraits/women/54.jpg",
  "Dr. Lena Ahmed": "https://randomuser.me/api/portraits/women/55.jpg",
  "Dr. Erik Johansson": "https://randomuser.me/api/portraits/men/56.jpg",
  "Dr. Ana Gomes": "https://randomuser.me/api/portraits/women/57.jpg",
  "Dr. Tim Ng": "https://randomuser.me/api/portraits/men/58.jpg",
  "Dr. Rachel Singh": "https://randomuser.me/api/portraits/women/59.jpg",
};

const Speaker = ({ name }: { name: string }) => (
  <div className="flex items-center gap-2 mb-2">
    <img
      src={speakerImages[name] || "https://via.placeholder.com/40"}
      alt={name}
      className="rounded-full w-10 h-10"
    />
    <div className="flex flex-col">
      <span className="font-medium">{name}</span>
      <Button variant="outline" className="mt-1 text-sm h-7 px-2">
        <Download className="w-3 h-3 mr-1" /> Download Presentation
      </Button>
    </div>
  </div>
);

const SubSession = ({ title, speakers }: { title: string; speakers: string[] }) => (
  <Card className="my-2 bg-gray-50">
    <CardContent className="p-4">
      <h4 className="font-semibold mb-2">{title}</h4>
      {speakers.map((speaker, i) => (
        <Speaker key={i} name={speaker} />
      ))}
    </CardContent>
  </Card>
);

const SessionCard = ({ session }: { session: typeof sessions[0] }) => {
  const [expanded, setExpanded] = useState(true);

  return (
    <Card className="bg-white shadow-lg rounded-2xl">
      <CardContent className="p-4">
        <div className="flex justify-between items-center cursor-pointer" onClick={() => setExpanded(!expanded)}>
          <div>
            <h3 className="text-xl font-bold">{session.title}</h3>
            <p className="text-sm text-gray-600">{session.time}</p>
          </div>
          {expanded ? <ChevronUp /> : <ChevronDown />}
        </div>
        {expanded && (
          <div className="mt-4">
            {session.subSessions.map((ss, i) => (
              <SubSession key={i} title={ss.title} speakers={ss.speakers} />
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default function ConferenceAgenda() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6">
      {sessions.map((session, index) => (
        <SessionCard key={index} session={session} />
      ))}
    </div>
  );
}