"use client";

import { Info, CheckCircle2, CircleAlert, X } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { SimpleToast } from "@/hooks/use-simple-toast";

interface SimpleToastStackProps {
  toasts: SimpleToast[];
  onDismiss: (id: string) => void;
  className?: string;
}

function getVariantStyles(variant: SimpleToast["variant"]) {
  if (variant === "success") {
    return {
      container: "border-emerald-300/30 bg-emerald-500/12",
      icon: CheckCircle2,
      iconClass: "text-emerald-200"
    };
  }

  if (variant === "error") {
    return {
      container: "border-red-300/35 bg-red-500/15",
      icon: CircleAlert,
      iconClass: "text-red-200"
    };
  }

  return {
    container: "border-sky-300/30 bg-sky-500/12",
    icon: Info,
    iconClass: "text-sky-200"
  };
}

export function SimpleToastStack({ toasts, onDismiss, className }: SimpleToastStackProps) {
  return (
    <div
      className={cn("pointer-events-none fixed inset-x-4 bottom-4 z-[70] space-y-2 pb-[max(0px,env(safe-area-inset-bottom))] sm:left-auto sm:right-4 sm:w-[360px]", className)}
      aria-live="polite"
      aria-relevant="additions removals"
    >
      {toasts.map((toast) => {
        const styles = getVariantStyles(toast.variant);
        const Icon = styles.icon;

        return (
          <article
            key={toast.id}
            className={cn(
              "pointer-events-auto animate-fade-up rounded-xl border p-3 shadow-[0_15px_40px_rgba(2,6,23,0.5)] backdrop-blur-md motion-safe:transition-transform motion-safe:hover:-translate-y-0.5",
              styles.container
            )}
          >
            <div className="flex items-start justify-between gap-3">
              <div className="flex items-start gap-2">
                <Icon className={cn("mt-0.5 size-4", styles.iconClass)} />
                <div>
                  <p className="text-sm font-medium text-white">{toast.title}</p>
                  {toast.description ? (
                    <p className="mt-1 text-xs leading-relaxed text-slate-200">{toast.description}</p>
                  ) : null}
                </div>
              </div>
              <Button
                variant="ghost"
                size="icon-xs"
                className="text-slate-300 hover:text-white"
                aria-label="Dismiss toast"
                onClick={() => onDismiss(toast.id)}
              >
                <X />
              </Button>
            </div>
          </article>
        );
      })}
    </div>
  );
}
