import React, { useMemo } from 'react';
import { Button } from 'react-bootstrap';
import { Eye, Edit, CheckCircle, PauseCircle } from 'lucide-react';
import Swal from 'sweetalert2';
import { router } from '@inertiajs/react';
import TableContainer from "../../../Components/Common/TableContainerReactTable";
import { useLoading } from '../../../LoadingContext';


interface SearchTableProps {
  data: any[];
  flash: any;
}

const SearchTable: React.FC<SearchTableProps> =  ({ data = [] ,flash = {} }: SearchTableProps) => {

  const { showLoading, hideLoading } = useLoading();

  // Handlers de acciones (preparados, sin implementación)
  const handleView = (cliente: any) => {
    showLoading();
    router.visit(route('clientes.ver', cliente.CodCli), {
      onFinish: () => hideLoading()
    });
  };
  const handleEdit = (cliente: any) => {
    showLoading();
    router.visit(route('clientes.editar', cliente.CodCli), {
      onFinish: () => hideLoading()
    });
  };
  const handleActivate = async (cliente: any, flash: any) => {
    const result = await Swal.fire({
      title: 'Activar cliente',
      text: `¿Deseas activar al cliente ${cliente.RazSocCli}?`,
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Sí, activar',
      cancelButtonText: 'Cancelar'
    });
    if (result.isConfirmed) {
      showLoading();
      //Swal.fire({ title: 'Procesando...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
      router.post(route('clientes.activar', cliente.CodCli), {}, {
        onFinish: () => {
            Swal.close();
            hideLoading();
            router.reload({only: ['listaClientes']});
            Swal.fire({ title: flash.message || flash.error , icon: flash.type, timer: 1200, showConfirmButton: false });
        },

      });
    }
  };
  const handleSuspend = async (cliente: any, flash: any) => {
    const result = await Swal.fire({
      title: 'Suspender cliente',
      text: `¿Deseas suspender al cliente ${cliente.RazSocCli}?`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Sí, suspender',
      cancelButtonText: 'Cancelar'
    });
    if (result.isConfirmed) {
      showLoading();
      //Swal.fire({ title: 'Procesando...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
      router.post(route('clientes.suspender', cliente.CodCli), {}, {
         onFinish: () => {
            Swal.close();
            hideLoading();
            router.reload({only: ['listaClientes']});
            Swal.fire({ title: flash.message || flash.error , icon: flash.type, timer: 1200, showConfirmButton: false });
          },
      });
    }
  };

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

      {
        header: "CIF",
        accessorKey: "NumCifCli",
        enableColumnFilter: false,
      },
      {
        header: "Razón Social",
        accessorKey: "RazSocCli",
        enableColumnFilter: false,
      },
      {
        header: "Teléfono",
        accessorKey: "TelFijCli",
        enableColumnFilter: false,
      },
      {
        header: "Estatus",
        cell: (cell: any) => {
          const value = cell.getValue();
          return value === 1 ? (
            <span className="badge badge-pill bg-success">Activo</span>
          ) : (
            <span className="badge badge-pill bg-secondary">Inactivo</span>
          );
        },
        accessorKey: "EstCli",
        enableColumnFilter: false,
      },

      {
        header: "Acciones",
        id: "acciones",
        cell: (cell: any) => {
          const cliente = cell.row.original;
          const activo = cliente?.EstCli === 1;
          return (
            <div className="d-flex gap-1">
              <Button variant="btn btn-sm btn-black" size="sm" title="Ver" onClick={() => handleView(cliente)}>
                <Eye size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Editar" onClick={() => handleEdit(cliente)}>
                <Edit size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Activar" onClick={() => handleActivate(cliente, flash)} disabled={activo}>
                <CheckCircle size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Suspender" onClick={() => handleSuspend(cliente, flash)} disabled={!activo}>
                <PauseCircle size={16} />
              </Button>
            </div>
          );
        },
        enableColumnFilter: false,
      },

    ],
    []
  );

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


export { SearchTable };