import type { KeyboardEvent, ReactNode } from 'react'
import { cn } from '@/lib/cn'

// KpiCard — clickable stat card used as a FILTER chip (PURO pattern: a row of
// KpiCards filters the list, replacing tabs). icon-chip + big stat-value +
// .label-eyebrow. The ACTIVE state tints the background and rings in the accent;
// hover lifts.
//
// Visual idiom from pages/hrm/EmployeesListPage.tsx (icon-chip + stat-value +
// label-eyebrow tokens) and index.css. Accent palettes ship stops
// 50/100/500/600/700 only (no -800) → stat text uses -700 (brand uses -800,
// which exists). Mismatched stop = silent no-class in Tailwind v4.
//
// a11y: when onClick is given the card becomes role="button", focusable
// (tabIndex 0), responds to Enter + Space, exposes aria-pressed=active, and
// shows a focus-visible ring. Without onClick it is an inert presentational card.
export type Accent = 'brand' | 'teal' | 'violet' | 'amberx' | 'greenx'

type AccentTokens = {
  chipBg: string
  chipFg: string
  value: string
  activeBg: string
  activeRing: string
  activeBorder: string
}

// activeBorder uses the -500 stop: the accent palettes ship only
// 50/100/500/600/700, so -300 (which only brand has) would silently fall to
// Tailwind's DEFAULT teal/violet — or drop entirely for amberx/greenx (custom
// names). -500 exists for EVERY accent → the active border always renders the
// intended brand-aligned tone. (gotcha "vỡ màu im lặng" Tailwind v4.)
const ACCENT: Record<Accent, AccentTokens> = {
  brand: { chipBg: 'var(--color-brand-50)', chipFg: 'var(--color-brand-600)', value: 'text-brand-800', activeBg: 'bg-brand-50', activeRing: 'ring-brand-500', activeBorder: 'border-brand-500' },
  teal: { chipBg: 'var(--color-teal-50)', chipFg: 'var(--color-teal-700)', value: 'text-teal-700', activeBg: 'bg-teal-50', activeRing: 'ring-teal-500', activeBorder: 'border-teal-500' },
  violet: { chipBg: 'var(--color-violet-50)', chipFg: 'var(--color-violet-700)', value: 'text-violet-700', activeBg: 'bg-violet-50', activeRing: 'ring-violet-500', activeBorder: 'border-violet-500' },
  amberx: { chipBg: 'var(--color-amberx-50)', chipFg: 'var(--color-amberx-700)', value: 'text-amberx-700', activeBg: 'bg-amberx-50', activeRing: 'ring-amberx-500', activeBorder: 'border-amberx-500' },
  greenx: { chipBg: 'var(--color-greenx-50)', chipFg: 'var(--color-greenx-700)', value: 'text-greenx-700', activeBg: 'bg-greenx-50', activeRing: 'ring-greenx-500', activeBorder: 'border-greenx-500' },
}

export function KpiCard({
  label,
  value,
  icon,
  accent = 'brand',
  active = false,
  onClick,
  className,
}: {
  /** Caption under the value (.label-eyebrow). */
  label: string
  /** The headline stat. */
  value: number | string
  /** Optional lucide icon node, shown inside the accent-tinted chip. */
  icon?: ReactNode
  /** Accent colour for the chip, value, and active ring (default brand). */
  accent?: Accent
  /** Highlight as the currently selected filter. */
  active?: boolean
  /** When set, the card behaves as a button (keyboard + pointer). */
  onClick?: () => void
  className?: string
}) {
  const a = ACCENT[accent]
  const clickable = !!onClick

  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    if (!onClick) return
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      onClick()
    }
  }

  return (
    <div
      role={clickable ? 'button' : undefined}
      tabIndex={clickable ? 0 : undefined}
      aria-pressed={clickable ? active : undefined}
      onClick={onClick}
      onKeyDown={handleKeyDown}
      className={cn(
        'group flex items-center gap-3 rounded-xl border bg-white p-3.5 text-left transition',
        'shadow-[0_1px_2px_rgb(15_23_42/0.04),0_1px_3px_rgb(15_23_42/0.06)]',
        active ? cn(a.activeBg, a.activeBorder) : 'border-slate-200',
        clickable && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-md motion-reduce:transform-none motion-reduce:transition-none',
        clickable && 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white',
        clickable && a.activeRing,
        className,
      )}
    >
      {icon && (
        <span
          className="icon-chip shrink-0"
          style={{ ['--chip-bg' as string]: a.chipBg, ['--chip-fg' as string]: a.chipFg }}
          aria-hidden
        >
          {icon}
        </span>
      )}
      <div className="min-w-0">
        <div className={cn('stat-value text-2xl', a.value)}>{value}</div>
        <div className="label-eyebrow mt-0.5 truncate">{label}</div>
      </div>
    </div>
  )
}
