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

/** 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 = () => {
  // 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">
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          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 font-bold text-gradient mb-2">
              Staff del Evento
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
              Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
            </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>

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

          <div
            id="staff-scroller"
            className="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 -mx-4 px-4 md:mx-0 md:px-0"
          >
            {STAFF.map((member, i) => (
              <motion.div
                key={member.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ 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="aspect-square bg-muted flex items-center justify-center overflow-hidden">
                  {member.image ? (
                    <img
                      src={member.image}
                      alt={member.name}
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                  ) : (
                    <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"
                    }`}
                  >
                    {member.role}
                  </span>

                  <h3 className="font-display text-lg font-bold text-foreground mb-2">
                    {member.name}
                  </h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    {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" />
                      Instagram
                    </a>
                  )}
                </div>
              </motion.div>
            ))}
          </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;