"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Ban, BadgeCheck, ShieldCheck, ShieldOff, Undo2 } from "lucide-react";
import { banUser, unbanUser, setUserRole, forceVerifyEmail } from "@/actions/admin";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/input";
import { Field, Label, Hint } from "@/components/ui/label";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ActionButton } from "./action-button";

export function UserActions({ userId, banned, role, emailVerified, isSelf }: { userId: string; banned: boolean; role: string; emailVerified: boolean; isSelf: boolean }) {
  const router = useRouter();
  const [banOpen, setBanOpen] = React.useState(false);
  const [reason, setReason] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [pending, start] = React.useTransition();

  const doBan = () =>
    start(async () => {
      setError(null);
      const r = await banUser(userId, reason);
      if (!r.ok) return setError(r.error);
      setBanOpen(false);
      setReason("");
      router.refresh();
    });

  return (
    <div className="flex flex-wrap items-center gap-2">
      {banned ? (
        <ActionButton variant="outline" size="sm" action={() => unbanUser(userId)}>
          <Undo2 className="size-3.5" /> Unban
        </ActionButton>
      ) : (
        <Button variant="danger" size="sm" onClick={() => setBanOpen(true)} disabled={isSelf} title={isSelf ? "You cannot ban yourself" : undefined}>
          <Ban className="size-3.5" /> Ban user
        </Button>
      )}
      {role === "admin" ? (
        <ActionButton
          variant="outline"
          size="sm"
          disabled={isSelf}
          action={() => setUserRole(userId, "user")}
          confirm={{ title: "Remove admin role?", description: "This user will lose access to /admin immediately.", confirmLabel: "Demote", variant: "danger" }}
        >
          <ShieldOff className="size-3.5" /> Demote to user
        </ActionButton>
      ) : (
        <ActionButton
          variant="outline"
          size="sm"
          action={() => setUserRole(userId, "admin")}
          confirm={{ title: "Grant admin role?", description: "Admins can see upstream provider names, costs and every customer's data. Only for Fetcha staff.", confirmLabel: "Promote", variant: "primary" }}
        >
          <ShieldCheck className="size-3.5" /> Promote to admin
        </ActionButton>
      )}
      {!emailVerified ? (
        <ActionButton variant="outline" size="sm" action={() => forceVerifyEmail(userId)} confirm={{ title: "Mark email as verified?", description: "Unlocks production API access without the user clicking the verification link.", confirmLabel: "Verify", variant: "primary" }}>
          <BadgeCheck className="size-3.5" /> Force verify email
        </ActionButton>
      ) : null}

      <Dialog open={banOpen} onOpenChange={setBanOpen}>
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>Ban this user</DialogTitle>
            <DialogDescription>All active sessions are revoked and the user cannot sign in until unbanned. The reason is stored on the account and in the audit log.</DialogDescription>
          </DialogHeader>
          <Field>
            <Label htmlFor="ban-reason">Reason</Label>
            <Textarea id="ban-reason" value={reason} onChange={(e) => setReason(e.target.value)} placeholder="e.g. SSRF attempts against internal ranges (abuse_…)" />
            <Hint>Internal only — never shown to the user.</Hint>
          </Field>
          {error ? (
            <p role="alert" className="text-[13px] text-danger">
              {error}
            </p>
          ) : null}
          <DialogFooter>
            <Button variant="outline" onClick={() => setBanOpen(false)}>
              Cancel
            </Button>
            <Button variant="danger" loading={pending} onClick={doBan}>
              Ban user
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}