'use client';

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

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 (
    <Stack 
      as="main" 
      minHeight="screen" 
      align="center" 
      justify="center" 
      bg="graphite-black" 
      position="relative"
      overflow="hidden"
      fullWidth
    >
      {/* Background Glow Accent */}
      <Glow color="primary" size="xl" opacity={0.1} position="center" />
      
      <Card 
        variant="outline"
        p={12} 
        rounded="none" 
        maxWidth="2xl"
        fullWidth
        mx={6}
        position="relative"
        zIndex={10}
        className="bg-white/5 backdrop-blur-md"
      >
        <Stack gap={12} align="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"
              textAlign="center"
            >
              {title}
            </Text>
          </Stack>

          {/* Visual Separator */}
          <Stack width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" align="center" justify="center">
            <Stack 
              w="3" 
              h="3" 
              bg="primary-accent" 
            >{null}</Stack>
          </Stack>

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

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

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

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