import React from 'react';
import { usePlanning } from '@/context/PlanningContext';
import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
import { getMonthEventCount } from '@/utils/events';
import { isSameMonth } from 'date-fns';

const MonthCard = ({ month, eventCount, onClick }) => (
  <div
    className={`bg-white p-4 rounded shadow hover:shadow-lg cursor-pointer
      ${isSameMonth(month, new Date()) ? 'ring-2 ring-emerald-500' : ''}`}
    onClick={onClick}
  >
    <h3 className="font-medium text-center mb-2">
      {format(month, 'MMMM', { locale: fr })}
    </h3>
    <div className="text-center text-sm">
      <span className="inline-flex items-center justify-center bg-emerald-100 text-emerald-800 px-2 py-1 rounded-full">
        {eventCount} événements
      </span>
    </div>
  </div>
);

const YearView = ({ onDateClick }) => {
  const { currentDate, events, setViewType, setCurrentDate } = usePlanning();

  const months = Array.from(
    { length: 12 },
    (_, i) => new Date(currentDate.getFullYear(), i, 1)
  );

  const handleMonthClick = (month) => {
    setCurrentDate(month);
    setViewType('month');
  };

  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {months.map((month) => (
        <MonthCard
          key={month.getTime()}
          month={month}
          eventCount={getMonthEventCount(month, events)}
          onClick={() => handleMonthClick(month)}
        />
      ))}
    </div>
  );
};

export default YearView;