import { Box, Typography } from '@mui/material';
import { useLocation } from 'react-router-dom';
import { useMemo } from 'react';

interface HeaderConfig {
  title: string;
  subtitle: string;
  hidden?: boolean;
}

export default function PageHeader() {
  const location = useLocation();

  const headerConfig: HeaderConfig | null = useMemo(() => {
    const path = location.pathname;

    // Страницы без заголовка
    if (
      path === '/login' ||
      path === '/registration' ||
      path === '/marketplace' ||
      path === '/profile' ||
      path.startsWith('/launch')
    ) {
      return { title: '', subtitle: '', hidden: true };
    }

    if (path === '/news') {
      return {
        title: 'Новости',
        subtitle: 'Последние обновления лаунчера, сервера и ивентов',
      };
    }

    if (path === '/') {
      return {
        title: 'Выбор версию клиента',
        subtitle: 'Выберите установленную версию или добавьте новую сборку',
      };
    }

    if (path.startsWith('/daily')) {
      return {
        title: 'Ежедневные награды',
        subtitle: 'Ежедневный вход на сервер приносит бонусы и полезные награды!',
      };
    }

    if (path.startsWith('/profile')) {
      return {
        title: 'Профиль пользователя',
        subtitle: 'Профиль пользователя для личных настроек',
      };
    }

    if (path.startsWith('/shop')) {
      return {
        title: 'Внутриигровой магазин',
        subtitle: 'Тратьте свою уникалькую, виртуальную валюту - Попы!',
      };
    }

    if (path.startsWith('/marketplace')) {
      return {
        title: 'Маркетплейс',
        subtitle: 'Покупайте или продавайте - торговая площадка между игроками',
      };
    }

    // Дефолт на всякий случай
    return {
      title: 'test',
      subtitle: 'test',
    };
  }, [location.pathname]);

  if (!headerConfig || headerConfig.hidden) {
    return null;
  }

  return (
    <Box
      sx={{
        width: '100%',
        maxWidth: '85%',
        mt: '10vh',
        mb: '2vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        pointerEvents: 'none',
      }}
    >
      <Typography
        variant="h3"
        sx={{
          fontFamily: 'Benzin-Bold',
          fontSize: '3vw',
          backgroundImage:
            'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          textTransform: 'uppercase',
          letterSpacing: '0.08em',
        }}
      >
        {headerConfig.title}
      </Typography>

      <Typography
          variant="body2"
          sx={{
            mt: 0.5,
            color: 'rgba(255,255,255,1)',
          }}
      >
        {headerConfig.subtitle}
      </Typography>
    </Box>
  );
}