import { Outlet, NavLink, useNavigate, useLocation } from 'react-router-dom';
import { LayoutDashboard, Users, FileText, Send, LogOut } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { Toaster } from 'react-hot-toast';

export const Layout = () => {
  const { signOut } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  const handleSignOut = async () => {
    await signOut();
    navigate('/login');
  };

  const navItems = [
    { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
    { to: '/templates', icon: FileText, label: 'Templates' },
    { to: '/contacts', icon: Users, label: 'Member List' },
    { to: '/campaign', icon: Send, label: 'Send Email' },
  ];

  return (
    <div className="min-h-screen bg-[#F7F7F5] font-sans text-zinc-900 pb-20">
      {/* Top Header */}
      <header className="bg-white border-b border-zinc-200 sticky top-0 z-30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo and Brand */}
            <div className="flex items-center">
              <div className="w-12 h-12 bg-zinc-900 rounded-xl flex items-center justify-center shadow-sm">
                <Users className="w-6 h-6 text-white" />
              </div>
              <div className="ml-4 flex flex-col justify-center">
                <span className="font-serif italic font-bold text-xl leading-tight text-zinc-900 tracking-wide">
                  Baytown Networking
                </span>
                <span className="text-[10px] font-bold tracking-[0.2em] text-zinc-500 uppercase leading-tight mt-0.5">
                  Professionals Group
                </span>
              </div>
              
              {/* SMTP Badge */}
              <div className="ml-8 hidden md:flex items-center px-3 py-1 bg-emerald-50 border border-emerald-200 rounded-full">
                <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full mr-2"></div>
                <span className="text-[10px] font-bold text-emerald-600 tracking-wider uppercase">SMTP: READY</span>
              </div>
            </div>

            {/* Pill Navigation */}
            <nav className="hidden md:flex items-center bg-zinc-100 p-1.5 rounded-full space-x-1 border border-zinc-200/60 shadow-inner">
              {navItems.map((item) => {
                const isActive = location.pathname === item.to || (item.to !== '/' && location.pathname.startsWith(item.to));
                const isSendEmail = item.label === 'Send Email';
                return (
                  <NavLink
                    key={item.to}
                    to={item.to}
                    className={`flex items-center px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-200 ${
                      isSendEmail
                        ? isActive
                          ? 'bg-emerald-100 shadow-sm text-emerald-900 border border-emerald-200'
                          : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200/50'
                        : isActive 
                          ? 'bg-white shadow-sm text-zinc-900' 
                          : 'text-zinc-500 hover:text-zinc-800 hover:bg-zinc-200/50'
                    }`}
                  >
                    <item.icon className={`w-4 h-4 mr-2 ${
                      isSendEmail
                        ? isActive ? 'text-emerald-900' : 'text-emerald-600'
                        : isActive ? 'text-zinc-900' : 'text-zinc-400'
                    }`} />
                    {item.label}
                  </NavLink>
                );
              })}
              <button 
                onClick={handleSignOut}
                className="flex items-center px-4 py-2.5 rounded-full text-sm font-semibold text-zinc-400 hover:text-red-600 hover:bg-red-50 transition-colors ml-2"
                title="Sign Out"
              >
                <LogOut className="w-4 h-4" />
              </button>
            </nav>
          </div>
        </div>
      </header>

      {/* Main Content Area */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10">
        <Outlet />
      </main>

      <Toaster 
        position="top-center" 
        toastOptions={{
          className: 'font-medium rounded-xl shadow-lg border border-zinc-100',
          duration: 4000,
        }} 
      />
    </div>
  );
};
