// react
import React from "react";
import { IService } from "~/admin/interfaces/service";
import { useTableSort } from "~/admin/hooks/useTableSort";
import { SortableTableHeader } from "~/admin/components/table/SortableTableHeader";

interface Props {
  services: IService[];
  onEdit: (service: IService) => void;
  onDelete: (id: number) => void;
}

export const ServiceList = ({ services, onEdit, onDelete }: Props) => {
  const { sortedData, sortConfig, handleSort } = useTableSort<IService>(services);

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

  return (
    <div className="card">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <SortableTableHeader
                  sortKey="serviceID"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IService)}
                >
                  ID
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="title"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IService)}
                  className="text-center"
                >
                  Titulo
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="description"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IService)}
                  className="text-center"
                >
                  Descripción
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="icon"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IService)}
                  className="text-center"
                >
                  Icono
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                >
                  Acciones
                </SortableTableHeader>
              </tr>
            </thead>
            <tbody>
              {sortedData.map((service) => (
                <tr key={service.serviceID}>
                  <td>{service.serviceID}</td>
                  <td>{service.title}</td>
                  <td>
                    {service.description.substring(0, 30)}...
                  </td>
                  <td>
                    {service.icon.substring(0, 10)}...
                  </td>
                  <td>
                    <button
                      className="btn btn-sm btn-primary mr-2"
                      onClick={() => onEdit(service)}
                    >
                      <i className="fas fa-edit" />
                    </button>
                    <button
                      className="btn btn-sm btn-danger"
                      onClick={() =>
                        service.serviceID && onDelete(service.serviceID)
                      }
                    >
                      <i className="fas fa-trash" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};