// pages/UserPage/UserPage.tsx
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { DefaultService } from "../../api/services/DefaultService";
import { SearchBar } from "../../components/SearchBar/SearchBar";
import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
import { ListView } from "../../components/ListView/ListView";
import { UserTitleCardSquare } from "../../components/cards/UserTitleCardSquare";
import { UserTitleCardHorizontal } from "../../components/cards/UserTitleCardHorizontal";
import type { User, UserTitle, CursorObj, TitleSort } from "../../api";

const PAGE_SIZE = 10;

type UserPageProps = {
  userId?: string;
};

export default function UserPage({ userId }: UserPageProps) {
  const params = useParams();
  const id = userId || params?.id;

  const [user, setUser] = useState<User | null>(null);
  const [loadingUser, setLoadingUser] = useState(true);
  const [errorUser, setErrorUser] = useState<string | null>(null);

  // Для списка тайтлов
  const [titles, setTitles] = useState<UserTitle[]>([]);
  const [nextPage, setNextPage] = useState<UserTitle[]>([]);
  const [cursor, setCursor] = useState<CursorObj | null>(null);
  const [loadingTitles, setLoadingTitles] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState<TitleSort>("id");
  const [sortForward, setSortForward] = useState(true);
  const [layout, setLayout] = useState<"square" | "horizontal">("square");

  // --- Получение данных пользователя ---
  useEffect(() => {
    const fetchUser = async () => {
      if (!id) return;
      setLoadingUser(true);
      try {
        const result = await DefaultService.getUsersId(id, "all");
        setUser(result);
        setErrorUser(null);
      } catch (err: any) {
        console.error(err);
        setErrorUser(err?.message || "Failed to fetch user data");
      } finally {
        setLoadingUser(false);
      }
    };
    fetchUser();
  }, [id]);

  // --- Получение списка тайтлов пользователя ---
  const fetchPage = async (cursorObj: CursorObj | null) => {
    if (!id) return { items: [], nextCursor: null };
    const cursorStr = cursorObj
      ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
      : "";

    try {
      const result = await DefaultService.getUsersTitles(
        id,
        cursorStr,
        sort,
        sortForward,
        search.trim() || undefined,
        undefined, // status фильтр, можно добавить
        undefined, // watchStatus
        undefined, // rating
        undefined, // myRate
        undefined, // releaseYear
        undefined, // releaseSeason
        PAGE_SIZE,
        "all"
      );

      if (!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 () => {
      setLoadingTitles(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);
      setLoadingTitles(false);
    };
    initLoad();
  }, [id, 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);
      }
    }

    setLoadingMore(false);
  };

  // const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");

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

      {/* --- Карточка пользователя --- */}
      {loadingUser && <div className="mt-10 text-xl font-medium">Loading user...</div>}
      {errorUser && <div className="mt-10 text-red-600 font-medium">{errorUser}</div>}
      {user && (
        <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-sm flex flex-col items-center mb-8">
          <img src={user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
          <h2 className="text-2xl font-bold mb-2">{user.disp_name || user.nickname}</h2>
          {user.mail && <p className="text-gray-600 mb-2">{user.mail}</p>}
          {user.user_desc && <p className="text-gray-700 text-center">{user.user_desc}</p>}
          {user.creation_date && <p className="text-gray-400 mt-4 text-sm">Registered: {new Date(user.creation_date).toLocaleDateString()}</p>}
        </div>
      )}

      {/* --- Панель поиска, сортировки и лейаута --- */}
      <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>

      {/* --- Список тайтлов --- */}
      {loadingTitles && <div className="mt-6 font-medium text-black">Loading titles...</div>}
      {!loadingTitles && titles.length === 0 && <div className="mt-6 font-medium text-black">No titles found.</div>}

      {titles.length > 0 && (
        <>
          <ListView<UserTitle>
            items={titles}
            layout={layout}
            hasMore={!!cursor || nextPage.length > 1}
            loadingMore={loadingMore}
            onLoadMore={handleLoadMore}
            renderItem={(title, layout) =>
              layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />
            }
          />

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