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,
  shiftMinRows = { shift2: 1, shift3: 1, nextDayShift1: 1 },
  slotHeights = { shift2: 0, shift3: 0, nextDayShift1: 0 },
  windowLookup = new Map(),
  onWindowSelect,
}) {
  const dayName = DAY_NAMES[date.getDay()]
  const dayNum  = date.getDate()
  const dateKey = date.toISOString().slice(0, 10)
  const nextDateKey = new Date(date.getTime() + (24 * 60 * 60 * 1000)).toISOString().slice(0, 10)

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

  function getNextDayShift1Window() {
    return windowLookup.get(`${nextDateKey}::shift1`) ?? 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={`h-12 flex flex-col justify-center 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">
        <ShiftSlot
          tests={shifts.shift2}
          visible={true}
          active={activeShifts.has(2)}
          windowDetails={getWindowForShift(2)}
          minContentRows={shiftMinRows.shift2}
          slotHeightPx={slotHeights.shift2}
          onWindowSelect={onWindowSelect}
        />
        <ShiftSlot
          tests={shifts.shift3}
          visible={true}
          active={activeShifts.has(3)}
          windowDetails={getWindowForShift(3)}
          minContentRows={shiftMinRows.shift3}
          slotHeightPx={slotHeights.shift3}
          onWindowSelect={onWindowSelect}
        />
        <ShiftSlot
          tests={nextDayShift1}
          visible={true}
          active={nextDayShift1Active}
          windowDetails={getNextDayShift1Window()}
          minContentRows={shiftMinRows.nextDayShift1}
          slotHeightPx={slotHeights.nextDayShift1}
          onWindowSelect={onWindowSelect}
        />
      </div>
    </div>
  )
}
