"use client";

import { LocationIcon } from "@/assets/icons";
import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
import type { TTenderDetails } from "@/lib/api/types/Tenders";
import { isValidAlpha2CountryCode } from "@/utils/shared";
import getSymbolFromCurrency from "currency-symbol-map";
import {
  HEADER_SCROLL_MARGIN,
  TENDER_SECTION_IDS,
} from "../constants";
import { isValidRegionCode } from "../tender-display-utils";
import { isValidDisplayCountryCode } from "../tender-nav-utils";
import { SectionHeading } from "./section-heading";

type TenderLocationSectionProps = {
  tender: TTenderDetails;
};

export function TenderLocationSection({ tender }: TenderLocationSectionProps) {
  const countryCodeNormalized =
    tender.country_code?.trim().toUpperCase() ?? "";
  const hasValidCountryCodeForDisplay = isValidDisplayCountryCode(
    countryCodeNormalized,
  );
  const canLoadCountryFlag = isValidAlpha2CountryCode(countryCodeNormalized);
  const { data: flagData } = useGetFlagQuery(countryCodeNormalized, {
    enabled: canLoadCountryFlag,
  });

  const currencyCode = tender.currency?.trim().toUpperCase() ?? "";
  const hasValidCurrency = Boolean(currencyCode);
  const hasValidEstimatedValue =
    typeof tender.estimated_value === "number" &&
    Number.isFinite(tender.estimated_value) &&
    tender.estimated_value > 0;

  const regionNorm = tender.region_code?.trim() ?? "";
  const hasValidRegion = isValidRegionCode(regionNorm);

  return (
    <div id={TENDER_SECTION_IDS.location} className={HEADER_SCROLL_MARGIN}>
      <SectionHeading>Location & currency</SectionHeading>
      <div className="grid gap-4 sm:grid-cols-2 lg:max-w-5xl lg:grid-cols-3">
        {hasValidRegion && (
          <div className="shadow-theme-xs relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-violet/[0.06] p-5 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-violet/[0.12]">
            <div className="pointer-events-none absolute -right-8 top-0 h-24 w-24 rounded-full bg-violet/15 blur-2xl dark:bg-violet/25" />
            <h3 className="mb-4 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
              Region (NUTS)
            </h3>
            <p className="text-sm font-semibold uppercase tracking-wide text-dark dark:text-white">
              {regionNorm}
            </p>
          </div>
        )}

        {hasValidCountryCodeForDisplay && (
          <div className="shadow-theme-xs relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-primary/[0.06] p-5 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-primary/[0.12]">
            <div className="pointer-events-none absolute -right-8 top-0 h-24 w-24 rounded-full bg-primary/15 blur-2xl dark:bg-primary/25" />
            <h3 className="mb-4 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
              Country
            </h3>
            <div className="flex items-center gap-3">
              <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/80 text-primary shadow-inner dark:bg-dark-2/80">
                <LocationIcon />
              </span>
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-sm font-semibold uppercase tracking-wide text-dark dark:text-white">
                  {countryCodeNormalized}
                </span>
                {flagData && (
                  <div
                    dangerouslySetInnerHTML={{ __html: flagData }}
                    className="flex h-8 w-11 items-center justify-center overflow-hidden rounded-lg border border-stroke/60 shadow-sm dark:border-dark-3"
                  />
                )}
              </div>
            </div>
          </div>
        )}

        {hasValidCurrency && (
          <div className="shadow-theme-xs relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-blue/[0.06] p-5 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-blue/[0.12]">
            <div className="pointer-events-none absolute -left-6 bottom-0 h-20 w-20 rounded-full bg-blue/15 blur-2xl dark:bg-blue/25" />
            <h3 className="mb-4 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
              Currency
            </h3>
            <div className="flex items-baseline gap-2">
              <span className="text-2xl font-bold tabular-nums text-dark dark:text-white">
                {currencyCode}
              </span>
              <span className="text-lg font-medium text-dark-5 dark:text-dark-6">
                {getSymbolFromCurrency(currencyCode || "USD")}
              </span>
            </div>
          </div>
        )}

        {hasValidEstimatedValue && (
          <div className="shadow-theme-xs relative overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-gray-2/30 to-green/[0.06] p-5 dark:border-dark-3 dark:from-gray-dark dark:via-gray-dark dark:to-green/[0.12]">
            <div className="pointer-events-none absolute -right-6 bottom-0 h-20 w-20 rounded-full bg-green/15 blur-2xl dark:bg-green/25" />
            <h3 className="mb-4 text-xs font-semibold uppercase tracking-wide text-dark-5 dark:text-dark-6">
              Estimated value
            </h3>
            <div className="flex items-baseline gap-2">
              <span className="text-2xl font-bold tabular-nums text-dark dark:text-white">
                {new Intl.NumberFormat().format(tender.estimated_value)}
              </span>
              {hasValidCurrency && (
                <span className="text-sm font-medium uppercase text-dark-5 dark:text-dark-6">
                  {currencyCode}
                </span>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
