// react
import React, { useState, useEffect } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { toast } from "react-toastify";
import { heroApi } from "~/admin/services/heroApi";
import { IHero } from "~/admin/interfaces/hero";
import { HeroForm } from "~/admin/components/hero/HeroForm";
import HeroList from "~/admin/components/hero/HeroList";

export default function HeroPage() {
  //states
  const [heroes, setHeroes] = useState<IHero[]>([]);
  const [allHeroes, setAllHeroes] = useState<IHero[]>([]);
  const [editingHero, setEditingHero] = useState<IHero | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [searchTerm, setSearchTerm] = useState("");

  //functions
  const loadProducts = async () => {
    try {
      setLoading(true);
      const res = await heroApi.getAll();

      setAllHeroes(res);
      setHeroes(res);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar productos");
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (term: string) => {
    setSearchTerm(term);

    if (!term.trim()) {
      setHeroes(allHeroes);
      return;
    }

    // Búsqueda instantánea en los productos ya cargados
    const filtered = allHeroes.filter((hero) => {
      const searchLower = term.toLowerCase().trim();
      const idMatch = hero.heroID.toString().includes(searchLower);
      const nameMatch = hero.title.toLowerCase().includes(searchLower);
      const codeMatch = hero.subtitle?.toLowerCase().includes(searchLower);

      return idMatch || nameMatch || codeMatch;
    });

    setHeroes(filtered);
  };

  const handleCreate = () => {
    setEditingHero(null);
    setShowForm(true);
  };

  const handleEdit = async (hero: IHero) => {
    try {
      setEditingHero(hero);
      setShowForm(true);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar hero");
    }
  };

  const handleCreateHeroApi = async (formData: FormData) => {
    try {
      if (editingHero?.heroID) {
        await heroApi.updateWithFormData(editingHero.heroID, formData);
        toast.success("Hero actualizado exitosamente");
      } else {
        await heroApi.createWithFormData(formData);
        toast.success("Hero creado exitosamente");
      }
      setShowForm(false);
      setEditingHero(null);
      loadProducts();
    } catch (error: any) {
      toast.error(error.message || "Error al guardar hero");
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("¿Estás seguro de eliminar este hero?")) {
      return;
    }

    try {
      await heroApi.delete(id);
      toast.success("Hero eliminado exitosamente");
      loadProducts();
    } catch (error: any) {
      toast.error(error.message || "Error al eliminar hero");
    }
  };

  const handleCancel = () => {
    setShowForm(false);
    setEditingHero(null);
  };

  //effects
  useEffect(() => {
    loadProducts();
  }, [page]);

  if (loading && heroes.length === 0) {
    return (
      <ProtectedRoute>
        <AdminLayout>
          <div className="text-center py-5">
            <div className="spinner-border" role="status">
              <span className="sr-only">Cargando...</span>
            </div>
          </div>
        </AdminLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className="page-header">
          <h1>Heroes</h1>
          {!showForm && (
            <button className="btn btn-primary" onClick={handleCreate}>
              <i className="fas fa-plus" /> Nuevo Hero
            </button>
          )}
        </div>

        {showForm ? (
          <HeroForm
            hero={editingHero}
            handleCreateHeroApi={handleCreateHeroApi}
            onCancel={handleCancel}
          />
        ) : (
          <>
            <div className="card mb-3">
              <div className="card-body">
                <div className="input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      <i className="fas fa-search" />
                    </span>
                  </div>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Buscar por ID, nombre o código..."
                    value={searchTerm}
                    onChange={(e) => handleSearch(e.target.value)}
                  />
                  {searchTerm && (
                    <div className="input-group-append">
                      <button
                        className="btn btn-outline-secondary"
                        type="button"
                        onClick={() => handleSearch("")}
                      >
                        <i className="fas fa-times" />
                      </button>
                    </div>
                  )}
                </div>
                {searchTerm && (
                  <small className="text-muted mt-2 d-block">
                    {heroes.length} hero{heroes.length !== 1 ? "s" : ""}{" "}
                    encontrado{heroes.length !== 1 ? "s" : ""}
                  </small>
                )}
              </div>
            </div>
            <HeroList
              heroes={heroes}
              onEdit={handleEdit}
              onDelete={handleDelete}
            />
          </>
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}