"use client";
import { useQuery } from "@tanstack/react-query";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Facebook, Twitter, Instagram, Mail } from "lucide-react";
import { User } from "@/models/User";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "../../styles/slick-custom.css";
import { useMemo } from "react";

const getResponsiveSettings = (count: number) => {
  return [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: Math.min(3, count),
        centerPadding: "100px",
      },
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: Math.min(2, count),
        centerPadding: "30px",
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        centerPadding: "20px",
      },
    },
  ];
};

type AttendantCardProps = {
  attendant: User;
};

const AttendantCard = ({ attendant }: AttendantCardProps) => {
  return (
    <div className="px-2 h-full" key={attendant.id}>
      <Card className="bg-secondary rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-95 h-full">
        <CardContent className="p-6">
          <div className="flex items-center">
            <div className="flex-shrink-0 mr-4">
              <Avatar className="h-16 w-16">
                <AvatarImage
                  src={`${attendant.profileImage}`}
                  alt={attendant.fullName}
                />
                <AvatarFallback className="bg-primary-light text-primary text-xl font-bold">
                  {attendant.fullName
                    .split(" ")
                    .map((n) => n[0])
                    .join("")
                    .toUpperCase()}
                </AvatarFallback>
              </Avatar>
            </div>
            <div>
              <h3 className="text-xl font-bold text-neutral-dark font-heading">
                {attendant.fullName}
              </h3>
              <p className="text-gray-600">
                {attendant.userType === "admin"
                  ? "Museum Administrator"
                  : "Museum Attendant"}
              </p>
            </div>
          </div>
          <div className="mt-4">
            <p className="text-gray-600">
              {attendant.bio ||
                "Expert in West African history with years of experience studying the transatlantic slave trade. Leads specialized educational tours and workshops."}
            </p>
          </div>
          <div className="mt-4 flex space-x-3">
            <a href="#" className="text-primary hover:text-primary-dark">
              <Twitter className="h-5 w-5" />
            </a>
            <a href="#" className="text-primary hover:text-primary-dark">
              <Facebook className="h-5 w-5" />
            </a>
            <a href="#" className="text-primary hover:text-primary-dark">
              <Instagram className="h-5 w-5" />
            </a>
            <a
              href={`mailto:${attendant.email}`}
              className="text-primary hover:text-primary-dark"
            >
              <Mail className="h-5 w-5" />
            </a>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};
const AttendantSection = () => {
  // Fetch attendants from API
  const {
    data: attendants,
    isLoading,
    error,
    isFetching,
  } = useQuery<{
    data: User[];
    total: number;
    hasMore: boolean;
  }>({
    queryKey: [`/users?page=1&size=3&role=attendant`],
  });

  const attendantsCount = attendants?.data?.length || 0;
  console.log("attendantsCount: ", attendantsCount)
  const settings = useMemo(
    () => ({
      centerMode: attendantsCount > 1,
      infinite: attendantsCount > 3,
      dots: attendantsCount > 3,
      centerPadding: "100px",
      slidesToShow: Math.min(3, attendantsCount),
      slidesToScroll: 1,
      speed: 500,
      responsive: getResponsiveSettings(attendantsCount),
    }),
    [attendantsCount]
  );

  if (error || isLoading || isFetching) {
    return (
      <div className="py-8 text-center">
        <p className="text-destructive">
          Error loading museum attendants. Please try again later.
        </p>
      </div>
    );
  }

  return (
    <section className="py-20 md:py-28 lg:py-36 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold tracking-tight text-primary sm:text-4xl font-heading">
            Meet Our Museum Attendants
          </h2>
          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500">
            Our knowledgeable staff are dedicated to preserving and sharing
            Nigeria's rich history.
          </p>
        </div>

        <div className="slider-container overflow-x-hidden py-8">
          <Slider
            {...settings}
            autoplay={(attendants?.data || []).length > 3 ? true : false}
             autoplaySpeed={3000}
          >
            {isLoading
              ? // Loading skeletons
                Array(3)
                  .fill(0)
                  .map((_, index) => (
                    <div key={index}>
                      <Card
                        key={index}
                        className="bg-secondary rounded-xl shadow-lg overflow-hidden"
                      >
                        <CardContent className="p-6">
                          <div className="flex items-center">
                            <div className="flex-shrink-0 mr-4">
                              <Skeleton className="h-16 w-16 rounded-full" />
                            </div>
                            <div>
                              <Skeleton className="h-6 w-32 mb-2" />
                              <Skeleton className="h-4 w-24" />
                            </div>
                          </div>
                          <div className="mt-4">
                            <Skeleton className="h-4 w-full mb-2" />
                            <Skeleton className="h-4 w-full mb-2" />
                            <Skeleton className="h-4 w-3/4" />
                          </div>
                          <div className="mt-4 flex space-x-3">
                            <Skeleton className="h-5 w-5 rounded-full" />
                            <Skeleton className="h-5 w-5 rounded-full" />
                            <Skeleton className="h-5 w-5 rounded-full" />
                            <Skeleton className="h-5 w-5 rounded-full" />
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  ))
              : attendants?.data.map((attendant) => (
                  <div key={attendant.id}>
                    <AttendantCard attendant={attendant} />
                  </div>
                ))}
          </Slider>
        </div>
      </div>
    </section>
  );
};

export default AttendantSection;
