import type { ReactNode } from "react";
import { AlertTriangleIcon, InfoIcon, OctagonAlertIcon, type LucideIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
import { cn } from "@/lib/utils";

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
  className,
}: {
  icon: LucideIcon;
  title: string;
  description: string;
  action?: { label: string; onClick?: () => void };
  className?: string;
}) {
  return (
    <Empty className={cn("rounded-lg border border-dashed border-border bg-card py-8", className)}>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Icon />
        </EmptyMedia>
        <EmptyTitle>{title}</EmptyTitle>
        <EmptyDescription>{description}</EmptyDescription>
      </EmptyHeader>
      {action ? (
        <EmptyContent>
          <Button size="sm" onClick={action.onClick}>
            {action.label}
          </Button>
        </EmptyContent>
      ) : null}
    </Empty>
  );
}

const CALLOUT = {
  info: { icon: InfoIcon, cls: "border-status-info-border bg-status-info-bg text-status-info-text" },
  warning: { icon: AlertTriangleIcon, cls: "border-status-warning-border bg-status-warning-bg text-status-warning-text" },
  error: { icon: OctagonAlertIcon, cls: "border-status-error-border bg-status-error-bg text-status-error-text" },
} as const;

/** Inline help or warning inside a form or page. Not dismissable: it explains a rule. */
export function InfoCallout({
  tone = "info",
  title,
  children,
  className,
}: {
  tone?: keyof typeof CALLOUT;
  title?: string;
  children: ReactNode;
  className?: string;
}) {
  const { icon: Icon, cls } = CALLOUT[tone];
  return (
    <div role="note" className={cn("flex gap-2 rounded-lg border px-3 py-2 text-sm", cls, className)}>
      <Icon className="mt-0.5 size-4 shrink-0" aria-hidden />
      <div className="min-w-0">
        {title ? <p className="font-medium">{title}</p> : null}
        <div className={cn("leading-5", title ? "text-foreground/80" : "")}>{children}</div>
      </div>
    </div>
  );
}

/** The copy and structure of a destructive confirmation. Wrap in AlertDialog in the app; shown flat here. */
export function ConfirmDestructive({
  title,
  consequence,
  confirmLabel,
  onCancel,
  onConfirm,
  busy,
}: {
  title: string;
  consequence: ReactNode;
  confirmLabel: string;
  onCancel?: () => void;
  onConfirm?: () => void;
  busy?: boolean;
}) {
  return (
    <div role="alertdialog" aria-label={title} className="max-w-md rounded-xl border border-border bg-card p-4">
      <h3 className="text-base font-semibold text-foreground">{title}</h3>
      <div className="mt-2 space-y-2 text-sm leading-5 text-muted-foreground">{consequence}</div>
      <div className="mt-4 flex justify-end gap-2">
        <Button variant="outline" size="sm" onClick={onCancel} disabled={busy}>
          Cancel
        </Button>
        <Button variant="destructive" size="sm" onClick={onConfirm} disabled={busy}>
          {busy ? "Deleting..." : confirmLabel}
        </Button>
      </div>
    </div>
  );
}