import { useState, useEffect } from 'react';
import { NavLink, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

function TeamNav({ onNav }) {
  return (
    <div className="sidebar-section">
      {[
        { to: '/dashboard', label: 'Dashboard' },
        { to: '/requests', label: 'Requests' },
        { to: '/invoices', label: 'Invoices' },
        { to: '/companies', label: 'Companies' },
      ].map(({ to, label }) => (
        <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
          {label}
        </NavLink>
      ))}
    </div>
  );
}

function ClientNav({ onNav }) {
  return (
    <div className="sidebar-section">
      {[
        { to: '/my-dashboard', label: 'Dashboard' },
        { to: '/my-projects', label: 'Projects' },
        { to: '/my-invoices', label: 'Invoices' },
        { to: '/my-company', label: 'Company' },
      ].map(({ to, label }) => (
        <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
          {label}
        </NavLink>
      ))}
    </div>
  );
}

export default function Layout({ children }) {
  const { currentUser, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'dark');
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  // Close menu on route change
  useEffect(() => { setMenuOpen(false); }, [location.pathname]);

  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
  const handleLogout = () => { logout(); navigate('/'); };

  const initials = currentUser?.name
    ?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);

  return (
    <div className="app-layout">
      {/* Overlay */}
      {menuOpen && <div className="sidebar-overlay" onClick={() => setMenuOpen(false)} />}

      <aside className={`sidebar${menuOpen ? ' sidebar-open' : ''}`}>
        <div className="sidebar-logo">
          <img src="/fourge-logo.png" alt="Fourge Branding" style={{ width: 140, display: 'block' }} />
        </div>

        {currentUser?.role === 'team'
          ? <TeamNav onNav={() => setMenuOpen(false)} />
          : <ClientNav onNav={() => setMenuOpen(false)} />}

        <div className="sidebar-bottom">
          <NavLink to="/settings" onClick={() => setMenuOpen(false)} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
            <div className="sidebar-avatar" style={{ width: 28, height: 28, fontSize: 11, flexShrink: 0 }}>{initials}</div>
            <div className="sidebar-user-info">
              <div className="sidebar-user-name">{currentUser?.name || 'Set your name'}</div>
              <div className="sidebar-user-role">{currentUser?.role}</div>
            </div>
          </NavLink>
          <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', gap: 8 }}>
            <button className="sidebar-link" style={{ flex: 1 }} onClick={handleLogout}>Sign Out</button>
            <button
              onClick={toggleTheme}
              title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
              style={{
                background: 'transparent', border: '1px solid #333', borderRadius: '6px',
                padding: '7px 10px', cursor: 'pointer', color: '#888',
                fontSize: 13, lineHeight: 1, transition: 'all 0.15s', flexShrink: 0,
              }}
            >
              {theme === 'dark' ? '☀' : '☾'}
            </button>
          </div>
        </div>
      </aside>

      <div className="main-wrapper">
        {/* Mobile top bar inside main wrapper so it sits at the top */}
        <div className="mobile-topbar">
          <button className="hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
        <main className="main-content">
          {children}
        </main>
      </div>
    </div>
  );
}