import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";

import { Alert, Button, GlobalStyles, Snackbar } from "@mui/material";

type Severity = "success" | "info" | "warning" | "error";

type Toast = {
  open: boolean;
  message: string;
  severity: Severity;
  actionLabel?: string;
  onAction?: () => void;
};

type ToastApi = {
  toast: (
    message: string,
    severity?: Severity,
    action?: { label: string; onClick: () => void },
  ) => void;
};

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

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [t, setT] = useState<Toast>({ open: false, message: "", severity: "info" });
  const [element, setElement] = useState<HTMLDivElement | null>(null);
  const [clearance, setClearance] = useState(0);

  useEffect(() => {
    if (!element) { setClearance(0); return; }
    // Reserve the actual wrapped message height, bottom offset and a 24px gap.
    const measure = () => setClearance(Math.ceil(element.getBoundingClientRect().height) + 48);
    measure();
    if (typeof ResizeObserver === "undefined") return;
    const observer = new ResizeObserver(measure);
    observer.observe(element);
    return () => observer.disconnect();
  }, [element]);

  const toast = useCallback(
    (message: string, severity: Severity = "info", action?: { label: string; onClick: () => void }) => {
      setT({
        open: true,
        message,
        severity,
        actionLabel: action?.label,
        onAction: action?.onClick,
      });
    },
    [],
  );

  const value = useMemo(() => ({ toast }), [toast]);

  return (
    <ToastContext.Provider value={value}>
      <GlobalStyles styles={{
        ":root": { "--app-toast-clearance": `${clearance}px` },
        // Native focus/scrollIntoView must also leave the feedback lane clear.
        html: { scrollPaddingBottom: "calc(max(96px, var(--app-toast-clearance, 0px)) + env(safe-area-inset-bottom, 0px))" },
      }} />
      {children}
      <Snackbar
        ref={setElement}
        open={t.open}
        autoHideDuration={3500}
        onClose={() => setT((p) => ({ ...p, open: false }))}
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
        sx={{ bottom: { xs: "calc(8px + env(safe-area-inset-bottom, 0px))", sm: "calc(24px + env(safe-area-inset-bottom, 0px))" } }}
      >
        <Alert
          onClose={() => setT((p) => ({ ...p, open: false }))}
          severity={t.severity}
          variant="filled"
          sx={{ maxWidth: 420, borderRadius: 3, fontWeight: 600 }}
          action={
            t.actionLabel && t.onAction ? (
              <Button
                color="inherit"
                size="small"
                onClick={() => {
                  setT((p) => ({ ...p, open: false }));
                  t.onAction?.();
                }}
              >
                {t.actionLabel}
              </Button>
            ) : undefined
          }
        >
          {t.message}
        </Alert>
      </Snackbar>
    </ToastContext.Provider>
  );
}

export function useToast(): ToastApi {
  const v = useContext(ToastContext);
  if (!v) throw new Error("useToast must be used within ToastProvider");
  return v;
}

export function useOptionalToast() {
  return useContext(ToastContext);
}