// react
import React, { useState, useEffect, useMemo } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { BrandList } from "~/admin/components/brands/BrandList";
import { BrandForm } from "~/admin/components/brands/BrandForm";
import { IBrand } from "~/admin/interfaces/vehicle";
import { vehiclesApi } from "~/admin/services/vehiclesApi";
import { toast } from "react-toastify";
import { downloadPdfTable } from "~/admin/utils/pdfExport";

function VehiculosPage() {
  //states
  const [brands, setBrands] = useState<IBrand[]>([]);
  const [allBrands, setAllBrands] = useState<IBrand[]>([]);
  const [editingBrand, setEditingBrand] = useState<IBrand | null>(null);
  const [showForm, setShowForm] = useState<boolean>(false);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");

  useEffect(() => {
    loadBrands();
  }, []);

  const loadBrands = async () => {
    try {
      setLoading(true);
      const data = await vehiclesApi.getAllBrands(true);
      setAllBrands(data);
      setBrands(data);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar vehículos");
    } finally {
      setLoading(false);
    }
  };

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

    if (!term.trim()) {
      setBrands(allBrands);
      return;
    }

    const lowerTerm = term.toLowerCase().trim();

    const filtered = allBrands.filter((brand) => {
      return (
        brand.name.toLowerCase().includes(lowerTerm) ||
        brand.id?.toString().includes(lowerTerm)
      );
    });

    setBrands(filtered);
  };

  const handleCreateBrand = () => {
    setEditingBrand(null);
    setShowForm(true);
  };

  const handleEdit = (brand: IBrand) => {
    setEditingBrand(brand);
    setShowForm(true);
  };

  const handleSave = async (formData: FormData) => {
    try {
      if (editingBrand?.id) {
        await vehiclesApi.updateBrandWithFormData(editingBrand.id, formData);
        toast.success("Marca actualizada exitosamente");
      } else {
        await vehiclesApi.createBrandWithFormData(formData);
        toast.success("Marca creada exitosamente");
      }
      setShowForm(false);
      setEditingBrand(null);
      loadBrands();
    } catch (error: any) {
      toast.error(error.message || "Error al guardar marca");
    }
  };

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

    try {
      await vehiclesApi.deleteBrand(id);
      toast.success("Marca eliminada exitosamente");
      loadBrands();
    } catch (error: any) {
      toast.error(error.message || "Error al eliminar marca");
    }
  };

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

  const nextBrandPosition =
    allBrands.reduce(
      (max, b) => Math.max(max, Number(b.sort_position ?? b.position ?? 0)),
      0,
    ) + 1;

  const handleReorder = async (items: IBrand[]) => {
    try {
      // Persistir el nuevo orden: posición consecutiva 1..n según el arrastre
      for (let i = 0; i < items.length; i++) {
        const b = items[i];
        if (!b.id) continue;
        const position = i + 1;
        await vehiclesApi.updateBrand(b.id, {
          ...b,
          position,
          sort_position: position,
          status: b.status === false || b.status === 0 ? 0 : 1,
          imageUrl: b.imageUrl ?? "",
        });
      }
      toast.success("Orden de marcas actualizado");
      await loadBrands();
    } catch (error: any) {
      toast.error(error?.message || "Error al actualizar el orden de marcas");
    }
  };

  const handleExportPdf = async () => {
    try {
      await downloadPdfTable(
        `listado-marcas-${Date.now()}.pdf`,
        "Listado de Marcas",
        [
          { header: "Posición", dataKey: "position", align: "center" },
          { header: "Nombre", dataKey: "name" },
          { header: "Modelos disponibles", dataKey: "models_count", align: "center" },
          { header: "Estado", dataKey: "statusLabel", align: "center" },
        ],
        allBrands.map((b) => ({
          position: b.sort_position ?? b.position ?? 0,
          name: b.name,
          models_count: b.models_count ?? 0,
          statusLabel: b.status === false || b.status === 0 ? "Inactivo" : "Activo",
        }))
      );
      toast.success("PDF generado correctamente");
    } catch (error: any) {
      toast.error(error?.message || "Error al generar PDF");
    }
  };

  if (loading && brands.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>Marcas</h1>
          {!showForm && (
            <>
              <button
                className="btn btn-primary mr-2"
                onClick={handleCreateBrand}
              >
                <i className="fas fa-plus" /> Nueva Marca
              </button>
              <button
                type="button"
                className="btn btn-secondary mr-2"
                onClick={handleExportPdf}
                disabled={allBrands.length === 0}
              >
                <i className="fas fa-file-pdf" /> Exportar PDF
              </button>
            </>
          )}
        </div>

        {showForm ? (
          <BrandForm
            key={editingBrand?.id ?? "new"}
            brand={editingBrand}
            defaultPosition={nextBrandPosition}
            existingBrands={allBrands}
            onSave={handleSave}
            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, marca, modelo o año..."
                    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">
                    {brands.length} marca{brands.length !== 1 ? "s" : ""}{" "}
                    encontrado{brands.length !== 1 ? "s" : ""}
                  </small>
                )}
              </div>
            </div>
            <BrandList
              brands={brands}
              onEdit={handleEdit}
              onDelete={handleDelete}
              onReorder={handleReorder}
            />
          </>
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}

export default VehiculosPage;