import { useState } from 'react';
import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from 'lucide-react';
export interface CalendarEvent {
  id: string;
  title: string;
  date: string; // YYYY-MM-DD
  time?: string; // HH:MM
  type: 'meeting' | 'task' | 'milestone' | 'reminder';
  participants?: { name: string; avatar?: string }[];
  color?: string; // Hex or theme color
}

export interface CalendarProps {
  events: CalendarEvent[];
  onEventClick?: (event: CalendarEvent) => void;
  className?: string;
}

export function Calendar({ events, onEventClick, className = '' }: CalendarProps) {
  const [currentDate, setCurrentDate] = useState(new Date());

  const getDaysInMonth = (year: number, month: number) => {
    return new Date(year, month + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (year: number, month: number) => {
    return new Date(year, month, 1).getDay();
  };

  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  
  const daysInMonth = getDaysInMonth(year, month);
  const firstDay = getFirstDayOfMonth(year, month);
  
  const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  const dayNames = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"];

  const handlePrevMonth = () => {
    setCurrentDate(new Date(year, month - 1, 1));
  };

  const handleNextMonth = () => {
    setCurrentDate(new Date(year, month + 1, 1));
  };

  // Generate calendar grid
  const days = [];
  for (let i = 0; i < firstDay; i++) {
    days.push(<div key={`empty-${i}`} className="h-32 border border-border/20 bg-background/30 rounded-xl opacity-50" />);
  }
  
  for (let day = 1; day <= daysInMonth; day++) {
    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    const dayEvents = events.filter(e => e.date === dateStr);
    const isToday = dateStr === new Date().toISOString().split('T')[0];

    days.push(
      <div 
        key={`day-${day}`} 
        className={`h-32 border rounded-xl p-2 flex flex-col transition-colors overflow-hidden group ${
          isToday 
            ? 'border-primary/50 bg-primary/5 shadow-[inset_0_0_20px_color-mix(in_oklab,var(--colors-primary)_10%,transparent)]' 
            : 'border-border/50 bg-surface/30 hover:border-border hover:bg-surface'
        }`}
      >
        <span className={`text-sm font-bold w-7 h-7 flex items-center justify-center rounded-full mb-1 ${
          isToday ? 'bg-primary text-white shadow-lg' : 'text-text-muted group-hover:text-text'
        }`}>
          {day}
        </span>
        
        <div className="flex-1 overflow-y-auto space-y-1 custom-scrollbar pr-1">
          {dayEvents.map(event => (
            <div 
              key={event.id}
              onClick={() => onEventClick?.(event)}
              className="px-2 py-1.5 rounded-md bg-background border border-border hover:border-primary/50 text-xs font-medium text-text cursor-pointer truncate flex flex-col gap-1 transition-all shadow-sm hover:shadow-md"
            >
              <div className="flex items-center gap-1.5 truncate">
                <div className={`w-1.5 h-1.5 rounded-full bg-${event.type === 'meeting' ? 'info' : event.type === 'milestone' ? 'warning' : 'primary'}`} />
                <span className="truncate">{event.title}</span>
              </div>
              {event.time && (
                <span className="text-[9px] text-text-muted font-mono ml-3">{event.time}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className={`bg-surface/50 backdrop-blur-xl border border-border/50 rounded-3xl p-6 shadow-2xl flex flex-col ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 bg-primary/10 text-primary border border-primary/20 rounded-2xl flex items-center justify-center shadow-lg">
            <CalendarIcon className="w-6 h-6" />
          </div>
          <div>
            <h2 className="text-2xl font-bold text-text flex items-center gap-2">
              {monthNames[month]} <span className="text-primary font-light">{year}</span>
            </h2>
            <p className="text-sm text-text-muted">Vista Mensual</p>
          </div>
        </div>
        
        <div className="flex items-center gap-2">
          <button onClick={handlePrevMonth} className="p-2.5 rounded-xl bg-background border border-border text-text hover:border-primary hover:text-primary transition-all shadow-sm">
            <ChevronLeft className="w-5 h-5" />
          </button>
          <button onClick={() => setCurrentDate(new Date())} className="px-4 py-2.5 rounded-xl bg-background border border-border text-text text-sm font-bold hover:border-primary hover:text-primary transition-all shadow-sm">
            Hoy
          </button>
          <button onClick={handleNextMonth} className="p-2.5 rounded-xl bg-background border border-border text-text hover:border-primary hover:text-primary transition-all shadow-sm">
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      </div>

      {/* Days Header */}
      <div className="grid grid-cols-7 gap-4 mb-4">
        {dayNames.map(day => (
          <div key={day} className="text-center text-xs font-bold uppercase tracking-widest text-text-muted">
            {day}
          </div>
        ))}
      </div>

      {/* Calendar Grid */}
      <div className="grid grid-cols-7 gap-4 flex-1">
        {days}
      </div>
    </div>
  );
}