import React, { useEffect, useState } from "react";
import { DefaultService } from "../../api/services/DefaultService";
import type { Title } from "../../api/models/Title";
import styles from "./TitlesPage.module.css";

const LIMIT = 20;

const TitlesPage: React.FC = () => {
  const [titles, setTitles] = useState<Title[]>([]);
  const [search, setSearch] = useState("");
  const [offset, setOffset] = useState(0);

  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchTitles = async (reset: boolean) => {
    try {
      if (reset) {
        setLoading(true);
        setOffset(0);
      } else {
        setLoadingMore(true);
      }

      const result = await DefaultService.getTitles(
        search || undefined,
        undefined,  // status
        undefined,  // rating
        undefined,  // release_year
        undefined,  // release_season
        LIMIT,
        reset ? 0 : offset,
        "all"
      );

      if (reset) {
        setTitles(result);
      } else {
        setTitles(prev => [...prev, ...result]);
      }

      if (result.length > 0) {
        setOffset(prev => prev + LIMIT);
      }

    } catch (err) {
      console.error(err);
      setError("Failed to fetch titles.");
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  };

  useEffect(() => {
    fetchTitles(true);
  }, [search]);

  if (loading) return <div className={styles.loader}>Loading...</div>;
  if (error) return <div className={styles.error}>{error}</div>;

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h1>Titles</h1>

        <input
          className={styles.searchInput}
          placeholder="Search titles..."
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
      </div>

      <div className={styles.list}>
        {titles.map((t) => (
          <div key={t.id} className={styles.card}>
            {t.poster_id ? (
              <img
                src={`/images/${t.poster_id}.png`}
                alt="Poster"
                className={styles.poster}
              />
            ) : (
              <div className={styles.posterPlaceholder}>No Image</div>
            )}

            <div className={styles.cardInfo}>
              <h3 className={styles.titleName}>{t.name}</h3>
              <p className={styles.meta}>
                {t.release_year} • {t.release_season}
              </p>
              <p className={styles.rating}>Rating: {t.rating}</p>
              <p className={styles.status}>{t.status}</p>
            </div>
          </div>
        ))}
      </div>

      {titles.length > 0 && (
        <button
          className={styles.loadMore}
          onClick={() => fetchTitles(false)}
          disabled={loadingMore}
        >
          {loadingMore ? "Loading..." : "Load More"}
        </button>
      )}
    </div>
  );
};

export default TitlesPage;