import { useEffect, useMemo, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { Search, ArrowUpDown } from "lucide-react";
import SEO from "../lib/seo";
import PageHero from "../components/PageHero";
import Reveal from "../components/Reveal";
import PartnerCard from "../components/PartnerCard";
import CTASection from "../components/CTASection";
import { fetchPartners } from "../lib/api";
import type { Partner } from "../types";

export default function Partners() {
  const [params, setParams] = useSearchParams();
  const [partners, setPartners] = useState<Partner[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState(params.get("category") || "All");
  const [tech, setTech] = useState("All");
  const [sort, setSort] = useState("az");

  useEffect(() => {
    setLoading(true);
    const t = setTimeout(() => {
      fetchPartners({ search: search.trim(), category, tech, sort })
        .then((d) => setPartners(d.partners || []))
        .catch(() => {})
        .finally(() => setLoading(false));
    }, search ? 300 : 0);
    return () => clearTimeout(t);
  }, [search, category, tech, sort]);

  useEffect(() => {
    const c = params.get("category");
    if (c) setCategory(c);
  }, [params]);

  const techOptions = useMemo(() => {
    const set = new Set<string>();
    partners.forEach((p) => (p.technologies || []).forEach((t) => set.add(t)));
    return ["All", ...Array.from(set).sort()];
  }, [partners]);

  return (
    <div data-testid="partners-page">
      <SEO
        title="Technology Partners"
        description="Explore Aviokan's technology ecosystem — cybersecurity, networking, servers & storage, cloud, backup & DR, virtualization, collaboration, endpoint, data & analytics, software, physical security and power partners."
        path="/partners"
      />

      <PageHero
        eyebrow="PARTNERS & CLIENTS"
        title={"Technology\nEcosystem."}
        desc="The platforms we architect, integrate and manage every day — organised by category, searchable and filterable."
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Partners & Clients" }, { label: "Technology Partners" }]}
        image="/images/partners/hero.jpg"
      />

      <section className="bg-[#F6F8FA] py-20" data-testid="partners-directory">
        <div className="mx-auto max-w-[1320px] px-5 md:px-10">
          {/* Controls */}
          <div className="flex flex-col lg:flex-row gap-4 lg:items-center mb-8" data-testid="partner-controls">
            <div className="relative flex-1">
              <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-mist/40" />
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Find a technology partner…"
                className="w-full bg-white border border-[#E2E7EF] text-[#101828] placeholder:text-mist/35 text-sm pl-11 pr-4 py-3.5 outline-none focus:border-cy focus:ring-1 focus:ring-cy/30 transition-colors"
                data-testid="partner-search-input"
                aria-label="Search partners"
              />
            </div>
            <select
              value={tech}
              onChange={(e) => setTech(e.target.value)}
              className="bg-white border border-[#E2E7EF] text-[#101828] text-sm px-4 py-3.5 outline-none focus:border-cy"
              data-testid="partner-tech-filter"
              aria-label="Filter by technology"
            >
              {techOptions.map((t) => <option key={t} value={t}>{t === "All" ? "All technologies" : t}</option>)}
            </select>
            <button
              onClick={() => setSort((s) => (s === "az" ? "za" : "az"))}
              className="flex items-center justify-center gap-2 border border-[#E2E7EF] text-mist hover:text-[#0089A1] hover:border-cy/40 text-sm font-bold px-5 py-3.5 transition-colors"
              data-testid="partner-sort-toggle"
            >
              <ArrowUpDown size={14} /> {sort === "az" ? "A → Z" : "Z → A"}
            </button>
          </div>

          {/* Category chips */}
          <div className="flex flex-wrap gap-2 mb-10" data-testid="partner-category-filters">
            {["All", "Cybersecurity", "Networking", "Servers & Storage", "Cloud", "Backup & DR", "Virtualization", "Collaboration & UC", "Endpoint & Workplace", "Data & Analytics", "Software & Enterprise", "CCTV & Physical Security", "Power & UPS"].map((c) => (
              <button
                key={c}
                onClick={() => setCategory(c)}
                className={`text-[11px] font-tech tracking-[0.1em] uppercase px-4 py-2 border transition-colors duration-300 ${
                  category === c ? "border-ember text-ember bg-ember/10" : "border-[#E2E7EF] text-mist/60 hover:text-[#0089A1] hover:border-cy/40"
                }`}
                data-testid={`partner-category-${c.toLowerCase().replace(/[^a-z]+/g, "-")}`}
              >
                {c}
              </button>
            ))}
          </div>

          <p className="text-[11px] text-mist/40 mb-6 max-w-3xl leading-relaxed">
            Every logo links to the OEM's official website. Categories mirror how enterprise technology is actually bought — from data centre power to the security operations centre.
          </p>
          {!loading && (
            <p className="text-xs font-tech tracking-[0.2em] text-mist/40 mb-8" data-testid="partner-count">
              {`${partners.length} PARTNER${partners.length === 1 ? "" : "S"} FOUND`}
            </p>
          )}

          {loading ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5" data-testid="partners-skeleton">
              {Array.from({ length: 6 }).map((_, i) => (
                <div key={i} className="border border-[#E2E7EF] p-7 space-y-4">
                  <div className="skeleton h-3 w-28" />
                  <div className="flex items-center gap-3.5">
                    <div className="skeleton h-9 w-9" />
                    <div className="skeleton h-6 w-1/2" />
                  </div>
                  <div className="skeleton h-3 w-full" />
                  <div className="skeleton h-3 w-2/3" />
                  <div className="skeleton h-8 w-36" />
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-5">
              {partners.map((p, i) => <PartnerCard key={p.slug} partner={p} index={i} />)}
            </div>
          )}

          {!loading && partners.length === 0 && (
            <div className="border border-[#E2E7EF] bg-white p-14 text-center" data-testid="partners-empty">
              <p className="font-display font-bold text-xl text-[#101828]">No partners match your filters.</p>
              <p className="text-sm text-mist/55 mt-3">Try clearing the search or choosing a different category.</p>
              <button onClick={() => { setSearch(""); setCategory("All"); setTech("All"); }} className="mt-6 text-[#0089A1] text-sm font-bold hover:text-ember transition-colors" data-testid="partners-clear-filters">
                Clear all filters
              </button>
            </div>
          )}
        </div>
      </section>

      <CTASection title="Looking for a specific OEM or technology?" desc="Tell us the platform — we will confirm ecosystem fit, licensing routes and integration scope." />
    </div>
  );
}