"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RefreshCw, Calendar as CalendarIcon } from "lucide-react";
import { useRouter } from "next/navigation";

interface Event {
  id: string;
  title: string;
  start: string;
  end: string;
  allDay: boolean;
  calendar: string;
  calendarColor: string;
}

export function Calendar() {
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  const fetchEvents = async () => {
    console.log('🔍 Calendar Widget - Starting fetchEvents');
    setLoading(true);
    try {
      console.log('📡 Calendar Widget - Making API request to /api/calendars');
      const response = await fetch('/api/calendars', {
        credentials: 'include'
      });
      
      console.log('📥 Calendar Widget - Response status:', response.status);
      if (!response.ok) {
        const errorText = await response.text();
        console.error('❌ Calendar Widget - API Error:', {
          status: response.status,
          statusText: response.statusText,
          errorText
        });
        throw new Error(`Failed to fetch events: ${response.status} ${response.statusText}`);
      }
      
      const calendarsData = await response.json();
      console.log('📊 Calendar Widget - Raw API Response:', calendarsData);

      // Get current date at the start of the day
      const now = new Date();
      now.setHours(0, 0, 0, 0);
      console.log('📅 Calendar Widget - Current date:', now.toISOString());

      // Extract and process events from all calendars
      console.log('🔄 Calendar Widget - Processing events from calendars');
      const allEvents = calendarsData.flatMap((calendar: any) => {
        console.log(`📋 Processing calendar: ${calendar.name} (${calendar.id})`);
        return (calendar.events || []).map((event: any) => {
          console.log(`📝 Processing event: ${event.title} (${event.id})`);
          return {
            id: event.id,
            title: event.title,
            start: event.start,
            end: event.end,
            allDay: event.isAllDay,
            calendar: calendar.name,
            calendarColor: calendar.color
          };
        });
      });

      console.log('📈 Calendar Widget - Total events before filtering:', allEvents.length);

      // Filter for upcoming events
      const upcomingEvents = allEvents
        .filter((event: any) => {
          const eventDate = new Date(event.start);
          const isUpcoming = eventDate >= now;
          console.log(`⏰ Event ${event.title}: ${eventDate.toISOString()} is ${isUpcoming ? 'upcoming' : 'past'}`);
          return isUpcoming;
        })
        .sort((a: any, b: any) => {
          const dateA = new Date(a.start);
          const dateB = new Date(b.start);
          return dateA.getTime() - dateB.getTime();
        })
        .slice(0, 7);

      console.log('✅ Calendar Widget - Final processed events:', upcomingEvents);
      setEvents(upcomingEvents);
      setError(null);
    } catch (err) {
      console.error('❌ Calendar Widget - Error in fetchEvents:', err);
      setError(err instanceof Error ? err.message : 'Failed to load events');
    } finally {
      console.log('🏁 Calendar Widget - fetchEvents completed');
      setLoading(false);
    }
  };

  useEffect(() => {
    console.log('🔄 Calendar Widget - Component mounted, fetching events');
    fetchEvents();
  }, []);

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return new Intl.DateTimeFormat('fr-FR', {
      day: '2-digit',
      month: 'short'
    }).format(date);
  };

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    return new Intl.DateTimeFormat('fr-FR', {
      hour: '2-digit',
      minute: '2-digit',
    }).format(date);
  };

  return (
    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
      <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
        <CardTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
          <CalendarIcon className="h-5 w-5 text-gray-600" />
          Agenda
        </CardTitle>
        <Button 
          variant="ghost" 
          size="icon" 
          onClick={() => fetchEvents()}
          className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
        >
          <RefreshCw className="h-3.5 w-3.5 text-gray-600" />
        </Button>
      </CardHeader>
      <CardContent className="p-3">
        {loading ? (
          <div className="flex items-center justify-center py-6">
            <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
          </div>
        ) : error ? (
          <div className="text-xs text-red-500 text-center py-3">{error}</div>
        ) : events.length === 0 ? (
          <div className="text-xs text-gray-500 text-center py-6">No upcoming events</div>
        ) : (
          <div className="space-y-2 max-h-[400px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
            {events.map((event) => (
              <div 
                key={event.id}
                className="p-2 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100"
              >
                <div className="flex gap-2">
                  <div 
                    className="flex-shrink-0 w-14 h-14 rounded-lg flex flex-col items-center justify-center border"
                    style={{
                      backgroundColor: `${event.calendarColor}10`,
                      borderColor: event.calendarColor
                    }}
                  >
                    <span 
                      className="text-[10px] font-medium"
                      style={{ color: event.calendarColor }}
                    >
                      {formatDate(event.start)}
                    </span>
                    <span 
                      className="text-[10px] font-bold mt-0.5"
                      style={{ color: event.calendarColor }}
                    >
                      {formatTime(event.start)}
                    </span>
                  </div>
                  <div className="flex-1 min-w-0 space-y-1">
                    <div className="flex items-start justify-between gap-2">
                      <p className="text-sm font-medium text-gray-800 line-clamp-2 flex-1">
                        {event.title}
                      </p>
                      {!event.allDay && (
                        <span className="text-[10px] text-gray-500 whitespace-nowrap">
                          {formatTime(event.start)} - {formatTime(event.end)}
                        </span>
                      )}
                    </div>
                    <div 
                      className="flex items-center text-[10px] px-1.5 py-0.5 rounded-md"
                      style={{
                        backgroundColor: `${event.calendarColor}10`,
                        color: event.calendarColor
                      }}
                    >
                      <span className="truncate">{event.calendar}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}