'use client';

import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
import { Glow } from '@/ui/Glow';
import { Text } from '@/ui/Text';
import { FooterSection } from '@/ui/FooterSection';
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" />
      
      <NotFoundDiagnostics errorCode={errorCode} />
      
      <Text 
        as="h1"
        size="4xl" 
        weight="bold"
        variant="high"
        uppercase
        block
        align="center"
        style={{ marginTop: '1rem', marginBottom: '2rem' }}
      >
        {title}
      </Text>

      <Text 
        size="xl" 
        variant="med" 
        block
        weight="medium"
        align="center"
        style={{ marginBottom: '3rem' }}
      >
        {message}
      </Text>

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

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