// react
import React, { useState, useEffect, useCallback } from "react";
// application
import { IBrand } from "~/admin/interfaces/vehicle";
import { useTableSort } from "~/admin/hooks/useTableSort";
import { SortableTableHeader } from "~/admin/components/table/SortableTableHeader";

interface Props {
  brands: IBrand[];
  onEdit: (brand: IBrand) => void;
  onDelete: (id: number) => void;
  onReorder: (items: IBrand[]) => Promise<void>;
}

export const BrandList = ({ brands, onEdit, onDelete, onReorder }: Props) => {
  const { sortedData, sortConfig, handleSort } = useTableSort<IBrand>(brands, {
    key: "position",
    direction: "asc",
  });

  // Orden local editable por drag & drop
  const [ordered, setOrdered] = useState<IBrand[]>(sortedData);
  const [draggedId, setDraggedId] = useState<number | null>(null);
  const [dragOverId, setDragOverId] = useState<number | null>(null);

  // Sincroniza el estado local cuando cambian las marcas (ej. tras recargar)
  useEffect(() => {
    setOrdered(sortedData);
  }, [sortedData]);

  const handleDragStart = (e: React.DragEvent<HTMLTableRowElement>, brand: IBrand) => {
    setDraggedId(brand.id);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", String(brand.id));
  };

  const handleDragOver = (e: React.DragEvent<HTMLTableRowElement>) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    const id = e.currentTarget.dataset.id;
    if (id) setDragOverId(Number(id));
  };

  const handleDrop = useCallback(
    async (e: React.DragEvent<HTMLTableRowElement>, targetBrand: IBrand) => {
      e.preventDefault();
      if (draggedId == null || targetBrand.id === draggedId) return;

      const fromIdx = ordered.findIndex((b) => b.id === draggedId);
      const toIdx = ordered.findIndex((b) => b.id === targetBrand.id);
      if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return;

      const newItems = [...ordered];
      const [moved] = newItems.splice(fromIdx, 1);
      newItems.splice(toIdx, 0, moved);

      setOrdered(newItems);
      setDragOverId(null);
      setDraggedId(null);

      await onReorder(newItems);
    },
    [draggedId, ordered, onReorder],
  );

  const handleDragEnd = () => {
    setDraggedId(null);
    setDragOverId(null);
  };

  if (brands.length === 0) {
    return (
      <div className="card">
        <div className="card-body text-center py-5">
          <i className="fas fa-car fa-3x text-muted mb-3" />
          <p className="text-muted">No hay marcas registradas</p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Ordenar
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="name"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IBrand)}
                  className="text-center"
                >
                  Nombre
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="models_count"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IBrand)}
                  className="text-center"
                >
                  Modelos disponibles
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Imagen
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="status"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IBrand)}
                  className="text-center"
                >
                  Estado
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                >
                  Acciones
                </SortableTableHeader>
              </tr>
            </thead>
            <tbody>
              {ordered.map((brand) => (
                <tr
                  key={brand.id}
                  draggable
                  data-id={brand.id}
                  onDragStart={(e) => handleDragStart(e, brand)}
                  onDragOver={handleDragOver}
                  onDrop={(e) => void handleDrop(e, brand)}
                  onDragEnd={handleDragEnd}
                  className={dragOverId === brand.id ? "table-row-drag-over" : undefined}
                >
                  <td className="text-center align-middle" style={{ width: 40 }}>
                    <i
                      className="fas fa-grip-vertical text-muted"
                      style={{ cursor: draggedId === brand.id ? "grabbing" : "grab", fontSize: 14 }}
                      aria-hidden="true"
                    />
                  </td>
                  <td className="text-center align-middle">{brand.name}</td>
                  <td className="text-center align-middle">
                    <span className="text-muted">{brand.models_count}</span>
                  </td>
                  <td className="text-center align-middle">
                    {brand.imageUrl ? (
                      <img
                        src={brand.imageUrl}
                        alt=""
                        loading="lazy"
                        decoding="async"
                        className="brand-list__thumb d-block mx-auto"
                        style={{ width: 56, height: 56, objectFit: "contain", borderRadius: 4 }}
                      />
                    ) : (
                      <span className="text-muted">—</span>
                    )}
                  </td>
                                    <td className="text-center align-middle">
                    {brand.status === false || brand.status === 0
                      ? "Inactivo"
                      : "Activo"}
                  </td>
                  <td>
                    <button
                      className="btn btn-sm btn-primary mr-2"
                      onClick={() => onEdit(brand)}
                    >
                      <i className="fas fa-edit" />
                    </button>
                    <button
                      className="btn btn-sm btn-danger"
                      onClick={() => brand.id && onDelete(brand.id)}
                    >
                      <i className="fas fa-trash" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <style jsx>{`
        tr.table-row-drag-over td {
          background-color: #e9ecef !important;
        }
      `}</style>
    </div>
  );
};