"use client";

import { isApiSuccess } from "@/lib/api-messages";
import * as React from "react";

import { AlertTriangle, Trash2, X } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { requestDashboardApi } from "@/lib/dashboard-api-client";
import type { UserDetail } from "../../_lib/users-server-api";

type DeleteUserPageClientProps = {
  user: UserDetail;
};

export function DeleteUserPageClient({ user }: DeleteUserPageClientProps) {
  const router = useRouter();
  const [deleting, setDeleting] = React.useState(false);

  const deleteUser = async () => {
    setDeleting(true);

    try {
      const data = await requestDashboardApi<{
        status?: string;
        message?: string;
      }>({
        url: "/dashboard/admins/users/delete-user",
        method: "POST",
        body: { userId: user.userId },
        fallbackError: "Could not delete user.",
        validate: (payload) => isApiSuccess(payload),
      });

      toast.success(data.message ?? "User deleted.");
      router.push("/dashboard/admins/users");
    } catch (error) {
      const message = error instanceof Error ? error.message : "Could not delete user.";
      toast.error(message);
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div className="rounded-2xl border border-destructive/30 bg-destructive/5 p-5 shadow-sm">
      <div className="flex flex-wrap items-start gap-4">
        <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-destructive/10 text-destructive">
          <AlertTriangle className="size-5" />
        </div>
        <div className="min-w-0 flex-1">
          <h2 className="font-semibold text-lg">Delete this user?</h2>
          <p className="mt-1 text-muted-foreground text-sm">
            This will delete <span className="font-medium text-foreground">{user.displayName || user.email}</span>.
            This action cannot be undone.
          </p>
          <div className="mt-4 rounded-xl border bg-background p-3 text-sm">
            <p className="font-medium">{user.email}</p>
            <p className="mt-1 font-mono text-muted-foreground text-xs">{user.principal}</p>
          </div>
        </div>
      </div>

      <div className="mt-5 flex flex-wrap justify-end gap-2">
        <Button
          type="button"
          variant="outline"
          disabled={deleting}
          onClick={() => router.push(`/dashboard/admins/users/${user.userId}?action=view`)}
        >
          <X className="size-4" />
          Cancel
        </Button>
        <Button type="button" variant="destructive" disabled={deleting} onClick={deleteUser}>
          <Trash2 className="size-4" />
          {deleting ? "Deleting..." : "Delete user"}
        </Button>
      </div>
    </div>
  );
}