import React, {
  useState,
  useEffect,
  useRef,
  RefObject,
  ChangeEvent
} from "https://esm.sh/react@18.3.1";
import ReactDOM from "https://esm.sh/react-dom@18.3.1/client";

const { createRoot } = ReactDOM;
const container = document.querySelector("#rick-and-morty");
const root = createRoot(container);

type Character = {
  id: string;
  name: string;
  species: string;
  gender: string;
  image: string;
  location: {
    name: string;
  };
};

const RickAndMorty = () => {
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [searchTerm, setSearchTerm] = useState("");
  const [searching, setSearching] = useState(true);
  const [searched, setSearched] = useState(false);
  const [characters, setCharacters] = useState<Character[]>([]);
  const [totalCharacters, setTotalCharacters] = useState(0);
  const [error, setError] = useState(false);

  const firstCharacter = useRef<HTMLElement>(null);

  const apiUrl = "https://rickandmortyapi.com/api/character/";

  const handleSearchInput = useDebounce((value: string): void => {
    setPage(1);
    setSearchTerm(value);
    setSearching(true);
    setSearched(true);
  }, 800);

  const handlePageChange = (page: number): void => {
    setPage((prevPage: number) => prevPage + page);
    setSearched(true);
  };

  useEffect(() => {
    const fetchController = new AbortController();
    const { signal } = fetchController;

    fetch(`${apiUrl}?page=${page}&name=${searchTerm}`, { signal })
      .then((res) => res.json())
      .then((data) => {
        if (data.error) {
          // No results
          setTotalPages(1);
          setCharacters([]);
        } else {
          // Results found
          setTotalPages(data.info.pages);
          setTotalCharacters(data.info.count);
          setCharacters([...data.results]);
        }
        // Reset any previous error state
        setError(false);
      })
      .catch(() => {
        // Error fetching from API
        setError(true);
        setTotalPages(1);
        setCharacters([]);
      })
      .finally(() => setSearching(false));

    return () => fetchController.abort();
  }, [searchTerm, page]);

  useEffect(() => {
    if (searched && characters.length > 0) {
      // Focus first character in list
      firstCharacter.current?.focus();
    }
  }, [characters]);

  return (
    <>
      <Header />
      <main>
        <Search handleSearchInput={(e) => handleSearchInput(e.target.value)} />
        <Results
          page={page}
          totalPages={totalPages}
          characters={characters}
          firstCharacter={firstCharacter}
          totalCharacters={totalCharacters}
          searching={searching}
          error={error}
        />
        {!searching && totalPages > 1 && (
          <Pagination
            page={page}
            totalPages={totalPages}
            prevPage={() => handlePageChange(-1)}
            nextPage={() => handlePageChange(1)}
          />
        )}
      </main>
    </>
  );
};

const Header = () => {
  return (
    <header className="header">
      <h1 className="header__heading">
        Rick <span>And</span> Morty
      </h1>
    </header>
  );
};

type SearchProps = {
  handleSearchInput: (e: ChangeEvent<HTMLInputElement>) => void;
};

const Search = ({ handleSearchInput }: SearchProps) => {
  return (
    <section className="search" aria-label="character search">
      <label htmlFor="search" className="search__label">
        Character Search:
      </label>
      <input
        type="text"
        id="search"
        className="search__input"
        placeholder="e.g. rick"
        spellCheck="false"
        onChange={handleSearchInput}
      />
    </section>
  );
};

type ResultsProps = {
  page: number;
  totalPages: number;
  characters: Character[];
  firstCharacter: RefObject<HTMLElement>;
  totalCharacters: number;
  searching: boolean;
  error: boolean;
};

const Results = ({
  page,
  totalPages,
  characters,
  firstCharacter,
  totalCharacters,
  searching,
  error
}: ResultsProps) => {
  return (
    <section
      className="results"
      aria-label="character results"
      aria-live="polite"
    >
      {searching && <Loader />}
      {!searching && characters.length > 0 && (
        <>
          <p className="results__info">
            Showing {page === totalPages ? totalCharacters - (characters.length - 1 ): (page - 1) * characters.length + 1}-
            {page === totalPages ? totalCharacters : page * characters.length}{" "}
            of {totalCharacters} characters
          </p>
          {characters.map((character, index) => (
            <CharacterItem
              character={character}
              key={character.id}
              index={index}
              firstCharacter={firstCharacter}
            />
          ))}
        </>
      )}
      {!searching && !error && characters.length === 0 && (
        <p className="results__message">No Characters Found</p>
      )}
      {!searching && error && (
        <p className="results__message">Error Retrieving Characters</p>
      )}
    </section>
  );
};

const Loader = () => {
  return (
    <div className="loader">
      <span className="sr-only">Loading</span>
    </div>
  );
};

type CharacterProps = {
  character: Character;
  firstCharacter: RefObject<HTMLElement>;
  index: number;
};

const CharacterItem = ({
  character,
  firstCharacter,
  index
}: CharacterProps) => {
  return (
    <details className="character">
      <summary
        className="character__name"
        ref={index === 0 ? firstCharacter : null}
      >
        {character.name}
      </summary>
      <div className="character__content">
        <div className="character__info">
          <details className="character__item" open>
            <summary className="character__item-summary">Name</summary>
            <p className="character__item-info">{character.name}</p>
          </details>
          <details className="character__item" open>
            <summary className="character__item-summary">Species</summary>
            <p className="character__item-info">{character.species}</p>
          </details>
          <details className="character__item" open>
            <summary className="character__item-summary">Gender</summary>
            <p className="character__item-info">{character.gender}</p>
          </details>
          <details className="character__item" open>
            <summary className="character__item-summary">Location</summary>
            <p className="character__item-info">{character.location.name}</p>
          </details>
        </div>
        <div className="character__image-container">
          <img
            className="character__image"
            src={character.image}
            alt={character.name}
          />
        </div>
      </div>
    </details>
  );
};

type PaginationProps = {
  page: number;
  totalPages: number;
  prevPage: () => void;
  nextPage: () => void;
};

const Pagination = ({
  page,
  totalPages,
  prevPage,
  nextPage
}: PaginationProps) => {
  return (
    <nav className="pagination" aria-label="page navigation">
      <p className="pagination__info">
        Page {page} of {totalPages}
      </p>
      {page > 1 && (
        <button className="pagination__btn" onClick={prevPage}>
          Prev Page
        </button>
      )}
      {page < totalPages && (
        <button className="pagination__btn" onClick={nextPage}>
          Next Page
        </button>
      )}
    </nav>
  );
};

type Timer = ReturnType<typeof setTimeout>;
type SomeFunction = (...args: any[]) => void;

function useDebounce<Func extends SomeFunction>(func: Func, delay = 1000) {
  const timer = useRef<Timer>();

  useEffect(() => {
    return () => {
      if (!timer.current) return;
      clearTimeout(timer.current);
    };
  }, []);

  const debouncedFunction = ((...args) => {
    const newTimer = setTimeout(() => {
      func(...args);
    }, delay);
    clearTimeout(timer.current);
    timer.current = newTimer;
  }) as Func;

  return debouncedFunction;
}

root.render(<RickAndMorty />);

console.log("Wubba Lubba Dub-Dub! 👴🏻👦🍾🔬🔫🌌🚀🛸👾");