import { Inter } from 'next/font/google';
import SearchBar from '@/components/searchBar';
import Card from '@/components/card';
import BackgroundEmojiGrid from '@/components/backgroundEmojiGrid';
import { predict } from '@/pages/api/api_hf';
import { get_space_info } from '@/pages/api/hf_space';
import { useState, useEffect } from 'react';

const inter = Inter({ subsets: ['latin'] });

export default function Home() {
  const [spaceInfo, setSpaceInfo] = useState(null);
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    async function fetchSpaceInfo(results) {
      const spacePromises = results.map(async (result) => {
        const [id, description] = result;
        const space = await get_space_info(id);
        if (space === null) {
          return null;
        }
        space.description = description;
        return space;
      });
      const spaceData = await Promise.all(spacePromises);
      setSpaceInfo(spaceData);
      document.querySelector('.search-bar').scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }

    if (searchResults.length > 0) {
      fetchSpaceInfo(searchResults);
    } else {
      setSpaceInfo(null);
    }
  }, [searchResults]);

  async function onSearch(query) {
    if (query === '') {
      setSearchResults([]);
      return;
    }
    const results = await predict(query, 12);
    setSearchResults(results);
  }

  useEffect(() => {
    const focusSearchBar = () => {
      document.querySelector('.search-bar').focus();
    };

    focusSearchBar();
  }, []);

  return (
    <main className={`flex min-h-screen flex-col items-center p-8 md:px-24 pt-20 bg-gray-950 ${inter.className} justify-between`}>
      {/* <BackgroundEmojiGrid /> */}
      <h1 className="text-4xl md:text-6xl font-bold text-center mb-12">🤗 Hugging Face Spaces</h1>
      <SearchBar onSearch={onSearch} />
      {spaceInfo !== null && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 w-full mt-8">
          {spaceInfo.map((space, index) => space && (
            <Card
              key={index}
              space_id={space.space_id}
              author={space.author}
              title={space.title}
              description={space.description}
              emoji={space.emoji}
              lastModified={space.lastModified}
              colorFrom={space.colorFrom}
              colorTo={space.colorTo}
              likes={space.likes}
              sdk={space.sdk}
              runtimeStage={space.runtime_stage}
              currentHardware={space.current_hardware}
            />
          ))}
        </div>
      )}
      <footer className="text-center text-gray-500 text-sm mt-8 bottom-0 w-full p-4">
      Created by Anzor Qunash
      <br />
      <a href="https://github.com/qunash" target="_blank" rel="noopener noreferrer">GitHub</a>
      <span className="mx-2">•</span>
      <a href="https://twitter.com/hahahahohohe" target="_blank" rel="noopener noreferrer">Twitter</a>
      <span className="mx-2">•</span>
      <a href="https://www.buymeacoffee.com/anzorq" target="_blank" rel="noopener noreferrer">Buy me a coffee</a>
      </footer>
    </main>
  );
}