import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import type { TTenderDetails, TTenderLot } from "@/lib/api/types/Tenders";
import { cn } from "@/lib/utils";
import { isNonEmptyTrimmed } from "../tender-display-utils";
import {
  HEADER_SCROLL_MARGIN,
  SHOWCASE_CENTERED_BODY,
  TENDER_SECTION_IDS,
} from "../constants";
import { SectionHeading } from "./section-heading";

type TenderLotsSectionProps = {
  tender: TTenderDetails;
};

function lotHasVisibleContent(lot: TTenderLot): boolean {
  return (
    isNonEmptyTrimmed(lot.lot_id) ||
    isNonEmptyTrimmed(lot.title) ||
    isNonEmptyTrimmed(lot.description) ||
    isNonEmptyTrimmed(lot.main_nature_of_contract) ||
    isNonEmptyTrimmed(lot.main_classification) ||
    isNonEmptyTrimmed(lot.main_classification_display) ||
    (typeof lot.estimated_value === "number" &&
      Number.isFinite(lot.estimated_value) &&
      lot.estimated_value > 0) ||
    isNonEmptyTrimmed(lot.currency)
  );
}

export function TenderLotsSection({ tender }: TenderLotsSectionProps) {
  const lots = (tender.lots ?? []).filter(lotHasVisibleContent);
  if (lots.length === 0) return null;

  return (
    <div id={TENDER_SECTION_IDS.lots} className={HEADER_SCROLL_MARGIN}>
      <SectionHeading>Lots</SectionHeading>
      <div className="space-y-6">
        {lots.map((lot, idx) => {
          const key = lot.lot_id?.trim() || `lot-${idx}`;
          const cpv =
            lot.main_classification_display?.trim() ||
            lot.main_classification?.trim();
          const hasValue =
            typeof lot.estimated_value === "number" &&
            Number.isFinite(lot.estimated_value) &&
            lot.estimated_value > 0;
          const currency = lot.currency?.trim().toUpperCase() ?? "";

          return (
            <div
              key={key}
              className="rounded-2xl border border-stroke/60 bg-gray-2/30 p-4 shadow-inner dark:border-dark-3 dark:bg-dark-3/25 sm:p-6"
            >
              <h3 className="mb-4 text-sm font-semibold text-dark dark:text-white">
                {isNonEmptyTrimmed(lot.lot_id) ? lot.lot_id : `Lot ${idx + 1}`}
              </h3>
              <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                {isNonEmptyTrimmed(lot.title) ? (
                  <ShowcaseSection
                    title="Title"
                    rootClassName={cn("sm:col-span-2 xl:col-span-3")}
                    className="text-start"
                  >
                    <span className="font-medium text-dark dark:text-white">
                      {lot.title}
                    </span>
                  </ShowcaseSection>
                ) : null}
                {isNonEmptyTrimmed(lot.description) ? (
                  <ShowcaseSection
                    title="Description"
                    rootClassName={cn("sm:col-span-2 xl:col-span-3")}
                    className="text-start"
                  >
                    <p className="text-sm leading-relaxed text-dark dark:text-white/90">
                      {lot.description}
                    </p>
                  </ShowcaseSection>
                ) : null}
                {isNonEmptyTrimmed(lot.main_nature_of_contract) ? (
                  <ShowcaseSection title="Nature of contract" {...SHOWCASE_CENTERED_BODY}>
                    <span className="font-medium text-dark dark:text-white">
                      {lot.main_nature_of_contract}
                    </span>
                  </ShowcaseSection>
                ) : null}
                {cpv ? (
                  <ShowcaseSection title="Classification (CPV)" {...SHOWCASE_CENTERED_BODY}>
                    <span className="font-medium text-dark dark:text-white">{cpv}</span>
                  </ShowcaseSection>
                ) : null}
                {hasValue ? (
                  <ShowcaseSection title="Estimated value" {...SHOWCASE_CENTERED_BODY}>
                    <span className="font-medium tabular-nums text-dark dark:text-white">
                      {new Intl.NumberFormat().format(lot.estimated_value!)}
                      {currency ? (
                        <span className="ms-1 text-sm font-medium uppercase text-dark-5 dark:text-dark-6">
                          {currency}
                        </span>
                      ) : null}
                    </span>
                  </ShowcaseSection>
                ) : null}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
