"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { AlertCircle, CheckCircle2, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useMotionOK, spring } from "@/lib/motion";

type Toast = { id: number; msg: string; err?: boolean; action?: Action };
type Action = { label: string; run: () => void };
type Ctx = (msg: string, err?: boolean, action?: Action) => void;

const ToastCtx = React.createContext<Ctx>(() => {});
export const useToast = () => React.useContext(ToastCtx);

/** An error you cannot read in time is the same as no error at all. */
const DWELL_OK = 3400;
const DWELL_ERR = 7000;
/** Beyond this the stack is a wall, and the oldest is the least relevant. */
const MAX = 3;

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = React.useState<Toast[]>([]);
  const ok = useMotionOK();

  const drop = React.useCallback(
    (id: number) => setItems((x) => x.filter((t) => t.id !== id)),
    [],
  );

  const push = React.useCallback<Ctx>(
    (msg, err, action) => {
      const id = Date.now() + Math.random();
      setItems((x) => [...x, { id, msg, err, action }].slice(-MAX));
      setTimeout(() => drop(id), err ? DWELL_ERR : DWELL_OK);
    },
    [drop],
  );

  return (
    <ToastCtx.Provider value={push}>
      {children}
      {/*
        aria-live so a screen reader hears "Queued" or a failure at all — these
        were previously silent, which made the only confirmation that a request
        had been accepted a purely visual one.
      */}
      <div
        role="status"
        aria-live="polite"
        aria-atomic="false"
        className="pointer-events-none fixed inset-x-0 bottom-24 z-[110] flex flex-col
                   items-center gap-2 px-4 md:bottom-8"
      >
        <AnimatePresence>
          {items.map((t) => (
            <motion.div
              key={t.id}
              layout={ok}
              initial={ok ? { opacity: 0, y: 18, scale: 0.94 } : false}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={ok ? { opacity: 0, y: 10, scale: 0.96 } : { opacity: 0 }}
              transition={spring}
              className={cn(
                "sheet pointer-events-auto flex max-w-[min(30rem,100%)] items-center gap-2.5",
                "rounded-pill py-2 pl-3.5 pr-2 text-callout font-medium",
                t.err && "border-err/45",
              )}
            >
              {t.err ? (
                <AlertCircle className="h-4 w-4 shrink-0 text-err" />
              ) : (
                <CheckCircle2 className="h-4 w-4 shrink-0 text-ok" />
              )}
              <span className={cn("min-w-0 flex-1", t.err && "text-err")}>{t.msg}</span>
              {t.action && (
                <button
                  onClick={() => {
                    t.action!.run();
                    drop(t.id);
                  }}
                  className="focus-ring shrink-0 rounded-pill px-2.5 py-0.5 text-callout
                             font-semibold text-accent transition-colors hover:bg-accent-soft"
                >
                  {t.action.label}
                </button>
              )}
              <button
                onClick={() => drop(t.id)}
                aria-label="Dismiss"
                className="focus-ring grid h-6 w-6 shrink-0 place-items-center rounded-full
                           text-mute transition-colors hover:bg-[var(--faint)] hover:text-ink"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </ToastCtx.Provider>
  );
}