import { useEffect, useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import { api, type Game } from "../api";

export function Library() {
  const [params, setParams] = useSearchParams();
  const q = params.get("q") ?? "";
  const [query, setQuery] = useState(q);
  const [games, setGames] = useState<Game[] | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    const t = setTimeout(() => setParams(query ? { q: query } : {}, { replace: true }), 250);
    return () => clearTimeout(t);
  }, [query, setParams]);

  useEffect(() => {
    let cancelled = false;
    api.get<Game[]>(`/api/games?q=${encodeURIComponent(q)}`)
      .then((g) => !cancelled && setGames(g))
      .catch((e) => !cancelled && setError(e.message));
    return () => {
      cancelled = true;
    };
  }, [q]);

  return (
    <div className="page">
      <div className="search">
        <input placeholder="Поиск по названию, описанию или тегу…" value={query}
               onChange={(e) => setQuery(e.target.value)} autoFocus />
      </div>
      {error && <div className="error">{error}</div>}
      {games === null ? (
        <p className="muted">Загрузка…</p>
      ) : games.length === 0 ? (
        <p className="muted">{q ? "Ничего не найдено." : "В библиотеке пока нет игр."}</p>
      ) : (
        <div className="grid">
          {games.map((g) => (
            <Link key={g.id} to={`/games/${g.id}`} className="game-card">
              <div className="cover">
                {g.cover_hash ? <img src={`/blobs/${g.cover_hash}`} alt="" loading="lazy" /> : <span>{g.title[0]}</span>}
              </div>
              <div className="game-card-body">
                <b>{g.title}</b>
                <div className="tags">
                  {g.tags.slice(0, 4).map((t) => <span key={t} className="tag">{t}</span>)}
                </div>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}