import { useState } from "react";

function Users() {
  const [newUser, setNewUser] = useState({});
  return (
    <>
      <div className="bg-primary-800/50 backdrop-blur-lg rounded-xl p-6 mb-6 shadow-xl">
        <h2 className="text-xl font-bold text-white mb-4">Креирај корисник</h2>
        <form
          ref={createUserFormRef}
          onSubmit={handleCreateUser}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
        >
          <input
            type="text"
            placeholder="Име"
            value={newUser.name}
            id="name"
            name="name"
            required
            onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
            className="bg-primary-700/30 border border-primary-600 rounded-lg px-4 py-2
                    text-white placeholder-neutral-400 focus:outline-none focus:border-primary-500
                    focus:ring-1 focus:ring-primary-500"
          />
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Мејл"
            value={newUser.email}
            onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
            className="bg-primary-700/30 border border-primary-600 rounded-lg px-4 py-2
                    text-white placeholder-neutral-400 focus:outline-none focus:border-primary-500
                    focus:ring-1 focus:ring-primary-500"
            required
          />
          <input
            // type="password"
            id="password"
            name="password"
            placeholder="Лозинка"
            value={newUser.password}
            onChange={(e) =>
              setNewUser({ ...newUser, password: e.target.value })
            }
            className="bg-primary-700/30 border border-primary-600 rounded-lg px-4 py-2
                    text-white placeholder-neutral-400 focus:outline-none focus:border-primary-500
                    focus:ring-1 focus:ring-primary-500"
            required
          />
          <div className="flex items-center space-x-2">
            <input
              type="checkbox"
              id="isAdmin"
              checked={newUser.isAdmin}
              onChange={(e) =>
                setNewUser({ ...newUser, isAdmin: e.target.checked })
              }
              className="rounded border-primary-600 bg-primary-700/30 text-primary-500
                      focus:ring-primary-500"
            />
            <label htmlFor="isAdmin" className="text-white">
              Дали е Администратор
            </label>
          </div>
          <button
            type="submit"
            className="flex items-center justify-center space-x-2 px-4 py-2
                    bg-primary-600 hover:bg-primary-700 text-white rounded-lg
                    transition-colors shadow-lg"
          >
            <FiUserPlus className="w-4 h-4" />
            <span>Креирај корисник</span>
          </button>
        </form>
      </div>

      <div className="bg-primary-800/50 backdrop-blur-lg rounded-xl overflow-hidden shadow-xl">
        <table className="w-full">
          <thead>
            <tr className="border-b border-primary-700">
              <th className="px-6 py-4 text-left text-sm text-neutral-400">
                Име
              </th>
              <th className="px-6 py-4 text-left text-sm text-neutral-400">
                Мејл
              </th>
              <th className="px-6 py-4 text-left text-sm text-neutral-400">
                Улога
              </th>
              <th className="px-6 py-4 text-left text-sm text-neutral-400">
                Ресетирај
              </th>
            </tr>
          </thead>
          <tbody>
            {users.map((user) => (
              <tr
                key={user.id}
                className="border-b border-primary-700/50 hover:bg-primary-700/30"
              >
                <td className="px-6 py-4 text-white">{user.name}</td>
                <td className="px-6 py-4 text-white">{user.email}</td>
                <td className="px-6 py-4">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium
                            ${user.isAdmin ? "bg-primary-500/20 text-primary-300" : "bg-neutral-500/20 text-neutral-300"}`}
                  >
                    {user.isAdmin ? "Admin" : "User"}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <button
                    onClick={() =>
                      setResetPasswordModal({
                        isOpen: true,
                        userId: user.id,
                        userName: user.name,
                        newPassword: "",
                      })
                    }
                    className="flex items-center space-x-1 text-neutral-400 hover:text-white transition-colors"
                  >
                    <FiKey className="w-4 h-4" />
                    <span>Ресетирај лозинка</span>
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}
