import { AdminRowActions } from "@/admin/components/AdminRowActions";
import { approveUserAccountAction, deletePublicUserAction } from "@/lib/actions";
import { formatDate } from "@/lib/utils";

export type PublicUserCardData = {
  address: string | null;
  age: number | null;
  bio: string | null;
  createdAt: Date;
  email: string;
  id: string;
  isApproved: boolean;
  name: string;
  phone: string | null;
  sex: string | null;
};

export function AdminUserCard({ user }: { user: PublicUserCardData }) {
  return (
    <article className="admin-user-card">
      <header className="admin-user-card__head">
        <span className="status-badge" data-tone={user.isApproved ? "success" : "warning"}>
          {user.isApproved ? "Approved" : "Pending"}
        </span>
        <h3>{user.name}</h3>
        <p className="muted admin-user-card__email">{user.email}</p>
      </header>

      <div className="admin-user-card__meta">
        <p className="muted">
          <strong>Joined:</strong> {formatDate(user.createdAt)}
        </p>
        {user.phone ? (
          <p className="muted">
            <strong>Phone:</strong> {user.phone}
          </p>
        ) : null}
        {user.age ? (
          <p className="muted">
            <strong>Age:</strong> {user.age}
            {user.sex ? ` · ${user.sex}` : ""}
          </p>
        ) : null}
        {user.address ? (
          <p className="muted">
            <strong>Address:</strong> {user.address}
          </p>
        ) : null}
        <p className="muted admin-user-card__note">
          {user.isApproved
            ? "Can upload content for admin approval."
            : "Can log in, but cannot upload until approved."}
        </p>
        {user.bio ? <p className="admin-user-card__bio">{user.bio}</p> : null}
      </div>

      <div className="admin-user-card__actions">
        <AdminRowActions
          deleteAction={deletePublicUserAction}
          deleteConfirm={`Delete user "${user.name}"? This cannot be undone.`}
          deleteId={user.id}
          viewHref={`mailto:${user.email}`}
          viewLabel="Email user"
        >
          <form action={approveUserAccountAction}>
            <input name="approved" type="hidden" value={user.isApproved ? "false" : "true"} />
            <input name="id" type="hidden" value={user.id} />
            <button className="admin-btn admin-btn-modify" type="submit">
              {user.isApproved ? "Revoke access" : "Approve access"}
            </button>
          </form>
        </AdminRowActions>
      </div>
    </article>
  );
}