import type { ComponentType } from 'react';
import {
  BoltIcon,
  ChartIcon,
  GridIcon,
  MapPinIcon,
  MusicIcon,
  PlayIcon,
  SparklesIcon,
  TargetIcon,
  TrophyIcon,
} from '@/components/ui/icons';
import type { IconProps } from '@/components/ui/icons';
import { cn } from '@/lib/cn';

interface Tile {
  label: string;
  icon: ComponentType<IconProps>;
  lit?: boolean;
}

/** Example board: one tile per category, top row and centre column lit. */
const tiles: Tile[] = [
  { label: 'Music', icon: MusicIcon, lit: true },
  { label: 'History', icon: ChartIcon, lit: true },
  { label: 'Pop Culture', icon: SparklesIcon, lit: true },
  { label: 'Sports', icon: TrophyIcon },
  { label: 'Geography', icon: MapPinIcon, lit: true },
  { label: 'Food & Drink', icon: TargetIcon },
  { label: 'Movies & TV', icon: PlayIcon },
  { label: 'General', icon: GridIcon, lit: true },
  { label: 'Science', icon: BoltIcon },
];

/**
 * A large, decorative 3×3 board for marketing sections. Lines are drawn over the grid in amber.
 * `lines` uses the engine's line ids (0-2 rows, 3-5 columns, 6-7 diagonals).
 */
export function RushBoard({ className, lines = [0, 4] }: { className?: string; lines?: number[] }) {
  const coords: Record<number, [number, number, number, number]> = {
    0: [6, 16.7, 94, 16.7],
    1: [6, 50, 94, 50],
    2: [6, 83.3, 94, 83.3],
    3: [16.7, 6, 16.7, 94],
    4: [50, 6, 50, 94],
    5: [83.3, 6, 83.3, 94],
    6: [8, 8, 92, 92],
    7: [92, 8, 8, 92],
  };
  return (
    <div className={cn('relative isolate', className)} role="img" aria-label="A 3×3 PintRush board: nine category tiles, five lit, with the top row and centre column completed as lines.">
      {/* Halo stays inside the box (blur is ink overflow), so it can never cause horizontal scroll. */}
      <div className="absolute inset-2 -z-10 rounded-[2.5rem] bg-violet/35 blur-2xl" aria-hidden="true" />
      <div className="grid grid-cols-3 gap-2.5 rounded-[1.75rem] border border-line bg-surface/90 p-2.5 shadow-lift sm:gap-3 sm:p-3" aria-hidden="true">
        {tiles.map(({ label, icon: Icon, lit }) => (
          <div
            key={label}
            className={cn(
              'flex aspect-square flex-col items-center justify-center gap-1.5 rounded-tile border p-1 text-center sm:gap-2',
              lit
                ? 'border-white/30 bg-[linear-gradient(140deg,var(--color-violet-strong),var(--color-cyan-deep))] text-white shadow-[0_0_32px_-10px_rgb(124_92_255/0.9)]'
                : 'border-line bg-night/80 text-subtle',
            )}
          >
            {/* Content sits above the line layer (z-2 over z-1) so lines never strike through labels. */}
            <Icon className="relative z-[2] size-6 sm:size-7" />
            <span className="relative z-[2] rounded px-1 text-[0.6875rem] leading-tight font-semibold sm:text-xs">{label}</span>
          </div>
        ))}
      </div>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="pointer-events-none absolute inset-0 z-[1] size-full" aria-hidden="true">
        {lines.map((line) => {
          const c = coords[line];
          if (!c) return null;
          return (
            <line
              key={line}
              x1={c[0]}
              y1={c[1]}
              x2={c[2]}
              y2={c[3]}
              stroke="var(--color-amber)"
              strokeWidth={4}
              strokeLinecap="round"
              vectorEffect="non-scaling-stroke"
              opacity={0.95}
              style={{ filter: 'drop-shadow(0 0 6px rgb(255 176 32 / 0.85))' }}
            />
          );
        })}
      </svg>
    </div>
  );
}