"use client";

import { useMemo, useState } from "react";
import { FiSearch, FiSliders } from "react-icons/fi";
import {
  releases,
  releaseStyles,
  releaseThemes,
  releaseYears,
} from "@/data/releases";
import { ReleaseCard } from "@/components/release-card";

export function Catalog() {
  const [search, setSearch] = useState("");
  const [style, setStyle] = useState("Todos");
  const [theme, setTheme] = useState("Todos");
  const [year, setYear] = useState("Todos");

  const filtered = useMemo(() => {
    const query = search.trim().toLocaleLowerCase("pt-BR");
    return releases.filter((release) => {
      const matchesSearch =
        !query ||
        release.title.toLocaleLowerCase("pt-BR").includes(query) ||
        release.description.toLocaleLowerCase("pt-BR").includes(query);
      const matchesStyle = style === "Todos" || release.style === style;
      const matchesTheme = theme === "Todos" || release.theme === theme;
      const matchesYear = year === "Todos" || release.releaseDate === year;
      return matchesSearch && matchesStyle && matchesTheme && matchesYear;
    });
  }, [search, style, theme, year]);

  return (
    <section className="section catalog-section">
      <div className="shell">
        <div className="catalog-toolbar" data-reveal>
          <label className="catalog-search">
            <FiSearch />
            <span className="sr-only">Buscar música</span>
            <input
              type="search"
              placeholder="Buscar por nome ou mensagem"
              value={search}
              onChange={(event) => setSearch(event.target.value)}
            />
          </label>

          <div className="catalog-filters">
            <FiSliders aria-hidden="true" />
            <label>
              <span className="sr-only">Filtrar por estilo</span>
              <select value={style} onChange={(event) => setStyle(event.target.value)}>
                <option>Todos</option>
                {releaseStyles.map((item) => (
                  <option key={item}>{item}</option>
                ))}
              </select>
            </label>
            <label>
              <span className="sr-only">Filtrar por tema</span>
              <select value={theme} onChange={(event) => setTheme(event.target.value)}>
                <option>Todos</option>
                {releaseThemes.map((item) => (
                  <option key={item}>{item}</option>
                ))}
              </select>
            </label>
            <label>
              <span className="sr-only">Filtrar por ano</span>
              <select value={year} onChange={(event) => setYear(event.target.value)}>
                <option>Todos</option>
                {releaseYears.map((item) => (
                  <option key={item}>{item}</option>
                ))}
              </select>
            </label>
          </div>
        </div>

        <div className="catalog-count" aria-live="polite">
          <span>{String(filtered.length).padStart(2, "0")}</span>
          {filtered.length === 1 ? "faixa encontrada" : "faixas encontradas"}
        </div>

        {filtered.length ? (
          <div className="release-grid">
            {filtered.map((release) => (
              <ReleaseCard key={release.slug} release={release} />
            ))}
          </div>
        ) : (
          <div className="empty-state">
            <strong>Nenhuma faixa encontrada.</strong>
            <p>Ajuste a busca ou remova um dos filtros.</p>
          </div>
        )}
      </div>
    </section>
  );
}