"use client";

import Image from "next/image";
import { useMemo, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { ARMES } from "@/lib/data";

const FILTERS = ["Tous", "Poing", "Épaule"] as const;

export function WeaponCatalog() {
  const [filter, setFilter] = useState<(typeof FILTERS)[number]>("Tous");
  const [open, setOpen] = useState<string | null>(null);

  const list = useMemo(
    () => ARMES.filter((a) => filter === "Tous" || a.type === filter),
    [filter],
  );
  const current = ARMES.find((a) => a.id === open);

  return (
    <div>
      <div className="mb-8 flex flex-wrap gap-2">
        {FILTERS.map((f) => (
          <button
            key={f}
            type="button"
            onClick={() => setFilter(f)}
            className={`rounded-sm px-4 py-2 font-mono text-[10px] tracking-[0.22em] uppercase ${
              filter === f ? "bg-brass text-ink" : "border border-line text-mute hover:border-brass hover:text-brass"
            }`}
          >
            {f}
          </button>
        ))}
      </div>

      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {list.map((arme) => (
          <button
            key={arme.id}
            type="button"
            data-cursor="hover"
            onClick={() => setOpen(arme.id)}
            className="hud-frame group relative aspect-4/5 overflow-hidden text-left"
          >
            <Image
              src={arme.image}
              alt={`${arme.name} ${arme.calibre}`}
              fill
              className="object-cover transition duration-700 group-hover:scale-105"
              style={{ objectPosition: arme.pos }}
              sizes="(min-width: 1024px) 33vw, 50vw"
            />
            <div className="absolute inset-0 bg-linear-to-t from-ink via-ink/20 to-transparent" />
            {arme.nouveau && (
              <span className="absolute top-4 left-4 bg-brass px-2 py-1 font-mono text-[9px] tracking-[0.2em] text-ink uppercase">
                Nouveau
              </span>
            )}
            <div className="absolute inset-x-0 bottom-0 p-5">
              <p className="font-mono text-[10px] tracking-[0.2em] text-brass uppercase">
                {arme.calibre} · {arme.stand}
              </p>
              <p className="font-display mt-1 text-2xl normal-case tracking-tight">{arme.name}</p>
            </div>
          </button>
        ))}
      </div>

      <AnimatePresence>
        {current && (
          <motion.div
            className="fixed inset-0 z-[95] flex items-center justify-center bg-ink/92 p-5 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setOpen(null)}
          >
            <motion.article
              className="hud-frame relative grid max-h-[90vh] w-full max-w-5xl overflow-hidden bg-ink-2 md:grid-cols-2"
              initial={{ y: 30, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: 20, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
            >
              <div className="relative min-h-[280px] md:min-h-[520px]">
                <Image
                  src={current.image}
                  alt=""
                  fill
                  className="object-cover"
                  style={{ objectPosition: current.pos }}
                />
              </div>
              <div className="flex flex-col justify-between p-8">
                <div>
                  <p className="font-mono text-[10px] tracking-[0.28em] text-brass uppercase">
                    {current.type} · {current.calibre}
                  </p>
                  <h3 className="font-display mt-3 text-4xl normal-case tracking-tight">{current.name}</h3>
                  <p className="mt-5 text-mute">{current.text}</p>
                  <p className="mt-6 font-mono text-sm text-brass">{current.stand}</p>
                  <p className="mt-8 text-xs text-mute">
                    Location réservée aux licenciés STO. Casque et lunettes fournis.
                    Munitions plomb ou alliage cuivreux uniquement.
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => setOpen(null)}
                  className="mt-8 w-fit rounded-sm border border-brass px-5 py-2 font-mono text-[10px] tracking-[0.2em] text-brass uppercase"
                >
                  Fermer
                </button>
              </div>
            </motion.article>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}