'use client';

import React, { createContext, useContext, useCallback } from 'react';
import toastHelper, { Toaster } from 'react-hot-toast';

export type ToastType = 'success' | 'warning' | 'info' | 'error';

export interface ToastItem {
  id: string;
  type: ToastType;
  title?: string;
  message: string;
  duration?: number;
}

interface ToastContextType {
  toasts: ToastItem[];
  showToast: (message: string, type?: ToastType, title?: string, duration?: number) => void;
  removeToast: (id: string) => void;
  success: (message: string, title?: string) => void;
  warning: (message: string, title?: string) => void;
  info: (message: string, title?: string) => void;
  error: (message: string, title?: string) => void;
}

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

const triggerToast = (message: string, type: ToastType = 'info', title?: string, duration = 4000) => {
  const displayMsg = title ? `${title}: ${message}` : message;

  switch (type) {
    case 'success':
      toastHelper.success(displayMsg, {
        duration,
        style: {
          background: '#059669',
          color: '#ffffff',
          fontWeight: '600',
          borderRadius: '12px',
          padding: '12px 16px',
          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.3)',
        },
        iconTheme: {
          primary: '#ffffff',
          secondary: '#059669',
        },
      });
      break;

    case 'error':
      toastHelper.error(displayMsg, {
        duration,
        style: {
          background: '#dc2626',
          color: '#ffffff',
          fontWeight: '600',
          borderRadius: '12px',
          padding: '12px 16px',
          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.3)',
        },
        iconTheme: {
          primary: '#ffffff',
          secondary: '#dc2626',
        },
      });
      break;

    case 'warning':
      toastHelper(displayMsg, {
        duration,
        icon: '⚠️',
        style: {
          background: '#d97706',
          color: '#ffffff',
          fontWeight: '600',
          borderRadius: '12px',
          padding: '12px 16px',
          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.3)',
        },
      });
      break;

    case 'info':
    default:
      toastHelper(displayMsg, {
        duration,
        icon: 'ℹ️',
        style: {
          background: '#2563eb',
          color: '#ffffff',
          fontWeight: '600',
          borderRadius: '12px',
          padding: '12px 16px',
          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.3)',
        },
      });
      break;
  }
};

export const toast = {
  show: (message: string, type: ToastType = 'info', title?: string) => triggerToast(message, type, title),
  success: (message: string, title?: string) => triggerToast(message, 'success', title),
  warning: (message: string, title?: string) => triggerToast(message, 'warning', title),
  info: (message: string, title?: string) => triggerToast(message, 'info', title),
  error: (message: string, title?: string) => triggerToast(message, 'error', title),
};

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const showToast = useCallback((message: string, type: ToastType = 'info', title?: string, duration = 4000) => {
    triggerToast(message, type, title, duration);
  }, []);

  const removeToast = useCallback((id: string) => {
    toastHelper.dismiss(id);
  }, []);

  const success = useCallback((msg: string, title?: string) => triggerToast(msg, 'success', title), []);
  const warning = useCallback((msg: string, title?: string) => triggerToast(msg, 'warning', title), []);
  const info = useCallback((msg: string, title?: string) => triggerToast(msg, 'info', title), []);
  const error = useCallback((msg: string, title?: string) => triggerToast(msg, 'error', title), []);

  return (
    <ToastContext.Provider value={{ toasts: [], showToast, removeToast, success, warning, info, error }}>
      {children}
      <Toaster
        position="top-right"
        reverseOrder={false}
        gutter={10}
        containerStyle={{
          zIndex: 999999,
        }}
      />
    </ToastContext.Provider>
  );
}

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