import React from 'react';
import { Calendar, User, Clock } from 'lucide-react';
import type { TimeOffRequest } from '../../types/index.js';

interface TimeOffCalendarProps {
  requests?: TimeOffRequest[];
}

export const TimeOffCalendar: React.FC<TimeOffCalendarProps> = ({
  requests = [],
}) => {
  const approved = requests.filter(r => r.status === 'APPROVED');
  const pending = requests.filter(r => r.status === 'PENDING');

  // Group by month
  const requestsByMonth: Record<string, TimeOffRequest[]> = {};
  approved.forEach(req => {
    const month = req.startDate.substring(0, 7); // YYYY-MM
    if (!requestsByMonth[month]) requestsByMonth[month] = [];
    requestsByMonth[month].push(req);
  });

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Time Off Calendar</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Approved</p>
              <p className="text-3xl font-bold text-green-600">{approved.length}</p>
            </div>
            <Calendar className="w-10 h-10 text-green-400" />
          </div>
        </div>

        <div className="bg-yellow-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Pending</p>
              <p className="text-3xl font-bold text-yellow-600">{pending.length}</p>
            </div>
            <Clock className="w-10 h-10 text-yellow-400" />
          </div>
        </div>

        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Days</p>
              <p className="text-3xl font-bold text-blue-600">
                {approved.reduce((sum, r) => sum + r.days, 0)}
              </p>
            </div>
            <User className="w-10 h-10 text-blue-400" />
          </div>
        </div>
      </div>

      <div className="space-y-6">
        {Object.entries(requestsByMonth).map(([month, reqs]) => (
          <div key={month}>
            <h3 className="font-semibold text-lg mb-3">
              {new Date(month + '-01').toLocaleDateString('en-US', { year: 'numeric', month: 'long' })}
            </h3>
            <div className="space-y-2">
              {reqs.map((req) => (
                <div key={req.id} className="border-l-4 border-blue-500 bg-gray-50 p-3 rounded">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <User className="w-4 h-4 text-gray-500" />
                        <span className="font-medium">Employee {req.employeeId}</span>
                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                          {req.type}
                        </span>
                      </div>
                      <div className="text-sm text-gray-600">
                        {req.startDate} to {req.endDate}
                      </div>
                      {req.reason && (
                        <p className="text-sm text-gray-500 mt-1">{req.reason}</p>
                      )}
                    </div>
                    <div className="text-right">
                      <p className="text-lg font-bold text-blue-600">{req.days}</p>
                      <p className="text-xs text-gray-500">days</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
