import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Swords, Package, Hammer, User, LogOut, Shield, Scroll, Trophy, ShoppingBag, BookOpen } from 'lucide-react';
import { HudBar } from './HudBar';
import { GuideDrawer } from './GuideDrawer';

const NAV = [
  { to: '/dashboard',    icon: User,    label: 'Personnage' },
  { to: '/quests',       icon: Scroll,  label: 'Quêtes' },
  { to: '/combat',       icon: Swords,  label: 'Combat' },
  { to: '/inventory',    icon: Package, label: 'Inventaire' },
  { to: '/craft',        icon: Hammer,  label: 'Artisanat' },
  { to: '/forge',        icon: Shield,  label: 'Forge' },
  { to: '/shop',         icon: ShoppingBag, label: 'Boutique' },
  { to: '/achievements', icon: Trophy,  label: 'Succès' },
];

export function Layout({ children }: { children: React.ReactNode }) {
  const { user, logout } = useAuth();
  const loc = useLocation();
  const [guideOpen, setGuideOpen] = useState(false);

  return (
    <div className="layout">
      {/* Header */}
      <header style={{
        background: '#161b25', borderBottom: '1px solid #2a3448',
        padding: '0 1.5rem', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', height: 52,
        position: 'sticky', top: 0, zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 20 }}>🐸</span>
          <span style={{ fontWeight: 800, color: '#f4c94e', letterSpacing: '-0.5px' }}>TetaRdPG</span>
        </div>
        {user && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="header-username" style={{ fontSize: 13, color: '#6b7a99' }}>{user.username}</span>
            <button className="btn btn-ghost" style={{ padding: '0.3rem 0.6rem' }} onClick={logout} title="Déconnexion">
              <LogOut size={14} />
            </button>
          </div>
        )}
      </header>

      <HudBar />
      <div className="layout-body">
        {/* Sidebar / Bottom nav */}
        <nav className="sidebar">
          {NAV.map(({ to, icon: Icon, label }) => {
            const active = loc.pathname.startsWith(to);
            return (
              <Link key={to} to={to} title={label} className={`nav-item ${active ? 'active' : ''}`}>
                <Icon size={18} />
              </Link>
            );
          })}
          <div className="nav-spacer" style={{ flex: 1 }} />
          <button
            onClick={() => setGuideOpen(true)}
            title="Guide rapide"
            className={`nav-item ${guideOpen ? 'active' : ''}`}
          >
            <BookOpen size={18} />
          </button>
        </nav>

        {/* Main content */}
        <main className="layout-main">
          {children}
        </main>
      </div>

      <GuideDrawer open={guideOpen} onClose={() => setGuideOpen(false)} />
    </div>
  );
}