import { useState } from "react";
import { useQuery } from "react-query";

import api from "../../services/api";
import { Usuario } from "../../types/usuario";

import { UsuarioForm } from "./UsuarioForm";
//import { PencilIcon } from "@heroicons/react/24/outline"; // Importar ícone

export function UsuariosPage() {
  const [formOpen, setFormOpen] = useState(false);
  const [editingUsuario, setEditingUsuario] = useState<Usuario | null>(null);
  const [loading, setLoading] = useState(false);

  const { data: usuarios, refetch } = useQuery("usuarios", async () => {
    const response = await api.get("/usuarios");
    return response.data;
  });

  const handleSave = async () => {
    await refetch();
    setFormOpen(false);
    setEditingUsuario(null);
  };

  const handleEditUsuario = async (usuario: Usuario) => {
    setEditingUsuario(usuario);
    setFormOpen(true);
  };

  const handleToggleStatus = async (id: string, ativo: boolean) => {
    try {
      setLoading(true);
      await api.patch(`/usuarios/${id}/status`, { ativo: !ativo });
      await refetch();
    } catch (error) {
      console.error("Erro ao alterar status:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleEditClick = (usuario: Usuario) => {
    console.log("Editando usuário:", usuario); // Debug
    setEditingUsuario(usuario);
    setFormOpen(true);
  };

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-semibold text-gray-900">Usuários</h1>
        <button
          onClick={() => {
            setEditingUsuario(null);
            setFormOpen(true);
          }}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
        >
          Novo Usuário
        </button>
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Nome
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Email
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Perfil
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                OAB
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Status
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Ações
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {usuarios?.map((usuario: Usuario) => (
              <tr key={usuario.id} className="hover:bg-gray-50">
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  {usuario.nome}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {usuario.email}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {usuario.perfil.replace("_", " ")}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {usuario.oab ? `${usuario.oab}/${usuario.oabUF}` : "-"}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span
                    className={`px-2 py-1 text-xs rounded-full ${
                      usuario.ativo
                        ? "bg-green-100 text-green-800"
                        : "bg-red-100 text-red-800"
                    }`}
                  >
                    {usuario.ativo ? "Ativo" : "Inativo"}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right space-x-2">
                  <button
                    onClick={() => handleEditClick(usuario)}
                    className="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-blue-50 hover:bg-blue-100 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                  >
                    Editar
                  </button>
                  <button
                    onClick={() =>
                      handleToggleStatus(usuario.id, usuario.ativo)
                    }
                    disabled={loading}
                    className={`inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md
                      ${
                        usuario.ativo
                          ? "text-red-600 hover:bg-red-50"
                          : "text-green-600 hover:bg-green-50"
                      }`}
                  >
                    {usuario.ativo ? "Desativar" : "Ativar"}
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <UsuarioForm
        open={formOpen}
        onClose={() => {
          setFormOpen(false);
          setEditingUsuario(null);
        }}
        onSave={() => {
          refetch();
          setFormOpen(false);
          setEditingUsuario(null);
        }}
        usuario={editingUsuario}
      />
    </div>
  );
}