import React, { useState } from 'react';
import { Link as RouterLink, useLocation } from 'react-router-dom';
import { AppBar, Box, Toolbar, Typography, Button, Stack } from '@mui/material';
import { ReactComponent as FallbackLogo } from './ntqIcon/icons/tactic.svg';
import { useAppVersion } from '../hooks/useAppVersion';
import './appNavigation.scss';

const navItems = [
  { label: '制定策略', path: '/strategy-design' },
  { label: '策略选股', path: '/scan' },
  { label: '设置', path: '/settings' },
];

/** Logo 点击回到的主入口（与主导航第一项一致） */
const HOME_PATH = '/strategy-design';

function AppNavigation() {
  const location = useLocation();
  const [logoFailed, setLogoFailed] = useState(false);
  const appVersionLabel = useAppVersion();

  return (
    <AppBar
      position="sticky"
      color="transparent"
      elevation={0}
      className="ntq-app-header"
    >
      <Toolbar disableGutters className="ntq-app-header__toolbar">
        <Box
          className="ntq-content-inner"
          sx={{}}
        >
          <Box className="ntq-app-header__inner">
            <Box
              className="ntq-brand"
              component={RouterLink}
              to={HOME_PATH}
              aria-label="返回 New Tea Quant 首页"
            >
            {logoFailed ? (
              <FallbackLogo className="ntq-brand__logo" />
            ) : (
              <Box
                component="img"
                src="/logo.png"
                alt="New Tea Quant 徽标"
                onError={() => setLogoFailed(true)}
                className="ntq-brand__logo"
              />
            )}
            <Box className="ntq-brand__meta">
              <Typography variant="h6" className="ntq-brand__name">
                New Tea Quant
              </Typography>
              {appVersionLabel ? (
                <Typography variant="caption" className="ntq-brand__version" component="span">
                  {appVersionLabel}
                </Typography>
              ) : null}
            </Box>
            </Box>
            <Stack direction="row" spacing={0} flexWrap="wrap" className="ntq-nav">
              {navItems.map((item) => {
                const isActive = location.pathname.startsWith(item.path);
                return (
                  <Button
                    key={item.path}
                    component={RouterLink}
                    to={item.path}
                    variant="text"
                    className={`ntq-nav-btn${isActive ? ' is-active' : ''}`}
                  >
                    {item.label}
                  </Button>
                );
              })}
            </Stack>
          </Box>
        </Box>
      </Toolbar>
    </AppBar>
  );
}

export default AppNavigation;