src/app/search/web/page.jsx

"use client"
import { useEffect, useState } from "react";
import WebSearchResults from "@/components/WebSearchResults";
import Link from "next/link";

export default function WebSearchPage({ searchParams }) {
  const [results, setResults] = useState(null);
  const [aiResponse, setAiResponse] = useState(null);
  const startIndex = searchParams.start || "1";

  useEffect(() => {
    async function fetchData() {
      // Fetch Google search results via server-side route
      /*
      const response = await fetch(`/api/search?searchTerm=${searchParams.searchTerm}&start=${startIndex}`);
      if (!response.ok) {
        console.log(response);
        throw new Error("Something went wrong");
      }
      const data = await response.json();
      setResults(data.items);
      */

      // Prepare AI prompt
      // const aiPrompt = `You're creating a search engine experience. You got the following search results for the term "${searchParams.searchTerm}": ${JSON.stringify(data.items)}. How can you present these results in a helpful way?`;

      // Fetch AI response via server-side route
      const openaiRes = new EventSource('/api/llm', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          'question': searchParams.searchTerm
        })
      });

      // Listen for AI responses and append to state
      openaiRes.onmessage = function(event) {
        setAiResponse(aiResponse => aiResponse + event.data);
      };
    }

    fetchData();
  }, [searchParams, startIndex]);

  if (!results) {
    return (
      <div className="flex flex-col justify-center items-center pt-10">
        <h1 className="text-3xl mb-4">No results found</h1>
        <p className="text-lg">
          Try searching for something else or go back to the homepage{" "}
          <Link href="/" className="text-blue-500">
            Home
          </Link>
        </p>
      </div>
    );
  }
  return <>{results && <WebSearchResults results={results} aiResponse={aiResponse} />}</>;
}