// "use client";

// import { useState } from "react";
// import SearchBar from "./components/SearchBar";
// import { searchModels, searchParts } from "../lib/search/search";

// export default function HomePage() {
//   const [results, setResults] = useState([]);

//   function handleSearch(query) {
//     const models = searchModels(query);
//     const parts = searchParts(query);
//     setResults([...models, ...parts]);
//   }

//   return (
//     <div className="space-y-6">
//       <h1 className="text-4xl font-bold">RC Compatibility Explorer</h1>

//       <SearchBar onSearch={handleSearch} />

//       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
//         {results.map((item) => {
//           const isModel = !!item.categories;
//           const link = isModel ? `/model/${item.id}` : `/part/${item.id}`;

//           return (
//             <a
//               key={item.id}
//               href={link}
//               className="block border p-4 rounded hover:bg-gray-50"
//             >
//               <strong>{item.name}</strong>
//               <div className="opacity-60">{isModel ? "Model" : "Part"}</div>
//             </a>
//           );
//         })}
//       </div>
//     </div>
//   );
// }

"use client";

import { useState } from "react";
import SearchBar from "./components/SearchBar";
import SearchResultCard from "./components/SearchResultCard";
import SearchSkeletonCard from "./components/SearchSkeletonCard";
import { searchModels, searchParts } from "@/lib/search/search";

export default function HomePage() {
  const [results, setResults] = useState(null); // null = loading phase
  const [loading, setLoading] = useState(false);

  async function handleSearch(query) {
    if (!query) {
      setResults([]);
      return;
    }

    setLoading(true);
    setResults(null);

    // Simulate real network delay for proper skeleton visuals
    setTimeout(() => {
      const models = searchModels(query);
      const parts = searchParts(query);
      setResults([...models, ...parts]);
      setLoading(false);
    }, 300);
  }

  return (
    <div className="space-y-10">
      {/* Title */}
      <h1 className="text-4xl font-bold">RC Compatibility Explorer</h1>

      {/* Search Field */}
      <SearchBar onSearch={handleSearch} />

      {/* Skeleton Loader */}
      {loading && (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 6 }).map((_, i) => (
            <SearchSkeletonCard key={i} />
          ))}
        </div>
      )}

      {/* Results */}
      {!loading && results?.length > 0 && (
        <>
          <h2 className="text-2xl font-semibold">Search Results</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {results.map((item) => (
              <SearchResultCard key={item.id} item={item} />
            ))}
          </div>
        </>
      )}

      {/* No Results */}
      {!loading && results?.length === 0 && (
        <p>No matching models or parts found.</p>
      )}
    </div>
  );
}