"use client"

import { COLORS } from "./logic"

interface ResultPanelProps {
  groups: { numbers: number[]; colorIndex: number }[]
  hasResult: boolean
  placeholder?: string
}

export function ResultPanel({ groups, hasResult, placeholder }: ResultPanelProps) {
  if (!hasResult || groups.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full min-h-40 gap-3">
        <div className="text-[10px] tracking-[0.2em] text-[#cdd2d8] font-mono uppercase">
          — AWAITING INPUT —
        </div>
        {placeholder && (
          <div className="text-xs text-[#8a95a1] font-mono">{placeholder}</div>
        )}
      </div>
    )
  }

  // 将groups分成pairs，每组人数>=15时单独一行
  const rows: { numbers: number[]; colorIndex: number }[][] = []
  let currentRow: { numbers: number[]; colorIndex: number }[] = []
  
  for (const group of groups) {
    if (group.numbers.length >= 15) {
      // 单独一行
      if (currentRow.length > 0) {
        rows.push(currentRow)
        currentRow = []
      }
      rows.push([group])
    } else {
      // 尝试凑成一行两组
      currentRow.push(group)
      if (currentRow.length === 2) {
        rows.push(currentRow)
        currentRow = []
      }
    }
  }
  
  // 处理剩余的组
  if (currentRow.length > 0) {
    rows.push(currentRow)
  }

  return (
    <div className="flex flex-col gap-3">
      {rows.map((row, rowIdx) => (
        <div 
          key={rowIdx} 
          className="flex gap-6 fui-slide-up"
          style={{ animationDelay: `${rowIdx * 40}ms` }}
        >
          {row.map((group, idx) => {
            const sorted = [...group.numbers].sort((a, b) => a - b)
            const color = COLORS[group.colorIndex]
            const globalIdx = groups.indexOf(group)
            return (
              <div
                key={globalIdx}
                className="flex-1 min-w-0"
              >
                {/* Group label with color */}
                <div className="flex items-center gap-2 mb-2">
                  <div
                    className="w-2 h-2 rounded-full"
                    style={{ backgroundColor: color }}
                  />
                  <span className="text-xs font-mono uppercase tracking-[0.15em]" style={{ color }}>
                    G{String(globalIdx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-[10px] font-mono text-[#8a95a1]">
                    {String(group.numbers.length).padStart(2, "0")} P
                  </span>
                </div>
                {/* Numbers with color */}
                <div className="flex flex-wrap gap-1.5">
                  {sorted.map((num) => (
                    <span
                      key={num}
                      className="min-w-8 h-8 px-1.5 flex items-center justify-center text-sm font-mono border fui-fadein"
                      style={{ 
                        borderColor: color + "40",
                        backgroundColor: color + "15",
                        color: color,
                      }}
                    >
                      {String(num).padStart(2, "0")}
                    </span>
                  ))}
                </div>
              </div>
            )
          })}
        </div>
      ))}
    </div>
  )
}