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

interface Props {
  payments: IPayment[];
  onEdit: (payment: IPayment) => void;
  onPause: (payment: IPayment) => void;
  onActivate: (payment: IPayment) => void;
  onDelete: (id: number) => void;
}

export const PaymentList: React.FC<Props> = ({ payments, onEdit, onPause, onActivate, onDelete }) => {
  const { sortedData, sortConfig, handleSort } = useTableSort<IPayment>(payments);

  if (payments.length === 0) {
    return (
      <div className="card">
        <div className="card-body text-center py-5">
          <i className="fas fa-truck fa-3x text-muted mb-3" />
          <p className="text-muted">No hay métodos de envío 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="paymentID"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IPayment)}
                >
                  ID
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="name"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IPayment)}
                >
                  Nombre
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="status"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IPayment)}
                  className="text-center"
                >
                  Estado
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Imagen
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="url"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IPayment)}
                >
                  URL
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Acciones
                </SortableTableHeader>
              </tr>
            </thead>
            <tbody>
              {sortedData.map((payment) => {
                const thumb = payment.image_url ? normalizeImageUrl(payment.image_url) : "";
                const urlStr = (payment.url ?? "").trim();
                return (
                  <tr key={payment.paymentID}>
                    <td>{payment.paymentID}</td>
                    <td>{payment.name}</td>
                    <td className="text-center align-middle">
                      {thumb ? (
                        <img
                          src={thumb}
                          alt=""
                          style={{ maxWidth: 80, maxHeight: 40, objectFit: "contain" }}
                          loading="lazy"
                        />
                      ) : (
                        "—"
                      )}
                    </td>
                    <td>
                      <small className="text-muted">
                        {urlStr ? (urlStr.length > 40 ? `${urlStr.slice(0, 40)}…` : urlStr) : "—"}
                      </small>
                    </td>
                    <td className="text-center">
                      {payment.status === 0 ? (
                        <span className="badge badge-secondary">Pausado</span>
                      ) : (
                        <span className="badge badge-success">Activo</span>
                      )}
                    </td>
                    <td className="text-center">
                      <button
                        type="button"
                        className="btn btn-sm btn-primary mr-2"
                        onClick={() => onEdit(payment)}
                        disabled={!payment.paymentID}
                      >
                        <i className="fas fa-edit" />
                      </button>
                      {payment.status === 0 ? (
                        <button
                          type="button"
                          className="btn btn-sm btn-success mr-2"
                          onClick={() => onActivate(payment)}
                          title="Activar"
                        >
                          <i className="fas fa-play" />
                        </button>
                      ) : (
                        <button
                          type="button"
                          className="btn btn-sm btn-warning mr-2"
                          onClick={() => onPause(payment)}
                          title="Pausar"
                        >
                          <i className="fas fa-pause" />
                        </button>
                      )}
                      <button
                        type="button"
                        className="btn btn-sm btn-danger"
                        onClick={() => payment.paymentID && onDelete(payment.paymentID)}
                      >
                        <i className="fas fa-trash" />
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};