"use client";

import React from "react";
import StatCard from "@/components/stats-card";
import { useTranslations } from "next-intl";
import { useGeneralSettings } from "@/lib/clientQueries";

const StatsSection: React.FC = () => {
  const t = useTranslations("STATS_SECTION");
  const { data: settings, isLoading } = useGeneralSettings();

  if (isLoading) {
    return (
      <section id="stats" className="py-6">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center justify-between mb-6">
            <div className="h-8 w-40 bg-slate-200 rounded animate-pulse" />
            <div className="h-4 w-56 bg-slate-200 rounded animate-pulse" />
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {Array.from({ length: 3 }).map((_, i) => (
              <div
                key={i}
                className="rounded-2xl border bg-white p-6 space-y-3 animate-pulse"
              >
                <div className="h-8 w-24 bg-slate-200 rounded" />
                <div className="h-4 w-28 bg-slate-200 rounded" />
                <div className="h-4 w-40 bg-slate-200 rounded" />
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  const isFallback = Boolean((settings as any)?._isFallback);

  const stats = [
    {
      value: String(
        settings?.statistic_3_number ?? (isFallback ? "13000" : ""),
      ),
      suffix: t("thousand"),
      label: String(
        settings?.statistic_3_text ?? (isFallback ? t("horses") : ""),
      ),
    },
    {
      value: String(settings?.statistic_2_number ?? (isFallback ? "5000" : "")),
      suffix: t("thousand"),
      label: String(
        settings?.statistic_2_text ?? (isFallback ? t("buyers") : ""),
      ),
    },
    {
      value: String(
        settings?.statistic_1_number ?? (isFallback ? "19000" : ""),
      ),
      suffix: t("thousand"),
      label: String(
        settings?.statistic_1_text ?? (isFallback ? t("sales") : ""),
      ),
    },
  ];

  return (
    <section id="stats" className="py-6">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-extrabold text-[color:var(--g1)] fade-up">
            {t("title")}
          </h2>
          <div className="text-sm text-slate-500 flex items-center gap-4">
            <span>{t("last_30_days")}</span>
            <span className="inline-block w-24 h-[2px] bg-[color:var(--g1)]"></span>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          {stats?.map((stat, i) => (
            <StatCard key={i} value={stat.value} label={stat.label} />
          ))}
        </div>

        <div className="mt-4">
          <span className="inline-block text-xs px-3 py-1 rounded-lg bg-slate-100 text-slate-600 border border-slate-200">
            {t("last_update")}
          </span>
        </div>
      </div>
    </section>
  );
};

export default StatsSection;