"use client";

import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, Briefcase, Mail, Phone } from "lucide-react";

interface TeamMemberData {
  id: number;
  name: string;
  role: string | null;
  photoUrl: string | null;
}

const DEFAULT_TEAM: TeamMemberData[] = [
  { id: -1, name: "Andi Wijaya", role: "Direktur Utama", photoUrl: "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=300&q=80" },
  { id: -2, name: "Sari Puspita", role: "Manajer Operasional", photoUrl: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=300&q=80" },
  { id: -3, name: "Budi Santoso", role: "Travel Consultant", photoUrl: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=300&q=80" },
  { id: -4, name: "Rina Amelia", role: "Customer Service", photoUrl: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=300&q=80" },
];

export function TeamSlider({ team, title, desc }: { team: TeamMemberData[], title?: string, desc?: string }) {
  const members = team.length > 0 ? team : DEFAULT_TEAM;
  const [activeIndex, setActiveIndex] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const scrollToIndex = (index: number) => {
    const container = containerRef.current;
    const card = container?.children[index] as HTMLElement | undefined;
    if (container && card) {
      container.scrollTo({ left: card.offsetLeft, behavior: "smooth" });
    }
  };

  const handleDotClick = (index: number) => {
    setActiveIndex(index);
    scrollToIndex(index);
  };

  const handlePrev = () => {
    const next = (activeIndex - 1 + members.length) % members.length;
    handleDotClick(next);
  };

  const handleNext = () => {
    const next = (activeIndex + 1) % members.length;
    handleDotClick(next);
  };

  return (
    <div className="relative">
      
      {/* Header */}
      <div className="mb-10">
        <h2 className="text-[13px] font-bold tracking-[0.2em] text-[#d32f2f] uppercase mb-2">
          {title || "TIM PROFESIONAL KAMI"}
        </h2>
        <p className="text-gray-500 text-sm">
          {desc || "Orang-orang berpengalaman di balik setiap perjalanan Anda."}
        </p>
      </div>

      <div className="relative flex items-center group">
        
        {/* Left Arrow (Absolute positioning to stick out of the slider slightly) */}
        <button 
          onClick={handlePrev} 
          className="absolute -left-5 md:-left-12 z-10 w-10 h-10 rounded-full bg-white border border-red-100 flex items-center justify-center text-red-500 hover:text-white hover:bg-[#d32f2f] hover:border-[#d32f2f] transition-all shadow-md opacity-0 group-hover:opacity-100"
        >
          <ChevronLeft className="w-5 h-5" />
        </button>

        {/* Carousel Container */}
        <div
          ref={containerRef}
          className="flex flex-nowrap gap-6 overflow-x-auto no-scrollbar scroll-smooth px-1 py-4 w-full"
        >
          {members.map((member) => (
            <div
              key={member.id}
              className="flex-shrink-0 w-[85%] sm:w-[45%] md:w-[30%] lg:w-[calc(25%-18px)] rounded-[20px] bg-white border border-gray-100 p-6 shadow-sm transition-all hover:shadow-xl group/card flex flex-col items-center"
            >
              <div className="mb-5 h-24 w-24 overflow-hidden rounded-full bg-gray-50 ring-4 ring-gray-50 group-hover/card:ring-red-50 transition-all">
                {member.photoUrl ? (
                  <img
                    src={member.photoUrl}
                    alt={member.name}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover/card:scale-110"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center text-3xl font-bold text-gray-300">
                    {member.name.charAt(0)}
                  </div>
                )}
              </div>
              
              <h3 className="text-[16px] font-bold text-slate-900 text-center">{member.name}</h3>
              {member.role && (
                <p className="mt-1 text-[12px] text-gray-500 text-center">{member.role}</p>
              )}

              {/* Social Icons */}
              <div className="mt-5 flex items-center justify-center gap-3 w-full">
                <a href="#" className="w-8 h-8 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-400 hover:bg-blue-600 hover:border-blue-600 hover:text-white transition-colors">
                  <Briefcase className="w-3.5 h-3.5" fill="currentColor" strokeWidth={0} />
                </a>
                <a href="#" className="w-8 h-8 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-400 hover:bg-gray-800 hover:border-gray-800 hover:text-white transition-colors">
                  <Mail className="w-3.5 h-3.5" />
                </a>
                <a href="#" className="w-8 h-8 rounded-full border border-gray-100 bg-white flex items-center justify-center text-gray-400 hover:bg-green-500 hover:border-green-500 hover:text-white transition-colors">
                  <Phone className="w-3.5 h-3.5" />
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* Right Arrow */}
        <button 
          onClick={handleNext} 
          className="absolute -right-5 md:-right-12 z-10 w-10 h-10 rounded-full bg-white border border-red-100 flex items-center justify-center text-red-500 hover:text-white hover:bg-[#d32f2f] hover:border-[#d32f2f] transition-all shadow-md opacity-0 group-hover:opacity-100"
        >
          <ChevronRight className="w-5 h-5" />
        </button>
      </div>

      {/* Pagination Dots */}
      {members.length > 1 && (
        <div className="mt-8 flex justify-center items-center gap-2">
          {members.map((member, index) => (
            <button
              key={member.id}
              onClick={() => handleDotClick(index)}
              aria-label={`Lihat ${member.name}`}
              className={`h-2 rounded-full transition-all ${
                index === activeIndex
                  ? "w-2 bg-[#d32f2f]"
                  : "w-2 bg-gray-200"
              }`}
            />
          ))}
        </div>
      )}
    </div>
  );
}