'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Glow } from '@/ui/Glow';
import { NotFoundActions } from './NotFoundActions';
import { NotFoundHelpLinks } from './NotFoundHelpLinks';
import { NotFoundDiagnostics } from './NotFoundDiagnostics';

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 (
    <Box 
      as="main" 
      minHeight="100vh" 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      bg="graphite-black" 
      position="relative"
      overflow="hidden"
    >
      {/* Background Glow Accent */}
      <Glow color="primary" size="xl" opacity={0.1} position="center" />
      
      <Surface 
        variant="glass" 
        border 
        padding={12} 
        rounded="none" 
        maxWidth="2xl"
        fullWidth
        mx={6}
        position="relative"
        zIndex={10}
      >
        <Stack gap={12} align="center" textAlign="center">
          {/* Header Section */}
          <Stack gap={4} align="center">
            <NotFoundDiagnostics errorCode={errorCode} />
            
            <Text 
              as="h1"
              size="4xl" 
              weight="bold"
              color="text-white"
              letterSpacing="tighter"
              uppercase
              block
              leading="none"
            >
              {title}
            </Text>
          </Stack>

          {/* Visual Separator */}
          <Box width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" display="flex" alignItems="center" justifyContent="center">
            <Box 
              width={3} 
              height={3} 
              bg="primary-accent" 
            />
          </Box>

          {/* Message Section */}
          <Text 
            size="xl" 
            color="text-gray-400" 
            maxWidth="lg"
            leading="relaxed"
            block
            weight="medium"
          >
            {message}
          </Text>

          {/* Actions Section */}
          <NotFoundActions 
            primaryLabel={actionLabel} 
            onPrimaryClick={onActionClick} 
          />

          {/* Footer Section */}
          <Box pt={8} width="full">
            <Box height="1px" width="full" bg="border-gray" opacity={0.1} mb={8} />
            <NotFoundHelpLinks links={helpLinks} />
          </Box>
        </Stack>
      </Surface>

      {/* Subtle Edge Details */}
      <Box 
        position="absolute" 
        top={0} 
        left={0} 
        right={0} 
        height="2px" 
        bg="primary-accent"
        opacity={0.1}
      />
      <Box 
        position="absolute" 
        bottom={0} 
        left={0} 
        right={0} 
        height="2px" 
        bg="primary-accent"
        opacity={0.1}
      />
    </Box>
  );
}
