import { useState } 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 */
const roleBadgeClass: Record<string, string> = {
  Instructor: "bg-primary text-primary-foreground",
  DJ: "bg-secondary text-secondary-foreground",
  Organizador: "bg-accent text-accent-foreground",
};

const StaffSection = () => {
  const { t } = useTranslation();
  const [filter, setFilter] = useState<"all" | "instructors" | "djs">("all");

  const filteredStaff = STAFF.filter((member) => {
    if (filter === "all") return true;
    if (filter === "instructors") return member.role === "Instructor";
    if (filter === "djs") return member.role === "DJ";
    return true;
  });
  // simple ref + helpers for horizontal scroll
  const onPrev = () => {
    const scroller = document.getElementById("staff-scroller");
    if (!scroller) return;
    const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
    const delta = card ? card.offsetWidth + 24 : 320; // 24 ~ gap-x-6
    scroller.scrollBy({ left: -delta, behavior: "smooth" });
  };
  const onNext = () => {
    const scroller = document.getElementById("staff-scroller");
    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: "instructors", labelKey: "staff.filters.instructors" },
              { id: "djs", labelKey: "staff.filters.djs" },
            ] as const
          ).map(({ id, labelKey }) => (
            <button
              key={id}
              onClick={() => setFilter(id)}
              className={`px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 border ${
                filter === id
                  ? "bg-primary text-primary-foreground border-primary shadow-md"
                  : "bg-card text-foreground border-border hover:border-primary/50"
              }`}
            >
              {t(labelKey)}
            </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
            id="staff-scroller"
            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, i) => (
                <motion.div
                  key={member.id}
                  layout
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.9 }}
                  transition={{ duration: 0.3, delay: i * 0.05 }}
                  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">
                  {/* Badge de rol */}
                  <span
                    className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
                      roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
                    }`}
                  >
                    {(() => {
                      const roleLabelKey =
                        member.role === "Instructor"
                          ? "instructor"
                          : member.role === "DJ"
                            ? "dj"
                            : member.role === "Organizador"
                              ? "organizer"
                              : undefined;
                      return roleLabelKey ? t(`staff.${roleLabelKey}`) : member.role;
                    })()}
                  </span>

                  <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>
                  <p className="text-sm text-muted-foreground mb-4">
                    {member.description?.trim().startsWith("[") && member.description?.trim().endsWith("]")
                      ? t("staff.placeholder")
                      : member.description}
                  </p>

                  {/* Redes sociales */}
                  {member.socials?.instagram && (
                    <a
                      href={member.socials.instagram}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
                    >
                      <Instagram className="w-4 h-4" />
                      {t("staff.socials.instagram")}
                    </a>
                  )}
                </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;