import {
  Binary,
  Braces,
  Calculator,
  Clock,
  FileText,
  Hash,
  KeyRound,
  Lock,
  Percent,
  QrCode,
  Ruler,
  Scale,
  Shuffle,
  Sparkles,
  Type,
  type LucideIcon,
} from "lucide-react";

type TileColor =
  | "brand"
  | "generator"
  | "calculator"
  | "converter"
  | "text"
  | "security"
  | "image"
  | "developer";

type Tile = {
  icon: LucideIcon;
  label: string;
  color: TileColor;
  // position in the 12-col / 10-row grid (col, row, colSpan, rowSpan)
  c: number;
  r: number;
  cs?: number;
  rs?: number;
  // rotation in deg
  rot?: number;
  // float delay seconds
  delay?: number;
  // emphasize as primary
  primary?: boolean;
};

const tiles: Tile[] = [
  { icon: QrCode, label: "QR-Code", color: "generator", c: 1, r: 1, cs: 4, rs: 4, rot: -3, delay: 0, primary: true },
  { icon: KeyRound, label: "Passwort", color: "security", c: 6, r: 1, cs: 3, rs: 3, rot: 2, delay: 0.4 },
  { icon: Percent, label: "Prozente", color: "calculator", c: 9, r: 2, cs: 3, rs: 3, rot: -2, delay: 0.8 },
  { icon: Braces, label: "JSON", color: "developer", c: 5, r: 4, cs: 4, rs: 3, rot: 1, delay: 1.2 },
  { icon: FileText, label: "Wörter", color: "text", c: 1, r: 6, cs: 3, rs: 3, rot: 3, delay: 1.6 },
  { icon: Clock, label: "Timestamp", color: "developer", c: 9, r: 5, cs: 3, rs: 3, rot: 4, delay: 2.0 },
  { icon: Ruler, label: "Einheiten", color: "converter", c: 4, r: 7, cs: 3, rs: 2, rot: -2, delay: 2.4 },
  { icon: Scale, label: "BMI", color: "calculator", c: 7, r: 8, cs: 3, rs: 2, rot: 2, delay: 2.8 },
  { icon: Hash, label: "UUID", color: "developer", c: 1, r: 9, cs: 3, rs: 2, rot: -3, delay: 3.2 },
  { icon: Binary, label: "Base64", color: "text", c: 10, r: 8, cs: 2, rs: 2, rot: 3, delay: 3.6 },
];

const colorTheme: Record<TileColor, { surface: string; icon: string; ring: string; label: string }> = {
  brand: {
    surface: "bg-gradient-to-br from-brand-500 to-brand-700 text-white",
    icon: "text-white/95",
    ring: "ring-brand-600/30",
    label: "text-white/80",
  },
  generator: {
    surface: "bg-cat-generator/[0.08] text-cat-generator",
    icon: "text-cat-generator",
    ring: "ring-cat-generator/30",
    label: "text-cat-generator/80",
  },
  calculator: {
    surface: "bg-cat-calculator/[0.08] text-cat-calculator",
    icon: "text-cat-calculator",
    ring: "ring-cat-calculator/30",
    label: "text-cat-calculator/80",
  },
  converter: {
    surface: "bg-cat-converter/[0.08] text-cat-converter",
    icon: "text-cat-converter",
    ring: "ring-cat-converter/30",
    label: "text-cat-converter/80",
  },
  text: {
    surface: "bg-cat-text/[0.08] text-cat-text",
    icon: "text-cat-text",
    ring: "ring-cat-text/30",
    label: "text-cat-text/80",
  },
  security: {
    surface: "bg-cat-security/[0.08] text-cat-security",
    icon: "text-cat-security",
    ring: "ring-cat-security/30",
    label: "text-cat-security/80",
  },
  image: {
    surface: "bg-cat-image/[0.08] text-cat-image",
    icon: "text-cat-image",
    ring: "ring-cat-image/30",
    label: "text-cat-image/80",
  },
  developer: {
    surface: "bg-cat-developer/[0.08] text-cat-developer",
    icon: "text-cat-developer",
    ring: "ring-cat-developer/30",
    label: "text-cat-developer/80",
  },
};

/**
 * HeroStage – Animiertes Visual rechts vom Hero-Heading.
 *
 * Konzept: Ein 12×10-Grid mit ~10 Tool-Tiles, leicht rotiert, mit Tilt+Float
 * Animation. Wirkt wie eine ausgeklappte Werkzeugkiste mit lebenden Werkzeugen.
 *
 * Perspektivische Tiefenwirkung durch leichte transform und Schatten.
 */
export function HeroStage() {
  return (
    <div
      className="relative aspect-[4/5] w-full max-w-[520px] [perspective:1400px] sm:aspect-[5/6]"
      aria-hidden
    >
      <div
        className="absolute inset-0 grid gap-2 [transform:rotateX(8deg)_rotateY(-6deg)_rotateZ(2deg)] [transform-style:preserve-3d]"
        style={{
          gridTemplateColumns: "repeat(12, 1fr)",
          gridTemplateRows: "repeat(10, 1fr)",
        }}
      >
        {tiles.map((tile, idx) => {
          const Icon = tile.icon;
          const theme = colorTheme[tile.color];
          const cs = tile.cs ?? 3;
          const rs = tile.rs ?? 3;
          const dur = (6 + idx * 0.4).toFixed(1);

          return (
            <div
              key={`${tile.label}-${idx}`}
              className={`group relative flex flex-col justify-between rounded-xl p-3 shadow-raised ring-1 ${theme.ring} ring-inset motion-safe:[animation:tile-float_var(--tlr-dur)_ease-in-out_infinite] ${theme.surface}`}
              style={{
                gridColumn: `${tile.c} / span ${cs}`,
                gridRow: `${tile.r} / span ${rs}`,
                ["--tile-rot" as never]: `${tile.rot ?? 0}deg`,
                ["--tlr-dur" as never]: `${dur}s`,
                transform: `rotate(${tile.rot ?? 0}deg)`,
                animationDelay: `${tile.delay ?? 0}s`,
                backdropFilter: tile.primary ? "blur(8px)" : undefined,
              }}
            >
              <Icon
                className={`h-5 w-5 ${theme.icon} sm:h-6 sm:w-6`}
                strokeWidth={1.75}
              />
              <span
                className={`text-[10px] font-medium uppercase tracking-[0.08em] ${theme.label} sm:text-[11px]`}
              >
                {tile.label}
              </span>

              {/* subtle gloss */}
              <div
                className="pointer-events-none absolute inset-0 rounded-xl opacity-60"
                style={{
                  background:
                    "linear-gradient(135deg, rgb(255 255 255 / 0.18) 0%, transparent 30%, transparent 70%, rgb(0 0 0 / 0.04) 100%)",
                }}
              />
            </div>
          );
        })}
      </div>

      {/* Floating brand badge over the stage */}
      <div className="absolute -bottom-4 left-1/2 z-10 -translate-x-1/2 sm:-bottom-6">
        <div className="inline-flex items-center gap-2 rounded-full border border-ink-primary/[0.08] bg-surface-raised/90 px-3.5 py-1.5 text-xs font-medium text-ink-secondary shadow-raised backdrop-blur">
          <Sparkles className="h-3.5 w-3.5 text-brand-500" />
          <span>500+ Werkzeuge in einer Box</span>
        </div>
      </div>
    </div>
  );
}