import Link from "next/link";
import { redirect } from "next/navigation";

// --- CONFIGURACIÓN ---
const wooConfig = {
  url: "https://laveronicapescaycaza.es", 
  consumerKey: "ck_e0c15377038e124590326e0660655848e3678099", 
  consumerSecret: "cs_414c278996b7803a08d23b7a8929780517d47226"
};

// Función para pedir productos (Soporta búsqueda y paginación)
async function getProducts(page = 1, search = "") {
  const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
  const api = new WooCommerceRestApi({
    url: wooConfig.url,
    consumerKey: wooConfig.consumerKey,
    consumerSecret: wooConfig.consumerSecret,
    version: "wc/v3"
  });

  try {
    const params: any = { per_page: 12, page: page };
    if (search) params.search = search; // Si hay búsqueda, la añadimos a la API

    const response = await api.get("products", params);
    return response.data;
  } catch (error) {
    console.error("Error API:", error);
    return [];
  }
}

// Acción del Buscador (Server Action simple)
async function searchAction(formData: FormData) {
  "use server";
  const query = formData.get("query");
  if (query) {
    redirect(`/?search=${query}`);
  }
}

export default async function Home({ searchParams }: { searchParams: { page?: string, search?: string } }) {
  const page = searchParams.page ? parseInt(searchParams.page) : 1;
  const search = searchParams.search || "";
  const products = await getProducts(page, search);

  return (
    <main className="min-h-screen bg-[#0a0a0a] text-gray-200 font-sans">
      
      {/* 1. NAV SUPERIOR + BUSCADOR */}
      <nav className="bg-black border-b border-[#F68D1F] sticky top-0 z-50 shadow-lg shadow-orange-900/20">
        <div className="max-w-7xl mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="w-32">
             <Link href="/">
               <img src="https://www.foxint.com/images/logo.png" alt="Fox Logo" className="w-full brightness-110" />
             </Link>
          </div>

          {/* Formulario de Búsqueda Funcional */}
          <form action={searchAction} className="flex w-full md:w-1/2">
            <input 
              type="text" 
              name="query" 
              placeholder="Buscar cañas, carretes..." 
              className="w-full bg-[#1a1a1a] text-white px-4 py-2 border border-gray-700 focus:border-[#F68D1F] outline-none rounded-l"
              defaultValue={search}
            />
            <button type="submit" className="bg-[#F68D1F] text-black font-bold px-6 py-2 rounded-r hover:bg-white transition">
              BUSCAR
            </button>
          </form>

          <button className="bg-[#1a1a1a] border border-[#F68D1F] text-[#F68D1F] font-bold px-4 py-2 rounded hover:bg-[#F68D1F] hover:text-black transition">
            Cesta (0)
          </button>
        </div>
      </nav>

      {/* 2. SLIDER / HERO (Solo se muestra si NO estás buscando) */}
      {!search && (
        <header className="relative h-[450px] flex items-center justify-center bg-neutral-900 overflow-hidden border-b-4 border-[#F68D1F]">
          {/* Fondo estilo banner */}
          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1544265436-545230489957?q=80&w=1920')] bg-cover bg-center opacity-40 hover:scale-105 transition duration-[10s]"></div>
          <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent"></div>
          
          <div className="relative z-10 text-center px-4 max-w-4xl">
            <span className="bg-[#F68D1F] text-black font-bold px-3 py-1 text-xs uppercase tracking-widest mb-4 inline-block">Novedades 2026</span>
            <h1 className="text-5xl md:text-7xl font-black text-white uppercase italic drop-shadow-xl">
              Equipamiento <br/><span className="text-transparent bg-clip-text bg-gradient-to-r from-[#F68D1F] to-yellow-500">Profesional</span>
            </h1>
            <p className="mt-6 text-xl text-gray-300">La tienda especializada para el pescador de carpas exigente.</p>
          </div>
        </header>
      )}

      {/* 3. BANNER DE PROMOCIÓN (Visual) */}
      {!search && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-0 border-b border-gray-800">
           <div className="bg-[#151515] p-12 flex flex-col justify-center items-start border-r border-gray-800">
              <h3 className="text-[#F68D1F] font-bold text-xl uppercase mb-2">Ofertas Flash</h3>
              <p className="text-3xl text-white font-bold mb-4">HASTA 50% DTO EN ROPA</p>
              <button className="text-white border-b border-[#F68D1F] pb-1 hover:text-[#F68D1F]">Ver Ofertas &rarr;</button>
           </div>
           <div className="bg-[#1a1a1a] p-12 flex flex-col justify-center items-start">
              <h3 className="text-[#F68D1F] font-bold text-xl uppercase mb-2">Nuevas Cañas Fox</h3>
              <p className="text-3xl text-white font-bold mb-4">MODELOS HORIZON X3</p>
              <button className="text-white border-b border-[#F68D1F] pb-1 hover:text-[#F68D1F]">Descubrir &rarr;</button>
           </div>
        </div>
      )}

      {/* 4. LISTADO DE PRODUCTOS */}
      <section className="max-w-7xl mx-auto px-4 py-16">
        <div className="flex justify-between items-end mb-8">
           <h2 className="text-3xl font-bold text-white uppercase border-l-4 border-[#F68D1F] pl-4">
             {search ? `Resultados para "${search}"` : "Últimas Llegadas"}
           </h2>
           <span className="text-gray-500 text-sm">Página {page}</span>
        </div>

        {products.length === 0 ? (
           <div className="py-20 text-center border border-gray-800 rounded bg-[#111]">
             <p className="text-xl text-gray-400">No se encontraron productos.</p>
             {search && <Link href="/" className="text-[#F68D1F] mt-4 inline-block hover:underline">Borrar búsqueda</Link>}
           </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {products.map((product: any) => (
              <div key={product.id} className="group bg-[#111] border border-gray-800 hover:border-[#F68D1F] transition duration-300 relative flex flex-col">
                {product.on_sale && <span className="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 z-10">OFERTA</span>}
                
                <Link href={`/product/${product.id}`} className="block relative h-64 bg-white p-6 overflow-hidden">
                   {product.images && product.images[0] ? (
                     <img src={product.images[0].src} alt={product.name} className="w-full h-full object-contain group-hover:scale-110 transition duration-500" />
                   ) : (
                     <div className="flex h-full items-center justify-center text-black">Sin Foto</div>
                   )}
                </Link>

                <div className="p-5 flex flex-col flex-grow">
                  <Link href={`/product/${product.id}`}>
                    <h3 className="font-bold text-white uppercase text-sm leading-tight hover:text-[#F68D1F] mb-4 min-h-[2.5rem]">
                      {product.name}
                    </h3>
                  </Link>
                  
                  <div className="mt-auto pt-4 border-t border-gray-800 flex justify-between items-center">
                    <div className="flex flex-col">
                      {product.regular_price && product.regular_price !== product.price && (
                         <span className="text-xs text-gray-500 line-through">{product.regular_price}€</span>
                      )}
                      <span className="text-xl font-bold text-[#F68D1F]">{product.price} €</span>
                    </div>
                    <Link href={`/product/${product.id}`} className="bg-[#222] hover:bg-[#F68D1F] hover:text-black text-white p-2 rounded transition">
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* 5. PAGINACIÓN FUNCIONAL */}
        <div className="flex justify-center gap-4 mt-16">
          {page > 1 && (
            <Link href={`/?page=${page - 1}${search ? `&search=${search}` : ''}`} className="px-6 py-3 border border-[#F68D1F] text-[#F68D1F] uppercase font-bold text-sm hover:bg-[#F68D1F] hover:text-black transition">
              &larr; Anterior
            </Link>
          )}
          {products.length === 12 && ( /* Asumimos que si hay 12 productos puede haber más */
             <Link href={`/?page=${page + 1}${search ? `&search=${search}` : ''}`} className="px-6 py-3 bg-[#F68D1F] text-black uppercase font-bold text-sm hover:bg-white transition">
               Siguiente &rarr;
             </Link>
          )}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-black py-12 text-center border-t border-gray-900 text-gray-600 text-xs uppercase tracking-widest">
        <img src="https://www.foxint.com/images/logo.png" className="w-20 mx-auto opacity-30 mb-4 grayscale" />
        <p>© 2026 Fox Carp Fishing - Tienda Especializada.</p>
      </footer>
    </main>
  );
}