"use client";

import { useState, useEffect, useMemo } from "react";
import PetCard from "@/components/PetCard";
import { fetchAllPages } from "@/lib/fetchAllPages";
import { useCart } from "@/context/CartContext";

const API_BASE = "";
const PAGE_SIZE = 10000;

const inputCls = "px-4 py-[0.6rem] border-2 border-[#ddd] rounded-md text-base outline-none transition-colors focus:border-[#e68672]";
const btnPrimaryCls = "px-[1.4rem] py-[0.6rem] bg-[#e68672] text-white border-none rounded-md text-base cursor-pointer transition-colors hover:bg-[#d4705e]";
const btnOutlineCls = "px-4 py-[0.6rem] bg-transparent text-[#666] border-2 border-[#ddd] rounded-md text-base cursor-pointer transition-all hover:border-[#aaa] hover:text-[#333]";

function PaginationBtn({ children, active, ...props }) {
  return (
    <button
      className={`border-none rounded-lg px-[0.9rem] py-2 text-[0.9rem] font-semibold cursor-pointer transition-colors ${active ? "bg-[#e68672] text-white hover:bg-[#d4705e]" : "bg-[#e8e8e8] text-[#333] hover:bg-[#d0d0d0]"} disabled:bg-[#f0f0f0] disabled:text-[#aaa] disabled:cursor-not-allowed`}
      {...props}
    >
      {children}
    </button>
  );
}

export default function AdoptPage() {
  const { selectedStoreId } = useCart();

  const [pets, setPets] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("");
  const [selectedSpecies, setSelectedSpecies] = useState("");
  const [selectedBreed, setSelectedBreed] = useState("");
  const [speciesOptions, setSpeciesOptions] = useState([]);

  useEffect(() => {
    setSelectedSpecies("");
    const params = new URLSearchParams({ page: "0", size: String(PAGE_SIZE) });
    if (selectedStoreId) params.set("storeId", String(selectedStoreId));
    fetch(`${API_BASE}/api/v1/pets?${params}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        const items = data?.content ?? [];
        const species = [...new Set(items.map((p) => p.petSpecies).filter(Boolean))].sort((a, b) =>
          a.localeCompare(b, undefined, { sensitivity: "base" })
        );
        setSpeciesOptions(species);
      })
      .catch(() => setSpeciesOptions([]));
  }, [selectedStoreId]);

  useEffect(() => { setSelectedBreed(""); }, [selectedSpecies]);

  useEffect(() => {
    setLoading(true);
    setError(null);
    fetchAllPages((page) => {
      const params = new URLSearchParams({ page: String(page), size: String(PAGE_SIZE), sort: "id,asc" });
      if (query) params.set("q", query);
      if (selectedSpecies) params.set("species", selectedSpecies);
      if (selectedStoreId) params.set("storeId", String(selectedStoreId));
      return `${API_BASE}/api/v1/pets?${params}`;
    })
      .then(setPets)
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [query, selectedSpecies, selectedStoreId]);

  const breedOptions = useMemo(
    () => [...new Set(pets.map((p) => p.petBreed).filter(Boolean))].sort((a, b) =>
      a.localeCompare(b, undefined, { sensitivity: "base" })
    ),
    [pets]
  );

  const ITEMS_PER_PAGE = 24;
  const [currentPage, setCurrentPage] = useState(0);
  const filteredPets = useMemo(
    () => (selectedBreed ? pets.filter((p) => p.petBreed === selectedBreed) : pets),
    [pets, selectedBreed]
  );
  const totalPages = Math.ceil(filteredPets.length / ITEMS_PER_PAGE);
  const displayedPets = filteredPets.slice(currentPage * ITEMS_PER_PAGE, (currentPage + 1) * ITEMS_PER_PAGE);

  function handleSearch(e) { e.preventDefault(); setCurrentPage(0); setQuery(search.trim()); }
  function handleClearFilters() { setSearch(""); setQuery(""); setSelectedSpecies(""); setSelectedBreed(""); setCurrentPage(0); }
  const hasActiveFilters = query || selectedSpecies || selectedBreed;

  return (
    <main className="min-h-screen">
      <section className="text-center py-16 px-8 bg-gradient-to-b from-[#f9f9f9] to-white">
        <h1 className="text-5xl font-bold text-[#333] mb-4 tracking-tight max-[768px]:text-3xl max-[480px]:text-[1.6rem]">Find Your Perfect Companion</h1>
        <p className="text-2xl font-light text-[#666] mb-8 max-[768px]:text-[1.2rem]">Give a loving pet their forever home</p>
        <div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
      </section>

      <section className="max-w-[1200px] mx-auto mb-6 px-8">
        <div className="flex items-end flex-wrap gap-4 mb-4 max-[600px]:flex-col max-[600px]:items-stretch">
          <div className="flex flex-col gap-[0.3rem] min-w-[160px] max-[600px]:min-w-0 max-[600px]:w-full">
            <label className="text-[0.8rem] font-semibold text-[#555] uppercase tracking-[0.04em]" htmlFor="species-filter">Species</label>
            <select
              id="species-filter"
              className={`custom-select ${inputCls} bg-white text-[#333] cursor-pointer pr-8`}
              value={selectedSpecies}
              onChange={(e) => { setSelectedSpecies(e.target.value); setCurrentPage(0); }}
            >
              <option value="">All Species</option>
              {speciesOptions.map((s) => <option key={s} value={s}>{s}</option>)}
            </select>
          </div>

          <div className="flex flex-col gap-[0.3rem] min-w-[160px] max-[600px]:min-w-0 max-[600px]:w-full">
            <label className="text-[0.8rem] font-semibold text-[#555] uppercase tracking-[0.04em]" htmlFor="breed-filter">Breed</label>
            <select
              id="breed-filter"
              className={`custom-select ${inputCls} bg-white text-[#333] cursor-pointer pr-8 disabled:bg-[#f5f5f5] disabled:text-[#aaa] disabled:cursor-not-allowed disabled:border-[#e0e0e0]`}
              value={selectedBreed}
              onChange={(e) => { setSelectedBreed(e.target.value); setCurrentPage(0); }}
              disabled={!selectedSpecies}
            >
              <option value="">{!selectedSpecies ? "Select a species first" : "All Breeds"}</option>
              {breedOptions.map((b) => <option key={b} value={b}>{b}</option>)}
            </select>
          </div>
        </div>

        <div className="flex items-center justify-between flex-wrap gap-4 max-[600px]:flex-col max-[600px]:items-stretch">
          <form className="flex gap-3 items-center max-[600px]:flex-col max-[600px]:items-stretch" onSubmit={handleSearch}>
            <input
              className={`${inputCls} flex-1 max-w-[400px] font-[inherit] max-[600px]:max-w-full`}
              type="text"
              placeholder="Search by name, species, or breed..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <button className={`${btnPrimaryCls} font-[inherit] max-[600px]:w-full`} type="submit">Search</button>
          </form>
          {hasActiveFilters && (
            <button className={`${btnOutlineCls} font-[inherit] max-[600px]:w-full`} type="button" onClick={handleClearFilters}>
              Clear Filters
            </button>
          )}
        </div>
      </section>

      <section className="max-w-[1200px] mx-auto px-8 pb-16">
        {loading && <p className="text-center text-[#666] text-[1.1rem] py-12">Loading pets...</p>}
        {error && <p className="text-center text-[#666] text-[1.1rem] py-12">Unable to load pets, please try again later.</p>}
        {!loading && !error && displayedPets.length === 0 && (
          <p className="text-center text-[#666] text-[1.1rem] py-12">No pets found matching your filters.</p>
        )}

        {!loading && !error && displayedPets.length > 0 && (
          <div className="grid grid-cols-4 gap-7 max-[1024px]:grid-cols-3 max-[480px]:grid-cols-2 max-[360px]:grid-cols-1">
            {displayedPets.map((pet) => (
              <PetCard key={pet.petId} petId={pet.petId} petName={pet.petName} petSpecies={pet.petSpecies} petStatus={pet.petStatus} imageUrl={pet.imageUrl} />
            ))}
          </div>
        )}

        {!loading && !error && totalPages > 1 && (
          <div className="flex items-center justify-center gap-[0.4rem] py-6 px-4 flex-wrap mt-6">
            <PaginationBtn onClick={() => { setCurrentPage((p) => Math.max(0, p - 1)); window.scrollTo(0, 0); }} disabled={currentPage === 0}>
              ← Prev
            </PaginationBtn>
            {(() => {
              const pages = [];
              const delta = 2;
              const left = Math.max(0, currentPage - delta);
              const right = Math.min(totalPages - 1, currentPage + delta);
              if (left > 0) { pages.push(0); if (left > 1) pages.push("..."); }
              for (let i = left; i <= right; i++) pages.push(i);
              if (right < totalPages - 1) { if (right < totalPages - 2) pages.push("..."); pages.push(totalPages - 1); }
              return pages.map((p, i) =>
                p === "..." ? (
                  <span key={`ellipsis-${i}`} className="px-1 py-2 text-[#888] font-semibold">…</span>
                ) : (
                  <PaginationBtn key={p} active={p === currentPage} onClick={() => { setCurrentPage(p); window.scrollTo(0, 0); }}>
                    {p + 1}
                  </PaginationBtn>
                )
              );
            })()}
            <PaginationBtn onClick={() => { setCurrentPage((p) => Math.min(totalPages - 1, p + 1)); window.scrollTo(0, 0); }} disabled={currentPage === totalPages - 1}>
              Next →
            </PaginationBtn>
          </div>
        )}
      </section>
    </main>
  );
}