import React from "react";
import PageHeaderSlider from "@/ui/page-header-slider/PageHeaderSlider";
import Image from "next/image";
import PatientConsultantForm from "@/ui/forms/PatientConsultantForm";
import { getDictionary } from "./dictionaries";
import { languages_types } from "@/types";

interface aboutUsTextResponse {
  status: number;
  data: {
    translations: { aboutUsText: string; language: { slug: string } }[];
  };
  message: string;
}

interface departmentdataResponse {
  status: number;
  data: {
    translations: {
      firstName: string | null;
      lastName: string | null;
      position: string | null;
      excerpt: string | null;
      lang: {
        slug: string;
      } | null;
    }[];
    image: {
      fileUrl: string;
    };
  }[];
  message: string;
}
async function getAboutUsText(): Promise<aboutUsTextResponse> {
  const res = await fetch(
    `${process.env.API_URL}/public-apis/get/about-us-text`,
    // { next: { revalidate: 60 } },
    { cache: "no-cache" },
  );

  if (!res.ok) {
    return { status: 200, data: { translations: [] }, message: "Ok" };
  }

  const data = await res.json();

  return data;
}

async function getDepartmentMembers(): Promise<departmentdataResponse> {
  const res = await fetch(
    `${process.env.API_URL}/public-apis/get/department-members`,
    // { next: { revalidate: 60 } },
    { cache: "no-cache" },
  );

  if (!res.ok) {
    return {
      status: 200,
      data: [{ translations: [], image: { fileUrl: "#" } }],
      message: "Ok",
    };
  }

  const data = await res.json();

  return data;
}

export default async function Page({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const { about_page } = await getDictionary(lang as languages_types);
  const getdata = await getAboutUsText();
  const getmembers = await getDepartmentMembers();

  const filteredTranslations = getdata?.data?.translations.find(
    (item) => item.language.slug === lang,
  );

  // const filteredDepartmentMembersTranslations = getmembers?.data?.flatMap(
  //   (item) => item.translations.filter((item) => item.lang?.slug === lang),
  // );

  return (
    <>
      {/* <Dropdown options={site_languages} /> */}
      <PageHeaderSlider
        lang={lang}
        pageTitle={about_page?.page_title}
        imageSrc="/header-slider-1.webp"
      />

      <section className="lg:mb-24 mb-10 lg:mt-10 mt-4 container ">
        <div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2">
          <div className="mb-5 flex items-center justify-center">
            <div className="rounded-xl overflow-hidden relative w-[140px] h-[140px]">
              <Image
                src={"/shomalhospital-ipd-logo.jpg"}
                alt="shomalhospital ipd logo"
                className="object-cover"
                fill
              />
            </div>
          </div>
          <h3 className="lg:text-[3em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            {about_page?.introduction}
          </h3>
          <div className="mt-16">
            {getdata.data.translations?.length > 0 ? (
              <div
                className={`${
                  lang === "en" ? "text-left" : "text-right"
                } lg:text-[1.2rem] leading-relaxed text-[#454547] textResult`}
                dangerouslySetInnerHTML={{
                  __html: filteredTranslations?.aboutUsText ?? "",
                }}
              />
            ) : (
              ""
            )}
          </div>
        </div>
      </section>
      <section className="lg:mb-24 mb-10 lg:mt-10 mt-4 container ">
        <div className="rounded-4xl  py-16">
          <h3
            className={`lg:text-[3em] text-3xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] `}
          >
            {about_page?.department_introduction}
          </h3>
          <div className="mt-10">
            {/* <p className="text-justify text-[1.2rem] leading-8 text-[#454547]">
              تیم بیماران بین‌الملل در بیمارستان ما متشکل از گروهی حرفه‌ای از متخصصین مراقبت سلامت، مترجمین پزشکی، و مشاوران سفر درمانی است که به صورت ۲۴ ساعته و چندزبانه در خدمت بیماران خارجی هستند.
            </p> */}
            <p className="text-center lg:text-[1.2rem] leading-8 text-[#454547]">
              {about_page?.department_introduction_subtitle}
            </p>
          </div>
          <div className="grid grid-cols-3 gap-x-10 lg:gap-y-0 gap-y-4 mt-10 lg:h-[600px]">
            {getmembers?.data?.length > 0
              ? getmembers.data.map((item, index) => {
                  const filteredDepartmentMembersTranslations =
                    item.translations.find((item) => item.lang?.slug === lang);
                  return (
                    <div
                      key={index}
                      className="lg:col-span-1 col-span-3 rounded-2xl border-[1px] border-neutral-200 overflow-hidden relative"
                    >
                      <div className="lg:h-[430px] h-[300px] hover:scale-110  transition-all duration-300 relative before:absolute before:bg-gradient-to-t  before:from-white before:to-transparent before:z-10 before:w-full before:h-[70%] before:bottom-0 before:right-0 overflow-hidden">
                        <Image
                          src={item.image?.fileUrl ?? "/"}
                          fill
                          alt=""
                          className="object-fill "
                        />
                      </div>
                      <div className=" h-full px-6 py-10 space-y-2 ">
                        <h3 className="lg:text-2xl text-lg font-black text-black">
                          {filteredDepartmentMembersTranslations?.firstName}{" "}
                          {filteredDepartmentMembersTranslations?.lastName}
                        </h3>
                        <div>
                          <span className="text-secondary lg:text-xl font-medium">
                            {filteredDepartmentMembersTranslations?.excerpt}
                          </span>
                        </div>
                        <div>
                          <span className="text-black lg:text-base text-sm font-medium">
                            {filteredDepartmentMembersTranslations?.position}
                          </span>
                        </div>
                      </div>
                    </div>
                  );
                })
              : ""}
          </div>
        </div>
      </section>
      <section className="lg:mb-24 mb-10 lg:mt-10 mt-4 container ">
        <div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2">
          <h3 className="lg:text-[3em] text-3xl font-black text-blue-primary mb-10 text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
            {about_page?.form?.head_text}
          </h3>
          <p className="text-center lg:text-[1.2rem] leading-8 text-[#454547]">
            {about_page?.form?.sub_text}
          </p>
          <PatientConsultantForm lang={lang} dict={about_page} />
        </div>
      </section>
    </>
  );
}
