"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import type { MarketplaceStoreSummary } from "@/lib/marketplace-data";
import { Filter } from "lucide-react";

interface SearchSidebarProps {
  initialQuery?: string;
  initialStoreId?: string;
  initialMinPrice?: number;
  initialMaxPrice?: number;
  stores: MarketplaceStoreSummary[];
}

export function SearchSidebar({ initialQuery, initialStoreId, initialMinPrice, initialMaxPrice, stores }: SearchSidebarProps) {
  const router = useRouter();
  const [q, setQ] = useState(initialQuery || "");
  const [storeId, setStoreId] = useState(initialStoreId || "");
  const [minPrice, setMinPrice] = useState(initialMinPrice?.toString() || "");
  const [maxPrice, setMaxPrice] = useState(initialMaxPrice?.toString() || "");

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams();
    if (q) params.set("q", q);
    if (storeId) params.set("storeId", storeId);
    if (minPrice) params.set("minPrice", minPrice);
    if (maxPrice) params.set("maxPrice", maxPrice);
    router.push(`/busca?${params.toString()}`);
  };

  return (
    <form onSubmit={handleSearch} className="flex flex-col gap-6 sticky top-24">
      <div className="flex items-center gap-2 mb-2 border-b border-gray-200 pb-4">
        <Filter className="w-5 h-5 text-violet-600" />
        <h3 className="font-bold text-gray-900">Filtros</h3>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Palavra-chave</label>
        <input 
          type="text" 
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Ex: Caneca" 
          className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100 transition-all"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Loja</label>
        <select 
          value={storeId}
          onChange={(e) => setStoreId(e.target.value)}
          className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100 transition-all"
        >
          <option value="">Todas as lojas</option>
          {stores.map(s => (
            <option key={s.id} value={s.id}>{s.name}</option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Faixa de Preço</label>
        <div className="flex items-center gap-2">
          <input 
            type="number" 
            value={minPrice}
            onChange={(e) => setMinPrice(e.target.value)}
            placeholder="Min" 
            className="w-full bg-gray-50 border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100 transition-all"
          />
          <span className="text-gray-400">-</span>
          <input 
            type="number" 
            value={maxPrice}
            onChange={(e) => setMaxPrice(e.target.value)}
            placeholder="Max" 
            className="w-full bg-gray-50 border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-violet-400 focus:ring-2 focus:ring-violet-100 transition-all"
          />
        </div>
      </div>

      <button type="submit" className="w-full bg-violet-600 text-white rounded-xl py-3 font-bold hover:bg-violet-700 transition-colors mt-2">
        Aplicar Filtros
      </button>
    </form>
  );
}