import type { ComponentType } from 'react';
import type { PowerUpType } from '@pintrush/engine';
import { CheckIcon, DoubleDownIcon, LockIcon, SecondChanceIcon, SwapIcon } from '@/components/ui/icons';
import type { IconProps } from '@/components/ui/icons';
import { cn } from '@/lib/cn';

export interface PowerUpInfo {
  name: string;
  icon: ComponentType<IconProps>;
  /** One-line effect. */
  effect: string;
  /** When it can be used. */
  when: string;
}

/** Copy for the three MVP power-ups (rules: ARCHITECTURE §2.6). */
export const POWER_UP_INFO: Record<PowerUpType, PowerUpInfo> = {
  DOUBLE_DOWN: {
    name: 'Double Down',
    icon: DoubleDownIcon,
    effect: '+200 if you’re right, −100 if you’re not',
    when: 'Before a question opens · needs 100+ points',
  },
  SECOND_CHANCE: {
    name: 'Second Chance',
    icon: SecondChanceIcon,
    effect: 'Removes one wrong answer',
    when: 'While a multiple-choice question is open',
  },
  CATEGORY_SWAP: {
    name: 'Category Swap',
    icon: SwapIcon,
    effect: 'Swap two unlit squares on your board',
    when: 'Between questions, in board rounds',
  },
};

export type PowerUpState = 'ready' | 'active' | 'used' | 'locked';

const STATE_LABEL: Record<PowerUpState, string> = {
  ready: 'Ready',
  active: 'Active',
  used: 'Used',
  locked: 'Locked',
};

/** A power-up with its state as text + icon (not colour alone). */
export function PowerUpBadge({
  type,
  state,
  showDetails = false,
  className,
}: {
  type: PowerUpType;
  state: PowerUpState;
  showDetails?: boolean;
  className?: string;
}) {
  const info = POWER_UP_INFO[type];
  const Icon = info.icon;
  return (
    <div
      className={cn(
        'flex min-h-12 items-center gap-3 rounded-2xl border px-3.5 py-2.5',
        state === 'ready' && 'border-violet/70 bg-violet/15',
        state === 'active' && 'border-amber/70 bg-amber/12 shadow-glow-amber',
        (state === 'used' || state === 'locked') && 'border-line bg-raised/50 text-muted',
        className,
      )}
    >
      <Icon className={cn('size-6 shrink-0', state === 'ready' ? 'text-cyan' : state === 'active' ? 'text-amber' : 'text-subtle')} />
      <span className="min-w-0 flex-1">
        <span className="block font-semibold text-fg">{info.name}</span>
        {showDetails && (
          <>
            <span className="block text-sm text-muted">{info.effect}</span>
            <span className="block text-xs text-subtle">{info.when}</span>
          </>
        )}
      </span>
      <span
        className={cn(
          'inline-flex shrink-0 items-center gap-1 text-xs font-bold tracking-[0.1em] uppercase',
          state === 'ready' && 'text-lime-soft',
          state === 'active' && 'text-amber-soft',
          (state === 'used' || state === 'locked') && 'text-subtle',
        )}
      >
        {state === 'used' ? <CheckIcon className="size-4" /> : state === 'locked' ? <LockIcon className="size-4" /> : null}
        {STATE_LABEL[state]}
      </span>
    </div>
  );
}