'use client';

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

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 (
    <ErrorPageContainer size="lg" variant="glass">
      {/* Background Accents - Subtle telemetry vibe */}
      <Glow color="primary" size="xl" position="center" opacity={0.03} />
      
      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-default)">
        <Group gap={3}>
          <Icon icon={AlertTriangle} size={5} intent="warning" />
          <Heading level={2} weight="bold">
            System Fault Detected
          </Heading>
        </Group>
        <Text font="mono" size="xs" variant="low" uppercase>
          Status: Critical
        </Text>
      </Box>

      <Stack gap={8}>
        {/* Fault Description */}
        <Stack gap={4}>
          <Text variant="med" 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>

      {/* Footer / Metadata */}
      <Box marginTop={8} paddingTop={4} borderTop="1px solid var(--ui-color-border-default)" textAlign="right">
        <Text font="mono" size="xs" variant="low">
          GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
        </Text>
      </Box>
    </ErrorPageContainer>
  );
}

/**
 * SystemStatusPanel
 * 
 * Displays technical fault details in an instrument-grade panel.
 */
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  return (
    <Card variant="outline">
      <Stack gap={3}>
        <Group gap={2}>
          <Icon icon={Terminal} size={3} intent="low" />
          <Text font="mono" size="xs" variant="low" uppercase>
            Fault Log
          </Text>
        </Group>
        <Text font="mono" size="sm" variant="warning" block>
          {error.message || 'Unknown execution fault'}
        </Text>
        {error.digest && (
          <Text font="mono" size="xs" variant="low" block>
            Digest: {error.digest}
          </Text>
        )}
      </Stack>
    </Card>
  );
}

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