import { Link, useLocation } from 'react-router-dom'
import { useAuth } from '../auth/AuthContext'

export function Layout({ children }: { children: React.ReactNode }) {
  const location = useLocation()
  const { user, logout } = useAuth()

  const navItems = [
    { path: '/', label: 'Ma Cave', icon: '🍷' },
    { path: '/add', label: 'Ajouter', icon: '➕' },
    ...(user?.is_admin ? [
      { path: '/invitations', label: 'Invitations', icon: '📨' },
      { path: '/admin', label: 'Admin', icon: '⚙️' },
    ] : []),
  ]

  return (
    <div className="min-h-screen flex flex-col">
      <header className="sticky top-0 z-50 bg-cellar-bg/80 backdrop-blur-xl border-b border-cellar-border">
        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
          <Link to="/" className="flex items-center gap-2 group">
            <span className="text-2xl">🍷</span>
            <h1 className="font-display text-xl font-semibold text-cellar-gold group-hover:text-cellar-gold-light transition-colors">
              Cellar
            </h1>
          </Link>

          <nav className="flex items-center gap-1">
            {navItems.map((item) => (
              <Link
                key={item.path}
                to={item.path}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                  location.pathname === item.path
                    ? 'bg-cellar-card text-cellar-gold border border-cellar-gold/30'
                    : 'text-cellar-muted hover:text-cellar-cream hover:bg-cellar-surface'
                }`}
              >
                <span>{item.icon}</span>
                <span className="hidden sm:inline">{item.label}</span>
              </Link>
            ))}

            <div className="ml-2 pl-2 border-l border-cellar-border flex items-center gap-2">
              <span className="text-sm text-cellar-muted hidden sm:inline">
                {user?.username}
              </span>
              <button
                onClick={logout}
                className="text-cellar-muted hover:text-red-400 transition-colors text-sm px-2 py-1 rounded-lg hover:bg-cellar-surface"
                title="Se déconnecter"
              >
                ⏻
              </button>
            </div>
          </nav>
        </div>
      </header>

      <main className="flex-1 max-w-6xl mx-auto w-full px-4 py-6">
        {children}
      </main>

      <footer className="border-t border-cellar-border py-4 text-center text-cellar-muted text-sm">
        Cellar &mdash; Ma collection de boissons
      </footer>
    </div>
  )
}
