'use client';

import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { AlertTriangle } from 'lucide-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 (
    <Stack gap={6} align="center" fullWidth>
      {/* Status Indicator */}
      <Stack 
        p={4} 
        rounded="full" 
        bg="bg-warning-amber" 
        {...({ bgOpacity: 0.1 } as any)}
        border 
        borderColor="border-warning-amber"
        align="center"
        justify="center"
      >
        <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
      </Stack>

      {/* Primary Message */}
      <Stack gap={2} align="center">
        <Heading level={1} weight="bold">
          CRITICAL_SYSTEM_FAILURE
        </Heading>
        <Text color="text-gray-400" textAlign="center" maxWidth="md">
          The application engine encountered an unrecoverable state. 
          Telemetry has been dispatched to engineering.
        </Text>
      </Stack>

      {/* Technical Summary */}
      <Card 
        variant="outline"
        rounded="md" 
        p={4} 
        fullWidth 
        borderColor="border-white" 
        className="bg-graphite-black/20"
      >
        <Stack gap={2}>
          <Text font="mono" size="sm" color="text-warning-amber" block>
            STATUS: 500_INTERNAL_SERVER_ERROR
          </Text>
          {message && (
            <Text font="mono" size="xs" color="text-gray-400" block>
              EXCEPTION: {message}
            </Text>
          )}
          {incidentId && (
            <Text font="mono" size="xs" color="text-gray-500" block>
              INCIDENT_ID: {incidentId}
            </Text>
          )}
        </Stack>
      </Card>
    </Stack>
  );
}
