import { useState, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { STAFF } from "@/data/event-data";
import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
import { useTranslation } from "react-i18next";

/** Colores de badge por rol (variantes naranjas) */
const roleBadgeClass: Record<string, string> = {
  Teacher: "bg-[hsla(20,90%,55%,1)] text-white",
  DJ: "bg-[hsla(45,90%,50%,1)] text-white",
  Specials: "bg-[hsla(15,85%,55%,1)] text-white",
  Organizador: "bg-accent text-accent-foreground",
};

/** Variantes naranjas para el filtro activo por tag */
const filterActiveClass: Record<string, string> = {
  all: "bg-[hsla(37,93%,53%,1)] text-primary-foreground border-[hsla(37,93%,53%,1)] shadow-md",
  teachers: "bg-[hsla(20,90%,55%,1)] text-primary-foreground border-[hsla(20,90%,55%,1)] shadow-md",
  djs: "bg-[hsla(45,90%,50%,1)] text-primary-foreground border-[hsla(45,90%,50%,1)] shadow-md",
  specials: "bg-[hsla(15,85%,55%,1)] text-primary-foreground border-[hsla(15,85%,55%,1)] shadow-md",
};

const StaffSection = () => {
  const { t } = useTranslation();
  const [filter, setFilter] = useState<"all" | "teachers" | "djs" | "specials">("all");
  const scrollerRef = useRef<HTMLDivElement>(null);

  const filteredStaff = STAFF.filter((member) => {
    if (filter === "all") return true;
    if (filter === "teachers") return member.role === "Teacher";
    if (filter === "djs") return member.role === "DJ";
    if (filter === "specials") return member.role === "Specials";
    return true;
  });

  const staffCounts = {
    all: STAFF.length,
    teachers: STAFF.filter((m) => m.role === "Teacher").length,
    djs: STAFF.filter((m) => m.role === "DJ").length,
    specials: STAFF.filter((m) => m.role === "Specials").length,
  };

  const onPrev = () => {
    const scroller = scrollerRef.current;
    if (!scroller) return;
    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
    const delta = card ? card.offsetWidth + 24 : 320;
    scroller.scrollBy({ left: -delta, behavior: "smooth" });
  };
  const onNext = () => {
    const scroller = scrollerRef.current;
    if (!scroller) return;
    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
    const delta = card ? card.offsetWidth + 24 : 320;
    scroller.scrollBy({ left: delta, behavior: "smooth" });
  };

  return (
    <section 
      id="staff" 
      className="section-padding bg-background relative z-10 -mt-[40px] pt-[120px]"
      style={{ borderRadius: "50% 50% 0 0 / 80px 80px 0 0" }}
    >
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: false, amount: 0.15 }}
          className="flex items-end justify-between gap-4 mb-6 md:mb-8"
        >
          <div className="text-center md:text-left w-full">
            <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-2">
              {t("staff.title")}
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
              {t("staff.description")}
            </p>
          </div>

          {/* Arrows (desktop) */}
          <div className="hidden md:flex items-center gap-2 shrink-0">
            <button
              aria-label="Anterior"
              onClick={onPrev}
              className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>
            <button
              aria-label="Siguiente"
              onClick={onNext}
              className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
            >
              <ChevronRight className="h-5 w-5" />
            </button>
          </div>
        </motion.div>

        {/* Filters */}
        <motion.div 
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: false, amount: 0.15 }}
          className="flex flex-wrap gap-3 mb-8 justify-center md:justify-start"
        >
          {(
            [
              { id: "all", labelKey: "staff.filters.all" },
              { id: "teachers", labelKey: "staff.filters.teachers" },
              { id: "djs", labelKey: "staff.filters.djs" },
              { id: "specials", labelKey: "staff.filters.specials" },
            ] as const
          ).map(({ id, labelKey }) => (
            <button
              key={id}
              onClick={() => setFilter(id)}
              className={`px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-200 border flex items-center gap-2 ${
                filter === id
                  ? filterActiveClass[id]
                  : "bg-card text-foreground border-border hover:border-primary/50"
              }`}
            >
              {t(labelKey)}
              <span className={`text-xs px-2 py-0.5 rounded-full ${
                filter === id ? "bg-white/20" : "bg-muted"
              }`}>
                {staffCounts[id]}
              </span>
            </button>
          ))}
        </motion.div>

        {/* Carousel scroller */}
        <div className="relative">
          {/* gradient edges */}
          <div className="hidden md:block pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl z-20" />
          <div className="hidden md:block pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl z-20" />

          <div
            ref={scrollerRef}
            className="flex gap-6 overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth pb-8 pt-6 -mx-4 px-4 md:mx-0 md:px-0 min-h-[400px]"
          >
            <AnimatePresence mode="popLayout">
              {filteredStaff.map((member) => (
                <motion.div
                  key={member.id}
                  layout
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.95 }}
                  transition={{ duration: 0.2 }}
                  data-staff-card
                  className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
                >
                {/* Foto */}
                <div className="bg-muted flex items-center justify-center overflow-hidden w-full aspect-[4/5]">
                  {member.image ? (
                    <img
                      src={member.image}
                      alt={member.name}
                      className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500 bg-muted"
                    />
                  ) : (
                    <User className="w-16 h-16 text-muted-foreground/40" />
                  )}
                </div>

                <div className="p-5">
                  <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
                    {member.name}
                  </h3>

                  {/* Badge de rol */}
                  <span
                    className={`inline-block text-xs font-semibold px-3 py-1 rounded-full ${
                      roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
                    }`}
                  >
                    {(() => {
                      const roleLabelKey =
                        member.role === "Teacher"
                          ? "teacher"
                          : member.role === "DJ"
                            ? "dj"
                            : member.role === "Specials"
                              ? "specials"
                              : undefined;
                      return roleLabelKey ? t(`staff.${roleLabelKey}`) : member.role;
                    })()}
                  </span>
                </div>
              </motion.div>
            ))}
            </AnimatePresence>
          </div>

          {/* Arrows (mobile overlay) */}
          <div className="md:hidden absolute inset-y-1/2 -translate-y-1/2 left-1 right-1 flex items-center justify-between pointer-events-none">
            <button
              aria-label="Anterior"
              onClick={onPrev}
              className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>
            <button
              aria-label="Siguiente"
              onClick={onNext}
              className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
            >
              <ChevronRight className="h-5 w-5" />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default StaffSection;