"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import type { AdminActionResult } from "@/actions/admin";

/**
 * Runs a server action inside a transition and refreshes the router. When `confirm` is given, a
 * dialog gates the (usually destructive) action.
 */
export function ActionButton({
  action,
  children,
  confirm,
  onDone,
  ...btn
}: {
  action: () => Promise<AdminActionResult<unknown>>;
  children: React.ReactNode;
  confirm?: { title: string; description?: React.ReactNode; confirmLabel?: string; variant?: ButtonProps["variant"] };
  onDone?: (r: AdminActionResult<unknown>) => void;
} & Omit<ButtonProps, "onClick" | "children">) {
  const router = useRouter();
  const [pending, start] = React.useTransition();
  const [open, setOpen] = React.useState(false);
  const [msg, setMsg] = React.useState<{ kind: "error" | "warning"; text: string } | null>(null);

  const run = () =>
    start(async () => {
      setMsg(null);
      const r = await action();
      if (!r.ok) setMsg({ kind: "error", text: r.error });
      else if (r.warning) setMsg({ kind: "warning", text: r.warning });
      onDone?.(r);
      if (r.ok) {
        setOpen(false);
        router.refresh();
      }
    });

  return (
    <>
      <span className="inline-flex flex-col items-start gap-1">
        <Button type="button" {...btn} loading={pending} onClick={() => (confirm ? setOpen(true) : run())}>
          {children}
        </Button>
        {msg && !confirm ? (
          <span role="alert" className={msg.kind === "error" ? "text-[12px] text-danger" : "text-[12px] text-warning"}>
            {msg.text}
          </span>
        ) : null}
      </span>
      {confirm ? (
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogContent size="sm">
            <DialogHeader>
              <DialogTitle>{confirm.title}</DialogTitle>
              {confirm.description ? <DialogDescription>{confirm.description}</DialogDescription> : null}
            </DialogHeader>
            {msg ? (
              <p role="alert" className={msg.kind === "error" ? "text-[13px] text-danger" : "text-[13px] text-warning"}>
                {msg.text}
              </p>
            ) : null}
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                Cancel
              </Button>
              <Button type="button" variant={confirm.variant ?? "danger"} loading={pending} onClick={run}>
                {confirm.confirmLabel ?? "Confirm"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      ) : null}
    </>
  );
}

export function ResultMessage({ result }: { result: AdminActionResult<unknown> | null }) {
  if (!result) return null;
  if (!result.ok)
    return (
      <p role="alert" className="text-[12.5px] text-danger">
        {result.error}
      </p>
    );
  if (result.warning)
    return (
      <p role="status" className="text-[12.5px] text-warning">
        {result.warning}
      </p>
    );
  return (
    <p role="status" className="text-[12.5px] text-success">
      Saved.
    </p>
  );
}