"use client";

import React from "react";
import { FeatherCheck, FeatherInfo } from "@subframe/core";

/**
 * Minimale Rückmeldung für Demo-Aktionen (Export, Speichern, Teilen).
 *
 * Im Prototyp passiert dahinter nichts, der Toast macht aber sichtbar,
 * dass der Klick registriert wurde, statt dass der Button "tot" wirkt.
 * In der echten Software durch die vorhandene Toast-Komponente ersetzen.
 */

interface ToastContextValue {
  zeigeToast: (text: string, detail?: string) => void;
}

const ToastContext = React.createContext<ToastContextValue | null>(null);

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toast, setToast] = React.useState<{ text: string; detail?: string } | null>(null);
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  const zeigeToast = React.useCallback((text: string, detail?: string) => {
    setToast({ text, detail });
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => setToast(null), 2600);
  }, []);

  React.useEffect(() => () => {
    if (timer.current) clearTimeout(timer.current);
  }, []);

  return (
    <ToastContext.Provider value={{ zeigeToast }}>
      {children}
      {toast ? (
        <div
          role="status"
          aria-live="polite"
          className="dv-no-print fixed bottom-6 right-6 z-[200] flex max-w-sm items-start gap-3 rounded-lg border border-solid border-border-default bg-white px-4 py-3 shadow-lg"
        >
          <span className="mt-0.5 flex h-7 w-7 flex-none items-center justify-center rounded-full bg-[#defbe6] text-[#198038]">
            <FeatherCheck className="text-[15px]" />
          </span>
          <div className="flex flex-col gap-0.5">
            <span className="text-[13px] font-semibold text-text-neutral-primary">{toast.text}</span>
            {toast.detail ? (
              <span className="flex items-center gap-1.5 text-[12px] text-text-neutral-tertiary">
                <FeatherInfo className="text-[12px]" />
                {toast.detail}
              </span>
            ) : null}
          </div>
        </div>
      ) : null}
    </ToastContext.Provider>
  );
}

export function useToast(): ToastContextValue {
  const ctx = React.useContext(ToastContext);
  if (!ctx) throw new Error("useToast muss innerhalb von <ToastProvider> verwendet werden");
  return ctx;
}