"use client";

import { useEffect, useState } from "react";
import { CheckCircle2, Info, TriangleAlert, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useUiStore, type Toast } from "@/stores/ui-store";

const KIND_STYLES: Record<Toast["kind"], { icon: typeof Info; classes: string }> = {
  success: { icon: CheckCircle2, classes: "border-green-600/30 text-foreground [&_svg]:text-green-600" },
  error: { icon: TriangleAlert, classes: "border-red-600/40 text-foreground [&_svg]:text-red-600" },
  info: { icon: Info, classes: "border-border text-foreground [&_svg]:text-muted-foreground" }
};

function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const raf = requestAnimationFrame(() => setVisible(true));
    const timer = setTimeout(() => onDismiss(toast.id), toast.duration);
    return () => {
      cancelAnimationFrame(raf);
      clearTimeout(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [toast.id]);

  const { icon: Icon, classes } = KIND_STYLES[toast.kind];

  return (
    <div
      role="status"
      className={cn(
        "pointer-events-auto flex w-80 items-start gap-3 rounded-lg border bg-card p-3 shadow-lg transition-all duration-200",
        "translate-y-2 opacity-0",
        visible && "translate-y-0 opacity-100",
        classes
      )}
    >
      <Icon className="mt-0.5 size-4 shrink-0" aria-hidden />
      <div className="min-w-0 flex-1">
        <p className="text-sm font-medium leading-5">{toast.title}</p>
        {toast.description ? (
          <p className="mt-0.5 break-words text-xs text-muted-foreground">{toast.description}</p>
        ) : null}
      </div>
      <button
        type="button"
        onClick={() => onDismiss(toast.id)}
        className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
        aria-label="Dismiss notification"
      >
        <X className="size-3.5" aria-hidden />
      </button>
    </div>
  );
}

/**
 * Toast viewport — renders the zustand toast list (push/remove from
 * `useUiStore` or the imperative `toast()` helper). Fixed bottom-right.
 */
export function Toaster() {
  const toasts = useUiStore((s) => s.toasts);
  const removeToast = useUiStore((s) => s.removeToast);

  return (
    <div
      aria-live="polite"
      className="pointer-events-none fixed bottom-4 right-4 z-[100] flex flex-col gap-2"
    >
      {toasts.map((t) => (
        <ToastItem key={t.id} toast={t} onDismiss={removeToast} />
      ))}
    </div>
  );
}