"use client";

import {
  DialogRoot,
  DialogBackdrop,
  DialogPositioner,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@seed-design/react";
import { MercuryButton } from "@/ds";
import { assetsStrings as s } from "./strings";

export interface ConfirmDialogProps {
  open: boolean;
  title: string;
  description?: string;
  confirmLabel?: string;
  destructive?: boolean;
  busy?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

/**
 * A confirmation dialog built on Seed's `Dialog` primitives — used for every
 * destructive/irreversible action in the assets + lending feature (delete,
 * revalue) instead of a native `window.confirm`, per Mercury's UI
 * conventions (mirrors iOS's `seedDialog`).
 */
export function ConfirmDialog({
  open,
  title,
  description,
  confirmLabel = s.common.delete,
  destructive = true,
  busy = false,
  onConfirm,
  onCancel,
}: ConfirmDialogProps) {
  return (
    <DialogRoot
      open={open}
      onOpenChange={(next) => {
        if (!next) onCancel();
      }}
    >
      <DialogBackdrop />
      <DialogPositioner>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{title}</DialogTitle>
          </DialogHeader>
          {description && <DialogDescription>{description}</DialogDescription>}
          <DialogFooter style={{ display: "flex", gap: 12, paddingTop: 16 }}>
            <MercuryButton variant="secondary" onClick={onCancel} style={{ flex: 1 }} disabled={busy}>
              {s.common.cancel}
            </MercuryButton>
            <MercuryButton
              variant="primary"
              onClick={onConfirm}
              loading={busy}
              style={{ flex: 1, ...(destructive ? { background: "var(--seed-color-fg-critical)", color: "#fff" } : {}) }}
            >
              {confirmLabel}
            </MercuryButton>
          </DialogFooter>
        </DialogContent>
      </DialogPositioner>
    </DialogRoot>
  );
}