'use client';

import { Card } from '@/ui/Card';
import { Glow } from '@/ui/Glow';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
import { AppErrorBoundaryView } from './AppErrorBoundaryView';
import { ErrorDetailsBlock } from './ErrorDetailsBlock';
import { ErrorRecoveryActions } from './ErrorRecoveryActions';
import React from 'react';

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 (
    <ErrorPageContainer size="lg" variant="glass">
      {/* Background Accents */}
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <AppErrorBoundaryView 
        title="System Malfunction"
        description="The application encountered an unexpected state. Our telemetry has logged the incident."
      >
        {/* Error Message Summary */}
        <Stack fullWidth marginBottom={6}>
          <Card variant="outline">
            <Text font="mono" size="sm" variant="warning" block>
              {error.message || 'Unknown execution error'}
            </Text>
          </Card>
        </Stack>

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