import { Link, useLocation } from "react-router-dom";
import { cn } from "@/lib/utils";
import { useAuth } from "@/contexts/AuthContext";
import {
  Gamepad2,
  LayoutDashboard,
  FolderKanban,
  Users2,
  Box,
  ChevronLeft,
  Lock,
} from "lucide-react";

interface GameForgeLayoutProps {
  children: React.ReactNode;
}

interface SidebarSection {
  label: string;
  items: {
    name: string;
    href: string;
    icon: React.ElementType;
    authRequired?: boolean;
  }[];
}

const SIDEBAR: SidebarSection[] = [
  {
    label: "Overview",
    items: [
      { name: "GameForge Home", href: "/gameforge", icon: Gamepad2 },
    ],
  },
  {
    label: "Studio",
    items: [
      { name: "Dashboard", href: "/gameforge/manage", icon: LayoutDashboard, authRequired: true },
      { name: "Projects", href: "/gameforge/manage/projects", icon: FolderKanban, authRequired: true },
      { name: "Team", href: "/gameforge/manage/team", icon: Users2, authRequired: true },
      { name: "Assets", href: "/gameforge/manage/assets", icon: Box, authRequired: true },
    ],
  },
];

export default function GameForgeLayout({ children }: GameForgeLayoutProps) {
  const location = useLocation();
  const { user } = useAuth();

  const isActive = (href: string) =>
    href === "/gameforge"
      ? location.pathname === href
      : location.pathname.startsWith(href);

  return (
    <div style={{ minHeight: "100vh", background: "#050505", color: "#e0e0e0", display: "flex", flexDirection: "column" }}>
      {/* Top strip */}
      <div style={{ height: 2, background: "linear-gradient(90deg, #ff6b00, #ff9500, #ff6b00)", opacity: 0.7, flexShrink: 0 }} />

      <div style={{ display: "flex", flex: 1 }}>
        {/* Sidebar */}
        <aside style={{
          width: 220, flexShrink: 0,
          background: "rgba(10,10,10,0.98)",
          borderRight: "1px solid rgba(255,107,0,0.12)",
          position: "sticky", top: 0, height: "100vh",
          display: "flex", flexDirection: "column",
          padding: "20px 0",
        }}>
          {/* Brand */}
          <div style={{ padding: "0 20px 20px", borderBottom: "1px solid rgba(255,107,0,0.1)" }}>
            <Link
              to="/"
              style={{
                display: "flex", alignItems: "center", gap: 5,
                color: "rgba(255,107,0,0.45)", textDecoration: "none",
                fontSize: 10, fontFamily: "monospace", letterSpacing: 1,
                marginBottom: 14,
              }}
            >
              <ChevronLeft className="h-3 w-3" />aethex.dev
            </Link>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{
                width: 32, height: 32, background: "linear-gradient(135deg, #ff6b00, #ff9500)",
                borderRadius: 4,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Gamepad2 className="h-4 w-4 text-white" />
              </div>
              <div>
                <div style={{ fontFamily: "monospace", fontWeight: 700, fontSize: 12, letterSpacing: 2, color: "#ff7a00" }}>
                  GAMEFORGE
                </div>
                <div style={{ fontFamily: "monospace", fontSize: 9, color: "rgba(255,107,0,0.4)", letterSpacing: 1 }}>
                  STUDIO MANAGEMENT
                </div>
              </div>
            </div>
          </div>

          {/* Nav sections */}
          <nav style={{ flex: 1, padding: "16px 0", overflowY: "auto" }}>
            {SIDEBAR.map(section => (
              <div key={section.label} style={{ marginBottom: 20 }}>
                <div style={{
                  padding: "0 20px 6px",
                  fontSize: 9, fontFamily: "monospace", letterSpacing: 2,
                  textTransform: "uppercase", color: "rgba(255,107,0,0.3)",
                }}>
                  {section.label}
                </div>
                {section.items.map(item => {
                  const locked = item.authRequired && !user;
                  const active = isActive(item.href);
                  return (
                    <Link
                      key={item.href}
                      to={locked ? "/login" : item.href}
                      style={{
                        display: "flex", alignItems: "center", gap: 10,
                        padding: "8px 20px",
                        textDecoration: "none",
                        fontFamily: "monospace", fontSize: 11, letterSpacing: 0.5,
                        color: locked
                          ? "rgba(255,255,255,0.2)"
                          : active
                          ? "#ff7a00"
                          : "rgba(255,255,255,0.5)",
                        background: active ? "rgba(255,107,0,0.07)" : "transparent",
                        borderLeft: active ? "2px solid #ff7a00" : "2px solid transparent",
                        transition: "all 0.15s",
                      }}
                      onMouseEnter={e => {
                        if (!active && !locked) {
                          e.currentTarget.style.color = "rgba(255,122,0,0.8)";
                          e.currentTarget.style.background = "rgba(255,107,0,0.04)";
                        }
                      }}
                      onMouseLeave={e => {
                        if (!active && !locked) {
                          e.currentTarget.style.color = "rgba(255,255,255,0.5)";
                          e.currentTarget.style.background = "transparent";
                        }
                      }}
                    >
                      <item.icon className="h-3.5 w-3.5 shrink-0" />
                      <span style={{ flex: 1 }}>{item.name}</span>
                      {locked && <Lock className="h-3 w-3 opacity-40" />}
                    </Link>
                  );
                })}
              </div>
            ))}
          </nav>

          {/* Footer hint */}
          {!user && (
            <div style={{ padding: "16px 20px", borderTop: "1px solid rgba(255,107,0,0.1)" }}>
              <Link
                to="/login"
                style={{
                  display: "block", textAlign: "center",
                  fontFamily: "monospace", fontSize: 10, letterSpacing: 2,
                  color: "#ff7a00", textDecoration: "none",
                  border: "1px solid rgba(255,107,0,0.4)",
                  padding: "7px 0",
                  transition: "all 0.2s",
                }}
                onMouseEnter={e => (e.currentTarget.style.background = "rgba(255,107,0,0.08)")}
                onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
              >
                SIGN IN TO MANAGE
              </Link>
            </div>
          )}
        </aside>

        {/* Main content */}
        <main style={{ flex: 1, minWidth: 0 }}>{children}</main>
      </div>
    </div>
  );
}
