import TestCard from './TestCard'

const TEST_CARD_ROW_HEIGHT_PX = 22
const TEST_CARD_ROW_GAP_PX = 2

export default function ShiftSlot({
  tests = [],
  visible = true,
  active = false,
  windowDetails = null,
  minContentRows = 3,
  slotHeightPx = null,
  onWindowSelect,
}) {
  if (!visible) return null

  const clickable = Boolean(windowDetails && onWindowSelect)
  const targetRows = Math.max(1, minContentRows)
  const minContentHeightPx = (targetRows * TEST_CARD_ROW_HEIGHT_PX) + ((targetRows - 1) * TEST_CARD_ROW_GAP_PX)
  const outerMinHeightPx = Number.isFinite(slotHeightPx) && slotHeightPx > 0
    ? slotHeightPx
    : minContentHeightPx + 10

  return (
    <div
      role={clickable ? 'button' : undefined}
      tabIndex={clickable ? 0 : undefined}
      onClick={clickable ? () => onWindowSelect(windowDetails) : undefined}
      onKeyDown={clickable ? (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault()
          onWindowSelect(windowDetails)
        }
      } : undefined}
      style={{ minHeight: `${outerMinHeightPx}px` }}
      className={`border-t pt-1 pb-1.5 transition-colors ${
        active ? 'border-blue-500/50 bg-blue-950/20 rounded' : 'border-gray-700/60'
      } ${clickable ? 'cursor-pointer hover:bg-gray-700/25 focus:outline-none focus:ring-1 focus:ring-cyan-400/70' : ''}`}
    >
      <div
        className="flex flex-col gap-0.5 px-1 min-h-4"
        style={{ minHeight: `${minContentHeightPx}px` }}
      >
        {tests.length === 0 ? null : (
          tests.map((test, index) => (
            <TestCard
              key={`${test.test_id}-${test.device}-${test.scheduled_date ?? 'na'}-${test.shift_index ?? 'na'}-${test.sequence_in_shift ?? index}`}
              test={test}
            />
          ))
        )}
      </div>
    </div>
  )
}
