import { useSyncExternalStore } from "react";
import { useTranslation } from "react-i18next";
import {
  AlertCircle,
  AlertTriangle,
  CheckCircle2,
  Info,
  X,
  XCircle,
} from "lucide-react";
import {
  dismiss,
  getActiveToasts,
  subscribe,
  type NotifLevel,
} from "../lib/notifications";

export const LEVEL_STYLE: Record<
  NotifLevel,
  { icon: typeof Info; color: string; bar: string }
> = {
  info: { icon: Info, color: "text-accent", bar: "bg-accent" },
  success: { icon: CheckCircle2, color: "text-emerald-400", bar: "bg-emerald-400" },
  warning: { icon: AlertTriangle, color: "text-amber-400", bar: "bg-amber-400" },
  error: { icon: AlertCircle, color: "text-red-400", bar: "bg-red-400" },
  fatal: { icon: XCircle, color: "text-red-500", bar: "bg-red-500" },
};

export default function Toaster() {
  const { t } = useTranslation();
  const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);

  return (
    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
      {toasts.map((toast) => {
        const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
        return (
          <div
            key={toast.id}
            className="glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
          >
            <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
            <div className="min-w-0 flex-1">
              {toast.title && <div className="text-sm font-semibold">{toast.title}</div>}
              <div className="text-sm break-words">{toast.message}</div>
              {toast.action && (
                <button
                  onClick={() => {
                    toast.action!.onClick();
                    dismiss(toast.id);
                  }}
                  className="mt-1 text-accent text-sm font-semibold hover:underline"
                >
                  {toast.action.label}
                </button>
              )}
            </div>
            <button
              onClick={() => dismiss(toast.id)}
              className="shrink-0 text-muted hover:text-fg"
              title={t("notifications.dismiss")}
            >
              <X className="w-4 h-4" />
            </button>
            {toast.duration && (
              <div
                className={`absolute left-0 bottom-0 h-0.5 w-full origin-left ${bar}`}
                style={{ animation: `toastbar ${toast.duration}ms linear forwards` }}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}