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

type SearchTableProps = {
  data: any[];
  flash: any;
};

const SearchTable: React.FC<SearchTableProps> = ({ data = [], flash = {} }: SearchTableProps) => {
  const { showLoading, hideLoading } = useLoading();
  const handleView = (row: any) => {
    showLoading();
    router.visit(route('puntos-suministro.ver', { id: row.CodPunSum }), {
      onFinish: () => hideLoading()
    });
  };
  
  const handleEdit = (row: any) => {
    showLoading();
    router.visit(route('puntos-suministro.edit', { id: row.CodPunSum }), {
      onFinish: () => hideLoading()
    });
  };
  const handleActivate = async (row: any) => {
    const result = await Swal.fire({
      title: 'Activar punto',
      text: `¿Deseas activar el punto en ${row.NomViaPunSum} ${row.NumViaPunSum}?`,
      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('puntos-suministro.activar', row.CodPunSum), {}, {
        onFinish: () => {
          Swal.close();
          hideLoading();
          router.reload({ only: ['puntos'] });
          Swal.fire({ title: flash?.message || flash?.error, icon: flash?.type || 'success', timer: 1200, showConfirmButton: false });
        },
      });
    }
  };
  const handleSuspend = async (row: any) => {
    const result = await Swal.fire({
      title: 'Suspender punto',
      text: `¿Deseas suspender el punto en ${row.NomViaPunSum} ${row.NumViaPunSum}?`,
      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('puntos-suministro.suspender', row.CodPunSum), {}, {
        onFinish: () => {
          Swal.close();
          hideLoading();
          router.reload({ only: ['puntos'] });
          Swal.fire({ title: flash?.message || flash?.error, icon: flash?.type || 'success', timer: 1200, showConfirmButton: false });
        },
      });
    }
  };
    const columns = useMemo(
    () => [
      {
        header: 'Cliente',
        cell: (cell: any) => {
          const cliente = cell.row.original.cliente;
          return cliente ? (
            <div>
              <div><b>{cliente.RazSocCli || cliente.NomCli}</b></div>
              <div>Doc: {cliente.NumCifCli || cliente.NumDocCli}</div>
              <div>Tel: {cliente.TelFijCli || cliente.TelMovCli}</div>
              <div>Email: {cliente.EmaCli || cliente.EmlCli}</div>
            </div>
          ) : '-';
        },
        accessorKey: 'cliente.NumCifCli',
        enableColumnFilter: false,
      },
      {
        header: 'Dirección',
        accessorKey: 'NomViaPunSum',
        enableColumnFilter: false,
      },
      {
        header: 'Localidad',
        accessorKey: 'localidad.DesLoc',
        enableColumnFilter: false,
      },
      {
        header: 'Provincia',
        accessorKey: 'localidad.provincia.DesPro',
        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: 'EstPunSum',
        enableColumnFilter: false,
      },
      {
        header: 'Acciones',
        id: 'acciones',
        cell: (cell: any) => {
          const row = cell.row.original;
          const activo = row?.EstPunSum === 1;
          return (
            <div className="d-flex gap-1">
              <Button variant="btn btn-sm btn-black" size="sm" title="Ver" onClick={() => handleView(row)}>
                <Eye size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Editar" onClick={() => handleEdit(row)}>
                <Edit size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Activar" onClick={() => handleActivate(row)} disabled={activo}>
                <CheckCircle size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Suspender" onClick={() => handleSuspend(row)} 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 };