// react
import React, { useMemo, useState } from "react";
import { ISucursal } from "~/admin/interfaces/sucursal";
import { useTableSort } from "~/admin/hooks/useTableSort";
import { SortableTableHeader } from "~/admin/components/table/SortableTableHeader";

interface Props {
  sucursals: ISucursal[];
  onEdit: (sucursal: ISucursal) => void;
  onDelete: (id: number) => void;
}

interface SucursalTableProps {
  estado: string;
  list: ISucursal[];
  onEdit: (sucursal: ISucursal) => void;
  onDelete: (id: number) => void;
}

function SucursalTable({ estado, list, onEdit, onDelete }: SucursalTableProps) {
  const { sortedData, sortConfig, handleSort } = useTableSort<ISucursal>(list);
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="mb-4">
      <button
        type="button"
        className="border-bottom pb-2 mb-3 w-100 bg-transparent border-0 border-bottom d-flex align-items-center justify-content-between p-0"
        style={{ cursor: "pointer" }}
        onClick={() => setExpanded(!expanded)}
        aria-expanded={expanded}
      >
        <h5 className="mb-0">
          <i
            className={`fas fa-chevron-down mr-2 text-muted ${expanded ? "" : "fa-rotate-270"}`}
            style={{ transition: "transform 0.2s ease" }}
          />
          <i className="fas fa-map-marker-alt text-primary mr-2" />
          {estado}
          <span className="badge badge-secondary ml-2">{list.length}</span>
        </h5>
      </button>
      {expanded && (
      <div className="table-responsive">
        <table className="table table-hover table-sm">
          <thead>
            <tr>
              <SortableTableHeader
                sortKey="sucursalID"
                currentSortKey={sortConfig.key as string | null}
                sortDirection={sortConfig.direction}
                onSort={(key) => handleSort(key as keyof ISucursal)}
              >
                ID
              </SortableTableHeader>
              <SortableTableHeader
                sortKey="name"
                currentSortKey={sortConfig.key as string | null}
                sortDirection={sortConfig.direction}
                onSort={(key) => handleSort(key as keyof ISucursal)}
                className="text-center"
              >
                Nombre
              </SortableTableHeader>
              <SortableTableHeader
                sortKey="url"
                currentSortKey={sortConfig.key as string | null}
                sortDirection={sortConfig.direction}
                onSort={(key) => handleSort(key as keyof ISucursal)}
                className="text-center"
              >
                Redirección
              </SortableTableHeader>
              <SortableTableHeader
                sortKey="banner"
                currentSortKey={sortConfig.key as string | null}
                sortDirection={sortConfig.direction}
                onSort={(key) => handleSort(key as keyof ISucursal)}
                className="text-center"
              >
                Banner
              </SortableTableHeader>
              <SortableTableHeader
                sortKey="whatsapp"
                currentSortKey={sortConfig.key as string | null}
                sortDirection={sortConfig.direction}
                onSort={(key) => handleSort(key as keyof ISucursal)}
                className="text-center"
              >
                WhatsApp
              </SortableTableHeader>
              <SortableTableHeader
                sortKey=""
                currentSortKey={null}
                sortDirection={null}
                onSort={() => {}}
                sortable={false}
              >
                Acciones
              </SortableTableHeader>
            </tr>
          </thead>
          <tbody>
            {sortedData.map((sucursal) => (
              <tr key={sucursal.sucursalID}>
                <td>{sucursal.sucursalID}</td>
                <td className="text-center">{sucursal.name}</td>
                <td className="text-center">
                  {sucursal.url ? sucursal.url.split("/")[2] : "—"}
                </td>
                <td className="text-center">
                  {sucursal.banner ? "Sí" : "No"}
                </td>
                <td className="text-center">{sucursal.whatsapp || "—"}</td>
                <td>
                  <button
                    className="btn btn-sm btn-primary mr-2"
                    onClick={() => onEdit(sucursal)}
                  >
                    <i className="fas fa-edit" />
                  </button>
                  <button
                    className="btn btn-sm btn-danger"
                    onClick={() =>
                      sucursal.sucursalID && onDelete(sucursal.sucursalID)
                    }
                  >
                    <i className="fas fa-trash" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      )}
    </div>
  );
}

/** Agrupa sucursales por estado (Venezuela). Las sin estado van en "Sin estado". */
function groupByState(sucursals: ISucursal[]): Map<string, ISucursal[]> {
  const map = new Map<string, ISucursal[]>();
  for (const s of sucursals) {
    const key = s.estado && s.estado.trim() ? s.estado.trim() : "Sin estado";
    if (!map.has(key)) map.set(key, []);
    map.get(key)!.push(s);
  }
  // Ordenar estados: "Sin estado" al final, el resto alfabético
  const sorted = new Map<string, ISucursal[]>();
  const keys = Array.from(map.keys()).sort((a, b) => {
    if (a === "Sin estado") return 1;
    if (b === "Sin estado") return -1;
    return a.localeCompare(b);
  });
  keys.forEach((k) => sorted.set(k, map.get(k)!));
  return sorted;
}

export const SucursalList = ({ sucursals, onEdit, onDelete }: Props) => {
  const byState = useMemo(() => groupByState(sucursals), [sucursals]);

  if (sucursals.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 sucursales registradas</p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <div className="card-body">
        {Array.from(byState.entries()).map(([estado, list]) => (
          <SucursalTable
            key={estado}
            estado={estado}
            list={list}
            onEdit={onEdit}
            onDelete={onDelete}
          />
        ))}
      </div>
    </div>
  );
};