import React, { useMemo } from 'react';
import { Button } from 'react-bootstrap';
import { Eye, Edit, CheckCircle, PauseCircle, Trash2, Unlock } 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
  const handleView = (user: any) => {
    showLoading();
    router.visit(route('users.ver', user.id), {
      onFinish: () => hideLoading()
    });
  };

  const handleEdit = (user: any) => {
    showLoading();
    router.visit(route('users.editar', user.id), {
      onFinish: () => hideLoading()
    });
  };

  const handleActivate = async (user: any, flash: any) => {
    const result = await Swal.fire({
      title: 'Activar usuario',
      text: `¿Deseas activar al usuario ${user.name}?`,
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Sí, activar',
      cancelButtonText: 'Cancelar'
    });
    if (result.isConfirmed) {
      showLoading();
      router.post(route('users.activar', user.id), {}, {
        onFinish: () => {
          Swal.close();
          hideLoading();
          router.reload({ only: ['listaUsuarios'] });
          Swal.fire({ title: flash.message || flash.error, icon: flash.type, timer: 1200, showConfirmButton: false });
        },
      });
    }
  };

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

  const handleDelete = async (user: any) => {
    const result = await Swal.fire({
      title: 'Eliminar usuario',
      text: `¿Estás seguro de que deseas eliminar al usuario ${user.name}? Esta acción no se puede deshacer.`,
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Sí, eliminar',
      cancelButtonText: 'Cancelar'
    });

    if (result.isConfirmed) {
      showLoading();
      router.delete(route('users.destroy', user.id), {
        onFinish: () => {
          hideLoading();
          router.reload({ only: ['listaUsuarios'] });
          Swal.fire({
            title: 'Usuario eliminado',
            text: 'El usuario ha sido eliminado correctamente.',
            icon: 'success',
            timer: 1500,
            showConfirmButton: false
          });
        },
        onError: () => {
          hideLoading();
          Swal.fire({
            title: 'Error',
            text: 'Hubo un error al eliminar el usuario.',
            icon: 'error'
          });
        }
      });
    }
  };

  const handleUnlock = async (user: any) => {
    const result = await Swal.fire({
      title: 'Desbloquear cuenta',
      text: `¿Deseas desbloquear la cuenta de ${user.name} y reiniciar sus intentos de login?`,
      icon: 'question',
      showCancelButton: true,
      confirmButtonText: 'Sí, desbloquear',
      cancelButtonText: 'Cancelar'
    });

    if (result.isConfirmed) {
      showLoading();
      router.post(route('users.unlock', user.id), {}, {
        onFinish: () => {
          hideLoading();
          Swal.fire({
            title: 'Cuenta Desbloqueada',
            text: 'El usuario ha sido desbloqueado correctamente.',
            icon: 'success',
            timer: 1500,
            showConfirmButton: false
          });
        },
        onError: () => {
          hideLoading();
          Swal.fire({
            title: 'Error',
            text: 'Hubo un error al desbloquear el usuario.',
            icon: 'error'
          });
        }
      });
    }
  };

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

      {
        header: "Nombre",
        accessorKey: "name",
        enableColumnFilter: false,
      },

      {
        header: "Email",
        accessorKey: "email",
        enableColumnFilter: false,
      },

      {
        header: "Rol",
        accessorKey: "role",
        enableColumnFilter: false,
      },

      {
        header: "Activo",
        cell: (cell: any) => {
          const value = cell.getValue();
          return value === 1 || value === true ? (
            <span className="badge badge-pill bg-success">Activo</span>
          ) : (
            <span className="badge badge-pill bg-secondary">Inactivo</span>
          );
        },
        accessorKey: "is_active",
        enableColumnFilter: false,
      },

      {
        header: "Acciones",
        id: "acciones",
        cell: (cell: any) => {
          const user = cell.row.original;
          const activo = user?.is_active === 1 || user?.is_active === true;
          return (
            <div className="d-flex gap-1">
              <Button variant="btn btn-sm btn-black" size="sm" title="Ver" onClick={() => handleView(user)}>
                <Eye size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Editar" onClick={() => handleEdit(user)}>
                <Edit size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Activar" onClick={() => handleActivate(user, flash)} disabled={activo}>
                <CheckCircle size={16} />
              </Button>
              <Button variant="btn btn-sm btn-black" size="sm" title="Suspender" onClick={() => handleSuspend(user, flash)} disabled={!activo}>
                <PauseCircle size={16} />
              </Button>
              <Button variant="btn btn-sm btn-warning" size="sm" title="Desbloquear / Reiniciar Intentos" onClick={() => handleUnlock(user)}>
                <Unlock size={16} />
              </Button>
              <Button variant="btn btn-sm btn-danger" size="sm" title="Eliminar" onClick={() => handleDelete(user)}>
                <Trash2 size={16} />
              </Button>
            </div>
          );
        },
        enableColumnFilter: false,
      },

    ],
    []
  );

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


export { SearchTable };