import React from 'react';
import { Box, styled } from "@mui/material";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { BaseBreadcrumbs, type BreadcrumbItem } from '@/components/Breadcrumbs';
import SettingSidebar from './SettingSidebar';
import { Home as HomeIcon } from '@mui/icons-material';
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from '../LanguageSwitcher';

const LayoutContainer = styled(Box)({
  display: 'flex',
  height: '100vh',
});

const ContentContainer = styled(Box)({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
});

const HeaderContainer = styled(Box)(({ theme }) => ({
  padding: theme.spacing(2, 3),
  backgroundColor: theme.palette.background.paper,
  borderBottom: `1px solid ${theme.palette.divider}`,
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
}));

const MainContent = styled(Box)({
  flex: 1,
  overflow: 'auto',
  padding: '24px',
});


function SettingHeader() {
  const location = useLocation();
  const navigate = useNavigate();

  const { t } = useTranslation();


  // 设置页面路径映射
  const settingPathMap: Record<string, string> = {
    '/setting/profile': t('setting.profile'),
    '/setting/models': t('setting.model'),
    '/setting/system': t('setting.system'),
    '/setting/teams': t('setting.team'),
    '/setting/mcp': t('setting.mcp'),
  };


  // 生成面包屑导航
  const breadcrumbItems: BreadcrumbItem[] = [
    {
      label: t('header.home'),
      path: '/',
      onClick: () => navigate('/'),
    },
  ];

  // 如果当前路径不是设置首页，添加具体页面
  if (location.pathname !== '/setting' && settingPathMap[location.pathname]) {
    breadcrumbItems.push({
      label: settingPathMap[location.pathname],
      isLast: true,
    });
  }

  return (
    <HeaderContainer>
      <BaseBreadcrumbs
        items={breadcrumbItems}
        sx={{ mb: 0 }}
      />
      <LanguageSwitcher textColor='text.primary' />
    </HeaderContainer>
  );
}

function SettingLayout() {

  return (
    <LayoutContainer>
      <SettingSidebar />
      <ContentContainer>
        <SettingHeader />
        <MainContent>
          <Outlet />
        </MainContent>
      </ContentContainer>
    </LayoutContainer>
  );
}

export default SettingLayout;