import { ArrowUpRight, Bot, Dices, Flame, Gamepad2, Sparkles } from "lucide-react";
import { cn } from "../utils/cn";
import { boardGames, hookahMixes, tobaccoFlavors } from "../data/catalog";

type Chip = {
  href: string;
  icon: typeof Dices;
  label: string;
  tone: "violet" | "cyan";
};

/* Подсветка постоянная (не только hover): на тач-устройствах hover нет,
   иначе чипы там выглядят «не подсвеченными». Тона чередуем. */
const toneStyles = {
  violet:
    "border-neon-violet/50 bg-neon-violet/10 text-white shadow-[0_0_16px_-4px_rgba(176,38,255,0.55)] hover:border-neon-violet hover:bg-neon-violet/20 hover:shadow-[0_0_28px_-2px_rgba(176,38,255,0.8)]",
  cyan: "border-neon-cyan/40 bg-neon-cyan/8 text-white shadow-[0_0_16px_-4px_rgba(0,240,255,0.5)] hover:border-neon-cyan hover:bg-neon-cyan/15 hover:shadow-[0_0_28px_-2px_rgba(0,240,255,0.75)]",
} as const;

const toneIcon = {
  violet: { icon: "text-fuchsia-300", arrow: "text-fuchsia-200/70" },
  cyan: { icon: "text-neon-cyan", arrow: "text-cyan-200/70" },
} as const;

/* 51 микс / 52 микса / 55 миксов — русское множественное для счётчика */
const mixPlural = (n: number): string => {
  const mod10 = n % 10;
  const mod100 = n % 100;
  if (mod10 === 1 && mod100 !== 11) return `${n} микс`;
  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return `${n} микса`;
  return `${n} миксов`;
};

const chips: Chip[] = [
  { href: "#/mixes", icon: Sparkles, label: mixPlural(hookahMixes.length), tone: "violet" },
  { href: "#/flavors", icon: Flame, label: `${tobaccoFlavors.length}+ вкусов табака`, tone: "cyan" },
  { href: "#/games", icon: Gamepad2, label: "PlayStation 5", tone: "violet" },
  { href: "#/board-games", icon: Dices, label: `${boardGames.length} настолок`, tone: "cyan" },
];

export default function HeroActions() {
  return (
    <div className="mt-10 flex flex-wrap gap-3">
      <a
        href="#/ai-mix"
        className="group inline-flex min-h-11 max-w-full items-center gap-2.5 rounded-full border border-neon-cyan/60 bg-gradient-to-r from-neon-violet/25 via-neon-cyan/20 to-neon-violet/15 px-4.5 py-2.5 text-sm font-bold text-white backdrop-blur-lg shadow-[0_0_24px_rgba(0,240,255,0.35)] transition-all duration-300 hover:border-neon-cyan hover:shadow-[0_0_38px_rgba(0,240,255,0.65)] hover:-translate-y-0.5 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon-cyan"
      >
        <Bot size={16} className="shrink-0 text-neon-cyan" aria-hidden="true" />
        <span>Автоподбор микса</span>
        <ArrowUpRight
          size={14}
          className="shrink-0 text-cyan-200 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
          aria-hidden="true"
        />
      </a>

      {chips.map((chip) => (
        <a
          key={chip.href}
          href={chip.href}
          className={cn(
            "group inline-flex min-h-11 max-w-full items-center gap-2.5 rounded-full border px-4 py-2.5 text-sm font-semibold text-white backdrop-blur-lg transition-all duration-300 hover:-translate-y-0.5 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon-cyan",
            toneStyles[chip.tone]
          )}
        >
          <chip.icon size={15} className={cn("shrink-0", toneIcon[chip.tone].icon)} aria-hidden="true" />
          <span>{chip.label}</span>
          <ArrowUpRight
            size={14}
            className={cn(
              "shrink-0 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5",
              toneIcon[chip.tone].arrow
            )}
            aria-hidden="true"
          />
        </a>
      ))}
    </div>
  );
}