// frontend/src/components/MainLayout.tsx
import React from 'react';
import { Link, useLocation } from 'react-router-dom';

interface MainLayoutProps {
  children: React.ReactNode;
}

// Estilos para o link de navegação
const navLinkStyle = {
  color: 'rgba(255, 255, 255, 0.7)',
  textDecoration: 'none',
  fontWeight: 500,
  padding: '10px 16px',
  borderRadius: '6px',
  display: 'block',
  transition: 'background-color 0.2s, color 0.2s',
  whiteSpace: 'nowrap' as 'nowrap', // Garante que o texto não quebre
  overflow: 'hidden',
  textOverflow: 'ellipsis'
};

const activeLinkStyle = {
  ...navLinkStyle,
  color: '#ffffff',
  backgroundColor: 'rgba(255, 255, 255, 0.1)',
};

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  const location = useLocation();

  const getLinkStyle = (path: string) => {
    if (path === '/contacts' && location.pathname.startsWith('/contacts')) {
      return activeLinkStyle;
    }
    return location.pathname === path ? activeLinkStyle : navLinkStyle;
  };

  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: '#f4f6fa' }}>
      <aside style={{
        // --- ALTERAÇÃO APLICADA AQUI: Largura reduzida para 160px ---
        width: 160, 
        background: '#21325b',
        color: '#fff',
        display: 'flex',
        flexDirection: 'column',
        // --- Padding ajustado para o novo tamanho ---
        padding: '20px 12px',
        flexShrink: 0,
        transition: 'width 0.3s ease-in-out',
      }}>
        <h2 style={{ 
            fontWeight: 'bold', 
            fontSize: 20, // Título um pouco menor
            marginBottom: 28, 
            textAlign: 'center',
            color: '#fff',
        }}>
          Agenda
        </h2>
        <nav>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            <li><Link to="/dashboard" style={getLinkStyle('/dashboard')}>Dashboard</Link></li>
            <li><Link to="/contacts" style={getLinkStyle('/contacts')}>Contatos</Link></li>
            <li><Link to="/graph" style={getLinkStyle('/graph')}>Rede</Link></li>
            <hr style={{ margin: '16px 0', borderColor: 'rgba(255,255,255,0.1)' }} />
            <li><Link to="/import-google-contacts" style={getLinkStyle('/import-google-contacts')}>Importar</Link></li>
            {/* Texto do link encurtado para caber melhor */}
            <li><Link to="/connection-types" style={getLinkStyle('/connection-types')}>Tipos</Link></li>
          </ul>
        </nav>
      </aside>

      {/* ÁREA DE CONTEÚDO PRINCIPAL (sem alterações) */}
      <main style={{ flex: 1, padding: '40px 48px', overflowY: 'auto' }}>
        {children}
      </main>
    </div>
  );
};

export default MainLayout;