import React from "react";
import { IBankPaymentMethod } from "~/admin/interfaces/bankPaymentMethod";
import { useTableSort } from "~/admin/hooks/useTableSort";
import { SortableTableHeader } from "~/admin/components/table/SortableTableHeader";
import { normalizeImageUrl } from "~/admin/utils/functions";

interface Props {
  items: IBankPaymentMethod[];
  onEdit: (item: IBankPaymentMethod) => void;
  onPause: (item: IBankPaymentMethod) => void;
  onActivate: (item: IBankPaymentMethod) => void;
  onDelete: (id: number) => void;
}

export const BankPaymentMethodList = ({ items, onEdit, onPause, onActivate, onDelete }: Props) => {
  const { sortedData, sortConfig, handleSort } = useTableSort<IBankPaymentMethod>(items, {
    key: "sort_order",
    direction: "asc",
  });

  if (items.length === 0) {
    return (
      <div className="card">
        <div className="card-body text-center py-5 text-muted">
          No hay métodos de pago. Crea uno con «Nuevo método de pago».
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <SortableTableHeader
                  sortKey="sort_order"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(k) => handleSort(k as keyof IBankPaymentMethod)}
                  className="text-center"
                >
                  Orden
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="id"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(k) => handleSort(k as keyof IBankPaymentMethod)}
                >
                  ID
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="name"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(k) => handleSort(k as keyof IBankPaymentMethod)}
                >
                  Banco
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="status"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(k) => handleSort(k as keyof IBankPaymentMethod)}
                  className="text-center"
                >
                  Estado
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Logo
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Acciones
                </SortableTableHeader>
              </tr>
            </thead>
            <tbody>
              {sortedData.map((row) => {
                const thumb = row.image_url ? normalizeImageUrl(row.image_url) : "";
                return (
                  <tr key={row.id}>
                    <td className="text-center">{row.sort_order}</td>
                    <td>{row.id}</td>
                    <td>{row.name}</td>
                    <td className="text-center">
                      {row.status === 1 ? (
                        <span className="badge badge-success">Visible</span>
                      ) : (
                        <span className="badge badge-secondary">Pausado</span>
                      )}
                    </td>
                    <td className="text-center align-middle">
                      {thumb ? (
                        <img
                          src={thumb}
                          alt=""
                          style={{ maxWidth: 72, maxHeight: 40, objectFit: "contain" }}
                          loading="lazy"
                        />
                      ) : (
                        "—"
                      )}
                    </td>
                    <td className="text-center">
                      <button
                        type="button"
                        className="btn btn-sm btn-primary mr-1"
                        onClick={() => onEdit(row)}
                      >
                        <i className="fas fa-edit" />
                      </button>
                      {row.status === 1 ? (
                        <button
                          type="button"
                          className="btn btn-sm btn-warning mr-1"
                          onClick={() => onPause(row)}
                          title="Pausar"
                        >
                          <i className="fas fa-pause" />
                        </button>
                      ) : (
                        <button
                          type="button"
                          className="btn btn-sm btn-success mr-1"
                          onClick={() => onActivate(row)}
                          title="Activar"
                        >
                          <i className="fas fa-play" />
                        </button>
                      )}
                      <button type="button" className="btn btn-sm btn-danger" onClick={() => onDelete(row.id)}>
                        <i className="fas fa-trash" />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};