'use client';

import { ErrorDetails } from '@/components/errors/ErrorDetails';
import { RecoveryActions } from '@/components/errors/RecoveryActions';
import { ServerErrorPanel } from '@/components/errors/ServerErrorPanel';
import { Box } from '@/ui/Box';
import { Glow } from '@/ui/Glow';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';

export interface ServerErrorViewData {
  error: Error & { digest?: string };
  incidentId?: string;
}

interface ServerErrorTemplateProps {
  viewData: ServerErrorViewData;
  onRetry: () => void;
  onHome: () => void;
}

/**
 * ServerErrorTemplate
 * 
 * Template for the 500 error page.
 * Composes semantic error components into an "instrument-grade" layout.
 */
export function ServerErrorTemplate({ viewData, onRetry, onHome }: ServerErrorTemplateProps) {
  return (
    <Box 
      as="main" 
      minHeight="screen"
      fullWidth
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg-deep-graphite"
      position="relative"
      overflow="hidden"
      px={6}
    >
      {/* Background Accents */}
      <Glow color="primary" size="xl" position="center" opacity={0.05} />
      
      <Surface 
        variant="glass" 
        border 
        rounded="lg" 
        padding={8} 
        maxWidth="2xl"
        fullWidth
        position="relative"
        zIndex={10}
        shadow="xl"
        borderColor="border-white"
        bgOpacity={0.05}
      >
        <Stack gap={8} align="center">
          <ServerErrorPanel 
            message={viewData.error.message} 
            incidentId={viewData.incidentId || viewData.error.digest} 
          />
          
          <RecoveryActions 
            onRetry={onRetry} 
            onHome={onHome} 
          />
          
          <ErrorDetails 
            error={viewData.error} 
          />
        </Stack>
      </Surface>
    </Box>
  );
}