"use client"
import { useEffect, useState } from "react";
import { MemoizedReactMarkdown } from '../../../components/MemoizedReactMarkdown'

export default function WebSearchPage({ searchParams }) {
  const [aiResponse, setAiResponse] = useState("");
  const [searchTerm, setSearchTerm] = useState()

  useEffect(() => {
    setSearchTerm(searchParams.searchTerm)
  }, [searchParams])

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
  
    async function fetchData() {
      const response = await fetch(`/api/llm`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: searchTerm || "Seattle activities this weekend" }),
        signal,
      });
  
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      } else {
        // Consume the stream as text
        let responseText = await response.text();
        
        // Try to parse the JSON 
        let json;
        try {
          json = JSON.parse(responseText);
        } catch (error) {
          console.error("Failed to parse JSON", error);
        }
        
        console.log(json);
        setAiResponse(json);
      }
    }
  
    fetchData().catch(error => {
      console.error('Fetch failed: ', error);
    });
  
    return () => controller.abort();
  }, [searchParams, searchTerm]);  

  console.log(aiResponse);

  return (
      <div className="flex flex-row">
        <MemoizedReactMarkdown
          className="prose dark:prose-invert flex-1"
          components={{
            code({ node, inline, className, children, ...props }) {
              if (children.length) {
                if (children[0] == '▍') {
                  return <span className="animate-pulse cursor-default mt-1">▍</span>
                }
                children[0] = (children[0]).replace("`▍`", "▍")
              }
              const match = /language-(\w+)/.exec(className || '');
              return !inline ? (
                <CodeBlock
                  key={Math.random()}
                  language={(match && match[1]) || ''}
                  value={String(children).replace(/\n$/, '')}
                  {...props}
                />
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              );
            },
            table({ children }) {
              return (
                <table className="border-collapse border border-black px-3 py-1 dark:border-white">
                  {children}
                </table>
              );
            },
            th({ children }) {
              return (
                <th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
                  {children}
                </th>
              );
            },
            td({ children }) {
              return (
                <td className="break-words border border-black px-3 py-1 dark:border-white">
                  {children}
                </td>
              );
            },
          }}
        >
          {aiResponse}
        </MemoizedReactMarkdown>
      </div>
    );
}