'use client';

import { Toast as UIToast } from '@/ui/Toast';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { AlertCircle, CheckCircle, Info } from 'lucide-react';
import React, { createContext, useContext, useState } from 'react';

interface Toast {
  id: string;
  message: string;
  variant: 'success' | 'error' | 'info';
}

interface ToastContextType {
  showToast: (message: string, variant: 'success' | 'error' | 'info') => void;
}

const ToastContext = createContext<ToastContextType | undefined>(undefined);

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

  const showToast = (message: string, variant: 'success' | 'error' | 'info') => {
    const id = Math.random().toString(36).substring(2, 9);
    setToasts((prev) => [...prev, { id, message, variant }]);
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== id));
    }, 5000);
  };

  return (
    <ToastContext.Provider value={{ showToast }}>
      {children}
      <Box 
        position="fixed" 
        bottom={6} 
        right={6} 
        zIndex={100} 
        display="flex" 
        flexDirection="col" 
        gap={3} 
        style={{ pointerEvents: 'none' }}
      >
        {toasts.map((toast) => (
          <Box key={toast.id} style={{ pointerEvents: 'auto' }}>
            <ToastItem
              toast={toast}
              onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
            />
          </Box>
        ))}
      </Box>
    </ToastContext.Provider>
  );
}

export function useToast() {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error('useToast must be used within a ToastProvider');
  }
  return context;
}

function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
  const variants = {
    success: {
      intent: 'success' as const,
      icon: CheckCircle,
    },
    error: {
      intent: 'critical' as const,
      icon: AlertCircle,
    },
    info: {
      intent: 'primary' as const,
      icon: Info,
    },
  };

  const config = variants[toast.variant];

  return (
    <UIToast
      onClose={onClose}
      intent={config.intent}
      icon={<Icon icon={config.icon} size={5} intent={config.intent} />}
      isVisible={true}
      isExiting={false}
    >
      <Text size="sm" variant="high">
        {toast.message}
      </Text>
    </UIToast>
  );
}