import React from 'react';
import { Layout, theme } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { ScanOutlined, FileTextOutlined, SettingOutlined } from '@ant-design/icons';

const { Content } = Layout;

export const AppLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const {
    token: { colorBgContainer, colorPrimary, colorTextSecondary },
  } = theme.useToken();

  const path = location.pathname;
  let activeKey = 'invoices';
  if (path.startsWith('/ocr')) activeKey = 'ocr';
  else if (path.startsWith('/settings')) activeKey = 'settings';

  const menuItems = [
    { key: 'invoices', icon: <FileTextOutlined style={{ fontSize: 20 }} />, label: 'Накладные', path: '/invoices' },
    { key: 'ocr', icon: <ScanOutlined style={{ fontSize: 20 }} />, label: 'Обучение', path: '/ocr' },
    { key: 'settings', icon: <SettingOutlined style={{ fontSize: 20 }} />, label: 'Настройки', path: '#' },
  ];

  return (
    <Layout style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      {/* Верхнюю шапку (Header) удалили для экономии места */}

      <Content style={{ padding: '0', flex: 1, overflowY: 'auto', marginBottom: 60 }}>
        {/* Убрали лишние паддинги вокруг контента для мобилок */}
        <div
          style={{
            background: colorBgContainer,
            minHeight: '100%',
            padding: '12px 12px 80px 12px', // Добавили отступ снизу, чтобы контент не перекрывался меню
            borderRadius: 0, // На мобильных скругления углов всего экрана обычно не нужны
          }}
        >
          <Outlet />
        </div>
      </Content>
      
      {/* Нижний Таб-бар */}
      <div style={{ 
        position: 'fixed', 
        bottom: 0, 
        width: '100%', 
        zIndex: 1000,
        background: '#fff',
        borderTop: '1px solid #f0f0f0',
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
        padding: '8px 0',
        height: 60,
        boxShadow: '0 -2px 8px rgba(0,0,0,0.05)'
      }}>
        {menuItems.map(item => {
          const isActive = activeKey === item.key;
          return (
            <div 
              key={item.key}
              onClick={() => navigate(item.path)}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                width: '33%',
                cursor: 'pointer',
                color: isActive ? colorPrimary : colorTextSecondary
              }}
            >
              {item.icon}
              <span style={{ fontSize: 10, marginTop: 2, fontWeight: isActive ? 500 : 400 }}>
                {item.label}
              </span>
            </div>
          );
        })}
      </div>
    </Layout>
  );
};