'use client';

import type React from 'react';

import { AlertTriangle, Check, Info } from 'lucide-react';

import {
  Toast,
  ToastClose,
  ToastDescription,
  type ToastProps,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from '@/components/ui/toast';
import { useToast } from '@/hooks/use-toast';
import { cn } from '@/lib/utils';

type ToastStatus = 'default' | 'success' | 'fail';

const statusIcons = {
  default: Info,
  success: Check,
  fail: AlertTriangle,
} as const;

const statusIconClasses: Record<ToastStatus, string> = {
  default: 'border-brand-primary/12 bg-surface-paper text-brand-primary/60',
  success: 'border-emerald-700/15 bg-emerald-50 text-emerald-700',
  fail: 'border-red-700/15 bg-red-50 text-red-700',
};

const getToastStatus = (variant: ToastProps['variant']): ToastStatus => {
  if (variant === 'success') return 'success';
  if (variant === 'destructive' || variant === 'fail') return 'fail';
  return 'default';
};

type ToastContentProps = {
  title?: React.ReactNode;
  description?: React.ReactNode;
  action?: React.ReactNode;
  variant?: ToastProps['variant'];
};

function ToastContent({ title, description, action, variant }: ToastContentProps) {
  const status = getToastStatus(variant);
  const Icon = statusIcons[status];

  return (
    <>
      <div
        className={cn(
          'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border',
          statusIconClasses[status]
        )}
        aria-hidden="true"
      >
        <Icon className="h-4 w-4" />
      </div>
      <div className="min-w-0 flex-1">
        {title && <ToastTitle>{title}</ToastTitle>}
        {description && <ToastDescription>{description}</ToastDescription>}
      </div>
      {action && <div className="pt-0.5">{action}</div>}
      <ToastClose />
    </>
  );
}

export function Toaster() {
  const { toasts } = useToast();

  return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, variant, ...props }) {
        return (
          <Toast key={id} variant={variant} {...props}>
            <ToastContent
              title={title}
              description={description}
              action={action}
              variant={variant}
            />
          </Toast>
        );
      })}
      <ToastViewport />
    </ToastProvider>
  );
}