import { useMemo } from "react";
import Icon from "../../Icon";
import useAppStore from "@/store/useAppStore";

export default function StatCards({}) {
  const { query, domains } = useAppStore();

  const total = domains?.length;
  const available = domains?.filter(
    (x) => x?.availability === "available",
  )?.length;
  const registered = domains?.filter(
    (x) => x?.availability !== "available",
  )?.length;

  const stats = useMemo(() => {
    if (!query) return { total: 0, available: 0, registered: 0 };

    return {
      total,
      available,
      registered,
    };
  }, [domains]);

  const items = [
    {
      label: "Total TLDs checked",
      value: stats.total.toLocaleString(),
      sub: "across all global registries",
      icon: <Icon.Globe className="w-4 h-4" />,
      tone: "brand",
    },
    {
      label: "Available",
      value: stats.available.toLocaleString(),
      sub: `including premium`,
      icon: <Icon.Check className="w-4 h-4" />,
      tone: "emerald",
    },
    {
      label: "Registered",
      value: stats.registered.toLocaleString(),
      sub: "currently owned by others",
      icon: <Icon.X className="w-4 h-4" />,
      tone: "rose",
    },
  ];
  const toneCls = {
    brand: { dot: "bg-brand-500", text: "text-brand-600 dark:text-brand-300" },
    emerald: {
      dot: "bg-emerald-500",
      text: "text-emerald-600 dark:text-emerald-300",
    },
    rose: { dot: "bg-rose-500", text: "text-rose-600 dark:text-rose-300" },
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {items.map((it, i) => (
        <div
          key={i}
          className="relative rounded-2xl border border-ink-200 dark:border-ink-800 bg-white dark:bg-ink-900 p-6 theme-trans overflow-hidden group hover:border-ink-300 dark:hover:border-ink-700 transition"
        >
          <div
            className={`absolute -top-12 -right-12 w-32 h-32 rounded-full ${toneCls[it.tone].dot} opacity-[0.08] dark:opacity-[0.18] group-hover:opacity-[0.14] dark:group-hover:opacity-[0.28] transition`}
          />
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-ink-500 dark:text-ink-400">
              <span
                className={`w-1.5 h-1.5 rounded-full ${toneCls[it.tone].dot}`}
              />
              {it.label}
            </div>
            <span className={`${toneCls[it.tone].text}`}>{it.icon}</span>
          </div>
          <div className="font-mono text-4xl md:text-5xl font-semibold tracking-tight text-ink-900 dark:text-ink-50 tabular-nums">
            {it.value}
          </div>
          <div className="mt-2 text-sm text-ink-500 dark:text-ink-400">
            {it.sub}
          </div>
        </div>
      ))}
    </div>
  );
}