"use client";

import { useEffect, useRef, useState, useTransition } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { motion } from "motion/react";
import { ChevronLeft, ChevronRight, Loader2, Search } from "lucide-react";
import { ScoreRing } from "@/components/score-ring";
import { StoreAvatar } from "@/components/dashboard/store-avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useLanguage } from "@/lib/i18n/context";
import { STAGGER_CONTAINER, STAGGER_ITEM } from "@/components/dashboard/motion-variants";
import type { StoreListItemView, StoreSortKey } from "@/database/stores";

export interface StoresFilterState {
  q?: string;
  region?: string;
  minScore?: number;
}

const DEBOUNCE_MS = 400;
const SORT_KEYS: StoreSortKey[] = ["score", "growth", "products", "rating", "reviews", "newest"];

const COPY = {
  en: {
    title: "Store Intelligence",
    description: "Sellers and stores synchronized from provider data, with product links and store snapshots when available.",
    search: "Search stores",
    allRegions: "All regions",
    minScore: "Min store score",
    sort: "Sort",
    sorts: {
      score: "Highest store score",
      growth: "Highest growth",
      products: "Most products",
      rating: "Best rating",
      reviews: "Most reviews",
      newest: "Newest",
    },
    results: "{count} stores found",
    noData: "No store data synchronized yet.",
    error: "Store intelligence could not be loaded.",
    products: "Products",
    rating: "Rating",
    reviews: "Reviews",
    growth: "Growth score",
    latestRevenue: "Latest revenue",
    trend: "Trend",
    view: "View store",
    previous: "Previous",
    next: "Next",
    pageOf: "Page {page} of {total}",
  },
  es: {
    title: "Inteligencia de tiendas",
    description: "Vendedores y tiendas sincronizados desde datos de proveedores, con productos y snapshots cuando existen.",
    search: "Buscar tiendas",
    allRegions: "Todas las regiones",
    minScore: "Puntaje minimo",
    sort: "Ordenar",
    sorts: {
      score: "Mayor puntaje",
      growth: "Mayor crecimiento",
      products: "Mas productos",
      rating: "Mejor calificacion",
      reviews: "Mas resenas",
      newest: "Mas recientes",
    },
    results: "{count} tiendas encontradas",
    noData: "Aun no hay datos de tiendas sincronizados.",
    error: "No se pudo cargar la inteligencia de tiendas.",
    products: "Productos",
    rating: "Calificacion",
    reviews: "Resenas",
    growth: "Crecimiento",
    latestRevenue: "Ingresos recientes",
    trend: "Tendencia",
    view: "Ver tienda",
    previous: "Anterior",
    next: "Siguiente",
    pageOf: "Pagina {page} de {total}",
  },
} as const;

function formatNumber(value: number | null, locale: "en" | "es") {
  if (value === null) return "Unavailable";
  return new Intl.NumberFormat(locale === "es" ? "es-US" : "en-US").format(value);
}

function formatMoney(value: number | null, locale: "en" | "es") {
  if (value === null) return "Unavailable";
  return new Intl.NumberFormat(locale === "es" ? "es-US" : "en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
  }).format(value);
}

export function StoresPageContent({
  stores,
  regions,
  total,
  page,
  pageSize,
  sort,
  filters,
  loadError,
}: {
  stores: StoreListItemView[];
  regions: string[];
  total: number;
  page: number;
  pageSize: number;
  sort: StoreSortKey;
  filters: StoresFilterState;
  loadError: boolean;
}) {
  const { locale } = useLanguage();
  const copy = COPY[locale];
  const router = useRouter();
  const pathname = usePathname();
  const [isPending, startTransition] = useTransition();
  const [q, setQ] = useState(filters.q ?? "");
  const [minScore, setMinScore] = useState(filters.minScore?.toString() ?? "");
  const isFirstRender = useRef(true);
  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  function navigate(overrides: Record<string, string | undefined>) {
    const params = new URLSearchParams();
    const current = {
      q,
      region: filters.region,
      minScore,
      sort,
      page: String(page),
      pageSize: String(pageSize),
      ...overrides,
    };
    for (const [key, value] of Object.entries(current)) {
      if (value !== undefined && value !== "") params.set(key, value);
    }
    if (!("page" in overrides)) params.set("page", "1");
    startTransition(() => router.push(`${pathname}?${params.toString()}`));
  }

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    const timer = setTimeout(() => navigate({ q, minScore }), DEBOUNCE_MS);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [q, minScore]);

  return (
    <div className="flex w-full max-w-[1500px] flex-col gap-4 pb-8">
      <div className="pt-0.5">
        <h1 className="text-[26px] font-semibold tracking-tight text-foreground sm:text-[28px]">{copy.title}</h1>
        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">{copy.description}</p>
      </div>

      <Card className="rounded-2xl p-4 shadow-xs">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <div className="relative min-w-0">
            <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
            <Input
              value={q}
              onChange={(event) => setQ(event.target.value)}
              placeholder={copy.search}
              className="pl-9"
              aria-label={copy.search}
            />
          </div>
          <Select
            value={filters.region ?? "all"}
            onValueChange={(value) => navigate({ region: value === "all" ? undefined : value })}
          >
            <SelectTrigger aria-label={copy.allRegions} className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">{copy.allRegions}</SelectItem>
              {regions.map((region) => (
                <SelectItem key={region} value={region}>
                  {region}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Input
            id="minScore"
            type="number"
            min={0}
            max={100}
            value={minScore}
            onChange={(event) => setMinScore(event.target.value)}
            placeholder={copy.minScore}
            aria-label={copy.minScore}
          />
          <Select value={sort} onValueChange={(value) => navigate({ sort: value })}>
            <SelectTrigger aria-label={copy.sort} className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {SORT_KEYS.map((key) => (
                <SelectItem key={key} value={key}>
                  {copy.sorts[key]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </Card>

      <Card className="gap-0 overflow-hidden rounded-2xl py-0">
        <div className="flex items-center gap-4 border-b px-5 py-4">
          <p className="text-[15px] font-bold text-foreground">
            {copy.results.replace("{count}", new Intl.NumberFormat(locale === "es" ? "es-US" : "en-US").format(total))}
          </p>
          {isPending && <Loader2 className="size-4 animate-spin text-muted-foreground" />}
        </div>

        {loadError ? (
          <div className="flex min-h-56 flex-col items-center justify-center gap-1 px-5 text-center">
            <p className="text-sm font-semibold text-foreground">{copy.error}</p>
          </div>
        ) : stores.length === 0 ? (
          <div className="flex min-h-56 flex-col items-center justify-center gap-1 px-5 text-center">
            <p className="text-sm font-semibold text-foreground">{copy.noData}</p>
          </div>
        ) : (
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.1 }} variants={STAGGER_CONTAINER}>
            {stores.map((store) => (
              <motion.article
                key={store.id}
                variants={STAGGER_ITEM}
                className="flex flex-col gap-4 border-b px-5 py-5 last:border-b-0"
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="flex min-w-0 items-center gap-3">
                    <StoreAvatar name={store.name} size="lg" />
                    <div className="min-w-0">
                      <Link
                        href={`/dashboard/stores/${store.id}`}
                        className="truncate text-sm font-semibold text-foreground hover:text-primary"
                      >
                        {store.name}
                      </Link>
                      <p className="mt-0.5 truncate text-xs text-muted-foreground">
                        {[store.region, store.category].filter(Boolean).join(" / ") || "Region unavailable"}
                      </p>
                    </div>
                  </div>
                  {store.storeScore !== null ? (
                    <ScoreRing value={store.storeScore} size={44} strokeWidth={5} />
                  ) : (
                    <Badge variant="outline">No score</Badge>
                  )}
                </div>

                <div className="grid grid-cols-3 gap-4 text-sm sm:grid-cols-6">
                  <Metric label={copy.products} value={formatNumber(store.productCount ?? store.syncedProductCount, locale)} />
                  <Metric label={copy.rating} value={formatNumber(store.rating, locale)} />
                  <Metric label={copy.reviews} value={formatNumber(store.reviewCount, locale)} />
                  <Metric label={copy.growth} value={formatNumber(store.growthScore, locale)} />
                  <Metric label={copy.latestRevenue} value={formatMoney(store.latestSnapshot?.revenue ?? null, locale)} />
                  <Metric label={copy.trend} value={store.trendSummary.value ?? "Unavailable"} />
                </div>

                {store.products.length > 0 && (
                  <div className="overflow-hidden rounded-xl border">
                    {store.products.map((product) => (
                      <div key={product.id} className="border-b px-3 last:border-b-0">
                        <Link
                          href={`/dashboard/products/${product.id}`}
                          className="flex items-center justify-between gap-3 py-2 text-xs hover:text-primary"
                        >
                          <span className="truncate text-foreground">{product.canonicalName}</span>
                          <span className="shrink-0 text-muted-foreground">{product.opportunityScore ?? "No score"}</span>
                        </Link>
                      </div>
                    ))}
                  </div>
                )}

                <Button asChild variant="outline" size="sm" className="w-fit">
                  <Link href={`/dashboard/stores/${store.id}`}>{copy.view}</Link>
                </Button>
              </motion.article>
            ))}
          </motion.div>
        )}
      </Card>

      {!loadError && stores.length > 0 && (
        <div className="flex items-center justify-center gap-3">
          <Button
            variant="outline"
            size="sm"
            disabled={page <= 1 || isPending}
            onClick={() => navigate({ page: String(page - 1) })}
          >
            <ChevronLeft className="size-4" />
            {copy.previous}
          </Button>
          <span className="text-sm text-muted-foreground">
            {copy.pageOf.replace("{page}", String(page)).replace("{total}", String(totalPages))}
          </span>
          <Button
            variant="outline"
            size="sm"
            disabled={page >= totalPages || isPending}
            onClick={() => navigate({ page: String(page + 1) })}
          >
            {copy.next}
            <ChevronRight className="size-4" />
          </Button>
        </div>
      )}
    </div>
  );
}

function Metric({ label, value }: { label: string; value: string | number }) {
  return (
    <div>
      <p className="text-[11px] text-muted-foreground">{label}</p>
      <p className="mt-0.5 truncate text-sm font-medium text-foreground">{value}</p>
    </div>
  );
}