"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import { ResponsiveIframe } from "@/app/components/responsive-iframe";
import { Users, FolderKanban, Video, ArrowLeft, Loader2, Calendar, Clock, Plus, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { fr } from "date-fns/locale";

registerLocale('fr', fr);

interface Group {
  id: string;
  name: string;
  path: string;
}

interface Mission {
  id: string;
  name: string;
  logoUrl?: string | null;
}

interface ScheduledMeeting {
  id: string;
  type: "group" | "mission";
  entityId: string;
  entityName: string;
  date: string; // ISO date string
  time: string; // HH:mm format
  title?: string;
  start: string; // ISO datetime string for start
  end: string; // ISO datetime string for end
  isAllDay?: boolean;
}

type ConferenceType = "group" | "mission" | null;

export default function VisionPage() {
  const { data: session, status } = useSession();
  const { toast } = useToast();
  const [groups, setGroups] = useState<Group[]>([]);
  const [missions, setMissions] = useState<Mission[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedConference, setSelectedConference] = useState<{
    type: ConferenceType;
    id: string;
    name: string;
  } | null>(null);
  const [jitsiUrl, setJitsiUrl] = useState<string | null>(null);
  const [scheduledMeetings, setScheduledMeetings] = useState<ScheduledMeeting[]>([]);
  const [meetingsLoading, setMeetingsLoading] = useState(false);
  const [showMeetingDialog, setShowMeetingDialog] = useState(false);
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
  const [meetingForm, setMeetingForm] = useState<{
    type: "group" | "mission" | "";
    entityId: string;
    entityName: string;
    title: string;
    start: string;
    end: string;
    allDay: boolean;
    location: string;
    description: string;
    recurrence: "none" | "daily" | "weekly" | "monthly";
  }>({
    type: "",
    entityId: "",
    entityName: "",
    title: "",
    start: "",
    end: "",
    allDay: false,
    location: "",
    description: "",
    recurrence: "none",
  });

  // Redirect if not authenticated
  useEffect(() => {
    if (status === "unauthenticated") {
      redirect("/signin");
    }
  }, [status]);

  // Helper function to convert calendars to ScheduledMeeting format
  const convertCalendarsToMeetings = (calendarsData: any[]): ScheduledMeeting[] => {
    const groupAndMissionCalendars = calendarsData.filter((cal: any) => {
      const isGroup = cal.name?.startsWith("Groupe:");
      const isMission = cal.name?.startsWith("Mission:");
      return isGroup || isMission;
    });

    const meetings: ScheduledMeeting[] = [];
    groupAndMissionCalendars.forEach((calendar: any) => {
      const calendarName = calendar.name || "";
      const isGroup = calendarName.startsWith("Groupe:");
      const isMission = calendarName.startsWith("Mission:");
      
      // Extract entity name from calendar name
      let entityName = "";
      let entityId = "";
      
      if (isGroup) {
        entityName = calendarName.replace("Groupe: ", "");
        // Find matching group by name
        const matchingGroup = groups.find((g: Group) => g.name === entityName);
        entityId = matchingGroup?.id || "";
      } else if (isMission) {
        entityName = calendarName.replace("Mission: ", "");
        // Find matching mission by name
        const matchingMission = missions.find((m: Mission) => m.name === entityName);
        entityId = matchingMission?.id || calendar.missionId || "";
      }

      // Convert events to ScheduledMeeting format
      (calendar.events || []).forEach((event: any) => {
        const eventStart = new Date(event.start);
        const eventEnd = new Date(event.end);
        const dateStr = eventStart.toISOString().split('T')[0];
        const timeStr = event.isAllDay ? "" : eventStart.toTimeString().slice(0, 5);
        
        meetings.push({
          id: event.id,
          type: isGroup ? "group" : "mission",
          entityId: entityId,
          entityName: entityName,
          date: dateStr,
          time: timeStr,
          title: event.title,
          start: event.start,
          end: event.end,
          isAllDay: event.isAllDay || false,
        });
      });
    });

    return meetings;
  };

  // Load meetings from database (events from group and mission calendars)
  useEffect(() => {
    const fetchMeetings = async () => {
      if (status !== "authenticated" || !session?.user?.id) {
        return;
      }

      try {
        setMeetingsLoading(true);
        // Fetch calendars with events
        const calendarsResponse = await fetch("/api/calendars");
        if (!calendarsResponse.ok) {
          throw new Error("Impossible de charger les calendriers");
        }
        const calendarsData = await calendarsResponse.json();

        const meetings = convertCalendarsToMeetings(calendarsData);
        setScheduledMeetings(meetings);
      } catch (error) {
        console.error("Error loading meetings:", error);
        toast({
          title: "Erreur",
          description: "Impossible de charger les réunions",
          variant: "destructive",
        });
      } finally {
        setMeetingsLoading(false);
      }
    };

    fetchMeetings();
  }, [session, status, groups, missions, toast]);

  // Fetch user groups and missions
  useEffect(() => {
    const fetchData = async () => {
      if (status !== "authenticated" || !session?.user?.id) {
        return;
      }

      try {
        setLoading(true);
        const userId = session.user.id;

        // Fetch user groups
        const groupsRes = await fetch(`/api/users/${userId}/groups`);
        if (groupsRes.ok) {
          const groupsData = await groupsRes.json();
          setGroups(Array.isArray(groupsData) ? groupsData : []);
        } else {
          console.error("Failed to fetch groups");
        }

        // Fetch all missions and filter for user's missions
        const missionsRes = await fetch("/api/missions?limit=1000");
        if (missionsRes.ok) {
          const missionsData = await missionsRes.json();
          const allMissions = missionsData.missions || [];
          
          // Filter missions where user is creator or member
          const userMissions = allMissions.filter((mission: any) => {
            const isCreator = mission.creator?.id === userId;
            const isMember = mission.missionUsers?.some(
              (mu: any) => mu.user?.id === userId
            );
            return isCreator || isMember;
          });

          setMissions(userMissions);
        } else {
          console.error("Failed to fetch missions");
        }
      } catch (error) {
        console.error("Error fetching data:", error);
        toast({
          title: "Erreur",
          description: "Impossible de charger les données",
          variant: "destructive",
        });
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [session, status, toast]);

  // Handle conference selection
  const handleConferenceClick = (type: ConferenceType, id: string, name: string) => {
    const baseUrl = process.env.NEXT_PUBLIC_IFRAME_CONFERENCE_URL || 'https://vision.slm-lab.net';
    
    let url: string;
    if (type === "group") {
      // URL format: https://vision.slm-lab.net/Groupe-{groupId}
      url = `${baseUrl}/Groupe-${id}`;
    } else {
      // URL format: https://vision.slm-lab.net/{missionId}
      url = `${baseUrl}/${id}`;
    }

    setSelectedConference({ type, id, name });
    setJitsiUrl(url);
  };

  // Handle back to list
  const handleBack = () => {
    setSelectedConference(null);
    setJitsiUrl(null);
  };

  // Check if meeting can be joined (5 minutes before start until end)
  const canJoinMeeting = (meeting: ScheduledMeeting): boolean => {
    const now = new Date();
    const start = new Date(meeting.start);
    const end = new Date(meeting.end);
    
    // Calculate 5 minutes before start
    const fiveMinutesBeforeStart = new Date(start);
    fiveMinutesBeforeStart.setMinutes(fiveMinutesBeforeStart.getMinutes() - 5);
    
    // Can join if now is between 5 minutes before start and end
    return now >= fiveMinutesBeforeStart && now <= end;
  };

  // Get today's meetings
  const getTodayMeetings = (): ScheduledMeeting[] => {
    const today = new Date();
    const todayStr = today.toISOString().split('T')[0];
    return scheduledMeetings.filter(meeting => meeting.date === todayStr);
  };

  // Get meetings for a specific date
  const getMeetingsForDate = (date: Date): ScheduledMeeting[] => {
    const dateStr = date.toISOString().split('T')[0];
    return scheduledMeetings.filter(meeting => meeting.date === dateStr);
  };

  // Helper function to get date from string
  const getDateFromString = (dateString: string): Date | null => {
    if (!dateString) return null;
    try {
      return new Date(dateString);
    } catch {
      return null;
    }
  };

  // Handle open meeting dialog
  const handleOpenMeetingDialog = (type: "group" | "mission", id: string, name: string) => {
    const defaultDate = selectedDate || new Date();
    const startDate = new Date(defaultDate);
    startDate.setHours(new Date().getHours(), 0, 0, 0);
    const endDate = new Date(startDate);
    endDate.setHours(startDate.getHours() + 1);
    
    setMeetingForm({
      type,
      entityId: id,
      entityName: name,
      title: "",
      start: startDate.toISOString().slice(0, 16),
      end: endDate.toISOString().slice(0, 16),
      allDay: false,
      location: "",
      description: "",
      recurrence: "none",
    });
    setShowMeetingDialog(true);
  };

  // Handle save meeting
  const handleSaveMeeting = async () => {
    if (!meetingForm.type || !meetingForm.entityId || !meetingForm.start || !meetingForm.end) {
      toast({
        title: "Erreur",
        description: "Veuillez remplir tous les champs requis",
        variant: "destructive",
      });
      return;
    }

    if (!session?.user?.id) {
      toast({
        title: "Erreur",
        description: "Vous devez être connecté",
        variant: "destructive",
      });
      return;
    }

    try {
      // Fetch user calendars to find the matching calendar
      const fetchCalendarsResponse = await fetch("/api/calendars");
      if (!fetchCalendarsResponse.ok) {
        throw new Error("Impossible de charger les calendriers");
      }
      const calendars = await fetchCalendarsResponse.json();

      // Find the calendar for this mission or group
      let targetCalendar = null;
      if (meetingForm.type === "mission") {
        // For missions, look for calendar with missionId or name starting with "Mission:"
        targetCalendar = calendars.find((cal: any) => 
          cal.missionId === meetingForm.entityId || 
          cal.name === `Mission: ${meetingForm.entityName}`
        );
      } else if (meetingForm.type === "group") {
        // For groups, look for calendar with name starting with "Groupe:"
        targetCalendar = calendars.find((cal: any) => 
          cal.name === `Groupe: ${meetingForm.entityName}`
        );
      }

      if (!targetCalendar) {
        toast({
          title: "Erreur",
          description: `Calendrier ${meetingForm.type === "group" ? "du groupe" : "de la mission"} introuvable`,
          variant: "destructive",
        });
        return;
      }

      const startDate = new Date(meetingForm.start);
      const endDate = new Date(meetingForm.end);
      const timeDiff = endDate.getTime() - startDate.getTime();
      
      // Create events based on recurrence
      const eventsToCreate: Array<{ start: Date; end: Date }> = [];
      
      if (meetingForm.recurrence === "none") {
        // Single event
        eventsToCreate.push({ start: startDate, end: endDate });
      } else {
        // Recurring events - create for next 12 occurrences
        const recurrenceCount = 12;
        let currentStart = new Date(startDate);
        
        for (let i = 0; i < recurrenceCount; i++) {
          const currentEnd = new Date(currentStart.getTime() + timeDiff);
          eventsToCreate.push({ 
            start: new Date(currentStart), 
            end: currentEnd 
          });
          
          // Calculate next occurrence
          if (meetingForm.recurrence === "daily") {
            currentStart.setDate(currentStart.getDate() + 1);
          } else if (meetingForm.recurrence === "weekly") {
            currentStart.setDate(currentStart.getDate() + 7);
          } else if (meetingForm.recurrence === "monthly") {
            currentStart.setMonth(currentStart.getMonth() + 1);
          }
        }
      }

      // Create all events via API
      const eventPromises = eventsToCreate.map(async ({ start, end }) => {
        const response = await fetch("/api/events", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            title: meetingForm.title || `Réunion ${meetingForm.type === "group" ? "du groupe" : "de la mission"}: ${meetingForm.entityName}`,
            description: meetingForm.description || null,
            start: start.toISOString(),
            end: end.toISOString(),
            allDay: meetingForm.allDay,
            location: meetingForm.location || null,
            calendarId: targetCalendar.id,
          }),
        });

        if (!response.ok) {
          const error = await response.json();
          throw new Error(error.error || "Erreur lors de la création de l'événement");
        }

        return await response.json();
      });

      await Promise.all(eventPromises);

      // Refresh meetings from database after creation
      const refreshCalendarsResponse = await fetch("/api/calendars");
      if (refreshCalendarsResponse.ok) {
        const calendarsData = await refreshCalendarsResponse.json();
        const meetings = convertCalendarsToMeetings(calendarsData);
        setScheduledMeetings(meetings);
      }
      setShowMeetingDialog(false);
      setMeetingForm({
        type: "",
        entityId: "",
        entityName: "",
        title: "",
        start: "",
        end: "",
        allDay: false,
        location: "",
        description: "",
        recurrence: "none",
      });
      toast({
        title: "Succès",
        description: `${eventsToCreate.length} réunion${eventsToCreate.length > 1 ? 's' : ''} planifiée${eventsToCreate.length > 1 ? 's' : ''} avec succès`,
      });
    } catch (error) {
      console.error("Error saving meeting:", error);
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Erreur lors de la planification de la réunion",
        variant: "destructive",
      });
    }
  };

  // Handle delete meeting
  const handleDeleteMeeting = async (meetingId: string) => {
    try {
      const response = await fetch(`/api/events/${meetingId}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || "Erreur lors de la suppression");
      }

      // Refresh meetings from database after deletion
      // Use refresh=true to bypass cache and ensure immediate update
      const refreshCalendarsResponse = await fetch("/api/calendars?refresh=true");
      if (refreshCalendarsResponse.ok) {
        const calendarsData = await refreshCalendarsResponse.json();
        const meetings = convertCalendarsToMeetings(calendarsData);
        setScheduledMeetings(meetings);
      }

      toast({
        title: "Succès",
        description: "Réunion supprimée",
      });
    } catch (error) {
      console.error("Error deleting meeting:", error);
      toast({
        title: "Erreur",
        description: error instanceof Error ? error.message : "Erreur lors de la suppression",
        variant: "destructive",
      });
    }
  };

  // Format date for display
  const formatDate = (dateStr: string): string => {
    const date = new Date(dateStr);
    return date.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
  };

  // Show loading state
  if (status === "loading" || loading) {
    return (
      <main className="w-full h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="h-12 w-12 animate-spin text-blue-600 mx-auto mb-4" />
          <p className="text-gray-600">Chargement...</p>
        </div>
      </main>
    );
  }

  // Show Jitsi iframe if conference is selected
  if (selectedConference && jitsiUrl) {
    return (
      <main className="w-full h-screen bg-black flex flex-col">
        {/* Header with back button */}
        <div className="bg-white border-b border-gray-200 px-4 py-3 flex items-center gap-4">
          <Button
            variant="ghost"
            size="sm"
            onClick={handleBack}
            className="flex items-center gap-2"
          >
            <ArrowLeft className="h-4 w-4" />
            Retour
          </Button>
          <div className="flex-1">
            <h1 className="text-sm font-medium text-gray-900">
              {selectedConference.type === "group" ? "Groupe" : "Mission"}: {selectedConference.name}
            </h1>
          </div>
        </div>
        
        {/* Jitsi iframe */}
        <div className="flex-1 overflow-hidden">
          <ResponsiveIframe 
            src={jitsiUrl}
            allow="camera; microphone; fullscreen; display-capture; autoplay; clipboard-write; encrypted-media"
          />
        </div>
      </main>
    );
  }

  // Show list of groups and missions
  const todayMeetings = getTodayMeetings();

  return (
    <main className="w-full h-screen bg-gray-50 overflow-auto">
      <div className="w-full px-4 pt-20 pb-4">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-gray-900 mb-2">
              Espaces de réunion
            </h1>
            <p className="text-gray-600">
              Sélectionnez un groupe ou une mission pour accéder à son espace de réunion Jitsi
            </p>
          </div>

          {/* Today's Meetings Section */}
          {todayMeetings.length > 0 && (
            <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <Calendar className="h-5 w-5 text-blue-600" />
                  <h2 className="text-lg font-semibold text-blue-900">
                    Réunions du jour ({todayMeetings.length})
                  </h2>
                </div>
              </div>
              <div className="space-y-2">
                {todayMeetings.map((meeting) => (
                  <div
                    key={meeting.id}
                    className="bg-white rounded-lg border border-blue-200 p-3 flex items-center justify-between"
                  >
                    <div className="flex items-center gap-3 flex-1">
                      <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <Clock className="h-5 w-5 text-blue-600" />
                      </div>
                      <div className="flex-1">
                        <h3 className="font-medium text-gray-900">
                          {meeting.title || `${meeting.type === "group" ? "Groupe" : "Mission"}: ${meeting.entityName}`}
                        </h3>
                        <p className="text-sm text-gray-500">
                          {meeting.time} - {formatDate(meeting.date)}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {canJoinMeeting(meeting) && (
                        <Button
                          size="sm"
                          className="bg-blue-600 hover:bg-blue-700 text-white"
                          onClick={() => handleConferenceClick(meeting.type, meeting.entityId, meeting.entityName)}
                        >
                          <Video className="h-4 w-4 mr-1" />
                          Rejoindre
                        </Button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Calendar Section */}
          <div className="mb-8">
            <div className="bg-white rounded-lg border border-gray-200 p-4">
              <div className="flex items-center gap-2 mb-4">
                <Calendar className="h-5 w-5 text-purple-600" />
                <h2 className="text-xl font-semibold text-gray-900">
                  Calendrier des réunions
                </h2>
              </div>
              
              <div className="flex flex-col lg:flex-row gap-6">
                {/* Colonne calendrier (étroite) */}
                <div id="vision-calendar" className="w-full lg:w-80 lg:flex-shrink-0">
                  <style dangerouslySetInnerHTML={{__html: `
                    #vision-calendar {
                      color: #111827 !important;
                    }
                    #vision-calendar .rdp {
                      --rdp-cell-size: 2.5rem;
                      --rdp-accent-color: #2563eb;
                      --rdp-background-color: white;
                      --rdp-accent-color-dark: #1d4ed8;
                      --rdp-background-color-dark: #f3f4f6;
                      --rdp-outline: 2px solid var(--rdp-accent-color);
                      --rdp-outline-selected: 2px solid var(--rdp-accent-color);
                      margin: 0;
                    }
                    #vision-calendar .rdp-caption {
                      color: #111827 !important;
                      background-color: white !important;
                    }
                    #vision-calendar .rdp-caption_label {
                      color: #111827 !important;
                      font-weight: 600 !important;
                      font-size: 0.875rem !important;
                      background-color: white !important;
                    }
                    #vision-calendar .rdp-nav {
                      background-color: white !important;
                    }
                    #vision-calendar .rdp-nav_button {
                      color: #374151 !important;
                      background-color: white !important;
                      border: 1px solid #e5e7eb !important;
                    }
                    #vision-calendar .rdp-nav_button:hover {
                      color: #111827 !important;
                      background-color: #f9fafb !important;
                    }
                    #vision-calendar .rdp-nav_button svg,
                    #vision-calendar .rdp-nav_button path {
                      color: #374151 !important;
                      stroke: #374151 !important;
                      fill: #374151 !important;
                    }
                    #vision-calendar .rdp-nav_button:hover svg,
                    #vision-calendar .rdp-nav_button:hover path {
                      color: #111827 !important;
                      stroke: #111827 !important;
                      fill: #111827 !important;
                    }
                    #vision-calendar .rdp-head_cell {
                      color: #6b7280 !important;
                      font-weight: 500 !important;
                      background-color: white !important;
                    }
                    #vision-calendar .rdp-day {
                      color: #1f2937 !important;
                      background-color: white !important;
                      width: 2.5rem !important;
                      height: 2.5rem !important;
                      font-size: 0.875rem !important;
                      border: 1px solid transparent !important;
                    }
                    #vision-calendar .rdp-day:hover:not(.rdp-day_disabled):not(.rdp-day_selected):not(.hasMeeting) {
                      background-color: #f3f4f6 !important;
                      color: #111827 !important;
                    }
                    #vision-calendar .rdp-day_today {
                      background-color: #DBEAFE !important;
                      color: #1d4ed8 !important;
                      border: 2px solid #3b82f6 !important;
                      font-weight: 600 !important;
                    }
                    #vision-calendar .rdp-day_today:hover {
                      background-color: #bfdbfe !important;
                      color: #1e40af !important;
                    }
                    /* Selected day uses default primary color (black) */
                    #vision-calendar .rdp-day_selected {
                      font-weight: 600 !important;
                    }
                    #vision-calendar .rdp-day_outside {
                      color: #9ca3af !important;
                      background-color: white !important;
                    }
                    #vision-calendar .rdp-day_outside:hover {
                      background-color: #f9fafb !important;
                      color: #6b7280 !important;
                    }
                    #vision-calendar .rdp-day.hasMeeting {
                      background-color: #2563eb !important;
                      color: white !important;
                      font-weight: 600 !important;
                    }
                    #vision-calendar .rdp-day.hasMeeting:hover {
                      background-color: #1d4ed8 !important;
                      color: white !important;
                    }
                    #vision-calendar .rdp-day.hasMeeting.rdp-day_today {
                      background-color: #1d4ed8 !important;
                      color: white !important;
                      border: 2px solid #1e40af !important;
                    }
                    #vision-calendar .rdp-day.hasMeeting.rdp-day_selected {
                      background-color: #1e40af !important;
                      color: white !important;
                    }
                  `}} />
                  <CalendarComponent
                    mode="single"
                    selected={selectedDate}
                    onSelect={setSelectedDate}
                    className="rounded-md border"
                    modifiers={{
                      hasMeeting: (date) => {
                        if (!date) return false;
                        return getMeetingsForDate(date).length > 0;
                      },
                    }}
                    modifiersClassNames={{
                      hasMeeting: "hasMeeting",
                    }}
                  />
                </div>
                {/* Colonne invisible pour espacer calendrier et liste des réunions */}
                <div className="hidden lg:block w-8" />
                <div className="flex-1">
                  {selectedDate && (
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-3">
                        Réunions du {selectedDate.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
                      </h3>
                      {getMeetingsForDate(selectedDate).length === 0 ? (
                        <p className="text-gray-500 text-sm">Aucune réunion planifiée</p>
                      ) : (
                        <div className="space-y-2">
                          {getMeetingsForDate(selectedDate).map((meeting) => (
                            <div
                              key={meeting.id}
                              className="bg-gray-50 rounded-lg border border-gray-200 p-3 flex items-center justify-between"
                            >
                              <div>
                                <h4 className="font-medium text-gray-900">
                                  {meeting.title || `${meeting.type === "group" ? "Groupe" : "Mission"}: ${meeting.entityName}`}
                                </h4>
                                <p className="text-sm text-gray-500">{meeting.time}</p>
                              </div>
                              {canJoinMeeting(meeting) && (
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() => handleConferenceClick(meeting.type, meeting.entityId, meeting.entityName)}
                                >
                                  <Video className="h-4 w-4 mr-1" />
                                  Rejoindre
                                </Button>
                              )}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Groups Section */}
          <div className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <Users className="h-5 w-5 text-blue-600" />
              <h2 className="text-xl font-semibold text-gray-900">
                Groupes ({groups.length})
              </h2>
            </div>
            
            {groups.length === 0 ? (
              <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
                <Users className="h-12 w-12 text-gray-400 mx-auto mb-3" />
                <p className="text-gray-500">Aucun groupe disponible</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {groups.map((group) => (
                  <div
                    key={group.id}
                    className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow cursor-pointer"
                    onClick={() => handleConferenceClick("group", group.id, group.name)}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3 flex-1">
                        <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                          <Users className="h-5 w-5 text-blue-600" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <h3 className="font-medium text-gray-900 truncate">
                            {group.name}
                          </h3>
                          <p className="text-sm text-gray-500 truncate">
                            {group.path}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2 ml-2">
                        <Button
                          size="sm"
                          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleConferenceClick("group", group.id, group.name);
                          }}
                        >
                          <Video className="h-4 w-4" />
                          Réunion
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex items-center gap-2"
                          onClick={(e) => {
                            e.stopPropagation();
                            setSelectedDate(new Date());
                            handleOpenMeetingDialog("group", group.id, group.name);
                          }}
                          title="Planifier une réunion"
                        >
                          <Calendar className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Missions Section */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <FolderKanban className="h-5 w-5 text-purple-600" />
              <h2 className="text-xl font-semibold text-gray-900">
                Missions ({missions.length})
              </h2>
            </div>
            
            {missions.length === 0 ? (
              <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
                <FolderKanban className="h-12 w-12 text-gray-400 mx-auto mb-3" />
                <p className="text-gray-500">Aucune mission disponible</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {missions.map((mission) => (
                  <div
                    key={mission.id}
                    className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow cursor-pointer"
                    onClick={() => handleConferenceClick("mission", mission.id, mission.name)}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3 flex-1">
                        {mission.logoUrl ? (
                          <div className="h-10 w-10 rounded-md overflow-hidden flex-shrink-0">
                            <img
                              src={mission.logoUrl}
                              alt={mission.name}
                              className="h-full w-full object-cover"
                              onError={(e) => {
                                (e.target as HTMLImageElement).style.display = 'none';
                              }}
                            />
                          </div>
                        ) : (
                          <div className="h-10 w-10 rounded-md bg-purple-100 flex items-center justify-center flex-shrink-0">
                            <FolderKanban className="h-5 w-5 text-purple-600" />
                          </div>
                        )}
                        <div className="flex-1 min-w-0">
                          <h3 className="font-medium text-gray-900 truncate">
                            {mission.name}
                          </h3>
                        </div>
                      </div>
                      <div className="flex items-center gap-2 ml-2">
                        <Button
                          size="sm"
                          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
                          onClick={(e) => {
                            e.stopPropagation();
                            handleConferenceClick("mission", mission.id, mission.name);
                          }}
                        >
                          <Video className="h-4 w-4" />
                          Réunion
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="flex items-center gap-2"
                          onClick={(e) => {
                            e.stopPropagation();
                            setSelectedDate(new Date());
                            handleOpenMeetingDialog("mission", mission.id, mission.name);
                          }}
                          title="Planifier une réunion"
                        >
                          <Calendar className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Meeting Dialog */}
      <Dialog open={showMeetingDialog} onOpenChange={setShowMeetingDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle className="text-gray-800">Planifier une réunion</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="meeting-title" className="text-base font-semibold text-gray-800">Titre</Label>
              <Input
                id="meeting-title"
                value={meetingForm.title}
                onChange={(e) => setMeetingForm({ ...meetingForm, title: e.target.value })}
                placeholder={`Réunion ${meetingForm.type === "group" ? "du groupe" : "de la mission"}`}
                className="bg-white text-gray-900"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-gray-800">Début *</Label>
                <div className="flex gap-2">
                  <div className="flex-1">
                    <DatePicker
                      selected={getDateFromString(meetingForm.start)}
                      onChange={(date: Date | null) => {
                        if (date) {
                          const newStart = new Date(date);
                          if (!meetingForm.allDay) {
                            const currentStart = getDateFromString(meetingForm.start);
                            if (currentStart) {
                              newStart.setHours(currentStart.getHours(), currentStart.getMinutes());
                            }
                          }
                          setMeetingForm({ ...meetingForm, start: newStart.toISOString().slice(0, 16) });
                        }
                      }}
                      dateFormat="dd/MM/yyyy"
                      locale="fr"
                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white text-gray-900"
                      placeholderText="Date"
                      customInput={<Input className="bg-white text-gray-900" />}
                    />
                  </div>
                  {!meetingForm.allDay && (
                    <DatePicker
                      selected={getDateFromString(meetingForm.start)}
                      onChange={(date: Date | null) => {
                        if (date) {
                          const currentStart = getDateFromString(meetingForm.start) || new Date();
                          const newStart = new Date(currentStart);
                          newStart.setHours(date.getHours(), date.getMinutes());
                          setMeetingForm({ ...meetingForm, start: newStart.toISOString().slice(0, 16) });
                        }
                      }}
                      showTimeSelect
                      showTimeSelectOnly
                      timeIntervals={15}
                      timeCaption="Heure"
                      dateFormat="HH:mm"
                      className="w-32 bg-white text-gray-900"
                      customInput={<Input className="bg-white text-gray-900" />}
                    />
                  )}
                </div>
              </div>

              <div className="space-y-2">
                <Label className="text-gray-800">Fin *</Label>
                <div className="flex gap-2">
                  <div className="flex-1">
                    <DatePicker
                      selected={getDateFromString(meetingForm.end)}
                      onChange={(date: Date | null) => {
                        if (date) {
                          const newEnd = new Date(date);
                          if (!meetingForm.allDay) {
                            const currentEnd = getDateFromString(meetingForm.end);
                            if (currentEnd) {
                              newEnd.setHours(currentEnd.getHours(), currentEnd.getMinutes());
                            }
                          }
                          setMeetingForm({ ...meetingForm, end: newEnd.toISOString().slice(0, 16) });
                        }
                      }}
                      dateFormat="dd/MM/yyyy"
                      locale="fr"
                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white text-gray-900"
                      placeholderText="Date"
                      customInput={<Input className="bg-white text-gray-900" />}
                      minDate={getDateFromString(meetingForm.start)}
                    />
                  </div>
                  {!meetingForm.allDay && (
                    <DatePicker
                      selected={getDateFromString(meetingForm.end)}
                      onChange={(date: Date | null) => {
                        if (date) {
                          const currentEnd = getDateFromString(meetingForm.end) || new Date();
                          const newEnd = new Date(currentEnd);
                          newEnd.setHours(date.getHours(), date.getMinutes());
                          setMeetingForm({ ...meetingForm, end: newEnd.toISOString().slice(0, 16) });
                        }
                      }}
                      showTimeSelect
                      showTimeSelectOnly
                      timeIntervals={15}
                      timeCaption="Heure"
                      dateFormat="HH:mm"
                      className="w-32 bg-white text-gray-900"
                      customInput={<Input className="bg-white text-gray-900" />}
                    />
                  )}
                </div>
              </div>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="allDay"
                checked={meetingForm.allDay}
                onCheckedChange={(checked) =>
                  setMeetingForm({ ...meetingForm, allDay: checked as boolean })
                }
              />
              <Label htmlFor="allDay" className="text-gray-800">Toute la journée</Label>
            </div>

            <div className="space-y-2">
              <Label className="text-gray-800">Lieu</Label>
              <Input
                value={meetingForm.location}
                onChange={(e) =>
                  setMeetingForm({ ...meetingForm, location: e.target.value })
                }
                placeholder="Ajouter un lieu"
                className="bg-white text-gray-900"
              />
            </div>

            <div className="space-y-2">
              <Label className="text-gray-800">Description</Label>
              <Textarea
                value={meetingForm.description}
                onChange={(e) =>
                  setMeetingForm({ ...meetingForm, description: e.target.value })
                }
                placeholder="Ajouter une description"
                className="bg-white text-gray-900"
                rows={3}
              />
            </div>

            <div className="space-y-2">
              <Label className="text-gray-800">Récurrence</Label>
              <Select
                value={meetingForm.recurrence}
                onValueChange={(value: "none" | "daily" | "weekly" | "monthly") =>
                  setMeetingForm({ ...meetingForm, recurrence: value })
                }
              >
                <SelectTrigger className="w-full bg-white text-gray-900">
                  <SelectValue placeholder="Sélectionner une récurrence" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="none">Aucune récurrence</SelectItem>
                  <SelectItem value="daily">Tous les jours</SelectItem>
                  <SelectItem value="weekly">Toutes les semaines</SelectItem>
                  <SelectItem value="monthly">Tous les mois</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="bg-gray-50 p-3 rounded-lg">
              <p className="text-sm text-gray-600">
                <strong>{meetingForm.type === "group" ? "Groupe" : "Mission"}:</strong> {meetingForm.entityName}
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setShowMeetingDialog(false);
                setMeetingForm({
                  type: "",
                  entityId: "",
                  entityName: "",
                  title: "",
                  start: "",
                  end: "",
                  allDay: false,
                  location: "",
                  description: "",
                  recurrence: "none",
                });
              }}
              className="bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
            >
              Annuler
            </Button>
            <Button
              onClick={handleSaveMeeting}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              Planifier
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  );
}