import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Users, MapPin, Bike } from "lucide-react";
import { useMembers } from "@/contexts/MembersContext";
import { Member } from "@/types";

const CAROUSEL_THRESHOLD = 5;

const MemberCard = ({ member }: { member: Member }) => (
  <div className="flex-shrink-0 w-56 bg-card border border-border/10 rounded-xl p-5 text-center group hover:border-primary/30 transition-all duration-300">
    <div className="relative w-20 h-20 mx-auto mb-4">
      <img
        src={member.photo}
        alt={member.name}
        className="w-full h-full rounded-full object-cover border-2 border-primary/30 group-hover:border-primary transition-colors duration-300"
        loading="lazy"
      />
      <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-primary rounded-full flex items-center justify-center">
        <Bike className="w-3 h-3 text-primary-foreground" />
      </div>
    </div>
    <h4 className="font-display text-sm font-semibold text-card-foreground mb-1 tracking-wide">
      {member.name}
    </h4>
    <div className="flex items-center justify-center gap-1 text-xs text-muted-foreground mb-1">
      <MapPin className="w-3 h-3 text-primary" />
      {member.city}
    </div>
    <p className="text-xs text-primary/80 font-display tracking-wider">{member.moto}</p>
  </div>
);

const MembersSection = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-100px" });
  const { members } = useMembers();

  const useCarousel = members.length > CAROUSEL_THRESHOLD;
  const doubledMembers = [...members, ...members];

  return (
    <section className="section-padding bg-background relative overflow-hidden" ref={ref}>
      <div className="container mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={inView ? { scale: 1 } : {}}
            transition={{ duration: 0.5, type: "spring" }}
            className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6"
          >
            <Users className="w-8 h-8 text-primary" />
          </motion.div>
          <h2 className="font-display text-4xl md:text-5xl font-bold tracking-wider mb-4">
            NOSSOS <span className="text-primary">MEMBROS</span>
          </h2>
          <div className="w-20 h-1 bg-primary mx-auto mb-6" />
          <p className="text-lg text-muted-foreground max-w-xl mx-auto">
            A força do ITAROTA79 está em cada um dos seus membros.
          </p>
        </motion.div>
      </div>

      {useCarousel ? (
        <motion.div
          initial={{ opacity: 0 }}
          animate={inView ? { opacity: 1 } : {}}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="relative"
        >
          <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none" />
          <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none" />

          <div className="mb-6 overflow-hidden">
            <motion.div
              animate={{ x: [0, -(members.length * 240)] }}
              transition={{ repeat: Infinity, duration: 30, ease: "linear" }}
              className="flex gap-6"
              style={{ width: "max-content" }}
            >
              {doubledMembers.map((member, i) => (
                <MemberCard key={`r1-${i}`} member={member} />
              ))}
            </motion.div>
          </div>

          <div className="overflow-hidden">
            <motion.div
              animate={{ x: [-(members.length * 240), 0] }}
              transition={{ repeat: Infinity, duration: 35, ease: "linear" }}
              className="flex gap-6"
              style={{ width: "max-content" }}
            >
              {[...doubledMembers].reverse().map((member, i) => (
                <MemberCard key={`r2-${i}`} member={member} />
              ))}
            </motion.div>
          </div>
        </motion.div>
      ) : (
        <motion.div
          initial={{ opacity: 0 }}
          animate={inView ? { opacity: 1 } : {}}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="container mx-auto"
        >
          <div className="flex flex-wrap justify-center gap-6">
            {members.map((member, i) => (
              <motion.div
                key={member.id}
                initial={{ opacity: 0, y: 20 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.4, delay: i * 0.1 }}
              >
                <MemberCard member={member} />
              </motion.div>
            ))}
          </div>
        </motion.div>
      )}

      {members.length === 0 && (
        <p className="text-center text-muted-foreground py-12">Nenhum membro cadastrado.</p>
      )}
    </section>
  );
};

export default MembersSection;
