'use client';

import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
import { Glow } from '@/ui/Glow';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { NotFoundActions } from './NotFoundActions';
import { NotFoundDiagnostics } from './NotFoundDiagnostics';
import { NotFoundHelpLinks } from './NotFoundHelpLinks';
import React from 'react';

interface NotFoundScreenProps {
  errorCode: string;
  title: string;
  message: string;
  actionLabel: string;
  onActionClick: () => void;
}

/**
 * NotFoundScreen
 * 
 * App-specific semantic component for 404 states.
 * Encapsulates the visual representation of the "Off Track" state.
 * Redesigned for "Precision Racing Minimal" theme.
 */
export function NotFoundScreen({ 
  errorCode, 
  title, 
  message, 
  actionLabel, 
  onActionClick 
}: NotFoundScreenProps) {
  const helpLinks = [
    { label: 'Support', href: '/support' },
    { label: 'Status', href: '/status' },
    { label: 'Documentation', href: '/docs' },
  ];

  return (
    <ErrorPageContainer size="lg" variant="glass">
      {/* Background Glow Accent */}
      <Glow color="primary" size="xl" opacity={0.1} position="center" />
      
      <Group direction="column" align="center" gap={8} fullWidth>
        <NotFoundDiagnostics errorCode={errorCode} />
        
        <Group direction="column" align="center" gap={4} fullWidth>
          <Text 
            as="h1"
            size="4xl" 
            weight="bold"
            variant="high"
            uppercase
            block
            align="center"
          >
            {title}
          </Text>

          <Text 
            size="xl" 
            variant="med" 
            block
            weight="medium"
            align="center"
          >
            {message}
          </Text>
        </Group>

        <NotFoundActions 
          primaryLabel={actionLabel} 
          onPrimaryClick={onActionClick} 
        />

        <NotFoundHelpLinks links={helpLinks} />
      </Group>
    </ErrorPageContainer>
  );
}
