"use client";

import Image from "next/image";
import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import Filter from "../../../components/Filter";
import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import ServicesCard from "../../../components/Cards/ServicesCard";
import Spinner from "../../../components/ui/Spinner";
import getSpecialistServices from "../../../../server/getSpecialistServices";
import getSpecialist from "../../../../server/getSpecialist";
import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "../../../components/ui/carousel";
import Autoplay from "embla-carousel-autoplay";
import Title from "../../../components/Title";
import BeforeAfter from "../../../components/BeforeAfter";

export default function Specialist() {
  const params = useParams();
  const t = useTranslations();
  const locale = useLocale();
  const [specialist, setSpecialist] = useState([]);
  const [specialistServices, setSpecialistServices] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const searchParams = useSearchParams();

  const getSpecialistData = async () => {
    try {
      setIsLoading(true);
      const res = await getSpecialist({
        params: {
          id: params?.specialist,
        },
      });
      setSpecialist(res?.data || []);
    } catch (error) {
      console.log("🚀 ~ getSpecialist ~ error:", error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getSpecialistData();
  }, [locale]);

  const getSpecialistServicesData = async () => {
    const search = searchParams.get("search") || "";
    const categories = searchParams.getAll("category_id[]") || [];

    try {
      setIsLoading(true);
      const res = await getSpecialistServices({
        params: {
          locale: "en",
          search,
          categories,
        },
      });
      setSpecialistServices(res?.data || []);
    } catch (error) {
      console.log("🚀 ~ getSpecialistServices ~ error:", error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getSpecialistServicesData();
  }, [searchParams, locale]);

  if (isLoading) {
    return <Spinner isSpinning />;
  }

  return (
    <div className="w-full flex flex-col">
      {/* Specialist info */}
      <div className="w-full bg-white flex flex-col gap-6 md:gap-08">
        {/* Info */}
        <div className="w-full container py-5 flex flex-col gap-6 md:gap-8 bg-white">
          {/* Top */}
          <div className="flex flex-col md:flex-row gap-y-8 w-full items-center h-full md:max-h-145 2xl:max-h-160 relative rounded-[30px] overflow-hidden md:px-10 py-6.5">
            {/* Image */}
            <div className="w-full absolute top-0 left-0 h-full rounded-[30px] overflow-hidden hidden md:flex">
              <div className="bg-[#F1F3FF] w-[40%] 2xl:w-1/3 h-full"></div>
              <div className="relative flex-1 h-full">
                <Image
                  src={specialist?.profile_picture || "default.png"}
                  alt="Specialist"
                  fill
                  className="object-cover object-top"
                />
              </div>
            </div>
            {/* Mobile image */}
            <div className="aspect-320/223 w-full rounded-[30px] overflow-hidden relative flex md:hidden">
              <Image
                src={specialist?.profile_picture || "/default.png"}
                alt="Specialist"
                fill
                sizes="100vw"
                className="object-cover object-top md:hidden"
              />
            </div>
            {/* Description */}
            <div className="flex flex-col gap-7 md:gap-9 bg-white px-5 md:px-10 py-5 md:py-6.5 w-full md:max-w-141.25 h-fit z-10 rounded-[30px] overflow-hidden border border-[#C2C4E1] md:border-transparent">
              {/* Name and description */}
              <div className="flex flex-col gap-6 md:gap-8">
                <div className="flex items-end justify-between gap-1">
                  <div className="flex flex-col gap-2">
                    <p className="text-[#4A4D6A] font-bold">
                      {specialist?.speciality}
                    </p>
                    <h2 className="text-[#000000] font-semibold text-2xl md:text-3xl lg:text-4xl">
                      {specialist?.full_name}
                    </h2>
                  </div>

                  <div className="flex items-center gap-1.5 mb-1">
                    <Image
                      src={"/star.png"}
                      alt="star"
                      width={28}
                      height={28}
                      className=""
                    />
                    <span className="text-base md:text-lg font-medium text-[#5C5F82]">
                      {specialist?.rating}
                    </span>
                  </div>
                </div>
                <p className="text-base md:text-lg font-medium text-[##000000]">
                  {specialist?.description}
                </p>
              </div>
              {/*Working Hours */}
              <div className="flex flex-col gap-6 md:gap-8">
                <div className="flex flex-col gap-4">
                  <h4 className="text-[#4A4D6A] font-bold">
                    {t("working_hours")}
                  </h4>
                  <div className="flex flex-col gap-1">
                    <p className="text-[#4A4D6A] font-bold text-sm">
                      Monday - Friday
                      <span className="text-[#5C5F82] text-sm  font-normal pl-3">
                        9:00 - 18:00
                      </span>
                    </p>
                    <p className="text-[#4A4D6A] font-bold  text-sm">
                      Saturday
                      <span className="text-[#5C5F82] text-sm  font-normal pl-3">
                        10:00 - 13:00
                      </span>
                    </p>
                  </div>
                </div>
                {/* Button */}
                <Link
                  className="rounded-[20px] overflow-hidden flex items-center justify-center bg-[#1DA2C9] text-white w-max uppercase font-semibold px-9 md:px-13.25 py-4.5"
                  href="#"
                >
                  {t("book_appointment")}
                </Link>
              </div>
              {/* Location */}
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                {/* Location */}
                <div className="w-[60%] flex items-start gap-4">
                  <div>
                    <Image
                      src={"/specialistLocationLogo.svg"}
                      alt="location"
                      width={28}
                      height={28}
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <h5 className="text-[#4A4D6A] font-bold">
                      {t("location")}
                    </h5>
                    <p className="text-[#000000] text-sm">
                      {specialist?.address}
                    </p>
                  </div>
                </div>
                {/* Contacts */}
                <div className="w-[40%] flex items-start gap-4">
                  <div>
                    <Image
                      src={"/specialistContactLogo..svg"}
                      alt="contact"
                      width={28}
                      height={28}
                    />
                  </div>
                  <div className="flex flex-col gap-1">
                    <h5 className="text-[#4A4D6A] font-bold">{t("contact")}</h5>
                    <p className="text-[#000000] text-sm">
                      {specialist?.phone}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* Bottom */}
          <div className="flex flex-col lg:flex-row justify-between gap-10 md:gap-14 xl:gap-20">
            {/* Left */}
            <div className="lg:w-1/2 flex flex-col justify-between gap-6 md:gap-8">
              <div className="flex flex-col gap-6 md:gap-8">
                <div className="flex flex-col gap-1">
                  <h5 className="text-[#5C5F82] text-base md:text-lg font-medium">
                    {t("education_certifications")}
                  </h5>
                  <p className="text-[#383A57] text-lg font-bold uppercase">
                    {specialist?.education}{" "}
                  </p>
                </div>
                <div className="flex flex-col gap-3">
                  <div className="flex gap-1">
                    <Image
                      src={"/elements.svg"}
                      alt="elements"
                      width={16}
                      height={16}
                    />
                    <p className="text-[#000000] text-sm sm:text-base  md:text-lg font-normal sm:font-medium">
                      Certified in Dermatology, [Certification Body]
                    </p>
                  </div>
                  <div className="flex gap-1">
                    <Image
                      src={"/elements.svg"}
                      alt="elements"
                      width={16}
                      height={16}
                    />
                    <p className="text-[#000000] text-sm sm:text-base  md:text-lg font-normal sm:font-medium">
                      Certified in Dermatology, [Certification Body]
                    </p>
                  </div>
                  <div className="flex gap-1">
                    <Image
                      src={"/elements.svg"}
                      alt="elements"
                      width={16}
                      height={16}
                    />
                    <p className="text-[#000000] text-sm sm:text-base  md:text-lg font-normal sm:font-medium">
                      Certified in Dermatology, [Certification Body]
                    </p>
                  </div>
                </div>
              </div>
              {specialist?.website_url && (
                <Link
                  href={specialist?.website_url}
                  target="_blank"
                  className="text-[#444DAE] text-base md:text-lg font-medium"
                >
                  {specialist?.website_url}
                </Link>
              )}
              {specialist?.socials && (
                <div className="flex items-center gap-2 md:gap-3">
                  {specialist?.socials?.length > 0 &&
                    specialist?.socials?.map((item, index) => (
                      <Link
                        key={index}
                        href={item?.url}
                        target="_blank"
                        className="w-9 h-9 flex items-center justify-center border border-[#C2C4E1] rounded-full hover:shadow-md transition-all duration-300 ease-in-out"
                      >
                        <Image
                          src={`/socials/${item?.name}.png`}
                          alt={item?.name}
                          width={14}
                          height={14}
                          className="opacity-35"
                        />
                      </Link>
                    ))}
                </div>
              )}
            </div>
            {/* Right */}
            <div className="flex flex-col justify-between gap-8 lg:gap-10 xl:gap-20 lg:w-1/2">
              <div className="flex flex-col gap-2 md:gap-3 ">
                <h5 className="text-start text-lg font-bold text-[#383A57] uppercase">
                  {t("biography")}
                </h5>
                <p className="text-[#000000] text-base sm:text-lg  sm:font-medium">
                  {specialist?.biography}
                </p>
              </div>
              <div className="flex flex-col gap-2 md:gap-3 ">
                <h5 className="text-start text-lg font-bold text-[#383A57] uppercase">
                  {t("services_provided")}
                </h5>
                <p className="text-[#000000] text-base sm:text-lg  sm:font-medium">
                  {specialist?.professional_approach}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Services Provided */}
      <div className="w-full bg-[#FAFAFA] py-10 md:py-14 xl:py-20">
        <div className="container flex flex-col gap-5 md:gap-7">
          {/* Title and filters */}
          <div className="flex flex-col gap-5 md:gap-7 relative">
            <h2 className="text-2xl md:text-3xl xl:text-4xl text-[#000000] font-semibold">
              {t("book_appointment")}
            </h2>
            <Filter
              filters={[
                {
                  queryKey: "category_id[]",
                  translationKey: "category",
                  type: "tabs",
                  urlParamType: "id",
                  data: specialist?.grouped_categories,
                },
                {
                  queryKey: "search",
                  translationKey: "search",
                  type: "search",
                  classNameSearch: "w-full md:w-64 xl:w-[264px] ml-auto!",
                },
              ]}
            />
          </div>
          {isLoading ? (
            <Spinner isSpinning />
          ) : (
            <div className="w-full">
              <Carousel
                opts={{ align: "start" }}
                plugins={[
                  Autoplay({
                    delay: 5000,
                    stopOnMouseEnter: true,
                    stopOnInteraction: false,
                  }),
                ]}
              >
                <CarouselContent className="select-none -ml-4 lg:-ml-5 py-4 px-0.5">
                  {specialistServices?.length > 0 ? (
                    specialistServices.map((item, index) => (
                      <CarouselItem
                        key={item.id || index}
                        className="pl-4 lg:pl-6 basis-full sm:basis-1/2 lg:basis-1/3 2xl:basis-1/4"
                      >
                        <ServicesCard item={item} />
                      </CarouselItem>
                    ))
                  ) : (
                    <div className="w-full py-10 text-center text-xl text-gray-400">
                      {t("no_data")}
                    </div>
                  )}
                </CarouselContent>

                {/* Navigation - pokazyvaem tol'ko esli est' dannye */}
                {specialistServices?.length > 0 && (
                  <div className="flex items-center justify-between container pt-6">
                    <div>
                      <CarouselDots className="gap-2" />
                    </div>
                    <div className="flex gap-4">
                      <CarouselPrevious className="static translate-y-0 size-9 2xl:size-12 shadow-[0px_7.63px_76.29px_0px_rgba(16,16,16,0.03)]" />
                      <CarouselNext className="static translate-y-0 size-9 2xl:size-12" />
                    </div>
                  </div>
                )}
              </Carousel>
            </div>
          )}
        </div>
      </div>

      {/*  Before & After */}
      <div className="flex flex-col gap-10.5">
        <Title
          isCentered={true}
          className="max-w-[50%] mx-auto"
          classNameH1="text-center md:leading-[4.5rem]"
          title={t("beforeAndAfter")}
          subTitle={t("beforeAndAfterSubtitle")}
        />
        
        <BeforeAfter data={specialist?.portfolios} />
        
      </div>
    </div>
  );
}