'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 { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { AlertTriangle, RefreshCw, Home, Terminal } from 'lucide-react';
import { Button } from '@/ui/Button';

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 (
    <Box 
      as="main" 
      minHeight="screen"
      fullWidth
      display="flex"
      alignItems="center"
      justifyContent="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} />
      
      <Surface 
        variant="dark" 
        border 
        rounded="none" 
        padding={0} 
        maxWidth="2xl"
        fullWidth
        position="relative"
        zIndex={10}
        borderColor="border-white"
        bgOpacity={0.1}
      >
        {/* System Status Header */}
        <Box 
          borderBottom 
          borderColor="border-white" 
          bgOpacity={0.05} 
          px={6} 
          py={4}
          display="flex"
          alignItems="center"
          justifyContent="space-between"
        >
          <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>
        </Box>

        <Box 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>
        </Box>

        {/* Footer / Metadata */}
        <Box 
          borderTop 
          borderColor="border-white" 
          bgOpacity={0.05} 
          px={6} 
          py={3}
          display="flex"
          justifyContent="end"
        >
          <Text font="mono" size="xs" color="text-gray-600">
            GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
          </Text>
        </Box>
      </Surface>
    </Box>
  );
}

/**
 * SystemStatusPanel
 * 
 * Displays technical fault details in an instrument-grade panel.
 */
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  return (
    <Surface 
      variant="dark" 
      rounded="none" 
      padding={4} 
      fullWidth 
      border 
      borderColor="border-white" 
      bgOpacity={0.2}
    >
      <Stack gap={3}>
        <Box display="flex" alignItems="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>
        </Box>
        <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>
    </Surface>
  );
}

/**
 * RecoveryActions
 * 
 * Clear, instrument-grade recovery options.
 */
function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
  return (
    <Box 
      display="flex" 
      flexWrap="wrap" 
      alignItems="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>
    </Box>
  );
}