import { Link, useLocation } from "wouter";
import { LayoutDashboard, FolderKanban, Users, Image as ImageIcon, Sparkles, Columns3, LogOut } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
import { cn } from "@/lib/utils";

const navigation = [
  { name: "الرئيسية", href: "/", icon: LayoutDashboard },
  { name: "ترتيب المهام", href: "/kanban", icon: Columns3 },
  { name: "المشاريع", href: "/projects", icon: FolderKanban },
  { name: "العملاء", href: "/clients", icon: Users },
];

export function Layout({ children }: { children: React.ReactNode }) {
  const [location, setLocation] = useLocation();
  const { signOut, user } = useAuth();

  const handleLogout = async () => {
    await signOut();
    setLocation("/login");
  };

  return (
    <div className="min-h-screen bg-background flex flex-col md:flex-row" dir="rtl">
      <aside className="w-full md:w-64 border-l border-border bg-sidebar flex-shrink-0 flex flex-col order-last md:order-first">
        <div className="h-16 flex items-center px-6 border-b border-border">
          <div className="flex items-center gap-2 font-bold text-lg tracking-tight">
            <div className="w-7 h-7 bg-primary rounded-sm flex items-center justify-center shrink-0">
              <span className="text-primary-foreground text-xs leading-none select-none font-bold">DS</span>
            </div>
            graphic designer system
          </div>
        </div>
        
        <div className="px-6 py-4 border-b border-border bg-muted/20">
          <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">حالة الحساب</div>
          <div className="flex items-center gap-2 overflow-hidden">
            <div className={`w-2 h-2 rounded-full shrink-0 ${user ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-muted-foreground/30'}`} />
            <div className="text-xs font-medium truncate text-foreground/80">
              {user ? user.email : "غير مسجل دخول"}
            </div>
          </div>
          {!user && (
            <Link href="/login">
              <div className="mt-2 text-[10px] text-primary hover:underline cursor-pointer font-bold">تسجيل الدخول الآن ←</div>
            </Link>
          )}
        </div>

        <nav className="flex-1 py-6 px-3 flex flex-col gap-1 overflow-y-auto">
          {navigation.map((item) => {
            const isActive = location === item.href || (item.href !== "/" && location.startsWith(item.href));
            return (
              <Link key={item.name} href={item.href}>
                <div
                  data-testid={`nav-${item.href.replace("/", "") || "home"}`}
                  className={cn(
                    "flex items-center gap-3 px-3 py-2.5 rounded-md transition-colors cursor-pointer text-sm font-medium",
                    isActive
                      ? "bg-primary/15 text-primary"
                      : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
                  )}
                >
                  <item.icon className="w-4 h-4 shrink-0" />
                  {item.name}
                </div>
              </Link>
            );
          })}
        </nav>
        <div className="p-3 border-t border-border mt-auto">
          <button
            onClick={handleLogout}
            className="flex w-full items-center gap-3 px-3 py-2.5 rounded-md transition-colors cursor-pointer text-sm font-medium text-destructive hover:bg-destructive/10"
          >
            <LogOut className="w-4 h-4 shrink-0" />
            تسجيل الخروج
          </button>
        </div>
      </aside>
      <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
        {children}
      </main>
    </div>
  );
}