'use client';

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

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 (
    <Stack 
      as="main" 
      minHeight="screen"
      fullWidth
      align="center"
      justify="center"
      bg="bg-deep-graphite"
      position="relative"
      overflow="hidden"
      px={6}
    >
      {/* Background Accents */}
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Card 
        variant="outline"
        rounded="lg" 
        p={8} 
        maxWidth="2xl"
        fullWidth
        position="relative"
        zIndex={10}
        borderColor="border-white"
        className="bg-white/5 backdrop-blur-md"
      >
        <AppErrorBoundaryView 
          title="System Malfunction"
          description="The application encountered an unexpected state. Our telemetry has logged the incident."
        >
          {/* Error Message Summary */}
          <Card 
            variant="outline"
            rounded="md" 
            p={4} 
            fullWidth 
            borderColor="border-white" 
            className="bg-graphite-black/20"
          >
            <Text font="mono" size="sm" color="text-warning-amber" block>
              {error.message || 'Unknown execution error'}
            </Text>
          </Card>

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