import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

import { type CrashEntry, subscribeCrashes } from '../lib/crashRecovery';
import { AlertIcon, XIcon } from './icons';

const VISIBLE_MS = 7_000;
const MAX_STACK = 3;

// Bottom-right stack of toasts for uncaught errors. Auto-dismisses each
// entry after VISIBLE_MS. The user can X-out earlier.
export function CrashToast() {
  const [entries, setEntries] = useState<CrashEntry[]>([]);

  useEffect(
    () =>
      subscribeCrashes((entry) => {
        setEntries((prev) => [...prev.slice(-(MAX_STACK - 1)), entry]);
      }),
    [],
  );

  useEffect(() => {
    if (entries.length === 0) return;
    const latest = entries[entries.length - 1]!;
    const id = window.setTimeout(() => {
      setEntries((prev) => prev.filter((e) => e.id !== latest.id));
    }, VISIBLE_MS);
    return () => window.clearTimeout(id);
  }, [entries]);

  if (entries.length === 0) return null;

  return createPortal(
    <div
      role="region"
      aria-label="Fehler"
      className="pointer-events-none fixed bottom-4 right-4 z-[100] flex flex-col gap-2"
    >
      {entries.map((entry) => (
        <div
          key={entry.id}
          role="alert"
          className="pointer-events-auto flex max-w-sm items-start gap-2 rounded-lg border border-rose-500/40 bg-rose-500/10 p-3 text-sm text-rose-700 shadow-xl backdrop-blur-sm dark:text-rose-100"
        >
          <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
          <div className="min-w-0 flex-1">
            <p className="text-xs font-semibold uppercase tracking-wider">
              {entry.source === 'promise' ? 'Promise-Fehler' : 'Unerwarteter Fehler'}
            </p>
            <p className="mt-0.5 break-words text-xs">{entry.message}</p>
          </div>
          <button
            type="button"
            aria-label="Schließen"
            onClick={() =>
              setEntries((prev) => prev.filter((e) => e.id !== entry.id))
            }
            className="shrink-0 cursor-pointer rounded-md p-1 text-rose-700 transition hover:bg-rose-500/20 dark:text-rose-100"
          >
            <XIcon className="h-3 w-3" />
          </button>
        </div>
      ))}
    </div>,
    document.body,
  );
}