"use client";

import {
  createContext,
  useCallback,
  useContext,
  useRef,
  useState,
  type ReactNode,
} from "react";
import {
  IconCheckCircle,
  IconAlertTriangle,
  IconXCircle,
  IconSparkles,
} from "@/components/icons";

type Tone = "info" | "success" | "warning" | "danger";

type ToastInput = {
  title: string;
  description?: string;
  tone?: Tone;
  duration?: number; // ms — 0 ou négatif = pas d'auto-dismiss
};

type Toast = ToastInput & { id: number; tone: Tone; duration: number };

type Ctx = {
  toast: (input: ToastInput) => number;
  dismiss: (id: number) => void;
};

const ToastContext = createContext<Ctx | null>(null);

export function useToast() {
  const ctx = useContext(ToastContext);
  if (!ctx) throw new Error("useToast must be inside <ToastProvider>");
  return ctx;
}

export function ToastProvider({ children }: { children: ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const idRef = useRef(0);

  const dismiss = useCallback((id: number) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  }, []);

  const toast = useCallback(
    (input: ToastInput) => {
      idRef.current += 1;
      const id = idRef.current;
      const t: Toast = {
        id,
        tone: input.tone ?? "info",
        duration: input.duration ?? 5000,
        title: input.title,
        description: input.description,
      };
      setToasts((prev) => [...prev, t]);
      if (t.duration > 0) {
        setTimeout(() => dismiss(id), t.duration);
      }
      return id;
    },
    [dismiss],
  );

  return (
    <ToastContext.Provider value={{ toast, dismiss }}>
      {children}
      <ToastViewport toasts={toasts} dismiss={dismiss} />
    </ToastContext.Provider>
  );
}

const TONE_STYLE: Record<Tone, { ring: string; icon: ReactNode; iconColor: string }> = {
  info: {
    ring: "ring-accent-ring/50",
    icon: <IconSparkles size={18} />,
    iconColor: "text-accent",
  },
  success: {
    ring: "ring-green-200",
    icon: <IconCheckCircle size={18} />,
    iconColor: "text-success",
  },
  warning: {
    ring: "ring-amber-200",
    icon: <IconAlertTriangle size={18} />,
    iconColor: "text-warning",
  },
  danger: {
    ring: "ring-red-200",
    icon: <IconXCircle size={18} />,
    iconColor: "text-danger",
  },
};

function ToastViewport({
  toasts,
  dismiss,
}: {
  toasts: Toast[];
  dismiss: (id: number) => void;
}) {
  return (
    <div
      aria-live="polite"
      className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-[calc(100%-2rem)] max-w-sm flex-col gap-2"
    >
      {toasts.map((t) => {
        const style = TONE_STYLE[t.tone];
        return (
          <div
            key={t.id}
            role="status"
            className={[
              "pointer-events-auto mf-fade-in",
              "rounded-lg bg-surface border border-border shadow-md ring-1",
              "px-4 py-3 flex items-start gap-3",
              style.ring,
            ].join(" ")}
          >
            <div className={`mt-0.5 shrink-0 ${style.iconColor}`}>
              {style.icon}
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-sm font-medium text-foreground">{t.title}</p>
              {t.description && (
                <p className="mt-0.5 text-xs text-muted-foreground leading-relaxed">
                  {t.description}
                </p>
              )}
            </div>
            <button
              type="button"
              onClick={() => dismiss(t.id)}
              aria-label="Fermer"
              className="shrink-0 text-subtle-foreground hover:text-foreground transition-colors"
            >
              <IconXCircle size={14} />
            </button>
          </div>
        );
      })}
    </div>
  );
}