"use client";
import Loading from "@/components/loading";
import { LocationIcon } from "@/assets/icons";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import Status from "@/components/ui/Status";
import { useTenderDetailQuery } from "@/hooks/queries";
import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
import { msToDate } from "@/utils/shared";
import getSymbolFromCurrency from "currency-symbol-map";
import Link from "next/link";
import { use } from "react";

interface IProps {
  params: Promise<{
    details: string;
  }>;
}

const TenderDetails = ({ params }: IProps) => {
  const { details } = use(params);
  const { data, isLoading, isError } = useTenderDetailQuery(details);
  const breadcrumbItems = [
    { name: "Dashboard", href: "/" },
    { name: "Tenders", href: "/tenders" },
    { name: "Tender details", href: `/tenders/${details}` },
  ];
  const { data: flagData } = useGetFlagQuery(data?.data.country_code ?? "EU");
  if (isLoading) return <Loading />;
  if (isError) return <div>Error</div>;
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      <ShowcaseSection className="!p-6.5">
        <div className="flex justify-between border-b pb-4">
          <p>{data?.data.title}</p>
          <Status status={data?.data.status ?? "Unknown"}>
            {data?.data.status}
          </Status>
        </div>
        <div className="mt-4 flex justify-between gap-2 border-b pb-4">
          <ShowcaseSection title="Tender ID">
            {data?.data.tender_id}
          </ShowcaseSection>
          <ShowcaseSection title="Buyer Organization">
            {data?.data.buyer_organization.name}
          </ShowcaseSection>
          <ShowcaseSection title="Notice Publication Id">
            {data?.data.notice_publication_id}
          </ShowcaseSection>
          <ShowcaseSection title="Procedure Code">
            {data?.data.procedure_code}
          </ShowcaseSection>
          <ShowcaseSection title="Procurement Type Code">
            {data?.data.procurement_type_code}
          </ShowcaseSection>
        </div>
        <div className="mt-4 flex justify-between gap-2 border-b pb-4">
          <ShowcaseSection title="Application Deadline">
            <span>{msToDate(data?.data.application_deadline ?? 0)}</span>
          </ShowcaseSection>
          {data?.data.submission_url && (
            <ShowcaseSection title="Submission Url">
              <Link href={data?.data.submission_url ?? ""} target="_blank">
                {data?.data.submission_url}
              </Link>
            </ShowcaseSection>
          )}

          <ShowcaseSection title="Publication Deadline">
            <span>{msToDate(data?.data.publication_date ?? 0)}</span>
          </ShowcaseSection>
          <ShowcaseSection title="Submission Deadline">
            <span>{msToDate(data?.data.submission_deadline ?? 0)}</span>
          </ShowcaseSection>
          <ShowcaseSection title="Tender Deadline">
            <span>{msToDate(data?.data.tender_deadline ?? 0)}</span>
          </ShowcaseSection>
        </div>
        <div className="mt-4 flex justify-between border-b pb-4">
          <div>
            <h2 className="mb-6 text-lg font-semibold">Country</h2>
            <div className="flex items-center gap-1">
              <LocationIcon />
              <p className="text-sm uppercase">{data?.data.country_code}</p>
              <div
                dangerouslySetInnerHTML={{ __html: flagData }}
                className="flex w-7 items-center justify-center overflow-hidden rounded-md border p-0"
              />
            </div>
          </div>
          {data?.data.currency && (
            <div>
              <h2 className="mb-6 text-lg font-semibold">Currency</h2>
              <div className="flex items-center gap-1">
                <p className="text-sm uppercase">{data?.data.currency}</p>
                <p>{getSymbolFromCurrency(data?.data.currency ?? "USD")}</p>
              </div>
            </div>
          )}

          <div></div>
        </div>
        <div className="mt-4">
          <h2 className="mb-6 text-lg font-semibold">Description</h2>
          <p>{data?.data.description}</p>
        </div>
      </ShowcaseSection>
    </>
  );
};

export default TenderDetails;