import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { 
  FiHome, 
  FiPackage, 
  FiUsers, 
  FiTruck, 
  FiDollarSign, 
  FiShoppingCart,
  FiRotateCcw,
  FiSettings,
  FiMenu,
  FiX,
  FiWifi,
  FiWifiOff,
  FiCreditCard,
  FiGlobe,
  FiList
} from 'react-icons/fi';
import './Layout.css';

const Layout = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const location = useLocation();

  const menuItems = [
    { path: '/', icon: FiHome, label: 'Dashboard' },
    { path: '/produtos', icon: FiPackage, label: 'Produtos' },
    { path: '/clientes', icon: FiUsers, label: 'Clientes' },
    { path: '/fornecedores', icon: FiTruck, label: 'Fornecedores' },
    { path: '/despesas', icon: FiDollarSign, label: 'Despesas' },
    { path: '/vendas', icon: FiShoppingCart, label: 'Vendas' },
    { path: '/pedidos', icon: FiList, label: 'Pedidos' },
    { path: '/devolucoes', icon: FiRotateCcw, label: 'Devolução/Troca' },
    { path: '/emprestimos', icon: FiCreditCard, label: 'Empréstimos' },
    { path: '/site/catalogo', icon: FiGlobe, label: 'Site / Catalogo' },
    { path: '/configuracoes', icon: FiSettings, label: 'Configurações' },
  ];

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <div className="layout">
      {/* Sidebar */}
      <aside className={`sidebar ${sidebarOpen ? 'sidebar-open' : ''}`}>
        <div className="sidebar-header">
          <div className="logo">
            <img 
              src="/LogoLiberiKids.png" 
              alt="Liberi Kids" 
              className="logo-img"
              onError={(e) => {
                e.target.style.display = 'none';
                e.target.nextSibling.style.display = 'block';
              }}
            />
            <div className="logo-text" style={{ display: 'none' }}>
              <h2>Liberi Kids</h2>
              <span>Moda Infantil</span>
            </div>
          </div>
          <button 
            className="sidebar-close"
            onClick={toggleSidebar}
          >
            <FiX />
          </button>
        </div>

        <nav className="sidebar-nav">
          {menuItems.map((item) => {
            const Icon = item.icon;
            const isActive = location.pathname === item.path;
            
            return (
              <Link
                key={item.path}
                to={item.path}
                className={`nav-item ${isActive ? 'nav-item-active' : ''}`}
                onClick={() => setSidebarOpen(false)}
              >
                <Icon className="nav-icon" />
                <span className="nav-label">{item.label}</span>
              </Link>
            );
          })}
        </nav>
      </aside>

      {/* Overlay para mobile */}
      {sidebarOpen && (
        <div 
          className="sidebar-overlay"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Main Content */}
      <div className="main-content">
        {/* Header */}
        <header className="header">
          <button 
            className="menu-toggle"
            onClick={toggleSidebar}
          >
            <FiMenu />
          </button>
          
          <div className="header-title">
            <h1>Sistema de Controle de Estoque</h1>
            <p>Liberi Kids - Moda Infantil</p>
            <p style={{ fontSize: '0.85em', opacity: 0.7, marginTop: '-8px' }}>v1.0.0</p>
          </div>

          <div className="header-actions">
            {/* Espaço para futuras ações */}
          </div>
        </header>

        {/* Page Content */}
        <main className="page-content">
          {children}
        </main>
      </div>
    </div>
  );
};

export default Layout;
