import { cn } from "@/lib/utils";
import {
  AlertTriangle,
  Lightbulb,
  ClipboardList,
  Brain,
  type LucideIcon,
} from "lucide-react";

type CalloutVariant = "warning" | "success" | "info" | "insight";

interface CalloutProps {
  children: React.ReactNode;
  variant?: CalloutVariant;
  title?: string;
  icon?: LucideIcon;
  className?: string;
}

const variantConfig: Record<
  CalloutVariant,
  { icon: LucideIcon; borderClass: string; bgClass: string; iconClass: string }
> = {
  warning: {
    icon: AlertTriangle,
    borderClass: "border-[var(--callout-warning-border)]",
    bgClass: "bg-[var(--callout-warning-bg)]",
    iconClass: "text-[var(--callout-warning-fg)]",
  },
  success: {
    icon: Lightbulb,
    borderClass: "border-[var(--callout-success-border)]",
    bgClass: "bg-[var(--callout-success-bg)]",
    iconClass: "text-[var(--callout-success-fg)]",
  },
  info: {
    icon: ClipboardList,
    borderClass: "border-[var(--callout-info-border)]",
    bgClass: "bg-[var(--callout-info-bg)]",
    iconClass: "text-[var(--callout-info-fg)]",
  },
  insight: {
    icon: Brain,
    borderClass: "border-[var(--callout-insight-border)]",
    bgClass: "bg-[var(--callout-insight-bg)]",
    iconClass: "text-[var(--callout-insight-fg)]",
  },
};

export function Callout({
  children,
  variant = "info",
  title,
  icon,
  className,
}: CalloutProps) {
  const config = variantConfig[variant];
  const Icon = icon || config.icon;

  return (
    <div
      className={cn(
        "rounded-lg border-l-4 p-4",
        config.borderClass,
        config.bgClass,
        className
      )}
      role="note"
    >
      {title && (
        <div className="flex items-center gap-2 mb-2 font-semibold">
          <Icon className={cn("h-5 w-5 flex-shrink-0", config.iconClass)} aria-hidden="true" />
          <span>{title}</span>
        </div>
      )}
      <div className={cn(!title && "flex gap-3")}>
        {!title && (
          <Icon className={cn("h-5 w-5 flex-shrink-0 mt-0.5", config.iconClass)} aria-hidden="true" />
        )}
        <div className="flex-1">{children}</div>
      </div>
    </div>
  );
}

interface ApproachBoxProps {
  children: React.ReactNode;
  variant: "wrong" | "correct";
  className?: string;
}

export function ApproachBox({ children, variant, className }: ApproachBoxProps) {
  const isWrong = variant === "wrong";

  return (
    <div
      className={cn(
        "rounded-lg p-3 border",
        isWrong
          ? "border-[var(--approach-wrong-border)] bg-[var(--approach-wrong-bg)]"
          : "border-[var(--approach-correct-border)] bg-[var(--approach-correct-bg)]",
        className
      )}
    >
      <div className="flex items-start gap-2">
        <span
          className={cn(
            "font-medium flex-shrink-0",
            isWrong ? "text-[var(--approach-wrong-fg)]" : "text-[var(--approach-correct-fg)]"
          )}
          aria-hidden="true"
        >
          {isWrong ? "✗" : "✓"}
        </span>
        <div className="flex-1">
          <span className="sr-only">{isWrong ? "Wrong approach: " : "Correct approach: "}</span>
          {children}
        </div>
      </div>
    </div>
  );
}
