"use client"

import { COLORS } from "@/components/logic"

interface SingleModePanelProps {
  singleBatches: { numbers: number[]; colorIndex: number; batchNumber: number }[]
}

export function SingleModePanel({ singleBatches }: SingleModePanelProps) {
  if (singleBatches.length === 0) {
    return null
  }

  // Reverse to show newest first
  const reversedBatches = [...singleBatches].reverse()

  return (
    <div className="flex flex-col h-full overflow-hidden">
      {/* Stats */}
      <div className="flex items-center gap-4 px-5 py-2 border-b border-[#e2e6ea] flex-shrink-0">
        <span className="text-[10px] tracking-[0.2em] uppercase text-[#8a95a1]">RECORDS</span>
        <span className="flex-1 h-px bg-[#e2e6ea]" />
        <span className="text-[10px] text-[#0f141a]">
          {singleBatches.length} BATCHES
        </span>
      </div>

      {/* Records grid - newest first, wrapping */}
      <div className="flex-1 overflow-y-auto scrollbar-thin px-5 py-3">
        <div className="flex flex-wrap gap-2">
          {reversedBatches.map((batch, displayIdx) => {
            const actualIdx = singleBatches.length - 1 - displayIdx
            return (
              <div
                key={`batch-${batch.batchNumber}`}
                className="flex items-center gap-2 px-3 py-2 border border-[#e2e6ea] fui-slide-up"
                style={{ animationDelay: `${displayIdx * 20}ms` }}
              >
                {/* Color indicator */}
                <div
                  className="w-2 h-2 rounded-full flex-shrink-0"
                  style={{ backgroundColor: COLORS[batch.colorIndex] }}
                />
                {/* Numbers - sorted */}
                <span
                  className="text-sm font-mono"
                  style={{ 
                    color: COLORS[batch.colorIndex],
                  }}
                >
                  {[...batch.numbers].sort((a, b) => a - b).map(n => String(n).padStart(2, "0")).join(" ")}
                </span>
                {/* Batch index */}
                <span className="text-[9px] text-[#8a95a1] font-mono ml-1">
                  #{String(batch.batchNumber).padStart(3, "0")}
                </span>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}