gridpilot.gg/apps/website/components/errors/GlobalErrorScreen.tsx

'use client';

import React from 'react';
import { Glow } from '@/ui/Glow';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { AlertTriangle, RefreshCw, Home, Terminal } from 'lucide-react';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Card } from '@/ui/Card';

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

/**
 * GlobalErrorScreen
 * 
 * A strong, minimal "system fault" view for the root global error boundary.
 * Instrument-grade UI following the "Precision Racing Minimal" theme.
 */
export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenProps) {
  return (
    <Stack 
      as="main" 
      minHeight="screen"
      fullWidth
      align="center"
      justify="center"
      bg="bg-base-black"
      position="relative"
      overflow="hidden"
      px={6}
    >
      {/* Background Accents - Subtle telemetry vibe */}
      <Glow color="primary" size="xl" position="center" opacity={0.03} />
      
      <Card 
        variant="outline"
        rounded="none" 
        p={0} 
        maxWidth="2xl"
        fullWidth
        position="relative"
        zIndex={10}
        borderColor="border-white"
        className="bg-graphite-black/10"
      >
        {/* System Status Header */}
        <Stack 
          borderBottom 
          borderColor="border-white" 
          px={6} 
          py={4}
          direction="row"
          align="center"
          justify="between"
          className="bg-white/5"
        >
          <Stack direction="row" gap={3} align="center">
            <Icon icon={AlertTriangle} size={5} color="var(--warning-amber)" />
            <Heading level={2} weight="bold">
              <Text uppercase letterSpacing="widest" size="sm">
                System Fault Detected
              </Text>
            </Heading>
          </Stack>
          <Text font="mono" size="xs" color="text-gray-500" uppercase>
            Status: Critical
          </Text>
        </Stack>

        <Stack p={8}>
          <Stack gap={8}>
            {/* Fault Description */}
            <Stack gap={4}>
              <Text color="text-gray-400" size="base" leading="relaxed">
                The application kernel encountered an unrecoverable execution error. 
                Telemetry has been captured for diagnostic review.
              </Text>

              <SystemStatusPanel error={error} />
            </Stack>

            {/* Recovery Actions */}
            <RecoveryActions onRetry={reset} onHome={onHome} />
          </Stack>
        </Stack>

        {/* Footer / Metadata */}
        <Stack 
          borderTop 
          borderColor="border-white" 
          px={6} 
          py={3}
          direction="row"
          justify="end"
          className="bg-white/5"
        >
          <Text font="mono" size="xs" color="text-gray-600">
            GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
          </Text>
        </Stack>
      </Card>
    </Stack>
  );
}

/**
 * SystemStatusPanel
 * 
 * Displays technical fault details in an instrument-grade panel.
 */
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  return (
    <Card 
      variant="outline"
      rounded="none" 
      p={4} 
      fullWidth 
      borderColor="border-white" 
      className="bg-graphite-black/20"
    >
      <Stack gap={3}>
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={Terminal} size={3} color="var(--gray-500)" />
          <Text font="mono" size="xs" color="text-gray-500" uppercase letterSpacing="wider">
            Fault Log
          </Text>
        </Stack>
        <Text font="mono" size="sm" color="text-warning-amber" block>
          {error.message || 'Unknown execution fault'}
        </Text>
        {error.digest && (
          <Text font="mono" size="xs" color="text-gray-600" block>
            Digest: {error.digest}
          </Text>
        )}
      </Stack>
    </Card>
  );
}

/**
 * RecoveryActions
 * 
 * Clear, instrument-grade recovery options.
 */
function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
  return (
    <Stack 
      direction="row"
      wrap
      align="center" 
      gap={4} 
      fullWidth
    >
      <Button 
        variant="primary" 
        onClick={onRetry}
        icon={<Icon icon={RefreshCw} size={4} />}
        rounded="none"
        px={8}
      >
        Reboot Session
      </Button>
      <Button 
        variant="secondary" 
        onClick={onHome}
        icon={<Icon icon={Home} size={4} />}
        rounded="none"
        px={8}
      >
        Return to Pits
      </Button>
    </Stack>
  );
}