import React, { useEffect } from 'react';
import { cn } from '../lib/utils';

export type NoticeTone = 'info' | 'success' | 'error';

export interface NoticeState {
  id: number;
  message: string;
  tone?: NoticeTone;
}

interface TransientNoticeProps {
  notice: NoticeState | null;
  onDismiss: () => void;
  durationMs?: number;
}

const toneClasses: Record<NoticeTone, string> = {
  info: 'border-cyan-400/30 bg-cyan-950/85 text-cyan-100 shadow-cyan-950/30',
  success: 'border-emerald-400/30 bg-emerald-950/85 text-emerald-100 shadow-emerald-950/30',
  error: 'border-red-400/30 bg-red-950/85 text-red-100 shadow-red-950/30',
};

export function TransientNotice({ notice, onDismiss, durationMs = 3600 }: TransientNoticeProps) {
  useEffect(() => {
    if (!notice) return undefined;
    const timer = window.setTimeout(onDismiss, durationMs);
    return () => window.clearTimeout(timer);
  }, [durationMs, notice, onDismiss]);

  if (!notice) return null;

  const tone = notice.tone || 'info';
  return (
    <div className="pointer-events-none fixed right-6 top-6 z-[80] max-w-sm" aria-live="polite">
      <div
        role="status"
        className={cn(
          'rounded-md border px-4 py-3 text-xs font-medium leading-relaxed shadow-2xl backdrop-blur whitespace-pre-line',
          toneClasses[tone],
        )}
      >
        {notice.message}
      </div>
    </div>
  );
}
