interface DaySchedule {
  day: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
  open?: string;
  close?: string;
  closed?: boolean;
}

interface ScheduleCardProps {
  schedules: DaySchedule[];
  onSuggestEdit?: () => void;
}

const DAYS: DaySchedule['day'][] = [
  'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
];

function getCurrentDay(): DaySchedule['day'] {
  return DAYS[new Date().getDay()];
}

function isOpenNow(schedules: DaySchedule[]): boolean {
  const today = getCurrentDay();
  const todaySchedule = schedules.find((s) => s.day === today);
  if (!todaySchedule || todaySchedule.closed || !todaySchedule.open || !todaySchedule.close) return false;

  const now = new Date();
  const [openHour, openMin] = todaySchedule.open.replace(/[^0-9.]/g, '').split('.').map(Number);
  const [closeHour, closeMin] = todaySchedule.close.replace(/[^0-9.]/g, '').split('.').map(Number);
  const openIsPm = todaySchedule.open.toUpperCase().includes('PM');
  const closeIsPm = todaySchedule.close.toUpperCase().includes('PM');

  const openTotal = (openIsPm && openHour !== 12 ? openHour + 12 : openHour) * 60 + (openMin || 0);
  const closeTotal = (closeIsPm && closeHour !== 12 ? closeHour + 12 : closeHour) * 60 + (closeMin || 0);
  const nowTotal = now.getHours() * 60 + now.getMinutes();

  return nowTotal >= openTotal && nowTotal < closeTotal;
}

export function ScheduleCard({ schedules, onSuggestEdit }: ScheduleCardProps) {
  const today = getCurrentDay();

  return (
    <div className="bg-black/[0.27] rounded-xl mt-2 px-4 py-4 w-full">
      <div className="flex items-start justify-between mb-4">
        <div>
          <h3 className="text-xl font-bold">Hours</h3>
        </div>
        <button
          onClick={onSuggestEdit}
          className="text-sm underline underline-offset-2 hover:text-white transition-colors text-tertiary mt-1"
        >
          Suggest an edit
        </button>
      </div>

      {/* <hr className="border-[#38444d] mb-4 mt-2" /> */}

      {schedules.length === 0 ? (
        <p className="text-sm text-tertiary italic">No data yet</p>
      ) : (
        <div className="flex flex-col gap-1">
          {DAYS.map((day) => {
            const schedule = schedules.find((s) => s.day === day);
            const isToday = day === today;

            return (
              <div
                key={day}
                className={`flex items-center justify-between text-sm ${isToday ? 'font-bold text-white' : 'text-tertiary'}`}
              >
                <span>{day}</span>
                <span>
                  {!schedule || schedule.closed
                    ? 'Closed'
                    : `${schedule.open} - ${schedule.close}`}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

export default ScheduleCard;