"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>
    )
  }

  return (
    <div className="flex flex-col">
      {groups.map((group, idx) => {
        const sorted = [...group.numbers].sort((a, b) => a - b)
        const color = COLORS[group.colorIndex]
        return (
          <div
            key={idx}
            className="flex items-start gap-4 py-2.5 border-b border-[#e2e6ea] last:border-b-0 fui-slide-up"
            style={{ animationDelay: `${idx * 40}ms` }}
          >
            {/* Group label with color */}
            <div className="flex flex-col gap-0.5 w-14 flex-shrink-0 pt-0.5">
              <div className="flex items-center gap-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(idx + 1).padStart(2, "0")}
                </span>
              </div>
              <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 flex-1 min-w-0">
              {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>
  )
}