import type { StatusColor } from '../../hooks/useStatusTap'
import { cn } from '../../lib/utils'

interface StatusButtonsProps {
  currentStatus: StatusColor | null
  sending: boolean
  disabled?: boolean
  onTap: (color: StatusColor) => void
}

const configs: Record<StatusColor, { label: string; description: string; icon: string; base: string; ring: string }> = {
  green: {
    label: 'Green',
    description: 'Saya memahami materi',
    icon: '✓',
    base: 'bg-green text-white hover:bg-green/90',
    ring: 'ring-4 ring-green-soft ring-offset-2 ring-offset-ink',
  },
  yellow: {
    label: 'Yellow',
    description: 'Saya punya pertanyaan',
    icon: '?',
    base: 'bg-yellow text-ink hover:bg-yellow/90',
    ring: 'ring-4 ring-yellow-soft ring-offset-2 ring-offset-ink',
  },
  red: {
    label: 'Red',
    description: 'Saya butuh bantuan',
    icon: '!',
    base: 'bg-red text-white hover:bg-red/90',
    ring: 'ring-4 ring-red-soft ring-offset-2 ring-offset-ink',
  },
}

const order: StatusColor[] = ['green', 'yellow', 'red']

export function StatusButtons({ currentStatus, sending, disabled = false, onTap }: StatusButtonsProps) {
  return (
    <div className="w-full rounded-2xl bg-ink p-3 shadow-[0_18px_45px_rgba(36,31,26,0.16)] sm:p-4">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        {order.map((color) => {
          const config = configs[color]
          const active = currentStatus === color
          return (
            <button
              key={color}
              type="button"
              onClick={() => onTap(color)}
              disabled={disabled || sending}
              aria-label={`Pilih ${config.label}: ${config.description}`}
              aria-pressed={active}
              className={cn(
                'flex min-h-44 w-full flex-col items-start justify-between rounded-lg p-5 text-left shadow-sm transition-[transform,filter] duration-150 ease-out focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/80 active:scale-[.98] disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-56 sm:p-6',
                config.base,
                active && config.ring,
              )}
            >
              <span className="flex h-11 w-11 items-center justify-center rounded-full border-2 border-current text-2xl font-semibold">{config.icon}</span>
              <span>
                <strong className="block text-2xl font-bold tracking-tight">{config.label}</strong>
                <span className="mt-1 block text-sm font-medium opacity-90">{config.description}</span>
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}