import ShiftSlot from './ShiftSlot'

const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

export default function DayColumn({
  date,
  isToday,
  activeShifts = new Set(),
  shifts = {},
  nextDayShift1 = [],
  nextDayShift1Active = false,
  showShift2 = false,
  windowLookup = new Map(),
  onWindowSelect,
}) {
  const dayName = DAY_NAMES[date.getDay()]
  const dayNum  = date.getDate()
  const dateKey = date.toISOString().slice(0, 10)

  function getWindowForShift(shiftIndex) {
    return windowLookup.get(`${dateKey}::shift${shiftIndex}`) ?? null
  }

  const shift2Visible = showShift2 || shifts.shift2.length > 0 || Boolean(getWindowForShift(2))

  return (
    <div className="flex flex-col min-w-0 flex-1 rounded-lg border border-gray-700 bg-gray-800/40">
      {/* Day header — subtle today ring, no full-column highlight */}
      <div
        className={`text-center py-1.5 rounded-t-lg ${
          isToday ? 'bg-gray-600 text-white' : 'bg-gray-700/60 text-gray-300'
        }`}
      >
        <p className="text-[11px] font-semibold uppercase tracking-wide leading-none">
          {dayName}
        </p>
        <p className={`text-base font-bold leading-tight ${isToday ? 'text-white' : 'text-gray-100'}`}>
          {dayNum}
        </p>
      </div>

      {/* Shifts */}
      <div className="flex flex-col flex-1 px-0.5 py-1">
        <ShiftSlot
          label="9AM–5PM"
          tests={shifts.shift2}
          visible={true}
          active={activeShifts.has(2)}
          windowDetails={getWindowForShift(2)}
          onWindowSelect={onWindowSelect}
        />
        <ShiftSlot
          label="5PM–12AM"
          tests={shifts.shift3}
          visible={true}
          active={activeShifts.has(3)}
          windowDetails={getWindowForShift(3)}
          onWindowSelect={onWindowSelect}
        />
        <ShiftSlot
          label="12AM–9AM (next day)"
          tests={nextDayShift1}
          visible={true}
          active={nextDayShift1Active}
          windowDetails={null}
          onWindowSelect={onWindowSelect}
        />
      </div>
    </div>
  )
}