import React, { useMemo } from 'react';
import { FeedingEvent } from '../../types';

interface DailyEventsListProps {
  selectedDate: Date;
  events: FeedingEvent[];
  onEditEvent: (event: FeedingEvent) => void;
}

const eventConfig = {
  completed: { icon: 'fa-check-circle', color: 'text-green-500' },
  upcoming: { icon: 'fa-clock', color: 'text-blue-500' },
  skipped: { icon: 'fa-ban', color: 'text-gray-500' },
};

const typeConfig = {
  'AI Recommended': { icon: 'fa-robot', color: 'text-purple-600' },
  Manual: { icon: 'fa-user', color: 'text-gray-600' },
  Skipped: { icon: 'fa-forward', color: 'text-gray-500' },
};

const DailyEventsList: React.FC<DailyEventsListProps> = ({ selectedDate, events, onEditEvent }) => {
  const dailyEvents = useMemo(() => {
    return events
      .filter(
        (event) =>
          event.time.getFullYear() === selectedDate.getFullYear() &&
          event.time.getMonth() === selectedDate.getMonth() &&
          event.time.getDate() === selectedDate.getDate()
      )
      .sort((a, b) => a.time.getTime() - b.time.getTime());
  }, [selectedDate, events]);

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm h-full flex flex-col">
      <h2 className="text-xl font-bold mb-4">
        Jadwal untuk{' '}
        <span className="text-red-600">
          {selectedDate.toLocaleDateString('id-ID', { day: 'numeric', month: 'long' })}
        </span>
      </h2>
      {dailyEvents.length > 0 ? (
        <div className="space-y-4 overflow-y-auto pr-2 flex-grow">
          {dailyEvents.map((event) => {
            const statusInfo = eventConfig[event.status];
            const typeInfo = typeConfig[event.type];
            return (
              <div
                key={event.id}
                className="p-3 bg-gray-50 border border-gray-200 rounded-lg flex items-center space-x-4"
              >
                <div className={`text-2xl w-8 text-center ${statusInfo.color}`}>
                  <i className={`fa-solid ${statusInfo.icon}`}></i>
                </div>
                <div className="flex-grow">
                  <p className="font-bold text-gray-800">
                    Pukul{' '}
                    {event.time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
                  </p>
                  <p className="text-sm text-gray-600 flex items-center space-x-2">
                    <span className={typeInfo.color}>
                      <i className={`fa-solid ${typeInfo.icon}`}></i> {event.type}
                    </span>
                  </p>
                </div>
                <button
                  onClick={() => onEditEvent(event)}
                  className="text-gray-500 hover:text-blue-600 text-lg"
                >
                  <i className="fa-solid fa-pencil"></i>
                </button>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="flex-grow flex flex-col items-center justify-center text-center text-gray-500">
          <i className="fa-solid fa-calendar-check text-4xl text-gray-300"></i>
          <p className="mt-3 font-semibold">Tidak ada jadwal pakan</p>
          <p className="text-sm">Tidak ada jadwal pemberian pakan untuk tanggal ini.</p>
        </div>
      )}
    </div>
  );
};

export default DailyEventsList;