import { X } from "lucide-react";

const TimingsModal = ({ isOpen, onClose, workingDays }: any) => {
  const formatTime = (timeString: string) => {
    if (!timeString) return '';
    const time = new Date(timeString);
    return time.toLocaleTimeString('en-US', {
      hour: 'numeric',
      minute: '2-digit',
      hour12: true,
    }).toUpperCase();
  };

  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

  if (!isOpen) return null;

  return (
    <>
      <div
        className="fixed inset-0 bg-black bg-opacity-50 z-40"
        onClick={onClose}
      />

      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-lg shadow-lg w-full max-w-sm mx-auto relative">
          {/* Header */}
          <div className="bg-brand-500 text-white px-4 py-3 rounded-t-lg flex items-center justify-between">
            <h3 className="font-semibold text-sm">Outlet Timings</h3>
            <button
              onClick={onClose}
              className="text-white hover:text-gray-200 transition-colors"
            >
              <X size={18} />
            </button>
          </div>

          {/* Content */}
          <div className="p-4 max-h-96 overflow-y-auto">
            <div className="space-y-6">
              {days?.map((day) => {
                const dayData = workingDays?.find((d: any) => d.day === day);
                if (!dayData) {
                  return (
                    <div key={day} className="flex flex-col">
                      <div className="font-semibold text-gray-900 text-sm mb-1">{day}</div>
                      <div className="text-gray-600 text-xs">Closed</div>
                    </div>
                  );
                }

                if (dayData.is_24_hrs && (!dayData.timing || dayData.timing.length === 0)) {
                  return (
                    <div key={day} className="flex flex-col">
                      <div className="font-semibold text-gray-900 text-sm mb-1">{day}</div>
                      <div className="text-gray-600 text-xs">Closed</div>
                    </div>
                  );
                }

                if (dayData.is_24_hrs) {
                  return (
                    <div key={day} className="flex flex-col">
                      <div className="font-semibold text-gray-900 text-sm mb-1">{day}</div>
                      <div className="text-gray-600 text-xs">Open 24 Hours</div>
                    </div>
                  );
                }

                if (!dayData.timing || dayData.timing.length === 0) {
                  return (
                    <div key={day} className="flex flex-col">
                      <div className="font-semibold text-gray-900 text-sm mb-1">{day}</div>
                      <div className="text-gray-600 text-xs">Closed</div>
                    </div>
                  );
                }

                return (
                  <div key={day} className="flex flex-col">
                    <div className="font-semibold text-gray-900 text-h5 mb-1">{day}</div>
                    {dayData?.timing?.map(({ start_time, end_time }: any, idx: number) => (
                      <div key={idx} className="text-gray-600 text-xs">
                        {formatTime(start_time)} - {formatTime(end_time)}
                      </div>
                    ))}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default TimingsModal;