import type { ReactNode } from "react";
import { cn } from "./cn";
import { Icon, type IconName } from "./Icon";

type CalloutTone = "grey" | "amber" | "red" | "blue" | "green";
const calloutTone: Record<CalloutTone, { ring: string; icon: IconName }> = {
  grey: { ring: "text-cell shadow-[inset_0_0_0_1px_var(--color-line)]", icon: "information-line" },
  amber: { ring: "text-amber-text shadow-[inset_0_0_0_1px_var(--color-amber-line)]", icon: "error-warning-line" },
  red: { ring: "text-red-text shadow-[inset_0_0_0_1px_var(--color-red-line)]", icon: "error-warning-line" },
  blue: { ring: "text-blue-text shadow-[inset_0_0_0_1px_#cfe0fb]", icon: "information-line" },
  green: { ring: "text-green-text shadow-[inset_0_0_0_1px_#bfe8d1]", icon: "checkbox-circle-line" },
};

/** An inline note: outlined, its icon, one or two lines, and an optional action on the right. */
export function Callout({
  tone = "grey",
  icon,
  children,
  action,
  role,
  id,
  className,
}: {
  tone?: CalloutTone;
  icon?: IconName;
  children: ReactNode;
  action?: ReactNode;
  role?: "status" | "alert" | "note";
  id?: string;
  className?: string;
}) {
  return (
    <div id={id} role={role} className={cn("flex flex-wrap items-start gap-x-2.5 gap-y-2 rounded-xl px-3.5 py-3 text-[13px] leading-[19px]", calloutTone[tone].ring, className)}>
      <Icon name={icon ?? calloutTone[tone].icon} size={16} className="mt-px" />
      <div className="min-w-0 flex-1">{children}</div>
      {action && <div className="flex flex-wrap items-center gap-2">{action}</div>}
    </div>
  );
}

const looks = {
  quiet: { box: "bg-tile", icon: "text-muted", text: "text-body" },
  amber: { box: "bg-page shadow-[inset_0_0_0_1px_var(--color-amber-line)]", icon: "text-amber-icon", text: "text-amber-text" },
  red: { box: "bg-page shadow-[inset_0_0_0_1px_var(--color-red-line)]", icon: "text-red-icon", text: "text-red-text" },
  urgent: { box: "bg-red-fill", icon: "text-red-icon", text: "text-red-text" },
} as const;

/** A banner: filled red only when someone needs a call now, outlined for a caution, grey otherwise. */
export function Notice({
  tone = "quiet",
  icon,
  title,
  children,
  actions,
  role,
  id,
  className,
}: {
  tone?: keyof typeof looks;
  icon: IconName;
  title?: ReactNode;
  children?: ReactNode;
  actions?: ReactNode;
  role?: "status" | "alert" | "note";
  id?: string;
  className?: string;
}) {
  const look = looks[tone];
  return (
    <div id={id} role={role} className={cn("flex gap-3 rounded-2xl px-4 py-3.5", look.box, className)}>
      <Icon name={icon} size={tone === "urgent" ? 20 : 16} className={cn("mt-0.5", look.icon)} />
      <div className={cn("flex min-w-0 flex-1 flex-col gap-1 text-[13px] leading-[19px]", look.text)}>
        {title && <strong className={cn("text-[14px] leading-5 font-semibold", tone === "quiet" && "text-ink")}>{title}</strong>}
        {children}
        {actions && <div className="mt-2 flex flex-wrap items-center gap-2">{actions}</div>}
      </div>
    </div>
  );
}