"use client";

import { cn } from "@/lib/utils";
import { AnimatedCounter } from "./animated-counter";
import { DailyChartAccent, DailyTrendChart } from "./daily-trend-chart";
import { SparkleIcon, TenderIcon } from "./icons";
import {
  STATISTICS_DAY_OPTIONS,
  StatisticsDays,
  useStatistics,
} from "./use-statistics";

const TED_ACCENT: DailyChartAccent = {
  line: ["#5750F1", "#8155FF", "#0ABEF9"],
  fill: "#5750F1",
};
const DOCS_ACCENT: DailyChartAccent = {
  line: ["#0ABEF9", "#3C9DF8", "#22AD5C"],
  fill: "#0ABEF9",
};
const TRANSLATE_ACCENT: DailyChartAccent = {
  line: ["#F59460", "#F97316", "#EF4444"],
  fill: "#F59460",
};

export function StatisticsSection() {
  const {
    days,
    setDays,
    isLoading,
    scrapedTed,
    scrapedDocuments,
    translatedNotices,
    totalScrapedDocuments,
    totalTranslatedTenders,
  } = useStatistics();

  return (
    <section className="space-y-4 md:space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="text-xl font-bold text-dark dark:text-white">
            Scraping & Translation
          </h2>
          <p className="mt-1 text-sm text-dark-5 dark:text-dark-6">
            Daily ingestion and translation activity
          </p>
        </div>
        <DaysSelector value={days} onChange={setDays} />
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <TotalCard
          label="Total Scraped Documents"
          hint="All documents across every tender"
          value={totalScrapedDocuments}
          Icon={TenderIcon}
          color="#0ABEF9"
          accentGradient="from-[#0ABEF9] to-[#3C50E0]"
          loading={isLoading}
        />
        <TotalCard
          label="Total Translated Tenders"
          hint="Lifetime successful AI translations"
          value={totalTranslatedTenders}
          Icon={SparkleIcon}
          color="#F59460"
          accentGradient="from-orange-500 to-amber-400"
          loading={isLoading}
        />
      </div>

      <div className="space-y-4 md:space-y-6">
        <DailyTrendChart
          title="Scraped TED per day"
          subtitle="TED notices imported into the system"
          data={scrapedTed}
          isLoading={isLoading}
          accent={TED_ACCENT}
          unit={{ singular: "notice", plural: "notices" }}
          loadingLabel="Loading TED activity…"
        />
        <DailyTrendChart
          title="Scraped documents per day"
          subtitle="Individual tender documents scraped"
          data={scrapedDocuments}
          isLoading={isLoading}
          accent={DOCS_ACCENT}
          unit={{ singular: "document", plural: "documents" }}
          loadingLabel="Loading documents…"
        />
        <DailyTrendChart
          title="Translated notices per day"
          subtitle="Successful AI translation requests"
          data={translatedNotices}
          isLoading={isLoading}
          accent={TRANSLATE_ACCENT}
          unit={{ singular: "notice", plural: "notices" }}
          loadingLabel="Loading translations…"
        />
      </div>
    </section>
  );
}

function DaysSelector({
  value,
  onChange,
}: {
  value: StatisticsDays;
  onChange: (days: StatisticsDays) => void;
}) {
  return (
    <div className="inline-flex items-center gap-1 rounded-xl border border-stroke bg-white p-1 dark:border-stroke-dark dark:bg-gray-dark">
      {STATISTICS_DAY_OPTIONS.map((option) => (
        <button
          key={option}
          type="button"
          onClick={() => onChange(option)}
          className={cn(
            "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
            value === option
              ? "bg-primary text-white"
              : "text-dark-5 hover:bg-gray-2 dark:text-dark-6 dark:hover:bg-dark-3",
          )}
        >
          {option}d
        </button>
      ))}
    </div>
  );
}

function TotalCard({
  label,
  hint,
  value,
  Icon,
  color,
  accentGradient,
  loading,
}: {
  label: string;
  hint: string;
  value: number;
  Icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
  color: string;
  accentGradient: string;
  loading: boolean;
}) {
  return (
    <div className="relative isolate overflow-hidden rounded-2xl bg-white p-5 shadow-1 ring-1 ring-stroke dark:bg-gray-dark dark:ring-stroke-dark dark:shadow-card">
      <div
        aria-hidden
        className={cn(
          "pointer-events-none absolute -right-12 -top-12 z-0 size-32 rounded-full bg-gradient-to-br opacity-25 blur-2xl",
          accentGradient,
        )}
      />
      <div className="relative z-10 flex items-center gap-4">
        <div
          className={cn(
            "inline-flex size-12 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-lg",
            accentGradient,
          )}
          style={{ boxShadow: `0 10px 30px -10px ${color}88` }}
        >
          <Icon className="size-6" />
        </div>
        <div className="min-w-0">
          <div className="text-[30px] font-bold leading-none" dir="ltr" lang="en">
            {loading ? (
              <span className="inline-block h-8 w-24 animate-pulse rounded bg-gray-2 dark:bg-dark-3" />
            ) : (
              <span
                className={cn(
                  "inline-block bg-gradient-to-br bg-clip-text text-transparent",
                  accentGradient,
                )}
              >
                <AnimatedCounter value={value} />
              </span>
            )}
          </div>
          <div className="mt-2 text-sm font-semibold text-dark dark:text-white">
            {label}
          </div>
          <div className="mt-1 text-xs text-dark-6">{hint}</div>
        </div>
      </div>
    </div>
  );
}
