"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import {
  IconAlertTriangle,
  IconCircleCheck,
  IconCircleX,
  IconInfoCircle,
  IconX,
} from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";

type BannerTone = "info" | "success" | "warning" | "danger";

// Annotated so the published declarations don't need React's internal types.
const TONES: Record<BannerTone, { icon: React.ComponentType<{ className?: string }>; box: string; text: string }> = {
  info: { icon: IconInfoCircle, box: "border-action/25 bg-action/[0.06]", text: "text-action" },
  success: { icon: IconCircleCheck, box: "border-positive/25 bg-positive/[0.06]", text: "text-positive-fg" },
  warning: { icon: IconAlertTriangle, box: "border-attention/30 bg-attention/[0.07]", text: "text-attention-fg" },
  danger: { icon: IconCircleX, box: "border-risk/25 bg-risk/[0.06]", text: "text-risk-fg" },
};

/** An inline message with a tone, an optional action, and dismissal. */
export function Banner({
  tone = "info",
  title,
  children,
  action,
  onDismiss,
  className,
}: {
  tone?: keyof typeof TONES;
  title: React.ReactNode;
  children?: React.ReactNode;
  action?: React.ReactNode;
  onDismiss?: () => void;
  className?: string;
}) {
  const meta = TONES[tone];
  const Icon = meta.icon;
  return (
    <div
      role={tone === "danger" || tone === "warning" ? "alert" : "status"}
      className={cn("flex gap-3 rounded-2xl border p-3.5", meta.box, className)}
    >
      <Icon aria-hidden="true" className={cn("mt-0.5 size-4 shrink-0", meta.text)} />
      <div className="min-w-0 flex-1">
        <p className={cn("text-sm font-medium", meta.text)}>{title}</p>
        {children ? <div className="mt-0.5 text-sm text-muted-foreground">{children}</div> : null}
        {action ? <div className="mt-2.5 flex flex-wrap gap-2">{action}</div> : null}
      </div>
      {onDismiss ? (
        <button
          type="button"
          aria-label="Dismiss"
          onClick={onDismiss}
          className="-m-1 flex size-6 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground"
        >
          <IconX className="size-3.5" />
        </button>
      ) : null}
    </div>
  );
}

/** Animates a banner (or anything) in and out. */
export function Presence({ show, children }: { show: boolean; children: React.ReactNode }) {
  return (
    <AnimatePresence initial={false}>
      {show ? (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          exit={{ opacity: 0, height: 0 }}
          transition={transitions.enter}
          className="overflow-hidden"
        >
          {children}
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}