"use client";

import { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import {
  Calendar,
  Clock,
  User,
  Video,
  CalendarCheck,
  X,
  Loader2,
  ArrowLeft,
  Mail,
  Phone as PhoneIcon,
  MessageSquare,
  CheckCircle2,
  ExternalLink,
  Copy,
  MapPin,
} from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider";
import { getAppointmentDetail, scheduleAppointment, rejectAppointment, listAppointments, startMeeting, endMeeting } from "@/lib/actions/appointments";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { ScheduleAppointmentDialog } from "@/components/ScheduleAppointmentDialog";
import { toast } from "sonner";
import type { Appointment } from "@/lib/models/appointments";

export default function AppointmentDetailPage() {
  const params = useParams();
  const router = useRouter();
  const appointmentId = params.id as string;
  
  const [appointment, setAppointment] = useState<Appointment | null>(null);
  const [loading, setLoading] = useState(true);
  const [scheduleDialogOpen, setScheduleDialogOpen] = useState(false);
  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
  const [scheduledDate, setScheduledDate] = useState<Date | undefined>(undefined);
  const [scheduledTime, setScheduledTime] = useState<string>("09:00");
  const [scheduledDuration, setScheduledDuration] = useState<number>(60);
  const [rejectionReason, setRejectionReason] = useState<string>("");
  const [isScheduling, setIsScheduling] = useState(false);
  const [isRejecting, setIsRejecting] = useState(false);
  const [isStartingMeeting, setIsStartingMeeting] = useState(false);
  const [isEndingMeeting, setIsEndingMeeting] = useState(false);
  const { theme } = useAppTheme();
  const isDark = theme === "dark";

  useEffect(() => {
    const fetchAppointment = async () => {
      if (!appointmentId) return;
      
      setLoading(true);
      try {
        // Fetch both detail and list to get selected_slots from list endpoint
        const [detailData, listData] = await Promise.all([
          getAppointmentDetail(appointmentId),
          listAppointments().catch(() => []) // Fallback to empty array if list fails
        ]);
        
        // Find matching appointment in list to get selected_slots
        const listAppointment = Array.isArray(listData) 
          ? listData.find((apt: Appointment) => apt.id === appointmentId)
          : null;
        
        // Merge selected_slots from list into detail data
        if (listAppointment && listAppointment.selected_slots && Array.isArray(listAppointment.selected_slots) && listAppointment.selected_slots.length > 0) {
          detailData.selected_slots = listAppointment.selected_slots;
        }
        
        setAppointment(detailData);
      } catch (error) {
        toast.error("Failed to load appointment details");
        router.push("/admin/booking");
      } finally {
        setLoading(false);
      }
    };

    fetchAppointment();
  }, [appointmentId, router]);

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      month: "long",
      day: "numeric",
      year: "numeric",
    });
  };

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleTimeString("en-US", {
      hour: "numeric",
      minute: "2-digit",
      hour12: true,
    });
  };

  const formatShortDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const getStatusColor = (status: string) => {
    const normalized = status.toLowerCase();
    if (isDark) {
      switch (normalized) {
        case "scheduled":
          return "bg-blue-500/20 text-blue-300 border-blue-500/30";
        case "completed":
          return "bg-green-500/20 text-green-300 border-green-500/30";
        case "rejected":
        case "cancelled":
          return "bg-red-500/20 text-red-300 border-red-500/30";
        case "pending_review":
        case "pending":
          return "bg-yellow-500/20 text-yellow-300 border-yellow-500/30";
        default:
          return "bg-gray-700 text-gray-200 border-gray-600";
      }
    }
    switch (normalized) {
      case "scheduled":
        return "bg-blue-50 text-blue-700 border-blue-200";
      case "completed":
        return "bg-green-50 text-green-700 border-green-200";
      case "rejected":
      case "cancelled":
        return "bg-red-50 text-red-700 border-red-200";
      case "pending_review":
      case "pending":
        return "bg-yellow-50 text-yellow-700 border-yellow-200";
      default:
        return "bg-gray-100 text-gray-700 border-gray-300";
    }
  };

  const formatStatus = (status: string) => {
    return status.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase());
  };


  const handleSchedule = async () => {
    if (!appointment || !scheduledDate) return;

    setIsScheduling(true);
    try {
      const dateTime = new Date(scheduledDate);
      const [hours, minutes] = scheduledTime.split(":").map(Number);
      dateTime.setHours(hours, minutes, 0, 0);

      await scheduleAppointment(appointment.id, {
        scheduled_datetime: dateTime.toISOString(),
        scheduled_duration: scheduledDuration,
      });

      toast.success("Appointment scheduled successfully");
      setScheduleDialogOpen(false);
      
      // Refresh appointment data
      const updated = await getAppointmentDetail(appointment.id);
      setAppointment(updated);
    } catch (error: any) {
      toast.error(error.message || "Failed to schedule appointment");
    } finally {
      setIsScheduling(false);
    }
  };

  const handleReject = async () => {
    if (!appointment) return;

    setIsRejecting(true);
    try {
      await rejectAppointment(appointment.id, {
        rejection_reason: rejectionReason || undefined,
      });

      toast.success("Appointment rejected successfully");
      setRejectDialogOpen(false);
      
      // Refresh appointment data
      const updated = await getAppointmentDetail(appointment.id);
      setAppointment(updated);
    } catch (error: any) {
      toast.error(error.message || "Failed to reject appointment");
    } finally {
      setIsRejecting(false);
    }
  };

  const copyToClipboard = (text: string, label: string) => {
    navigator.clipboard.writeText(text);
    toast.success(`${label} copied to clipboard`);
  };

  const handleStartMeeting = async () => {
    if (!appointment) return;

    setIsStartingMeeting(true);
    try {
      const updated = await startMeeting(appointment.id);
      setAppointment(updated);
      toast.success("Meeting started successfully");
    } catch (error: any) {
      toast.error(error.message || "Failed to start meeting");
    } finally {
      setIsStartingMeeting(false);
    }
  };

  const handleEndMeeting = async () => {
    if (!appointment) return;

    setIsEndingMeeting(true);
    try {
      const updated = await endMeeting(appointment.id);
      setAppointment(updated);
      toast.success("Meeting ended successfully");
    } catch (error: any) {
      toast.error(error.message || "Failed to end meeting");
    } finally {
      setIsEndingMeeting(false);
    }
  };

  if (loading) {
    return (
      <div className={`min-h-[calc(100vh-4rem)] flex items-center justify-center ${isDark ? "bg-gray-900" : "bg-gray-50"}`}>
        <div className="text-center">
          <Loader2 className={`w-12 h-12 animate-spin mx-auto mb-4 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
          <p className={`text-sm ${isDark ? "text-gray-400" : "text-gray-600"}`}>Loading appointment details...</p>
        </div>
      </div>
    );
  }

  if (!appointment) {
    return (
      <div className={`min-h-[calc(100vh-4rem)] flex items-center justify-center ${isDark ? "bg-gray-900" : "bg-gray-50"}`}>
        <div className="text-center">
          <p className={`text-lg mb-4 ${isDark ? "text-gray-400" : "text-gray-600"}`}>Appointment not found</p>
          <Button
            onClick={() => router.push("/admin/booking")}
            className="bg-rose-600 hover:bg-rose-700 text-white"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Bookings
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen ${isDark ? "bg-gray-900" : "bg-gray-50"}`}>
      <main className="p-3 sm:p-4 md:p-6 lg:p-8">
        {/* Page Header */}
        <div className="mb-4 sm:mb-6 flex flex-col gap-3 sm:gap-4">
          <Button
            variant="ghost"
            onClick={() => router.push("/admin/booking")}
            className={`flex items-center gap-2 w-fit ${isDark ? "text-gray-300 hover:bg-gray-800 hover:text-white" : "text-gray-600 hover:bg-gray-100"}`}
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Bookings
          </Button>
          
          <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <div className={`h-12 w-12 sm:h-16 sm:w-16 rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold ${isDark ? "bg-gradient-to-br from-rose-500 to-pink-600 text-white" : "bg-gradient-to-br from-rose-100 to-pink-100 text-rose-600"}`}>
                  {appointment.first_name[0]}{appointment.last_name[0]}
                </div>
                <div>
                  <h1 className={`text-2xl sm:text-3xl lg:text-4xl font-bold ${isDark ? "text-white" : "text-gray-900"}`}>
                    {appointment.first_name} {appointment.last_name}
                  </h1>
                  <p className={`text-xs sm:text-sm mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                    Appointment Request
                  </p>
                </div>
              </div>
            </div>
            
            <div className="flex items-center gap-3">
              <span
                className={`px-3 sm:px-4 py-2 inline-flex items-center gap-2 text-xs sm:text-sm font-semibold rounded-full border ${getStatusColor(
                  appointment.status
                )}`}
              >
                {appointment.status === "scheduled" && <CheckCircle2 className="w-3 h-3 sm:w-4 sm:h-4" />}
                {formatStatus(appointment.status)}
              </span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Content - Left Column (2/3) */}
          <div className="lg:col-span-2 space-y-6">
            {/* Patient Information Card */}
            <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
              <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
                <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? "text-white" : "text-gray-900"}`}>
                  <User className={`w-5 h-5 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
                  Patient Information
                </h2>
              </div>
              <div className="p-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div className="space-y-1">
                    <p className={`text-xs font-medium uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                      Full Name
                    </p>
                    <p className={`text-base font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
                      {appointment.first_name} {appointment.last_name}
                    </p>
                  </div>
                  <div className="space-y-1">
                    <p className={`text-xs font-medium uppercase tracking-wider flex items-center gap-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                      <Mail className="w-3 h-3" />
                      Email Address
                    </p>
                    <div className="flex items-center gap-2">
                      <p className={`text-base font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
                        {appointment.email}
                      </p>
                      <button
                        onClick={() => copyToClipboard(appointment.email, "Email")}
                        className={`p-1.5 rounded-lg hover:bg-opacity-80 transition-colors ${isDark ? "hover:bg-gray-700" : "hover:bg-gray-100"}`}
                        title="Copy email"
                      >
                        <Copy className={`w-4 h-4 ${isDark ? "text-gray-400" : "text-gray-500"}`} />
                      </button>
                    </div>
                  </div>
                  {appointment.phone && (
                    <div className="space-y-1">
                      <p className={`text-xs font-medium uppercase tracking-wider flex items-center gap-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                        <PhoneIcon className="w-3 h-3" />
                        Phone Number
                      </p>
                      <div className="flex items-center gap-2">
                        <p className={`text-base font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
                          {appointment.phone}
                        </p>
                        <button
                          onClick={() => copyToClipboard(appointment.phone!, "Phone")}
                          className={`p-1.5 rounded-lg hover:bg-opacity-80 transition-colors ${isDark ? "hover:bg-gray-700" : "hover:bg-gray-100"}`}
                          title="Copy phone"
                        >
                          <Copy className={`w-4 h-4 ${isDark ? "text-gray-400" : "text-gray-500"}`} />
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Appointment Details Card */}
            {appointment.scheduled_datetime && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
                  <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? "text-white" : "text-gray-900"}`}>
                    <Calendar className={`w-5 h-5 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
                    Scheduled Appointment
                  </h2>
                </div>
                <div className="p-6">
                  <div className="flex items-start gap-4">
                    <div className={`p-4 rounded-xl ${isDark ? "bg-blue-500/10 border border-blue-500/20" : "bg-blue-50 border border-blue-100"}`}>
                      <Calendar className={`w-6 h-6 ${isDark ? "text-blue-400" : "text-blue-600"}`} />
                    </div>
                    <div className="flex-1">
                      <p className={`text-2xl font-bold mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
                        {formatDate(appointment.scheduled_datetime)}
                      </p>
                      <div className="flex items-center gap-4 mt-2">
                        <div className="flex items-center gap-2">
                          <Clock className={`w-4 h-4 ${isDark ? "text-gray-400" : "text-gray-500"}`} />
                          <p className={`text-base ${isDark ? "text-gray-300" : "text-gray-700"}`}>
                            {formatTime(appointment.scheduled_datetime)}
                          </p>
                        </div>
                        {appointment.scheduled_duration && (
                          <div className="flex items-center gap-2">
                            <span className={`text-base ${isDark ? "text-gray-400" : "text-gray-500"}`}>•</span>
                            <p className={`text-base ${isDark ? "text-gray-300" : "text-gray-700"}`}>
                              {appointment.scheduled_duration} minutes
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Selected Slots */}
            {appointment.selected_slots && Array.isArray(appointment.selected_slots) && appointment.selected_slots.length > 0 && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
                  <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? "text-white" : "text-gray-900"}`}>
                    <CalendarCheck className={`w-5 h-5 ${isDark ? "text-green-400" : "text-green-600"}`} />
                    Selected Time Slots
                    {appointment.are_preferences_available !== undefined && (
                      <span className={`ml-auto px-3 py-1 text-xs font-medium rounded-full ${appointment.are_preferences_available ? (isDark ? "bg-green-500/20 text-green-300 border border-green-500/30" : "bg-green-50 text-green-700 border border-green-200") : (isDark ? "bg-yellow-500/20 text-yellow-300 border border-yellow-500/30" : "bg-yellow-50 text-yellow-700 border border-yellow-200")}`}>
                        {appointment.are_preferences_available ? "All Available" : "Partially Available"}
                      </span>
                    )}
                  </h2>
                </div>
                <div className="p-6">
                  {(() => {
                    const dayNames: Record<number, string> = {
                      0: "Monday",
                      1: "Tuesday",
                      2: "Wednesday",
                      3: "Thursday",
                      4: "Friday",
                      5: "Saturday",
                      6: "Sunday",
                    };
                    const timeSlotLabels: Record<string, string> = {
                      morning: "Morning",
                      afternoon: "Lunchtime",
                      evening: "Evening",
                    };

                    // Time slot order: morning, afternoon (lunchtime), evening
                    const timeSlotOrder: Record<string, number> = {
                      morning: 0,
                      afternoon: 1,
                      evening: 2,
                    };

                    // Group slots by date
                    const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
                    appointment.selected_slots.forEach((slot: any) => {
                      const date = slot.date || "";
                      if (!slotsByDate[date]) {
                        slotsByDate[date] = [];
                      }
                      slotsByDate[date].push(slot);
                    });

                    // Sort dates and slots within each date
                    const sortedDates = Object.keys(slotsByDate).sort((a, b) => {
                      return new Date(a).getTime() - new Date(b).getTime();
                    });

                    return (
                      <div className="space-y-4">
                        {sortedDates.map((date) => {
                          // Sort slots within this date by time slot order
                          const slots = slotsByDate[date].sort((a: any, b: any) => {
                            const aSlot = String(a.time_slot).toLowerCase().trim();
                            const bSlot = String(b.time_slot).toLowerCase().trim();
                            const aOrder = timeSlotOrder[aSlot] ?? 999;
                            const bOrder = timeSlotOrder[bSlot] ?? 999;
                            return aOrder - bOrder;
                          });

                          return (
                            <div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
                              <div className="mb-3">
                                <p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
                                  {formatShortDate(date)}
                                </p>
                                {slots.length > 0 && slots[0]?.day !== undefined && (
                                  <p className={`text-sm mt-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                                    {dayNames[slots[0].day] || `Day ${slots[0].day}`}
                                  </p>
                                )}
                              </div>
                              <div className="flex flex-wrap gap-2">
                                {slots.map((slot: any, idx: number) => {
                                  const timeSlot = String(slot.time_slot).toLowerCase().trim();
                                  const timeLabel = timeSlotLabels[timeSlot] || slot.time_slot;
                                  return (
                                    <span
                                      key={idx}
                                      className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? "bg-green-500/20 text-green-300 border border-green-500/30" : "bg-green-50 text-green-700 border border-green-200"}`}
                                    >
                                      {timeLabel}
                                    </span>
                                  );
                                })}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    );
                  })()}
                </div>
              </div>
            )}

            {/* Reason */}
            {appointment.reason && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
                  <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? "text-white" : "text-gray-900"}`}>
                    <MessageSquare className={`w-5 h-5 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
                    Reason for Appointment
                  </h2>
                </div>
                <div className="p-6">
                  <p className={`text-base leading-relaxed ${isDark ? "text-gray-300" : "text-gray-700"}`}>
                    {appointment.reason}
                  </p>
                </div>
              </div>
            )}

            {/* Rejection Reason */}
            {appointment.rejection_reason && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-red-900/20 border-red-800/50" : "bg-red-50 border-red-200"}`}>
                <div className={`px-6 py-4 border-b ${isDark ? "border-red-800/50" : "border-red-200"}`}>
                  <h2 className={`text-lg font-semibold ${isDark ? "text-red-300" : "text-red-900"}`}>
                    Rejection Reason
                  </h2>
                </div>
                <div className="p-6">
                  <p className={`text-base leading-relaxed ${isDark ? "text-red-200" : "text-red-800"}`}>
                    {appointment.rejection_reason}
                  </p>
                </div>
              </div>
            )}

            {/* Meeting Information */}
            {appointment.moderator_join_url && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-800/30" : "bg-gradient-to-br from-blue-50 to-purple-50 border-blue-200"}`}>
                <div className={`px-6 py-4 border-b ${isDark ? "border-blue-800/30" : "border-blue-200"}`}>
                  <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDark ? "text-white" : "text-gray-900"}`}>
                    <Video className={`w-5 h-5 ${isDark ? "text-blue-400" : "text-blue-600"}`} />
                    Video Meeting
                  </h2>
                </div>
                <div className="p-6 space-y-4">
                  {appointment.jitsi_room_id && (
                    <div>
                      <p className={`text-xs font-medium mb-2 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                        Meeting Room ID
                      </p>
                      <div className="flex items-center gap-2">
                        <p className={`text-sm font-mono px-3 py-2 rounded-lg ${isDark ? "bg-gray-800 text-gray-200" : "bg-white text-gray-900 border border-gray-200"}`}>
                          {appointment.jitsi_room_id}
                        </p>
                        <button
                          onClick={() => appointment.can_join_as_moderator && copyToClipboard(appointment.jitsi_room_id!, "Room ID")}
                          disabled={!appointment.can_join_as_moderator}
                          className={`p-2 rounded-lg transition-colors ${appointment.can_join_as_moderator ? (isDark ? "hover:bg-gray-700" : "hover:bg-gray-100") : (isDark ? "opacity-50 cursor-not-allowed" : "opacity-50 cursor-not-allowed")}`}
                          title={appointment.can_join_as_moderator ? "Copy room ID" : "Meeting not available"}
                        >
                          <Copy className={`w-4 h-4 ${isDark ? "text-gray-400" : "text-gray-500"}`} />
                        </button>
                      </div>
                    </div>
                  )}
                  <div>
                    <p className={`text-xs font-medium mb-2 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                      Moderator Meeting Link
                    </p>
                    <div className="flex items-center gap-2">
                      {appointment.can_join_as_moderator ? (
                        <>
                      <a
                        href={appointment.moderator_join_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`flex-1 text-sm px-3 py-2 rounded-lg truncate ${isDark ? "bg-gray-800 text-blue-400 hover:bg-gray-700" : "bg-white text-blue-600 hover:bg-gray-50 border border-gray-200"}`}
                      >
                        {appointment.moderator_join_url}
                      </a>
                      <a
                        href={appointment.moderator_join_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`px-4 py-2 rounded-lg font-medium transition-colors ${isDark ? "bg-blue-600 hover:bg-blue-700 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"}`}
                      >
                        <ExternalLink className="w-4 h-4" />
                      </a>
                        </>
                      ) : (
                        <>
                          <div className={`flex-1 text-sm px-3 py-2 rounded-lg truncate ${isDark ? "bg-gray-800/50 text-gray-500 border border-gray-700" : "bg-gray-100 text-gray-400 border border-gray-300"}`}>
                            {appointment.moderator_join_url}
                          </div>
                          <button
                            disabled
                            className={`px-4 py-2 rounded-lg font-medium cursor-not-allowed ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
                          >
                            <ExternalLink className="w-4 h-4" />
                          </button>
                        </>
                      )}
                    </div>
                  </div>
                  {appointment.can_join_as_moderator !== undefined && (
                    <div className={`flex items-center gap-2 px-4 py-3 rounded-lg ${appointment.can_join_as_moderator ? (isDark ? "bg-green-500/20 border border-green-500/30" : "bg-green-50 border border-green-200") : (isDark ? "bg-gray-800 border border-gray-700" : "bg-gray-50 border border-gray-200")}`}>
                      <div className={`h-2 w-2 rounded-full ${appointment.can_join_as_moderator ? (isDark ? "bg-green-400" : "bg-green-600") : (isDark ? "bg-gray-500" : "bg-gray-400")}`} />
                      <p className={`text-sm font-medium ${appointment.can_join_as_moderator ? (isDark ? "text-green-300" : "text-green-700") : (isDark ? "text-gray-400" : "text-gray-500")}`}>
                        {appointment.can_join_as_moderator ? "Meeting is active - You can join as moderator" : "Meeting would be available shortly"}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>

          {/* Sidebar - Right Column (1/3) */}
          <div className="space-y-6">
            {/* Quick Info Card */}
            <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
              <div className={`px-6 py-4 border-b ${isDark ? "border-gray-700 bg-gray-800/50" : "border-gray-200 bg-gray-50/50"}`}>
                <h2 className={`text-lg font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
                  Quick Info
                </h2>
              </div>
              <div className="p-6 space-y-4">
                <div>
                  <p className={`text-xs font-medium mb-1 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                    Created
                  </p>
                  <p className={`text-sm font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
                    {formatShortDate(appointment.created_at)}
                  </p>
                  <p className={`text-xs mt-0.5 ${isDark ? "text-gray-500" : "text-gray-500"}`}>
                    {formatTime(appointment.created_at)}
                  </p>
                </div>
                <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
                  <p className={`text-xs font-medium mb-1 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                    Status
                  </p>
                  <span
                    className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg border ${getStatusColor(
                      appointment.status
                    )}`}
                  >
                    {appointment.status === "scheduled" && <CheckCircle2 className="w-4 h-4" />}
                    {formatStatus(appointment.status)}
                  </span>
                </div>
                {appointment.scheduled_datetime && (
                  <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
                    <p className={`text-xs font-medium mb-2 uppercase tracking-wider ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                      Meeting Information
                    </p>
                    <div className="space-y-3">
                      <div>
                        <p className={`text-xs font-medium mb-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          Meeting Start Time:
                        </p>
                        <p className={`text-sm font-medium ${isDark ? "text-white" : "text-gray-900"}`}>
                          {formatDate(appointment.scheduled_datetime)} at {formatTime(appointment.scheduled_datetime)}
                        </p>
                      </div>
                      <div>
                        <p className={`text-xs font-medium mb-1 ${isDark ? "text-gray-400" : "text-gray-500"}`}>
                          How to Access:
                        </p>
                        <p className={`text-sm ${isDark ? "text-gray-300" : "text-gray-700"}`}>
                          Click the "Start Meeting" button below to begin the session. Once started, participants can join using the meeting link. You can also use the moderator link above to join directly.
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Action Buttons */}
            {appointment.status === "pending_review" && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
                <div className="p-6 space-y-3">
                  <Button
                    onClick={() => setScheduleDialogOpen(true)}
                    className="w-full bg-blue-600 hover:bg-blue-700 text-white h-12 text-base font-medium"
                  >
                    <CalendarCheck className="w-5 h-5 mr-2" />
                    Schedule Appointment
                  </Button>
                  <Button
                    onClick={() => setRejectDialogOpen(true)}
                    variant="outline"
                    className={`w-full h-12 text-base font-medium border-red-600 text-red-600 hover:bg-red-50 ${isDark ? "hover:bg-red-900/20" : ""}`}
                  >
                    <X className="w-5 h-5 mr-2" />
                    Reject Request
                  </Button>
                </div>
              </div>
            )}

            {/* Meeting Button (if scheduled) */}
            {appointment.status === "scheduled" && appointment.moderator_join_url && (
              <div className={`rounded-2xl border shadow-sm overflow-hidden ${isDark ? "bg-gradient-to-br from-blue-900/20 to-purple-900/20 border-blue-800/30" : "bg-gradient-to-br from-blue-50 to-purple-50 border-blue-200"}`}>
                <div className="p-6 space-y-3">
                  {(() => {
                    // Check if can join as moderator (handle both boolean and string values)
                    const canJoinAsModerator = appointment.can_join_as_moderator === true || appointment.can_join_as_moderator === "true";
                    // Check if meeting has started (handle both field names)
                    const startedAt = appointment.started_at || appointment.meeting_started_at;
                    const hasStarted = startedAt != null && startedAt !== "";

                    // If can_join_as_moderator != true, display "Meeting would be available shortly"
                    if (!canJoinAsModerator) {
                      return (
                        <button
                          disabled
                          className={`flex items-center justify-center gap-2 w-full cursor-not-allowed h-12 rounded-lg text-base font-medium transition-colors ${isDark ? "bg-gray-700 text-gray-500" : "bg-gray-300 text-gray-500"}`}
                        >
                          <Video className="w-5 h-5" />
                          Meeting would be available shortly
                        </button>
                      );
                    }

                    // If can_join_as_moderator == true && started_at != null, show "Join Now" button
                    if (hasStarted) {
                      return (
                        <>
                          <a
                            href={appointment.moderator_join_url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className={`flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white h-12 rounded-lg text-base font-medium transition-colors`}
                          >
                            <Video className="w-5 h-5" />
                            Join Now
                          </a>
                          <Button
                            onClick={handleEndMeeting}
                            disabled={isEndingMeeting}
                            variant="outline"
                            className={`w-full h-12 text-base font-medium border-red-600 text-red-600 hover:bg-red-50 ${isDark ? "hover:bg-red-900/20" : ""}`}
                          >
                            {isEndingMeeting ? (
                              <>
                                <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                                Ending...
                              </>
                            ) : (
                              <>
                                <X className="w-5 h-5 mr-2" />
                                End Meeting
                              </>
                            )}
                          </Button>
                        </>
                      );
                    }

                    // If can_join_as_moderator == true && started_at == null, show "Start Meeting" button
                    return (
                      <Button
                        onClick={handleStartMeeting}
                        disabled={isStartingMeeting}
                        className="w-full bg-green-600 hover:bg-green-700 text-white h-12 text-base font-medium"
                      >
                        {isStartingMeeting ? (
                          <>
                            <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                            Starting...
                          </>
                        ) : (
                          <>
                            <Video className="w-5 h-5 mr-2" />
                            Start Meeting
                          </>
                        )}
                      </Button>
                    );
                  })()}
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      {/* Schedule Appointment Dialog */}
      <ScheduleAppointmentDialog
        open={scheduleDialogOpen}
        onOpenChange={setScheduleDialogOpen}
        appointment={appointment}
        scheduledDate={scheduledDate}
        setScheduledDate={setScheduledDate}
        scheduledTime={scheduledTime}
        setScheduledTime={setScheduledTime}
        scheduledDuration={scheduledDuration}
        setScheduledDuration={setScheduledDuration}
        onSchedule={handleSchedule}
        isScheduling={isScheduling}
        isDark={isDark}
      />

      {/* Reject Appointment Dialog */}
      <Dialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
        <DialogContent className={`max-w-2xl ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
          <DialogHeader>
            <DialogTitle className={`text-2xl font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
              Reject Appointment Request
            </DialogTitle>
            <DialogDescription className={`text-base ${isDark ? "text-gray-400" : "text-gray-500"}`}>
              Reject appointment request from {appointment.first_name} {appointment.last_name}
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <label className={`text-sm font-semibold ${isDark ? "text-gray-300" : "text-gray-700"}`}>
                Rejection Reason (Optional)
              </label>
              <textarea
                value={rejectionReason}
                onChange={(e) => setRejectionReason(e.target.value)}
                placeholder="Enter reason for rejection..."
                rows={5}
                className={`w-full rounded-xl border px-4 py-3 text-base ${
                  isDark
                    ? "bg-gray-700 border-gray-600 text-white placeholder:text-gray-400"
                    : "bg-white border-gray-300 text-gray-900 placeholder:text-gray-500"
                }`}
              />
            </div>
          </div>

          <DialogFooter className="gap-3 pt-4">
            <Button
              variant="outline"
              onClick={() => setRejectDialogOpen(false)}
              disabled={isRejecting}
              className={`h-12 px-6 ${isDark ? "border-gray-700 text-gray-300 hover:bg-gray-700" : ""}`}
            >
              Cancel
            </Button>
            <Button
              onClick={handleReject}
              disabled={isRejecting}
              className="h-12 px-6 bg-red-600 hover:bg-red-700 text-white"
            >
              {isRejecting ? (
                <>
                  <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                  Rejecting...
                </>
              ) : (
                <>
                  <X className="w-5 h-5 mr-2" />
                  Reject Appointment
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}