import React, { useMemo } from 'react';
import TableContainer from "../../../Components/Common/TableContainerReactTable";
import { Eye, Pencil, Trash2 } from "lucide-react";
import { router } from '@inertiajs/react';


const SearchTable =  ({ data = []}) => {

  // Handlers para las acciones
  const handleConsultar = (contrato: any) => {
    console.log('Consultar contrato:', contrato);
    router.visit(route("propuesta-comercial.show", { id: contrato.CodProCom, tipo: contrato.TipProCom }));
    // TODO: Implementar lógica de consulta
  };

  const handleEditar = (contrato: any) => {
    console.log('Editar contrato:', contrato);
    router.visit(route("propuesta-comercial.edit", { id: contrato.CodProCom, tipo: contrato.TipProCom }));
    // TODO: Implementar lógica de edición
  };

  const handleBorrar = (contrato: any) => {
    console.log('Borrar contrato:', contrato);
    // TODO: Implementar lógica de borrado
  };

  const columns = useMemo(
    () => [
      {
        header: "Contrato",
        cell: (cell: any) => {
          return (
            <span className="fw-semibold">{cell.getValue()}</span>
          );
        },
        accessorKey: "RefCon",
        enableColumnFilter: false,
      },

      {
        header: "Fecha Inicio",
        accessorKey: "FecConCom",
        enableColumnFilter: false,
      },
      /*{
        header: "Código Cliente",
        accessorKey: "CodCli",
        enableColumnFilter: false,
      },*/
      {
        header: "NIF",
        accessorKey: "NumCifCli",
        enableColumnFilter: false,
      },
      {
        header: "Cliente / Razón Social",
        accessorKey: "RazSocCli",
        enableColumnFilter: false,
      },
      {
        header: "EMail",
        accessorKey: "EmaCli",
        cell: (cell: any) => {
          return (
            <span className="text-break">{cell.getValue()}</span>
          );
        },
        enableColumnFilter: false,
      },
      {
        header: "Móvil",
        accessorKey: "TelMovCli",
        enableColumnFilter: false,
      },
      {
        header: "Tipo de Contrato",
        accessorKey: "NombreTipo",
        cell: (cell: any) => {
          return (
            <span className="fw-semibold">{cell.getValue()}</span>
          );
        },
        enableColumnFilter: false,
      },
      {
        header: "Tipo de Contrato",
        accessorKey: "TipProCom",
        cell: (cell: any) => {
          return (
            <span className="d-none">{cell.getValue()}</span>
          );
        },
        enableColumnFilter: false,
      },
      {
        header: "Acciones",
        cell: (cell: any) => {
          const contrato = cell.row.original;
          return (
            <div className="d-flex gap-1">
              <button
                type="button"
                className="btn btn-info btn-sm"
                title="Consultar contrato"
                onClick={() => handleConsultar(contrato)}
              >
                <Eye size={14} />
              </button>
              <button
                type="button"
                className="btn btn-warning btn-sm"
                title="Editar contrato"
                onClick={() => handleEditar(contrato)}
              >
                <Pencil size={14} />
              </button>
              <button
                type="button"
                className="btn btn-danger btn-sm"
                title="Borrar contrato"
                onClick={() => handleBorrar(contrato)}
              >
                <Trash2 size={14} />
              </button>
            </div>
          );
        },
        accessorKey: "acciones",
        enableColumnFilter: false,
        enableSorting: false,
      }
    ],
    [handleConsultar, handleEditar, handleBorrar]
  );

  return (
    <React.Fragment >
      <TableContainer
        columns={(columns || [])}
        data={( data || [])}
        isGlobalFilter={true}
        customPageSize={10}
        SearchPlaceholder='Buscar...'
      />
    </React.Fragment >
  );
};


export { SearchTable };