"use client";

import Image, { StaticImageData } from "next/image";
import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react";
import { useKeenSlider } from "keen-slider/react";
import { useState } from "react";
import "keen-slider/keen-slider.min.css";
import {
  FaDesktop,
  FaLightbulb,
  FaLock,
  FaNetworkWired,
  FaTv,
  FaUniversalAccess,
  FaVideo,
} from "react-icons/fa6";
import { FaDotCircle, FaMicrophoneAlt } from "react-icons/fa";
import { IconType } from "react-icons";

import LoungeImageOne from "@/public/user-viewing/facilities/lounge1.webp";
import LoungeImageTwo from "@/public/user-viewing/facilities/lounge2.webp";
import StudyImageOne from "@/public/user-viewing/facilities/study1.webp";
import StudyImageTwo from "@/public/user-viewing/facilities/study2.webp";
import type { UserViewingContent } from "@/lib/user-viewing-ghost-content";

type Room = UserViewingContent["facilities"]["rooms"][number] & {
  images: StaticImageData[];
};

const ROOM_IMAGES = [
  [LoungeImageOne, LoungeImageTwo],
  [StudyImageOne, StudyImageTwo],
];

const FEATURE_ICONS: IconType[] = [
  FaTv,
  FaDesktop,
  FaMicrophoneAlt,
  FaNetworkWired,
  FaLock,
  FaVideo,
  FaUniversalAccess,
  FaLightbulb,
];

function RoomCard({ room }: { room: Room }) {
  const [, setCurrentSlide] = useState(0);
  const [loaded, setLoaded] = useState(false);
  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>({
    initial: 0,
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel);
    },
    created() {
      setLoaded(true);
    },
  });

  return (
    <Card
      disableAnimation
      className="light text-black dark:text-white rounded-2xl bg-gray-400/10 dark:bg-white/5 shadow-none font-noto p-4"
    >
      <CardHeader className="flex flex-col">
        <h3 className="text-xl font-bold py-2">{room.name}</h3>
        <span className="text-sm leading-6">{room.description}</span>
      </CardHeader>
      <CardBody className="min-h-[300px]">
        <div className="flex flex-col space-y-2 text-sm text-left">
          <div className="flex items-start">
            <span className="font-bold">Size:</span>
            <span className="ms-2">{room.size}</span>
          </div>
          <div className="flex items-center">
            <span className="font-bold">Suitable for:</span>
            <span className="ms-2">{room.suitableFor}</span>
          </div>
          <span className="font-bold">In the room:</span>
          <ul className="list-disc list-inside ms-2 space-y-1">
            {room.features.map((feature, index) => (
              <li key={index}>{feature}</li>
            ))}
          </ul>
        </div>
        <CardFooter className="flex justify-center pt-4">
          <div
            ref={sliderRef}
            className="keen-slider w-[800px] h-full relative"
          >
            {room.images.map((image, index) => (
              <div key={index} className="keen-slider__slide p-2">
                <Image
                  alt={`${room.name} ${index + 1}`}
                  className="rounded object-cover w-full"
                  src={image}
                />
              </div>
            ))}
            {loaded && instanceRef.current && (
              <div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
                {Array.from({
                  length: instanceRef.current.track.details.slides.length,
                }).map((_, idx) => (
                  <FaDotCircle
                    key={idx}
                    className="hover:cursor-pointer text-white size-2"
                    onClick={() => {
                      instanceRef.current?.moveToIdx(idx);
                    }}
                  />
                ))}
              </div>
            )}
          </div>
        </CardFooter>
      </CardBody>
    </Card>
  );
}

function TechnologyAtUserViewing({
  content,
}: {
  content: Pick<
    UserViewingContent["facilities"],
    "technologyTitle" | "technologyLead" | "technology"
  >;
}) {
  return (
    <div className="flex flex-col py-12 items-center justify-center text-black dark:text-white max-w-7xl mx-auto p-8 xl:p-0">
      <div className="pb-12 text-center space-y-1">
        <h2 className="text-3xl lg:text-6xl font-inter font-black">
          {content.technologyTitle}
        </h2>
        <p className="text-lg font-noto">{content.technologyLead}</p>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 p-8 xl:p-0">
        {content.technology.map((feature, index) => {
          const Icon = FEATURE_ICONS[index];
          return (
            <div
              key={index}
              className="h-full flex flex-col lg:flex-row space-y-2 lg:space-y-0 text-center lg:text-start gap-4 light bg-gray-400/10 dark:bg-white/5 shadow-none text-black dark:text-white p-6 rounded-xl items-center justify-start font-noto"
            >
              <div className="flex items-center justify-center rounded-full p-2 bg-paleBlue dark:bg-midnightBlue size-10 outline-dashed outline-1 outline-offset-4 outline-paleBlue">
                <Icon className="text-black dark:text-white size-6" />
              </div>
              <div className="flex flex-col w-full">
                <span className="text-base font-bold">{feature.title}</span>
                <span className="font-noto text-sm lg:text-base">
                  {feature.description}
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Facilities({
  content,
}: {
  content: UserViewingContent["facilities"];
}) {
  return (
    <section className="text-black dark:text-white pt-4 max-w-7xl mx-auto p-8 xl:p-0">
      <div className="text-center space-y-4">
        <span className="relative font-noto text-xl font-bold">
          Facilities
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h2 className="text-3xl xl:text-6xl font-inter font-black">
          {content.title}
        </h2>
        <p className="text-base font-noto">{content.intro}</p>
      </div>
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-12 py-12">
        {content.rooms.map((room, index) => (
          <RoomCard
            key={room.name}
            room={{ ...room, images: ROOM_IMAGES[index] }}
          />
        ))}
      </div>
      <TechnologyAtUserViewing content={content} />
    </section>
  );
}

export default Facilities;