respira/src/components/ErrorPopover.tsx

import { forwardRef } from 'react';
import { ExclamationTriangleIcon, InformationCircleIcon } from '@heroicons/react/24/solid';
import { getErrorDetails } from '../utils/errorCodeHelpers';

interface ErrorPopoverProps {
  machineError?: number;
  isPairingError: boolean;
  errorMessage?: string | null;
  pyodideError?: string | null;
}

export const ErrorPopover = forwardRef<HTMLDivElement, ErrorPopoverProps>(
  ({ machineError, isPairingError, errorMessage, pyodideError }, ref) => {
    const errorDetails = getErrorDetails(machineError);
    const isPairingErr = isPairingError;
    const errorMsg = pyodideError || errorMessage || '';
    const isInfo = isPairingErr || errorDetails?.isInformational;

    const bgColor = isInfo
      ? 'bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500'
      : 'bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500';

    const iconColor = isInfo
      ? 'text-info-600 dark:text-info-400'
      : 'text-danger-600 dark:text-danger-400';

    const textColor = isInfo
      ? 'text-info-900 dark:text-info-200'
      : 'text-danger-900 dark:text-danger-200';

    const descColor = isInfo
      ? 'text-info-800 dark:text-info-300'
      : 'text-danger-800 dark:text-danger-300';

    const listColor = isInfo
      ? 'text-info-700 dark:text-info-300'
      : 'text-danger-700 dark:text-danger-300';

    const Icon = isInfo ? InformationCircleIcon : ExclamationTriangleIcon;
    const title = errorDetails?.title || (isPairingErr ? 'Pairing Required' : 'Error');

    return (
      <div
        ref={ref}
        className="absolute top-full mt-2 left-0 w-[600px] z-50 animate-fadeIn"
        role="dialog"
        aria-label="Error details"
      >
        <div className={`${bgColor} border-l-4 p-4 rounded-lg shadow-xl backdrop-blur-sm`}>
          <div className="flex items-start gap-3">
            <Icon className={`w-6 h-6 ${iconColor} flex-shrink-0 mt-0.5`} />
            <div className="flex-1">
              <h3 className={`text-base font-semibold ${textColor} mb-2`}>
                {title}
              </h3>
              <p className={`text-sm ${descColor} mb-3`}>
                {errorDetails?.description || errorMsg}
              </p>
              {errorDetails?.solutions && errorDetails.solutions.length > 0 && (
                <>
                  <h4 className={`text-sm font-semibold ${textColor} mb-2`}>
                    {isInfo ? 'Steps:' : 'How to Fix:'}
                  </h4>
                  <ol className={`list-decimal list-inside text-sm ${listColor} space-y-1.5`}>
                    {errorDetails.solutions.map((solution, index) => (
                      <li key={index} className="pl-2">{solution}</li>
                    ))}
                  </ol>
                </>
              )}
              {machineError !== undefined && !errorDetails?.isInformational && (
                <p className={`text-xs ${descColor} mt-3 font-mono`}>
                  Error Code: 0x{machineError.toString(16).toUpperCase().padStart(2, '0')}
                </p>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
);

ErrorPopover.displayName = 'ErrorPopover';