import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { createPageUrl } from '@/utils';
import { base44 } from '@/api/base44Client';
import { 
  Home, 
  Calendar, 
  LayoutDashboard, 
  TrendingUp, 
  Menu, 
  X,
  LogOut,
  User
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';

export default function Layout({ children, currentPageName }) {
  const [user, setUser] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    base44.auth.me().then(setUser).catch(() => {});
  }, []);

  const isLandingPage = currentPageName === 'Home';

  const navLinks = [
    { name: 'Início', href: createPageUrl('Home'), icon: Home },
    { name: 'Agendar', href: createPageUrl('Booking'), icon: Calendar },
  ];

  if (user) {
    navLinks.push({ name: 'Minha Evolução', href: createPageUrl('MyProgress'), icon: TrendingUp });
    if (user.role === 'admin') {
      navLinks.push({ name: 'Dashboard', href: createPageUrl('Dashboard'), icon: LayoutDashboard });
    }
  }

  if (isLandingPage) {
    return <div className="min-h-screen bg-slate-900">{children}</div>;
  }

  return (
    <div className="min-h-screen bg-gray-900">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <Link to={createPageUrl('Home')} className="flex flex-col items-start">
            <span className="text-xl font-extrabold text-white tracking-tight">
              NEGRÃO <span className="gold-gradient">JUNIOR</span>
            </span>
            <span className="text-[10px] text-gray-400 tracking-widest uppercase font-bold">Personal Trainer</span>
          </Link>

          {/* Desktop Nav */}
          <nav className="hidden md:flex items-center gap-6">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                to={link.href}
                className={`flex items-center gap-2 text-sm font-medium transition-colors ${
                  currentPageName === link.name.replace('Minha ', '').replace('Início', 'Home')
                    ? 'text-yellow-500'
                    : 'text-gray-400 hover:text-white'
                }`}
              >
                <link.icon className="w-4 h-4" />
                {link.name}
              </Link>
            ))}
            {user ? (
              <div className="flex items-center gap-3 ml-4 pl-4 border-l border-gray-700">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-full bg-yellow-500/20 flex items-center justify-center">
                    <User className="w-4 h-4 text-yellow-500" />
                  </div>
                  <span className="text-gray-300 text-sm">{user.full_name?.split(' ')[0]}</span>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => base44.auth.logout()}
                  className="text-gray-400 hover:text-white"
                >
                  <LogOut className="w-4 h-4" />
                </Button>
              </div>
            ) : (
              <Button
                onClick={() => base44.auth.redirectToLogin()}
                variant="outline"
                size="sm"
                className="border-gray-700 text-white hover:bg-gray-800 ml-4"
              >
                Entrar
              </Button>
            )}
          </nav>

          {/* Mobile Nav */}
          <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetTrigger asChild className="md:hidden">
              <Button variant="ghost" size="icon" className="text-white">
                <Menu className="w-5 h-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="bg-gray-900 border-gray-800 w-72">
              <div className="flex flex-col h-full">
                <div className="flex items-center justify-between mb-8">
                  <span className="text-lg font-bold text-white">Menu</span>
                </div>
                <nav className="flex flex-col gap-2">
                  {navLinks.map((link) => (
                    <Link
                      key={link.name}
                      to={link.href}
                      onClick={() => setIsOpen(false)}
                      className={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
                        currentPageName === link.name.replace('Minha ', '').replace('Início', 'Home')
                          ? 'bg-yellow-500/10 text-yellow-500'
                          : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                      }`}
                    >
                      <link.icon className="w-5 h-5" />
                      {link.name}
                    </Link>
                  ))}
                </nav>
                <div className="mt-auto pt-6 border-t border-gray-800">
                  {user ? (
                    <div className="space-y-4">
                      <div className="flex items-center gap-3 px-4">
                        <div className="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center">
                          <User className="w-5 h-5 text-yellow-500" />
                        </div>
                        <div>
                          <p className="text-white font-medium">{user.full_name}</p>
                          <p className="text-gray-500 text-sm">{user.email}</p>
                        </div>
                      </div>
                      <Button
                        onClick={() => base44.auth.logout()}
                        variant="outline"
                        className="w-full border-gray-700 text-gray-300 hover:bg-gray-800"
                      >
                        <LogOut className="w-4 h-4 mr-2" />
                        Sair
                      </Button>
                    </div>
                  ) : (
                    <Button
                      onClick={() => base44.auth.redirectToLogin()}
                      className="w-full gold-bg text-gray-900 hover:opacity-90"
                    >
                      Entrar
                    </Button>
                  )}
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </header>

      {/* Content with padding for fixed header */}
      <main className="pt-16">
        {children}
      </main>
    </div>
  );
}