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

interface ScheduleOverviewProps {
  recommendation: FeedScheduleRecommendation;
}

const ScheduleOverview: React.FC<ScheduleOverviewProps> = ({ recommendation }) => {
  const { nextFeedingTime, lastFeedingTime, reason } = recommendation;

  const formatTime = (date: Date) =>
    date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
  const formatDate = (date: Date) =>
    date.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long' });

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border border-red-200 bg-red-50/50">
      <h2 className="text-xl font-bold text-gray-800 mb-4">Rekomendasi Jadwal AI</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="flex items-center space-x-4">
          <div className="flex-shrink-0">
            <i className="fa-solid fa-clock text-4xl text-red-500"></i>
          </div>
          <div>
            <p className="text-sm font-semibold text-gray-600">Jadwal Pakan Berikutnya</p>
            <p className="text-3xl font-bold text-red-600">{formatTime(nextFeedingTime)}</p>
            <p className="text-sm text-gray-500">{formatDate(nextFeedingTime)}</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <div className="flex-shrink-0">
            <i className="fa-solid fa-check-circle text-4xl text-green-500"></i>
          </div>
          <div>
            <p className="text-sm font-semibold text-gray-600">Pemberian Pakan Terakhir</p>
            <p className="text-2xl font-bold text-gray-700">{formatTime(lastFeedingTime)}</p>
          </div>
        </div>
      </div>
      <div className="mt-6 pt-4 border-t border-red-200">
        <p className="text-sm font-semibold text-gray-600 flex items-center">
          <i className="fa-solid fa-lightbulb text-yellow-500 mr-2"></i> Alasan Rekomendasi AI:
        </p>
        <p className="mt-1 text-sm text-gray-700 italic">"{reason}"</p>
      </div>
      <div className="mt-6 pt-4 border-t border-red-200 flex items-center justify-end space-x-3">
        <button className="px-4 py-2 bg-white border border-gray-300 text-gray-800 text-sm font-semibold rounded-lg hover:bg-gray-100 transition shadow-sm">
          <i className="fa-solid fa-clock-rotate-left mr-2"></i> Tunda 30 Menit
        </button>
        <button className="px-4 py-2 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 transition shadow-sm">
          <i className="fa-solid fa-play-circle mr-2"></i> Mulai Sekarang
        </button>
      </div>
    </div>
  );
};

export default ScheduleOverview;