"use client";

import { banUser, setContributorFlag, setUserRole, unbanUser } from "@/lib/actions/admin";

type UserSummary = {
  id: string;
  username: string;
  email: string;
  role: string;
  contributorFlag: boolean;
  uploadCount: number;
  banned: boolean;
};

export function UserRow({
  user,
  viewerRole,
}: {
  user: UserSummary;
  viewerRole: string;
}) {
  const isAdmin = viewerRole === "admin";

  return (
    <li className="flex flex-col gap-2 rounded-lg border border-charcoal/10 bg-warm-white p-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <p className="font-medium text-charcoal">
          {user.username}
          {user.banned && (
            <span className="ml-2 rounded-full bg-terracotta/10 px-2 py-0.5 text-xs font-medium text-terracotta">
              Banned
            </span>
          )}
        </p>
        <p className="text-sm text-charcoal/60">
          {user.email} &middot; {user.uploadCount} uploads
          {user.contributorFlag ? " · Contributor" : ""}
        </p>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        {isAdmin ? (
          <select
            defaultValue={user.role}
            onChange={(e) => {
              const role = e.target.value as "member" | "moderator";
              setUserRole(user.id, role);
            }}
            disabled={user.role === "admin"}
            className="rounded border border-charcoal/20 bg-cream px-2 py-1 text-sm text-charcoal disabled:opacity-60"
          >
            <option value="member">Member</option>
            <option value="moderator">Moderator</option>
            {user.role === "admin" && <option value="admin">Admin</option>}
          </select>
        ) : (
          <span className="text-sm capitalize text-charcoal/70">{user.role}</span>
        )}

        {isAdmin && (
          <label className="flex items-center gap-1.5 text-sm text-charcoal">
            <input
              type="checkbox"
              defaultChecked={user.contributorFlag}
              onChange={(e) => setContributorFlag(user.id, e.target.checked)}
            />
            Contributor
          </label>
        )}

        {user.role !== "admin" && (
          <button
            type="button"
            onClick={() => {
              if (user.banned) {
                unbanUser(user.id);
              } else if (confirm(`Ban ${user.username}? They will no longer be able to log in.`)) {
                banUser(user.id);
              }
            }}
            className={`text-sm hover:underline ${user.banned ? "text-charcoal/60" : "text-terracotta"}`}
          >
            {user.banned ? "Unban" : "Ban"}
          </button>
        )}
      </div>
    </li>
  );
}