import { JSX } from "react";
import { getUsers, addUser, editUser, removeUser } from "../actions/UserAction";
import AddUserForm from "./AddUserForm";

export default async function UsersPage(): Promise<JSX.Element> {
  const users = await getUsers();

  return (
    <main className="min-h-screen bg-base-200 p-8 flex flex-col items-center">
      <div className="max-w-4xl w-full space-y-6">
        <h1 className="text-3xl font-bold">PostgreSQL User Management</h1>

        {/* add user form using zod validation */}
        <AddUserForm />

        {/* --- ADD USER FORM --- */}
        <div className="card bg-base-100 shadow border border-base-300">
          <div className="card-body">
            <h2 className="card-title text-lg">Add New User</h2>

            {/* Form using Server Action */}
            <form
              action={async (formData: FormData) => {
                "use server";
                const name = formData.get("name") as string;
                const email = formData.get("email") as string;
                const pass = formData.get("pass") as string;

                if (name && email && pass) {
                  await addUser({ name, email, pass });
                }
              }}
              className="grid grid-cols-1 md:grid-cols-4 gap-3 items-end mt-2"
            >
              <input
                type="text"
                name="name"
                placeholder="Name"
                className="input input-bordered input-sm w-full"
                required
              />
              <input
                type="email"
                name="email"
                placeholder="Email"
                className="input input-bordered input-sm w-full"
                required
              />
              <input
                type="password"
                name="pass"
                placeholder="Password"
                className="input input-bordered input-sm w-full"
                required
              />
              <button type="submit" className="btn btn-primary btn-sm">
                Add User
              </button>
            </form>
          </div>
        </div>

        {/* --- USER TABLE --- */}
        <div className="card bg-base-100 shadow border border-base-300">
          <div className="card-body p-0">
            <div className="overflow-x-auto">
              <table className="table table-zebra w-full">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Password</th>
                    <th className="text-right">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {users.map((user) => (
                    <tr key={user.id}>
                      <td className="font-mono">{user.id}</td>
                      <td>{user.name}</td>
                      <td>{user.email}</td>
                      <td className="font-mono text-xs opacity-60">
                        {user.password}
                      </td>
                      <td className="text-right flex justify-end gap-2">
                        {/* EDIT BUTTON (QUICK NAME UPDATE) */}
                        <form
                          action={async () => {
                            "use server";
                            await editUser(user.id, {
                              name: `${user.name} (Edited)`,
                            });
                          }}
                        >
                          <button
                            type="submit"
                            className="btn btn-xs btn-outline btn-warning"
                          >
                            Edit
                          </button>
                        </form>

                        {/* DELETE BUTTON */}
                        <form
                          action={async () => {
                            "use server";
                            await removeUser(user.id);
                          }}
                        >
                          <button
                            type="submit"
                            className="btn btn-xs btn-outline btn-error"
                          >
                            Remove
                          </button>
                        </form>
                      </td>
                    </tr>
                  ))}

                  {users.length === 0 && (
                    <tr>
                      <td
                        colSpan={5}
                        className="text-center py-4 text-base-content/60"
                      >
                        No users found in database. Add one above!
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}