'use client';

import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';

interface DailyCalendarProps {
  currentDate: Date;
  onDateSelect: (date: Date) => void;
  dailyDates: string[]; // Liste des dates qui ont des dailies (format YYYY-MM-DD)
}

export function DailyCalendar({ currentDate, onDateSelect, dailyDates }: DailyCalendarProps) {
  const [viewDate, setViewDate] = useState(new Date(currentDate));

  // Formatage des dates pour comparaison (éviter le décalage timezone)
  const formatDateKey = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  const currentDateKey = formatDateKey(currentDate);

  // Navigation mois
  const goToPreviousMonth = () => {
    const newDate = new Date(viewDate);
    newDate.setMonth(newDate.getMonth() - 1);
    setViewDate(newDate);
  };

  const goToNextMonth = () => {
    const newDate = new Date(viewDate);
    newDate.setMonth(newDate.getMonth() + 1);
    setViewDate(newDate);
  };

  const goToToday = () => {
    const today = new Date();
    setViewDate(today);
    onDateSelect(today);
  };

  // Obtenir les jours du mois
  const getDaysInMonth = () => {
    const year = viewDate.getFullYear();
    const month = viewDate.getMonth();
    
    // Premier jour du mois
    const firstDay = new Date(year, month, 1);
    // Dernier jour du mois
    const lastDay = new Date(year, month + 1, 0);
    
    // Premier lundi de la semaine contenant le premier jour
    const startDate = new Date(firstDay);
    const dayOfWeek = firstDay.getDay();
    const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Lundi = 0
    startDate.setDate(firstDay.getDate() - daysToSubtract);
    
    // Générer toutes les dates du calendrier (6 semaines)
    const days = [];
    const currentDay = new Date(startDate);
    
    for (let i = 0; i < 42; i++) { // 6 semaines × 7 jours
      days.push(new Date(currentDay));
      currentDay.setDate(currentDay.getDate() + 1);
    }
    
    return { days, firstDay, lastDay };
  };

  const { days, firstDay, lastDay } = getDaysInMonth();

  const handleDateClick = (date: Date) => {
    onDateSelect(date);
  };

  const isToday = (date: Date) => {
    const today = new Date();
    return formatDateKey(date) === formatDateKey(today);
  };

  const isCurrentMonth = (date: Date) => {
    return date.getMonth() === viewDate.getMonth();
  };

  const hasDaily = (date: Date) => {
    return dailyDates.includes(formatDateKey(date));
  };

  const isSelected = (date: Date) => {
    return formatDateKey(date) === currentDateKey;
  };

  const formatMonthYear = () => {
    return viewDate.toLocaleDateString('fr-FR', {
      month: 'long',
      year: 'numeric'
    });
  };

  const weekDays = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];

  return (
    <Card className="p-4">
      {/* Header avec navigation */}
      <div className="flex items-center justify-between mb-4">
        <Button
          onClick={goToPreviousMonth}
          variant="ghost"
          size="sm"
          className="text-[var(--foreground)]"
        >
          ←
        </Button>
        
        <h3 className="text-lg font-bold text-[var(--foreground)] capitalize">
          {formatMonthYear()}
        </h3>
        
        <Button
          onClick={goToNextMonth}
          variant="ghost"
          size="sm"
          className="text-[var(--foreground)]"
        >
          →
        </Button>
      </div>

      {/* Bouton Aujourd'hui */}
      <div className="mb-4 text-center">
        <Button
          onClick={goToToday}
          variant="primary"
          size="sm"
        >
          Aujourd'hui
        </Button>
      </div>

      {/* Jours de la semaine */}
      <div className="grid grid-cols-7 gap-1 mb-2">
        {weekDays.map((day) => (
          <div
            key={day}
            className="text-center text-xs font-medium text-[var(--muted-foreground)] p-2"
          >
            {day}
          </div>
        ))}
      </div>

      {/* Grille du calendrier */}
      <div className="grid grid-cols-7 gap-1">
        {days.map((date, index) => {
          const dateKey = formatDateKey(date);
          const isCurrentMonthDay = isCurrentMonth(date);
          const isTodayDay = isToday(date);
          const hasCheckboxes = hasDaily(date);
          const isSelectedDay = isSelected(date);

          return (
            <button
              key={index}
              onClick={() => handleDateClick(date)}
              className={`
                relative p-2 text-sm rounded transition-all hover:bg-[var(--muted)]/50
                ${isCurrentMonthDay 
                  ? 'text-[var(--foreground)]' 
                  : 'text-[var(--muted-foreground)]'
                }
                ${isTodayDay 
                  ? 'bg-[var(--primary)]/20 border border-[var(--primary)]' 
                  : ''
                }
                ${isSelectedDay 
                  ? 'bg-[var(--primary)] text-white' 
                  : ''
                }
                ${hasCheckboxes 
                  ? 'font-bold' 
                  : ''
                }
              `}
            >
              {date.getDate()}
              
              {/* Indicateur de daily existant */}
              {hasCheckboxes && (
                <div className={`
                  absolute bottom-1 right-1 w-2 h-2 rounded-full
                  ${isSelectedDay 
                    ? 'bg-white' 
                    : 'bg-[var(--primary)]'
                  }
                `} />
              )}
            </button>
          );
        })}
      </div>

      {/* Légende */}
      <div className="mt-4 text-xs text-[var(--muted-foreground)] space-y-1">
        <div className="flex items-center gap-2">
          <div className="w-2 h-2 rounded-full bg-[var(--primary)]"></div>
          <span>Jour avec des tâches</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded border border-[var(--primary)] bg-[var(--primary)]/20"></div>
          <span>Aujourd'hui</span>
        </div>
      </div>
    </Card>
  );
}