'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 { 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} />
      
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', paddingBottom: '1rem', borderBottom: '1px solid var(--ui-color-border-default)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
          <Icon icon={AlertTriangle} size={5} intent="warning" />
          <Heading level={2} weight="bold">
            System Fault Detected
          </Heading>
        </div>
        <Text font="mono" size="xs" variant="low" uppercase>
          Status: Critical
        </Text>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
        {/* Fault Description */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <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} />
        </div>

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

      {/* Footer / Metadata */}
      <div style={{ marginTop: '2rem', paddingTop: '1rem', 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>
      </div>
    </ErrorPageContainer>
  );
}

/**
 * SystemStatusPanel
 * 
 * Displays technical fault details in an instrument-grade panel.
 */
function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  return (
    <Card variant="outline">
      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
          <Icon icon={Terminal} size={3} intent="low" />
          <Text font="mono" size="xs" variant="low" uppercase>
            Fault Log
          </Text>
        </div>
        <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>
        )}
      </div>
    </Card>
  );
}

/**
 * RecoveryActions
 * 
 * Clear, instrument-grade recovery options.
 */
function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: '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>
    </div>
  );
}