'use client';

import * as React from 'react';
import { X } from 'lucide-react';
import { cn } from '@/lib/utils';

type Toast = { id: string; title: string; description?: string; variant?: 'default' | 'destructive' };

const ToastContext = React.createContext<{
  toasts: Toast[];
  toast: (t: Omit<Toast, 'id'>) => void;
  dismiss: (id: string) => void;
} | null>(null);

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

  const toast = React.useCallback((t: Omit<Toast, 'id'>) => {
    const id = Math.random().toString(36).slice(2);
    setToasts((prev) => [...prev, { ...t, id }]);
    window.setTimeout(() => {
      setToasts((prev) => prev.filter((x) => x.id !== id));
    }, 4500);
  }, []);

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

  return (
    <ToastContext.Provider value={{ toasts, toast, dismiss }}>
      {children}
      <div className="pointer-events-none fixed bottom-4 right-4 z-[100] flex max-w-sm flex-col gap-2">
        {toasts.map((t) => (
          <div
            key={t.id}
            className={cn(
              'pointer-events-auto flex items-start gap-3 rounded-xl border bg-white p-4 shadow-lg',
              t.variant === 'destructive' ? 'border-red-200 bg-red-50' : 'border-slate-200',
            )}
            role="status"
          >
            <div className="min-w-0 flex-1">
              <p className={cn('text-sm font-semibold', t.variant === 'destructive' ? 'text-red-900' : 'text-slate-900')}>
                {t.title}
              </p>
              {t.description ? (
                <p className={cn('mt-0.5 text-xs', t.variant === 'destructive' ? 'text-red-700' : 'text-slate-600')}>
                  {t.description}
                </p>
              ) : null}
            </div>
            <button
              type="button"
              onClick={() => dismiss(t.id)}
              className="rounded-md p-0.5 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
              aria-label="Kapat"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        ))}
      </div>
    </ToastContext.Provider>
  );
}

export function useToast() {
  const ctx = React.useContext(ToastContext);
  if (!ctx) {
    return {
      toast: (t: Omit<Toast, 'id'>) => {
        if (typeof window !== 'undefined') {
          // eslint-disable-next-line no-console
          console.warn('[toast]', t.title, t.description);
        }
      },
      dismiss: () => {},
    };
  }
  return ctx;
}