/**
 * LiveToast Component
 * Enterprise FinTech Platform — Real-Time Communication System
 *
 * Displays toast notifications for real-time events (admin broadcasts,
 * server maintenance, wallet updates, order matches, etc.).
 * Appears at the bottom-right of the screen.
 */

'use client';

import { useState, useCallback, useEffect } from 'react';
import { X, AlertTriangle, Info, AlertCircle, Megaphone, Wrench } from 'lucide-react';
import { useAdminBroadcast, useServerMaintenance, useAdminAnnouncement } from '@/hooks/useSocket';
import type { AdminBroadcastPayload, AdminAnnouncementPayload, ServerMaintenancePayload } from '@/types/socket.types';

// ===================================================================
// TYPES
// ===================================================================

type ToastType = 'broadcast' | 'announcement' | 'maintenance';

interface Toast {
  id: string;
  type: ToastType;
  title: string;
  message: string;
  severity: 'info' | 'warning' | 'important' | 'critical';
  timestamp: string;
}

// ===================================================================
// COMPONENT
// ===================================================================

export function LiveToast() {
  const [toasts, setToasts] = useState<Toast[]>([]);

  const addToast = useCallback((toast: Toast) => {
    setToasts((prev) => {
      const updated = [toast, ...prev].slice(0, 5); // Max 5 toasts
      return updated;
    });

    // Auto-remove after 10 seconds
    setTimeout(() => {
      setToasts((prev) => prev.filter((t) => t.id !== toast.id));
    }, 10000);
  }, []);

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

  // Listen for admin broadcasts
  useAdminBroadcast(
    useCallback(
      (payload: AdminBroadcastPayload) => {
        addToast({
          id: `broadcast-${payload.id}`,
          type: 'broadcast',
          title: 'ADMIN BROADCAST',
          message: payload.title,
          severity: payload.priority.toLowerCase() as Toast['severity'],
          timestamp: payload.createdAt,
        });
      },
      [addToast],
    ),
  );

  // Listen for announcements
  useAdminAnnouncement(
    useCallback(
      (payload: AdminAnnouncementPayload) => {
        addToast({
          id: `announcement-${payload.id}`,
          type: 'announcement',
          title: 'ANNOUNCEMENT',
          message: payload.title,
          severity: payload.priority.toLowerCase() as Toast['severity'],
          timestamp: payload.publishedAt,
        });
      },
      [addToast],
    ),
  );

  // Listen for server maintenance
  useServerMaintenance(
    useCallback(
      (payload: ServerMaintenancePayload) => {
        addToast({
          id: `maintenance-${Date.now()}`,
          type: 'maintenance',
          title: 'SERVER MAINTENANCE',
          message: payload.message,
          severity: 'critical',
          timestamp: payload.startTime,
        });
      },
      [addToast],
    ),
  );

  if (toasts.length === 0) return null;

  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className={`rounded-lg border px-4 py-3 shadow-lg backdrop-blur-sm transition-all duration-300 animate-in slide-in-from-right ${
            toast.severity === 'critical' || toast.severity === 'important'
              ? 'border-red-500/30 bg-red-500/10 text-red-200'
              : toast.severity === 'warning'
                ? 'border-amber-500/30 bg-amber-500/10 text-amber-200'
                : 'border-blue-500/30 bg-blue-500/10 text-blue-200'
          }`}
        >
          <div className="flex items-start gap-3">
            <div className="mt-0.5">
              {toast.severity === 'critical' ? (
                <AlertCircle className="h-4 w-4 text-red-400" />
              ) : toast.severity === 'warning' ? (
                <AlertTriangle className="h-4 w-4 text-amber-400" />
              ) : toast.type === 'maintenance' ? (
                <Wrench className="h-4 w-4 text-slate-400" />
              ) : (
                <Megaphone className="h-4 w-4 text-blue-400" />
              )}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs font-semibold uppercase tracking-wider">{toast.title}</p>
              <p className="text-sm mt-1">{toast.message}</p>
            </div>
            <button
              onClick={() => removeToast(toast.id)}
              className="shrink-0 rounded p-0.5 text-white/40 hover:text-white/80 transition-colors"
            >
              <X className="h-3.5 w-3.5" />
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}