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"
              // Was `navy.9`, which is defined in neither theme — Mantine
              // silently drops unresolved keys, so this label had been
              // rendering an inherited colour rather than the intended one.
              c={isDark ? 'gray.1' : 'gray.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,
                left: 0,
                width: '40%',
                background: 'linear-gradient(90deg, #078930, #FCD116, #2563EB)',
                borderRadius: '2px',
                animation: 'ema-shimmer 1.8s infinite ease-in-out',
              }}
            />
            <style>{`
              /* Translating rather than animating \`left\`: the latter runs
                 layout on every frame of an animation that plays during page
                 loads, which is exactly when the main thread is busiest.
                 Reduced motion is handled globally in semantic.css. */
              @keyframes ema-shimmer {
                0% { transform: translateX(-100%); }
                100% { transform: translateX(250%); }
              }
            `}</style>
          </Box>
        </Stack>
      </Box>
    </Center>
  );
}

