import PageHeaderSlider from "@/ui/page-header-slider/PageHeaderSlider";
import React from "react";
import { getDictionary } from "../dictionaries";
import { languages_types } from "@/types";
import { Metadata } from "next";
import { pages_titles } from "@/constants";
import { toPersianNumber } from "@/utils/functions";
export const metadata: Metadata = {
  title: pages_titles.pricing["fa"] + " | " + "بیمارستان شمال",
  description: "Shomal Hospital IPD Pricing page",
};

interface medicalPackagesDataType {
  id: number;
  translations: (
    | {
        title: string;
        lang: {
          title: string;
          slug: string;
        } | null;
      }
    | {
        title: string;
        lang: {
          title: string;
          slug: string;
        } | null;
      }
  )[];
  icon: string | null;
  priority: number | null;
  price: string;
  parent_id: number | null;
  parent: {
    translations: {
      title: string;
      lang: {
        title: string;
        slug: string;
      } | null;
    }[];
  } | null;
  children: medicalPackagesDataType[];
}

interface medicalPackagesResponseType {
  status: number;
  data: medicalPackagesDataType[];
  message: string;
}

async function getData(lang: string): Promise<medicalPackagesResponseType> {
  const res = await fetch(
    `http://localhost:3500/api/v1/public-apis/get/pricing/${lang ?? ""}`,
    {
      cache: "no-cache",
    },
  );

  if (!res.ok) {
    throw new Error("Error");
  }

  const data = await res.json();

  return data;
}
export default async function PricingPage({
  params,
}: {
  params: Promise<{ lang: languages_types }>;
}) {
  const { lang } = await params;
  const { pricing_page } = await getDictionary(lang);

  const getdata = await getData(lang);

  return (
    <>
      <PageHeaderSlider
        lang={lang}
        pageTitle={pricing_page?.page_title}
        imageSrc="/header-slider-1.webp"
      />
      <div className="my-16 container">
        <div className="bg-[#F8F9FA] rounded-4xl lg:px-20 py-16">
          <h3 className="lg:text-[3em] text-2xl 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%] ">
            {pricing_page?.page_title}
          </h3>
          <div className="overflow-x-auto mt-10">
            <table className="min-w-full border border-gray-200 divide-y divide-gray-200 text-sm">
              <thead className="bg-blue-100">
                <tr>
                  <th className="px-4 py-2 text-center font-semibold">
                    {pricing_page.table.head[0].name}
                  </th>
                  <th className="px-4 py-2 text-center font-semibold">
                    {pricing_page.table.head[1].name}
                  </th>
                  <th className="px-4 py-2 text-center font-semibold">
                    {pricing_page.table.head[2].name}
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {getdata.data.flatMap((item) =>
                  item.children.length > 0 ? (
                    item.children.map((item2, index) => (
                      <tr key={item2.id}>
                        {index + 1 === 1 && (
                          <td
                            rowSpan={item.children.length}
                            className="px-4 py-2 font-medium text-center"
                          >
                            {
                              item2.parent?.translations.find(
                                (translate) => translate.lang?.slug === lang,
                              )?.title
                            }
                          </td>
                        )}
                        <td className="px-4 py-2">
                          {
                            item2.translations.find(
                              (p) => p.lang?.slug === lang,
                            )?.title
                          }
                        </td>
                        <td className="px-4 py-2 text-center">
                          {lang === "fa" || lang === "ar"
                            ? toPersianNumber(item2.price)
                            : item2.price}
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr key={item.id}>
                      <td
                        rowSpan={1}
                        className="px-4 py-2 font-medium text-center"
                      >
                        {
                          item.translations.find(
                            (translate) => translate.lang?.slug === lang,
                          )?.title
                        }
                      </td>

                      <td className="px-4 py-2"></td>
                      <td className="px-4 py-2 text-center">
                        {lang === "fa" || lang === "ar"
                          ? toPersianNumber(item.price)
                          : item.price}
                      </td>
                    </tr>
                  ),
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}
