import { Outlet, Link, useLocation } from 'react-router-dom';
import { useAuthStore } from '../store/auth';
import { Film, Briefcase, Youtube, LogOut, Calendar } from 'lucide-react';
import { cn } from '../lib/utils';

export function Layout() {
  const { logout } = useAuthStore();
  const location = useLocation();

  const navItems = [
    { name: 'Jobs', path: '/', icon: Film },
    { name: 'Scheduling', path: '/scheduling', icon: Calendar },
    { name: 'Brands', path: '/brands', icon: Briefcase },
    { name: 'Channels', path: '/channels', icon: Youtube },
  ];

  return (
    <div className="flex h-screen bg-background text-foreground">
      <aside className="w-64 border-r border-border bg-card flex flex-col">
        <div className="p-6">
          <h1 className="text-xl font-bold tracking-tight text-foreground">
            ATLAS
          </h1>
          <p className="text-xs text-muted-foreground mt-1">Autonomous Shorts</p>
        </div>

        <nav className="flex-1 px-4 space-y-1 mt-4">
          {navItems.map((item) => {
            const isActive = location.pathname === item.path;
            const Icon = item.icon;
            return (
              <Link
                key={item.path}
                to={item.path}
                className={cn(
                  "flex items-center gap-3 px-3 py-2.5 rounded-md transition-colors text-sm font-medium",
                  isActive 
                    ? "bg-accent text-accent-foreground" 
                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
                )}
              >
                <Icon size={16} />
                {item.name}
              </Link>
            );
          })}
        </nav>

        <div className="p-4 border-t border-border">
          <button
            onClick={logout}
            className="flex items-center gap-3 px-3 py-2.5 w-full text-left text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50 rounded-md transition-colors"
          >
            <LogOut size={16} />
            Sign Out
          </button>
        </div>
      </aside>

      <main className="flex-1 overflow-auto bg-background">
        <div className="p-8 max-w-6xl mx-auto h-full">
          <Outlet />
        </div>
      </main>
    </div>
  );
}