"use client";

import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { FabricPattern, type FabricKind } from "@/components/media/FabricPattern";
import { workwearCategories } from "@/content/capacities";

// One structure each. There are exactly six ranges and six structures, so any
// repeat is a wasted distinction: two cards sharing a pattern read as the same
// range at a glance, which is the opposite of what a six way chooser is for.
const ART: Record<string, FabricKind> = {
  medical: "weave",
  uniforms: "twill",
  kitchen: "knit",
  industrial: "jacquard",
  hiviz: "fleece",
  misc: "rib",
};

const TONE = {
  "--pattern-a": "#16170c",
  "--pattern-b": "#232414",
  "--pattern-c": "#0a0b05",
  "--pattern-thread": "#d8e04a",
  "--pattern-glow": "#d8e04a",
  "--pattern-slub": "#f5f1e8",
} as React.CSSProperties;

/**
 * Six ranges that expand in place.
 *
 * A buyer looking for kitchen wear should not have to load a page to find out
 * whether aprons are made here. Opening a card is an ordinary button toggling a
 * region, so it works on a keyboard and reads correctly to a screen reader.
 */
export function WorkwearCategories() {
  // Nothing starts open. That keeps the six cards a uniform grid, and it means
  // no expanded panel is ever server rendered, so the collapse animation never
  // has to reconcile with markup the server guessed at.
  const [open, setOpen] = useState<string | null>(null);
  const reduced = useReducedMotion();

  return (
    <div className="grid gap-px bg-[var(--rule)] md:grid-cols-2 lg:grid-cols-3">
      {workwearCategories.map((category, i) => {
        const isOpen = open === category.id;

        return (
          <motion.div
            key={category.id}
            className="relative overflow-hidden bg-[var(--ink)]"
            initial={{ opacity: 0, y: 22 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.3 }}
            transition={{
              duration: reduced ? 0 : 0.6,
              delay: reduced ? 0 : (i % 3) * 0.08,
              ease: [0.16, 1, 0.3, 1],
            }}
          >
            <FabricPattern
              kind={ART[category.id] ?? "weave"}
              seed={i * 613 + 7}
              className="absolute inset-0 h-full w-full opacity-60"
              style={TONE}
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[var(--ink)] via-[var(--ink)]/78 to-[var(--ink)]/40" />

            <div className="relative p-7 lg:p-8">
              <button
                type="button"
                onClick={() => setOpen(isOpen ? null : category.id)}
                aria-expanded={isOpen}
                aria-controls={`workwear-${category.id}`}
                className="group flex w-full items-start justify-between gap-6 text-left"
              >
                <span>
                  <span className="data block text-[11px] text-[var(--hiviz)]">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span className="mt-3 block font-display text-2xl text-[var(--cotton)] transition-colors duration-300 group-hover:text-[var(--hiviz)]">
                    {category.name}
                  </span>
                </span>

                <span
                  aria-hidden="true"
                  className="relative mt-8 block h-3 w-3 shrink-0"
                >
                  <span className="absolute top-1/2 left-0 block h-px w-3 bg-[var(--hiviz)]" />
                  <motion.span
                    className="absolute top-0 left-1/2 block h-3 w-px bg-[var(--hiviz)]"
                    animate={{ scaleY: isOpen ? 0 : 1 }}
                    transition={{ duration: 0.3 }}
                  />
                </span>
              </button>

              <AnimatePresence initial={false}>
                {isOpen ? (
                  <motion.div
                    id={`workwear-${category.id}`}
                    key="panel"
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{
                      duration: reduced ? 0 : 0.45,
                      ease: [0.16, 1, 0.3, 1],
                    }}
                    className="overflow-hidden"
                  >
                    <ul className="mt-6 space-y-2.5 border-t border-[var(--rule)] pt-6">
                      {category.items.map((item, j) => (
                        <motion.li
                          key={item}
                          initial={{ opacity: 0, x: -8 }}
                          animate={{ opacity: 1, x: 0 }}
                          transition={{
                            delay: reduced ? 0 : 0.06 + j * 0.05,
                            duration: reduced ? 0 : 0.35,
                          }}
                          className="flex items-center gap-3 text-sm text-[var(--cotton)]/80"
                        >
                          <span className="h-px w-3 bg-[var(--hiviz)]" />
                          {item}
                        </motion.li>
                      ))}
                    </ul>
                  </motion.div>
                ) : null}
              </AnimatePresence>
            </div>
          </motion.div>
        );
      })}
    </div>
  );
}