"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { BarChart3, Bot, Brain, Building2, Cog, Compass, Lightbulb, Sparkles } from "lucide-react";
import { APP_NAV_ITEMS } from "@/lib/constants";
import { getActiveDemoId } from "@/lib/data-store";
import { getDemoMeta } from "@/lib/demo-profiles";
import { cn } from "@/lib/utils";

const iconMap: Record<string, React.ReactNode> = {
  Dashboard: <BarChart3 className="h-4 w-4" />,
  "AI Strategy Room": <Brain className="h-4 w-4" />,
  "Strategy Room": <Brain className="h-4 w-4" />,
  Opportunities: <Lightbulb className="h-4 w-4" />,
  Competitors: <Compass className="h-4 w-4" />,
  "Role Agents": <Bot className="h-4 w-4" />,
  "Business Profile": <Building2 className="h-4 w-4" />,
  Profile: <Building2 className="h-4 w-4" />,
  Settings: <Cog className="h-4 w-4" />,
};

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [demoId, setDemoId] = useState<string | null>(null);

  useEffect(() => {
    setDemoId(getActiveDemoId());
  }, [pathname]);

  const demoMeta = demoId ? getDemoMeta(demoId) : undefined;

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <div className="mx-auto grid min-h-screen max-w-7xl grid-cols-1 gap-6 px-4 py-6 lg:grid-cols-[250px_1fr]">
        <aside className="rounded-2xl border border-slate-800/80 bg-slate-900/50 p-4">
          <Link href="/dashboard" className="mb-6 block text-xl font-bold text-white">
            BrandLxft
          </Link>
          <p className="mb-5 text-xs text-slate-400">Your AI Co-Founder for Growth</p>

          {demoMeta ? (
            <Link
              href="/demo"
              className="mb-4 block rounded-lg border border-amber-500/20 bg-amber-500/5 p-3 transition hover:bg-amber-500/10"
            >
              <div className="flex items-center gap-2 text-xs text-amber-300">
                <Sparkles className="h-3.5 w-3.5" />
                Demo mode
              </div>
              <p className="mt-1 text-sm font-medium text-slate-200">{demoMeta.name}</p>
              <p className="text-xs text-slate-500">Switch demo →</p>
            </Link>
          ) : null}

          <nav className="space-y-1">
            {APP_NAV_ITEMS.map((item) => {
              const active = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition",
                    active
                      ? "bg-sky-500/15 text-sky-300"
                      : "text-slate-300 hover:bg-slate-800 hover:text-slate-100",
                  )}
                >
                  {iconMap[item.label]}
                  {item.label}
                </Link>
              );
            })}
          </nav>
        </aside>
        <main>{children}</main>
      </div>
    </div>
  );
}