import { AlertFilled, ClockCircleOutlined } from '@ant-design/icons';
import { Typography } from 'antd';
import { createRoot } from 'react-dom/client';

const { Text } = Typography;

interface SosOverlayContentProps {
  shipName?: string;
  reason?: string;
  time?: string;
}

const SosOverlayContent = ({
  shipName,
  reason,
  time,
}: SosOverlayContentProps) => {
  return (
    <div
      style={{
        background: 'rgba(255, 255, 255, 0.95)',
        border: '2px solid #ff4d4f',
        borderRadius: '8px',
        padding: '8px 12px',
        minWidth: '180px',
        boxShadow: '0 4px 12px rgba(255, 77, 79, 0.3)',
        animation: 'pulse 2s infinite',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '6px',
          marginBottom: '4px',
        }}
      >
        <AlertFilled style={{ color: '#ff4d4f', fontSize: '16px' }} />
        <Text strong style={{ color: '#ff4d4f', fontSize: '14px' }}>
          SOS CẢNH BÁO
        </Text>
      </div>
      {shipName && (
        <div style={{ marginBottom: '2px' }}>
          <Text style={{ fontSize: '12px' }}>
            <Text strong>Tàu:</Text> {shipName}
          </Text>
        </div>
      )}
      {reason && (
        <div style={{ marginBottom: '2px' }}>
          <Text style={{ fontSize: '12px' }}>
            <Text strong>Lý do:</Text> {reason}
          </Text>
        </div>
      )}
      {time && (
        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
          <ClockCircleOutlined style={{ fontSize: '12px', color: '#999' }} />
          <Text style={{ fontSize: '11px', color: '#666' }}>{time}</Text>
        </div>
      )}
      <style>{`
        @keyframes pulse {
          0%, 100% {
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
          }
          50% {
            box-shadow: 0 4px 20px rgba(255, 77, 79, 0.6);
          }
        }
      `}</style>
    </div>
  );
};

/**
 * Render SOS Overlay vào một HTML element
 * @param element - HTML element target
 * @param props - Props cho SosOverlayContent
 * @returns Hàm cleanup để unmount React root
 */
export function renderSosOverlay(
  element: HTMLElement,
  props: SosOverlayContentProps,
): () => void {
  const root = createRoot(element);
  root.render(<SosOverlayContent {...props} />);

  return () => {
    root.unmount();
  };
}

export default SosOverlayContent;
