"use client";

import {
  Binary,
  Braces,
  Calculator,
  Clock,
  Code,
  FileText,
  Gauge,
  Hash,
  Image as ImageIcon,
  KeyRound,
  Lock,
  Percent,
  PieChart,
  QrCode,
  Receipt,
  Ruler,
  Scale,
  Shuffle,
  Sigma,
  Sparkles,
  Type,
  Wallet,
  Zap,
  type LucideIcon,
} from "lucide-react";
import type { ToolCategory } from "@/tools/registry";

type Pill = { label: string; icon: LucideIcon; cat: ToolCategory };

const row1: Pill[] = [
  { label: "QR-Code", icon: QrCode, cat: "generator" },
  { label: "Passwort", icon: KeyRound, cat: "security" },
  { label: "Prozentrechner", icon: Percent, cat: "calculator" },
  { label: "Wortzähler", icon: FileText, cat: "text" },
  { label: "JSON Formatter", icon: Braces, cat: "developer" },
  { label: "Base64", icon: Binary, cat: "developer" },
  { label: "BMI Rechner", icon: Scale, cat: "calculator" },
  { label: "Einheiten", icon: Ruler, cat: "converter" },
  { label: "Timestamp", icon: Clock, cat: "developer" },
  { label: "UUID", icon: Hash, cat: "developer" },
  { label: "Stromkosten", icon: Zap, cat: "calculator" },
  { label: "Zufallszahl", icon: Shuffle, cat: "generator" },
];

const row2: Pill[] = [
  { label: "Skonto", icon: Receipt, cat: "calculator" },
  { label: "Leasing", icon: Wallet, cat: "calculator" },
  { label: "Heizkosten", icon: Gauge, cat: "calculator" },
  { label: "Case Converter", icon: Type, cat: "text" },
  { label: "Regex Tester", icon: Code, cat: "developer" },
  { label: "Farbkontrast", icon: Sparkles, cat: "image" },
  { label: "Farb-Konverter", icon: PieChart, cat: "image" },
  { label: "ASCII-Tabelle", icon: Hash, cat: "developer" },
  { label: "Hash-Generator", icon: Lock, cat: "security" },
  { label: "Dateigröße", icon: ImageIcon, cat: "converter" },
  { label: "Bruchrechner", icon: Sigma, cat: "calculator" },
  { label: "CSS-Gradient", icon: Sparkles, cat: "image" },
];

const catTextColor: Record<ToolCategory, string> = {
  generator: "text-cat-generator",
  calculator: "text-cat-calculator",
  converter: "text-cat-converter",
  text: "text-cat-text",
  security: "text-cat-security",
  image: "text-cat-image",
  developer: "text-cat-developer",
};

function MarqueeRow({
  items,
  reverse = false,
  duration = 50,
}: {
  items: Pill[];
  reverse?: boolean;
  duration?: number;
}) {
  const doubled = [...items, ...items];
  return (
    <div className="group relative overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]">
      <div
        className="flex w-max gap-3"
        style={{
          animation: `${reverse ? "marquee-x-reverse" : "marquee-x"} ${duration}s linear infinite`,
          animationPlayState: "running",
        }}
        onMouseEnter={(e) => (e.currentTarget.style.animationPlayState = "paused")}
        onMouseLeave={(e) => (e.currentTarget.style.animationPlayState = "running")}
      >
        {doubled.map((item, i) => {
          const Icon = item.icon;
          return (
            <div
              key={`${item.label}-${i}`}
              className="inline-flex shrink-0 items-center gap-2 rounded-full border border-ink-primary/[0.08] bg-surface-raised px-4 py-2 text-sm font-medium text-ink-secondary shadow-rest"
            >
              <Icon className={`h-4 w-4 ${catTextColor[item.cat]}`} strokeWidth={1.75} />
              <span>{item.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/**
 * ToolMarquee – endlos scrollende Tool-Ribbon als Social Proof.
 * Zwei Reihen in entgegengesetzte Richtungen, pausiert bei Hover.
 */
export function ToolMarquee() {
  return (
    <div className="flex flex-col gap-3">
      <MarqueeRow items={row1} duration={55} />
      <MarqueeRow items={row2} reverse duration={65} />
    </div>
  );
}