'use client';

import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import {
  type SkillLevelValue,
  SKILL_LEVEL_LABELS,
  SKILL_LEVEL_COLORS,
} from '@/hooks/lean/use-skills';

interface SkillLevelBadgeProps {
  /** The skill level (0-4) */
  level: SkillLevelValue;
  /** Whether to show the label text */
  showLabel?: boolean;
  /** Whether to show tooltip with description */
  showTooltip?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Size variant */
  size?: 'sm' | 'md' | 'lg';
}

/**
 * Badge component displaying skill level with color coding
 * - 0: Gray (No knowledge)
 * - 1: Red (Basics)
 * - 2: Yellow (Independent)
 * - 3: Green (Expert)
 * - 4: Blue (Can train)
 */
export function SkillLevelBadge({
  level,
  showLabel = true,
  showTooltip = true,
  className,
  size = 'md',
}: SkillLevelBadgeProps) {
  const t = useTranslations('lean.skillMatrix.levels');

  const colors = SKILL_LEVEL_COLORS[level];
  const labelKey = SKILL_LEVEL_LABELS[level];
  const label = t(String(level));

  const sizeClasses = {
    sm: 'text-xs px-1.5 py-0.5 min-w-[1.5rem]',
    md: 'text-sm px-2 py-0.5 min-w-[2rem]',
    lg: 'text-base px-3 py-1 min-w-[2.5rem]',
  };

  const badge = (
    <Badge
      variant="outline"
      className={cn(
        'font-medium border transition-colors',
        colors.bg,
        colors.text,
        colors.border,
        sizeClasses[size],
        'justify-center',
        className
      )}
    >
      {showLabel ? label : level}
    </Badge>
  );

  if (!showTooltip) {
    return badge;
  }

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>{badge}</TooltipTrigger>
        <TooltipContent>
          <p className="font-medium">
            Level {level}: {label}
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

/**
 * Compact level indicator for matrix cells
 */
interface SkillLevelIndicatorProps {
  level: SkillLevelValue;
  className?: string;
}

export function SkillLevelIndicator({ level, className }: SkillLevelIndicatorProps) {
  const colors = SKILL_LEVEL_COLORS[level];

  return (
    <div
      className={cn(
        'w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm',
        colors.bg,
        colors.text,
        className
      )}
    >
      {level}
    </div>
  );
}

/**
 * Legend showing all skill levels
 */
interface SkillLevelLegendProps {
  className?: string;
  direction?: 'horizontal' | 'vertical';
}

export function SkillLevelLegend({
  className,
  direction = 'horizontal',
}: SkillLevelLegendProps) {
  const t = useTranslations('lean.skillMatrix.levels');

  const levels: SkillLevelValue[] = [0, 1, 2, 3, 4];

  return (
    <div
      className={cn(
        'flex gap-3',
        direction === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
        className
      )}
    >
      {levels.map((level) => {
        const colors = SKILL_LEVEL_COLORS[level];
        return (
          <div key={level} className="flex items-center gap-2">
            <div
              className={cn(
                'w-6 h-6 rounded flex items-center justify-center text-xs font-semibold',
                colors.bg,
                colors.text
              )}
            >
              {level}
            </div>
            <span className="text-sm text-muted-foreground">{t(String(level))}</span>
          </div>
        );
      })}
    </div>
  );
}
