'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Glow } from '@/ui/Glow';
import { Text } from '@/ui/Text';
import { AppErrorBoundaryView } from './AppErrorBoundaryView';
import { ErrorRecoveryActions } from './ErrorRecoveryActions';
import { ErrorDetailsBlock } from './ErrorDetailsBlock';

interface ErrorScreenProps {
  error: Error & { digest?: string };
  reset: () => void;
  onHome: () => void;
}

/**
 * ErrorScreen
 * 
 * Semantic component for the root-level error boundary.
 * Follows "Precision Racing Minimal" theme.
 */
export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
  return (
    <Box 
      as="main" 
      minHeight="screen"
      fullWidth
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg-deep-graphite"
      position="relative"
      overflow="hidden"
      px={6}
    >
      {/* Background Accents */}
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Surface 
        variant="glass" 
        border 
        rounded="lg" 
        padding={8} 
        maxWidth="2xl"
        fullWidth
        position="relative"
        zIndex={10}
        shadow="xl"
        borderColor="border-white"
        bgOpacity={0.05}
      >
        <AppErrorBoundaryView 
          title="System Malfunction"
          description="The application encountered an unexpected state. Our telemetry has logged the incident."
        >
          {/* Error Message Summary */}
          <Surface 
            variant="dark" 
            rounded="md" 
            padding={4} 
            fullWidth 
            border 
            borderColor="border-white" 
            bgOpacity={0.2}
          >
            <Text font="mono" size="sm" color="text-warning-amber" block>
              {error.message || 'Unknown execution error'}
            </Text>
          </Surface>

          <ErrorRecoveryActions onRetry={reset} onHome={onHome} />
          
          <ErrorDetailsBlock error={error} />
        </AppErrorBoundaryView>
      </Surface>
    </Box>
  );
}