import { Outlet, NavLink } from 'react-router-dom';
import { Users, LayoutDashboard, LogOut, Server, Building2 } from 'lucide-react';
import { motion } from 'framer-motion';

export const DashboardLayout = () => {
  return (
    <div className="dashboard-container" style={{ display: 'flex', minHeight: '100vh', overflow: 'hidden' }}>
      {/* Sidebar */}
      <motion.aside 
        initial={{ x: -200, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        className="glass-panel sidebar" 
        style={{ display: 'flex', flexDirection: 'column' }}
      >
        <div style={{ marginBottom: '2rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ width: '40px', height: '40px', borderRadius: '12px', background: 'linear-gradient(135deg, var(--primary), var(--accent))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 'bold' }}>TX</div>
          <h2 style={{ fontSize: '1.2rem', fontWeight: '700', letterSpacing: '1px' }}>SysAdmin</h2>
        </div>

        <nav style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          <NavLink to="/" end className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
            <LayoutDashboard size={20} />
            Dashboard
          </NavLink>
          <NavLink to="/users" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
            <Users size={20} />
            Usuarios
          </NavLink>
          <NavLink to="/companies" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
            <Building2 size={20} />
            Organizaciones
          </NavLink>
          <NavLink to="/wapservers" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
            <Server size={20} />
            Servidores WAP
          </NavLink>
        </nav>

        <div style={{ marginTop: 'auto', paddingTop: '1rem', borderTop: '1px solid var(--glass-border)' }}>
          <button className="nav-item" style={{ width: '100%', background: 'transparent', color: 'var(--text-muted)' }} onClick={() => console.log('logout')}>
            <LogOut size={20} />
            Cerrar Sesión
          </button>
        </div>
      </motion.aside>

      {/* Main Content */}
      <main className="main-content" style={{ flex: 1, padding: '1rem', display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
        <Outlet />
      </main>

      {/* Global Sidebar styles */}
      <style dangerouslySetInnerHTML={{__html: `
        .nav-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 16px;
          border-radius: 12px;
          color: var(--text-muted);
          transition: all 0.2s;
          font-weight: 500;
        }
        .nav-item:hover {
          background: rgba(255, 255, 255, 0.05);
          color: var(--text-main);
        }
        .nav-item.active {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
          color: var(--primary);
          border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .sidebar {
          width: 250px;
          margin: 1rem;
          padding: 1.5rem;
          transition: all 0.3s;
        }
        @media (max-width: 768px) {
          .dashboard-container {
            flex-direction: column !important;
            overflow-y: auto !important;
          }
          .sidebar {
            width: auto;
            margin: 1rem;
            flex-direction: row !important;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
          }
          .sidebar nav {
            flex-direction: row !important;
            flex: unset !important;
            gap: 1rem;
          }
          .sidebar .nav-item {
            padding: 8px 12px;
          }
          .sidebar > div:first-child {
            margin-bottom: 0 !important;
          }
          .sidebar > div:last-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
            border-top: none !important;
          }
          .main-content {
            height: auto !important;
            overflow: visible !important;
          }
        }
      `}} />
    </div>
  );
};
