// react
import React from 'react';
// application
import { IOffer } from '~/admin/interfaces/offer';
import { useTableSort } from "~/admin/hooks/useTableSort";
import { SortableTableHeader } from "~/admin/components/table/SortableTableHeader";

interface Props {
  offers: IOffer[];
  onEdit: (offer: IOffer) => void;
  onDelete: (id: number) => void;
  selectedOfferIds: number[];
  onToggleOffer: (id: number, checked: boolean) => void;
  onToggleAllVisible: (ids: number[], checked: boolean) => void;
}

function OfferList({
  offers,
  onEdit,
  onDelete,
  selectedOfferIds,
  onToggleOffer,
  onToggleAllVisible,
}: Props) {
  const { sortedData, sortConfig, handleSort } = useTableSort<IOffer>(offers);
  const selectedSet = new Set(selectedOfferIds);
  const visibleIds = sortedData
    .map((o) => o.id)
    .filter((id): id is number => typeof id === "number");
  const allVisibleSelected =
    visibleIds.length > 0 && visibleIds.every((id) => selectedSet.has(id));

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

  return (
    <div className="card">
      <div className="card-body">
        <div className="table-responsive">
          <table className="table table-hover">
            <thead>
              <tr>
                <th className="text-center align-middle">
                  <input
                    type="checkbox"
                    checked={allVisibleSelected}
                    onChange={(e) => onToggleAllVisible(visibleIds, e.target.checked)}
                    aria-label="Seleccionar todas las ofertas visibles"
                  />
                </th>
                <SortableTableHeader
                  sortKey="id"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IOffer)}
                >
                  ID
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="name"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IOffer)}
                >
                  Nombre del Producto
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="discount"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IOffer)}
                  className="text-center"
                >
                  Descuento
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                  className="text-center"
                >
                  Vigencia
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey="active"
                  currentSortKey={sortConfig.key as string | null}
                  sortDirection={sortConfig.direction}
                  onSort={(key) => handleSort(key as keyof IOffer)}
                >
                  Estado
                </SortableTableHeader>
                <SortableTableHeader
                  sortKey=""
                  currentSortKey={null}
                  sortDirection={null}
                  onSort={() => {}}
                  sortable={false}
                >
                  Acciones
                </SortableTableHeader>
              </tr>
            </thead>
            <tbody>
              {sortedData.map((offer) => (
                <tr key={offer.id}>
                  <td className="text-center align-middle">
                    <input
                      type="checkbox"
                      checked={offer.id != null && selectedSet.has(offer.id)}
                      onChange={(e) => offer.id && onToggleOffer(offer.id, e.target.checked)}
                      aria-label={`Seleccionar oferta ${offer.name}`}
                    />
                  </td>
                  <td>{offer.id}</td>
                  <td>{offer.name}</td>
                                    <td className="text-center align-middle">{offer.discount}%</td>
                  <td className="text-center align-middle">
                    {offer.startDate && offer.endDate ? (
                      <>
                        <div style={{ fontSize: 12 }}>
                          {offer.startDate} <i className="fas fa-arrow-right mx-1 text-muted" />{" "}
                          {offer.endDate}
                        </div>
                        {(() => {
                          const today = new Date().toISOString().slice(0, 10);
                          const expired = offer.endDate < today;
                          return (
                            <span
                              className={`badge badge-${expired ? "secondary" : "success"} mt-1`}
                            >
                              {expired ? "Finalizada" : "Activa"}
                            </span>
                          );
                        })()}
                      </>
                    ) : (
                      <span className="badge badge-light">Sin vigencia</span>
                    )}
                  </td>
                  <td>
                    <span className={`badge badge-${offer.active ? 'success' : 'secondary'}`}>
                      {offer.active ? 'Activa' : 'Inactiva'}
                    </span>
                  </td>
                  <td>
                    <button
                      className="btn btn-sm btn-primary mr-2"
                      onClick={() => onEdit(offer)}
                    >
                      <i className="fas fa-edit" />
                    </button>
                    <button
                      className="btn btn-sm btn-danger"
                      onClick={() => offer.id && onDelete(offer.id)}
                    >
                      <i className="fas fa-trash" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default OfferList;