import { useEffect, useState } from "react";
import { ListView } from "../../components/ListView/ListView";
import { SearchBar } from "../../components/SearchBar/SearchBar";
import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
import { DefaultService } from "../../api/services/DefaultService";
import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
import type { CursorObj, Title, TitleSort } from "../../api";
import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
import { Link } from "react-router-dom";

const PAGE_SIZE = 10;

export default function TitlesPage() {
  const [titles, setTitles] = useState<Title[]>([]);
  const [nextPage, setNextPage] = useState<Title[]>([]);
  const [cursor, setCursor] = useState<CursorObj | null>(null);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [sort, setSort] = useState<TitleSort>("id");
  const [sortForward, setSortForward] = useState(true);
  const [layout, setLayout] = useState<"square" | "horizontal">("square");

  const fetchPage = async (cursorObj: CursorObj | null) => {
    const cursorStr = cursorObj ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') : "";

    try {
      const result = await DefaultService.getTitles(
        cursorStr,
        sort,
        sortForward,
        search.trim() || undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        PAGE_SIZE,
        undefined,
        "all"
      );

      if ((result === undefined) || !result.data?.length) {
        return { items: [], nextCursor: null };
      }
      return {
        items: result.data ?? [],
        nextCursor: result.cursor ?? null
      };
    } catch (err: any) {
      if (err.status === 204) {
        return { items: [], nextCursor: null };
      }
      throw err;
    }
  };

  // Инициализация: загружаем сразу две страницы
  useEffect(() => {
    const initLoad = async () => {
      setLoading(true);
      setTitles([]);
      setNextPage([]);
      setCursor(null);

      const firstPage = await fetchPage(null);
      const secondPage = firstPage.nextCursor ? await fetchPage(firstPage.nextCursor) : { items: [], nextCursor: null };

      setTitles(firstPage.items);
      setNextPage(secondPage.items);
      setCursor(secondPage.nextCursor);
      setLoading(false);
    };

    initLoad();
  }, [search, sort, sortForward]);


const handleLoadMore = async () => {
  if (nextPage.length === 0) {
    setLoadingMore(false);
    return;
  }

  setLoadingMore(true);

  setTitles(prev => [...prev, ...nextPage]);
  setNextPage([]);

  // Подгружаем следующую страницу с сервера
  if (cursor) {
    try {
      const next = await fetchPage(cursor);
      if (next.items.length > 0) {
        setNextPage(next.items);
      }
      setCursor(next.nextCursor);
    } catch (err) {
      console.error(err);
    }
  }

  // Любой сценарий – выключаем loadingMore
  setLoadingMore(false);
};



  return (
    <div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">

      <h1 className="text-4xl font-bold mb-6 text-center text-black">Titles</h1>

      <div className="w-full sm:w-4/5 flex flex-col sm:flex-row gap-4 mb-6 items-center">
        <SearchBar placeholder="Search titles..." search={search} setSearch={setSearch} />
        <LayoutSwitch layout={layout} setLayout={setLayout} />
        <TitlesSortBox
          sort={sort}
          setSort={setSort}
          sortForward={sortForward}
          setSortForward={setSortForward}
        />
      </div>

      {loading && <div className="mt-20 font-medium text-black">Loading...</div>}

      {!loading && titles.length === 0 && (
        <div className="mt-20 font-medium text-black">No titles found.</div>
      )}

      {titles.length > 0 && (
        <>
          <ListView<Title>
            items={titles}
            layout={layout}
            hasMore={!!cursor || nextPage.length > 1}
            loadingMore={loadingMore}
            onLoadMore={handleLoadMore}
            renderItem={(title, layout) => (
              <Link to={`/titles/${title.id}`} key={title.id} className="block">
                {layout === "square" ? <TitleCardSquare title={title} /> : <TitleCardHorizontal title={title} />}
              </Link>
            )}
          />

          {!cursor && nextPage.length == 0 && (
            <div className="mt-6 font-medium text-black">
              Результатов больше нет, было найдено {titles.length} тайтлов.
            </div>
          )}
        </>
      )}
    </div>
  );
}