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

interface DailyScheduleTimelineProps {
  events: FeedingEvent[];
}

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

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 DailyScheduleTimeline: React.FC<DailyScheduleTimelineProps> = ({ events }) => {
  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-6">Linimasa Pemberian Pakan Harian</h2>
      <div className="relative pl-5">
        {/* Vertical Line */}
        <div className="absolute left-11 top-0 bottom-0 w-0.5 bg-gray-200"></div>

        {events.map((event) => {
          const config = eventConfig[event.status];
          const typeInfo = typeConfig[event.type];

          return (
            <div key={event.id} className="relative flex items-start mb-6">
              {/* Time and Icon */}
              <div className="flex-shrink-0 flex flex-col items-center mr-6 z-10">
                <div
                  className={`w-12 h-12 rounded-full flex items-center justify-center ${config.bg}`}
                >
                  <i className={`fa-solid ${config.icon} text-2xl ${config.color}`}></i>
                </div>
                <div className="mt-1 font-bold text-gray-700">
                  {event.time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
                </div>
              </div>

              {/* Card Details */}
              <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 w-full">
                <div className="flex justify-between items-center">
                  <p className={`font-semibold text-lg ${config.color}`}>
                    {event.status.charAt(0).toUpperCase() + event.status.slice(1)}
                  </p>
                  <div
                    className={`flex items-center text-sm font-medium ${typeInfo.color}`}
                    title={event.type}
                  >
                    <i className={`fa-solid ${typeInfo.icon} mr-2`}></i>
                    <span>{event.type}</span>
                  </div>
                </div>
                <p className="text-sm text-gray-600 mt-1">
                  Status jadwal untuk pukul{' '}
                  {event.time.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}.
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default DailyScheduleTimeline;