emaui/libs/ui/src/lib/feedback/PageLoader.tsx

import { Center, Box, Stack, Text, useComputedColorScheme } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { MaritimeLoader } from '../components/MaritimeLoader';

interface PageLoaderProps {
  /** Visible + accessible label. Defaults to the shared i18n "loading" string. */
  label?: string;
  /** Subtitle or secondary detail string. */
  subtitle?: string;
  /** Container height. Defaults to a full-page fill. */
  height?: number | string;
  /** Show framed executive card backdrop (default: true). */
  framed?: boolean;
}

/** The full-page/section loading state every screen should use. */
export function PageLoader({
  label,
  subtitle,
  height = '60vh',
  framed = true,
}: PageLoaderProps) {
  const { t } = useTranslation();
  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
  const isDark = computedColorScheme === 'dark';

  const resolvedLabel = label ?? t('loading', 'Loading Maritime Services…');

  return (
    <Center h={height} w="100%" p="md">
      <Box
        style={{
          position: 'relative',
          padding: framed ? '2rem 3rem' : '1rem',
          borderRadius: framed ? '1.25rem' : '0',
          background: framed
            ? isDark
              ? 'rgba(15, 23, 42, 0.75)'
              : 'rgba(255, 255, 255, 0.85)'
            : 'transparent',
          backdropFilter: framed ? 'blur(12px)' : 'none',
          boxShadow: framed
            ? isDark
              ? '0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08)'
              : '0 20px 40px rgba(11, 25, 44, 0.08), 0 0 0 1px rgba(15, 44, 89, 0.08)'
            : 'none',
          transition: 'all 0.3s ease',
          maxWidth: '440px',
          width: '100%',
        }}
      >
        <Stack align="center" gap="md">
          {/* Main Maritime Animated Loader */}
          <MaritimeLoader size={110} variant="full" label={resolvedLabel} />

          {/* Ethiopian Maritime Authority Branding Header */}
          <Box style={{ textAlign: 'center' }}>
            <Text
              fw={700}
              size="xs"
              style={{
                letterSpacing: '0.16em',
                textTransform: 'uppercase',
                background: 'linear-gradient(135deg, #0284C7 0%, #D4AF37 50%, #078930 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                marginBottom: '2px',
              }}
            >
              ETHIOPIAN MARITIME AUTHORITY
            </Text>
            <Text
              fw={500}
              size="xs"
              c="dimmed"
              style={{ letterSpacing: '0.05em', marginBottom: '8px' }}
            >
              የኢትዮጵያ ማሪታይም ባለስልጣን
            </Text>
            <Text
              fw={600}
              size="md"
              c={isDark ? 'gray.1' : 'navy.9'}
              style={{ lineHeight: 1.3 }}
            >
              {resolvedLabel}
            </Text>
            {subtitle && (
              <Text size="xs" c="dimmed" mt={4}>
                {subtitle}
              </Text>
            )}
          </Box>

          {/* Animated Gold Shimmer Bar */}
          <Box
            style={{
              width: '120px',
              height: '3px',
              borderRadius: '2px',
              background: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(15,44,89,0.1)',
              overflow: 'hidden',
              position: 'relative',
            }}
          >
            <Box
              style={{
                position: 'absolute',
                top: 0,
                bottom: 0,
                width: '40%',
                background: 'linear-gradient(90deg, #078930, #FCD116, #2563EB)',
                borderRadius: '2px',
                animation: 'ema-shimmer 1.8s infinite ease-in-out',
              }}
            />
            <style>{`
              @keyframes ema-shimmer {
                0% { left: -40%; }
                100% { left: 100%; }
              }
            `}</style>
          </Box>
        </Stack>
      </Box>
    </Center>
  );
}