'use client';

import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { AlertTriangle } from 'lucide-react';
import React from 'react';

interface ServerErrorPanelProps {
  message?: string;
  incidentId?: string;
}

/**
 * ServerErrorPanel
 * 
 * Displays the primary error information in an "instrument-grade" style.
 * Part of the 500 route redesign.
 */
export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
      {/* Status Indicator */}
      <div 
        style={{ 
          padding: '1rem', 
          borderRadius: '9999px', 
          backgroundColor: 'rgba(255, 190, 77, 0.1)', 
          border: '1px solid rgba(255, 190, 77, 0.3)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <Icon icon={AlertTriangle} size={8} intent="warning" />
      </div>

      {/* Primary Message */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
        <Heading level={1} weight="bold">
          CRITICAL_SYSTEM_FAILURE
        </Heading>
        <Text variant="low" align="center" style={{ maxWidth: '32rem' }}>
          The application engine encountered an unrecoverable state. 
          Telemetry has been dispatched to engineering.
        </Text>
      </div>

      {/* Technical Summary */}
      <div style={{ width: '100%' }}>
        <Card variant="outline">
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <Text font="mono" size="sm" variant="warning" block>
              STATUS: 500_INTERNAL_SERVER_ERROR
            </Text>
            {message && (
              <Text font="mono" size="xs" variant="low" block>
                EXCEPTION: {message}
              </Text>
            )}
            {incidentId && (
              <Text font="mono" size="xs" variant="low" block>
                INCIDENT_ID: {incidentId}
              </Text>
            )}
          </div>
        </Card>
      </div>
    </div>
  );
}