"use client";

import { Suspense, useEffect, useMemo, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Search, PackageX } from "lucide-react";
import { PackageCard } from "@/components/PackageCard";
import { EmptyState } from "@/components/ui/EmptyState";
import { Skeleton } from "@/components/ui/Skeleton";
import { NETWORKS } from "@/lib/mock-data";
import { fetchActivePackages } from "@/lib/data/packages";
import { NetworkId, Package } from "@/lib/types";
import { cn } from "@/lib/cn";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

function PackagesContent() {
  const searchParams = useSearchParams();
  const { t } = useTranslation();
  const initialNetwork = searchParams.get("network") as NetworkId | null;
  const [activeFilter, setActiveFilter] = useState<NetworkId | "all">(
    initialNetwork ?? "all"
  );
  const [query, setQuery] = useState("");
  const [packages, setPackages] = useState<Package[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;
    fetchActivePackages()
      .then((result) => active && setPackages(result))
      .finally(() => active && setLoading(false));
    return () => {
      active = false;
    };
  }, []);

  const filtered = useMemo(() => {
    return packages.filter((p) => {
      const matchesNetwork = activeFilter === "all" || p.network === activeFilter;
      const matchesQuery = p.name.toLowerCase().includes(query.toLowerCase());
      return matchesNetwork && matchesQuery;
    });
  }, [packages, activeFilter, query]);

  return (
    <div className="flex flex-col gap-5 px-4 pt-safe">
      <header className="pt-2">
        <h1 className="font-display text-xl font-semibold tracking-tight">
          {t("packages.title")}
        </h1>
        <p className="text-sm text-muted">{t("packages.subtitle")}</p>
      </header>

      <div className="flex items-center gap-2 rounded-2xl glass px-4 py-3">
        <Search size={17} className="text-muted" strokeWidth={2} />
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={t("packages.search")}
          className="w-full bg-transparent text-sm outline-none placeholder:text-muted"
        />
      </div>

      <div className="no-scrollbar flex gap-2 overflow-x-auto">
        {(
          [{ id: "all", label: t("packages.all") }, ...NETWORKS.map((n) => ({ id: n.id, label: n.label }))] as const
        ).map((f) => (
          <button
            key={f.id}
            onClick={() => setActiveFilter(f.id as NetworkId | "all")}
            className={cn(
              "shrink-0 rounded-full px-4 py-2 text-sm font-medium transition-colors",
              activeFilter === f.id
                ? "bg-gradient-to-br from-gold-bright to-gold-dim text-ink font-semibold shadow-glow-gold"
                : "glass text-muted"
            )}
          >
            {f.label}
          </button>
        ))}
      </div>

      <div className="flex flex-col gap-4">
        {loading ? (
          <>
            <Skeleton className="h-48 w-full !rounded-4xl" />
            <Skeleton className="h-48 w-full !rounded-4xl" />
            <Skeleton className="h-48 w-full !rounded-4xl" />
          </>
        ) : filtered.length === 0 ? (
          <EmptyState
            icon={PackageX}
            title={t("packages.noneFound")}
            description={t("packages.noneFoundDesc")}
          />
        ) : (
          filtered.map((pkg, i) => <PackageCard key={pkg.id} pkg={pkg} index={i} />)
        )}
      </div>
    </div>
  );
}

export default function PackagesPage() {
  return (
    <Suspense fallback={null}>
      <PackagesContent />
    </Suspense>
  );
}