"use client";

import { ClosingSoonCard } from "./closing-soon";
import { CountryDistribution } from "./country-distribution";
import { DashboardHero } from "./hero";
import { NoticeTypeBreakdown } from "./notice-types";
import { ScrapePortals } from "./portals";
import { RecentTenders } from "./recent-tenders";
import { StatisticsSection } from "./statistics-section";
import { TenderStatCards } from "./stat-cards";
import { TenderTrendsChart } from "./trends-chart";
import { useDashboardData } from "./use-dashboard-data";

export function TenderDashboard() {
  const {
    isPending,
    total,
    active,
    closingSoon,
    totalValue,
    valueCurrency,
    countries,
    trend,
    recent,
    recentIsLoading,
    portals,
    portalsIsLoading,
  } = useDashboardData();

  return (
    <div className="space-y-4 md:space-y-6 2xl:space-y-7.5">
      <DashboardHero
        total={total}
        active={active}
        closingSoon={closingSoon}
        isLoading={isPending}
      />

      <TenderStatCards
        total={total}
        active={active}
        closingSoon={closingSoon}
        totalValue={totalValue}
        valueCurrency={valueCurrency}
        trend={trend}
        isLoading={isPending}
      />

      <div className="grid grid-cols-12 gap-4 md:gap-6 2xl:gap-7.5">
        <div className="col-span-12 xl:col-span-8">
          <TenderTrendsChart data={trend} isLoading={isPending} />
        </div>
        <div className="col-span-12 xl:col-span-4">
          <CountryDistribution countries={countries} isLoading={isPending} />
        </div>

        {/* <div className="col-span-12 xl:col-span-5">
          <NoticeTypeBreakdown
            noticeTypes={noticeTypes}
            isLoading={isPending}
          />
        </div> */}
        {/* <div className="col-span-12 xl:col-span-7">
          <ClosingSoonCard tenders={closingSoonList} isLoading={isPending} />
        </div> */}

        <div className="col-span-12 xl:col-span-8">
          <RecentTenders tenders={recent} isLoading={recentIsLoading} />
        </div>
        <div className="col-span-12 xl:col-span-4">
          <ScrapePortals portals={portals} isLoading={portalsIsLoading} />
        </div>
      </div>

      <StatisticsSection />
    </div>
  );
}