"use client"

import { ReactNode, useState, useEffect, useRef } from "react"
import { BookOpen, LayoutDashboard, Settings, FileText, Activity, LineChart, Trophy, User, ChevronUp, Lock, ShieldAlert, Flame, Target, Gauge, Zap, Calendar, Clock, BrainCircuit, BarChart3, School, CheckSquare } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { LanguageToggle } from "@/components/LanguageToggle"
import { Logo } from "@/components/Logo"
import { ThemeToggle } from "@/components/ThemeToggle"
import { TierBadge } from "@/components/TierBadge"
import { StreakCounter } from "@/components/StreakCounter"
import { AITutorChat } from "@/components/AI/AITutorChat"
import { useActiveUser, DEMO_USERS, isDemoUser } from "@/hooks/useActiveUser"
import { StreakOnboardingModal } from "@/components/Dashboard/StreakOnboardingModal"
import { Badge } from "@/components/ui/badge"
import MaintenanceScreen from "@/components/MaintenanceScreen"

export default function DashboardLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  
  const { userId, user, globalSettings, switchUser, logout, hasAccessTo, loading, trialInfo } = useActiveUser();
  const [maintenance, setMaintenance] = useState(false);
  const [checkingMaintenance, setCheckingMaintenance] = useState(true);

  useEffect(() => {
    if (globalSettings !== undefined && globalSettings !== null) {
      if (globalSettings.maintenance_mode) {
        setMaintenance(true);
      } else {
        setMaintenance(false);
      }
      setCheckingMaintenance(false);
    } else if (globalSettings === null && !loading) {
      // If we finished loading but settings failed to load
      setCheckingMaintenance(false);
    }
  }, [globalSettings, loading]);

  // Close dropdown when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setDropdownOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  const userInitials = user ? user.name.split(" ").filter(n => /^[a-zA-Z]/.test(n)).slice(0, 2).map(n => n[0]).join("").toUpperCase() : "DS"
  const targetExamLabel = user?.target_exam === "JEE_Main" ? "JEE" : user?.target_exam === "JEE_Advanced" ? "JEE Advanced" : user?.target_exam === "NEET" ? "NEET" : "NEET/JEE"

  // Trial logic removed as requested

  if (maintenance) {
    return <MaintenanceScreen />;
  }

  if (loading || !user) {
    return (
      <div className="h-screen w-screen flex flex-col items-center justify-center bg-background">
        <div className="animate-pulse flex flex-col items-center gap-4">
          <Logo height={56} className="mb-4" />
          <div className="h-6 w-6 border-4 border-[#00F0FF] border-t-transparent rounded-full animate-spin"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-background overflow-hidden text-foreground selection:bg-primary/20">
      {/* Sidebar */}
      <aside className="w-64 border-r border-border/60 bg-background/95 backdrop-blur-xl flex flex-col hidden md:flex relative">
        {/* Subtle gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-b from-[#00F0FF]/[0.02] via-transparent to-purple-500/[0.02] pointer-events-none" />
        
        {/* Logo */}
        <div className="px-5 py-4 border-b border-border/40">
          <Logo href="/dashboard" className="w-full" imageClassName="object-contain object-left scale-105 origin-left" height={52} />
        </div>
        
        <nav className="flex-1 min-h-0 px-3 py-3 overflow-y-auto custom-scrollbar space-y-0.5">
          
          {/* PRO TIER Section */}
          <div className="px-2 pt-2 pb-2">
            <div className="flex items-center gap-2">
              <div className="h-px flex-1 bg-gradient-to-r from-transparent via-yellow-500/40 to-transparent" />
              <span className="text-[10px] font-black uppercase tracking-[0.15em] text-yellow-600 dark:text-yellow-400 flex items-center gap-1.5 shrink-0">
                <span className="w-1 h-1 rounded-full bg-yellow-500 shadow-[0_0_4px_#EAB308]"></span>
                Pro Tier
              </span>
              <div className="h-px flex-1 bg-gradient-to-l from-transparent via-yellow-500/40 to-transparent" />
            </div>
          </div>
          
          <NavItem section="pro" href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
          <NavItem section="pro" href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
          <NavItem 
            section="pro"
            href="/dashboard/progress" 
            icon={<BarChart3 size={17} />} 
            label="Syllabus Tracker" 
            active={pathname.startsWith("/dashboard/progress")} 
            isLocked={!hasAccessTo("chapter-wise-progress-tracking")}
          />
          <NavItem 
            section="pro"
            href="/dashboard/cbt" 
            icon={<CheckSquare size={17} />} 
            label="Mock Tests (CBT)" 
            active={pathname.startsWith("/dashboard/cbt")} 
            isLocked={!hasAccessTo("weekly-test-series")}
          />
          <NavItem 
            section="pro"
            href="/dashboard/materials" 
            icon={<BookOpen size={17} />} 
            label="Quick Notes" 
            active={pathname.startsWith("/dashboard/materials")} 
            isLocked={!hasAccessTo("detailed-performance-analytics")}
          />
          <NavItem 
            section="pro"
            href="/dashboard/analytics" 
            icon={<LineChart size={17} />} 
            label="Performance Analytics" 
            active={pathname.startsWith("/dashboard/analytics")} 
            isLocked={!hasAccessTo("detailed-performance-analytics")}
          />
          <NavItem 
            section="pro"
            href="/dashboard/community" 
            icon={<School size={17} />} 
            label="Doubt Forum" 
            active={pathname.startsWith("/dashboard/community")} 
            isLocked={!hasAccessTo("doubt-resolution-community")}
          />
          
          {/* AI COACH Section */}
          <div className="px-2 pt-4 pb-2">
            <div className="flex items-center gap-2">
              <div className="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
              <span className="text-[10px] font-black uppercase tracking-[0.15em] text-cyan-600 dark:text-cyan-400 flex items-center gap-1.5 shrink-0">
                <span className="w-1 h-1 rounded-full bg-cyan-500 shadow-[0_0_6px_#00F0FF] dark:shadow-[0_0_8px_#00F0FF]"></span>
                AI Coach
              </span>
              <div className="h-px flex-1 bg-gradient-to-l from-transparent via-cyan-500/50 to-transparent" />
            </div>
          </div>
          
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/tutor" 
            icon={<BrainCircuitIcon />} 
            label="AI Tutor" 
            active={pathname.startsWith("/dashboard/ai-coach/tutor") || pathname === "/dashboard/ai-coach"} 
            isLocked={!hasAccessTo("ai-tutor-chat")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/cbt-dpp" 
            icon={<Zap size={17} />} 
            label="PrepPilot AI" 
            active={pathname.startsWith("/dashboard/ai-coach/cbt-dpp")} 
            isLocked={!hasAccessTo("ai-tutor-chat")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/readiness" 
            icon={<Gauge size={17} />} 
            label="Exam Readiness" 
            active={pathname.startsWith("/dashboard/ai-coach/readiness")} 
            isLocked={!hasAccessTo("detailed-performance-analytics")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/college-predictor" 
            icon={<School size={17} />} 
            label="College Predictor" 
            active={pathname.startsWith("/dashboard/ai-coach/college-predictor")} 
            isLocked={!hasAccessTo("college-predictor")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/strategy" 
            icon={<Target size={17} />} 
            label="Exam Strategy" 
            active={pathname.startsWith("/dashboard/ai-coach/strategy")} 
            isLocked={!hasAccessTo("exam-day-strategy")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/study-plan" 
            icon={<Calendar size={17} />} 
            label="AI Study Plan" 
            active={pathname.startsWith("/dashboard/ai-coach/study-plan")} 
            isLocked={!hasAccessTo("personalized-study-plan")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/time-optimization" 
            icon={<Clock size={17} />} 
            label="Time Optimization" 
            active={pathname.startsWith("/dashboard/ai-coach/time-optimization")} 
            isLocked={!hasAccessTo("personalized-study-plan")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/heatmap" 
            icon={<Flame size={17} />} 
            label="Mistake Heatmap" 
            active={pathname.startsWith("/dashboard/ai-coach/heatmap")} 
            isLocked={!hasAccessTo("ai-mistake-tracking")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/weekly-progress" 
            icon={<Activity size={17} />} 
            label="Weekly Progress" 
            active={pathname.startsWith("/dashboard/ai-coach/weekly-progress")} 
            isLocked={!hasAccessTo("detailed-performance-analytics")}
          />
          <NavItem 
            section="ai"
            href="/dashboard/ai-coach/mistakes" 
            icon={<BrainCircuit size={17} />} 
            label="Mistake Analyzer" 
            active={pathname.startsWith("/dashboard/ai-coach/mistakes")} 
            isLocked={!hasAccessTo("ai-mistake-tracking")}
          />
        </nav>
        
        {/* Bottom Settings + Profile */}
        <div className="p-3 border-t border-border/40 bg-secondary/10 space-y-1.5">
          <Link 
            href="/dashboard/settings"
            className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 border ${
              pathname.startsWith("/dashboard/settings")
                ? "bg-[#00F0FF]/10 text-foreground font-semibold border-[#00F0FF]/20" 
                : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground border-transparent"
            }`}
          >
            <Settings size={17} className="shrink-0" />
            <span className="text-[13px] font-medium">Settings</span>
          </Link>
          
          {/* Functional User Dropdown */}
          <div className="relative" ref={dropdownRef}>
            {dropdownOpen && user && (
              <div className="absolute bottom-full left-0 w-full mb-2 bg-background border border-border rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200 z-50">
                <div className="px-4 py-3 border-b border-border bg-secondary/30">
                  <p className="text-sm font-bold text-foreground truncate">{user.name}</p>
                  <p className="text-xs text-muted-foreground truncate">{user.email || user.phone}</p>
                  {/* Trial info in dropdown */}
                  {trialInfo.isTrialActive && (
                    <div className="mt-1.5 flex items-center gap-1.5">
                      <span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/20">
                        Day {trialInfo.trialDayNumber} of {trialInfo.trialTotalDays} Trial
                      </span>
                      <span className="text-[10px] text-muted-foreground">{trialInfo.trialDaysRemaining}d left</span>
                    </div>
                  )}
                </div>
                <div className="p-1.5">
                  <Link href="/dashboard/settings" className="flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-secondary rounded-lg transition-colors">
                    <User size={16} /> Edit Profile
                  </Link>
                  {isDemoUser(userId) && (
                    <button 
                      onClick={() => switchUser(DEMO_USERS.NEHA.id)}
                      className="w-full text-left flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-secondary rounded-lg transition-colors"
                    >
                      Reset Demo
                    </button>
                  )}
                  <div className="h-px bg-border my-1" />
                  <button 
                    onClick={logout}
                    className="w-full text-left flex items-center gap-2 px-3 py-2 text-sm text-red-500 hover:bg-red-500/10 rounded-lg transition-colors font-semibold"
                  >
                    Sign Out
                  </button>
                </div>
              </div>
            )}
            
            <button 
              onClick={() => setDropdownOpen(!dropdownOpen)}
              className="w-full flex items-center justify-between p-2.5 rounded-xl bg-secondary/40 hover:bg-secondary/70 transition-all duration-200 border border-border/50 hover:border-border group"
            >
              <div className="flex items-center gap-3 text-left">
                <div className="h-8 w-8 rounded-full bg-cyan-500/20 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-400 flex items-center justify-center font-bold text-sm shrink-0 border border-cyan-500/20 dark:shadow-[0_0_10px_-2px_#00F0FF]">
                  {userInitials}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-bold leading-none truncate">{user ? user.name.split(" ")[0] : "Loading..."}</p>
                  <div className="mt-1">
                    {trialInfo.isTrialActive ? (
                      <span className="inline-flex items-center text-[10px] font-bold text-primary">
                        Day {trialInfo.trialDayNumber}/{trialInfo.trialTotalDays} Trial
                      </span>
                    ) : (
                      <TierBadge tier={user ? (user.tier === "Al_Coach" ? "AI Coach" : user.tier) : "Free"} />
                    )}
                  </div>
                </div>
              </div>
              <ChevronUp size={15} className={`text-muted-foreground transition-transform shrink-0 ${dropdownOpen ? "rotate-180" : ""}`} />
            </button>
          </div>
        </div>
      </aside>
      
      {/* Main Content Area */}
      <div className="flex-1 flex flex-col h-screen overflow-hidden">
        {/* Top Header Static Bar */}
        <header className="h-16 border-b border-border bg-background/95 backdrop-blur-md flex items-center justify-between px-8 shrink-0 z-40">
          <div className="flex items-center gap-4">
            <h2 className="font-bold text-lg hidden sm:block">
              {user ? `Welcome back, ${user.name.split(" ")[0]}!` : "Welcome back!"}
            </h2>
            {user && (
              <Badge variant="outline" className="bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 font-bold tracking-wide uppercase px-2.5 py-0.5 animate-pulse shadow-none dark:shadow-[0_0_10px_-2px_#00F0FF]">
                {targetExamLabel} Target
              </Badge>
            )}
            {/* Trial countdown badge — shown to trial users in top header */}
            {trialInfo.isTrialActive && (
              <Badge variant="outline" className="bg-primary/10 text-primary border-primary/20 font-bold px-2.5 py-0.5 hidden md:inline-flex gap-1">
                <span className="size-1.5 rounded-full bg-primary animate-pulse"></span>
                Day {trialInfo.trialDayNumber}/{trialInfo.trialTotalDays} Trial · {trialInfo.trialDaysRemaining}d left
              </Badge>
            )}
          </div>
          
          <div className="flex items-center gap-4">
            {/* Streak count moved to top header */}
            {user && (
              <Link href="/dashboard/streaks" className="hover:opacity-85 transition-opacity">
                <StreakCounter streak={user.streak_count} />
              </Link>
            )}

            {/* Demo Switcher — only visible when logged in as a known demo account */}
            {isDemoUser(userId) && (
              <div className="flex items-center gap-2">
                <span className="text-xs text-muted-foreground font-bold hidden lg:inline">Demo:</span>
                <select 
                  value={userId}
                  onChange={(e) => switchUser(e.target.value)}
                  className="bg-secondary border border-border text-foreground px-2.5 py-1.5 rounded-xl text-xs font-bold focus:ring-2 focus:ring-[#00F0FF] outline-none cursor-pointer hover:bg-secondary/80 transition-colors"
                >
                  <option value={DEMO_USERS.NEHA.id}>Neha Verma (AI Coach)</option>
                  <option value={DEMO_USERS.AI_COACH.id}>Rahul (AI Coach)</option>
                  <option value={DEMO_USERS.PRO.id}>Priya (Pro Plan)</option>
                  {/* <option value={DEMO_USERS.FREE.id}>Amit (Free Plan)</option> */}
                </select>
              </div>
            )}

            <div className="flex items-center gap-2 border-l border-border pl-4">
              {/* <LanguageToggle /> */}
              <ThemeToggle />
            </div>
          </div>
        </header>

        {/* Scrollable page body */}
        <main className="flex-1 overflow-y-auto relative bg-background/50">
          {children}
        </main>
      </div>
      
      {/* Global AI Tutor Chat */}
      {hasAccessTo("ai-tutor-chat") && <AITutorChat />}
      
      {/* Onboarding Motivation Popup */}
      <StreakOnboardingModal />
    </div>
  )
}

function NavItem({ href, icon, label, active, isLocked, section }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean, section?: "pro" | "ai" }) {
  // Section-aware active color tokens (light mode only, dark mode falls back to cyan)
  const activeClasses = active
    ? section === "pro"
      ? "bg-yellow-50 light:bg-yellow-50 text-yellow-700 dark:bg-[#00F0FF]/10 dark:text-[#00F0FF] font-semibold border border-yellow-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
      : section === "ai"
      ? "bg-cyan-50 dark:bg-[#00F0FF]/10 text-cyan-800 dark:text-[#00F0FF] font-semibold border border-cyan-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(6,182,212,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
      : "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
    : isLocked
    ? "text-muted-foreground/40 cursor-not-allowed border border-transparent"
    : "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"

  const iconActiveClass = active
    ? section === "pro"
      ? "text-yellow-600 dark:text-[#00F0FF]"
      : section === "ai"
      ? "text-cyan-700 dark:text-[#00F0FF]"
      : "text-[#00F0FF]"
    : isLocked
    ? "text-muted-foreground/30"
    : "text-muted-foreground/60 group-hover:text-foreground/80"

  const activeBarClass = active
    ? section === "pro"
      ? "w-1 h-4 rounded-full bg-yellow-500 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(234,179,8,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
      : section === "ai"
      ? "w-1 h-4 rounded-full bg-cyan-600 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(6,182,212,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
      : "w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"
    : ""

  return (
    <Link 
      href={isLocked ? "#" : href}
      className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${activeClasses}`}
    >
      <div className="flex items-center gap-2.5">
        <span className={`transition-all duration-200 ${iconActiveClass}`}>
          {icon}
        </span>
        <span className="text-[13px] font-medium tracking-[-0.01em]">{label}</span>
      </div>
      {isLocked && <Lock size={11} className="text-muted-foreground/30 shrink-0" />}
      {active && <span className={activeBarClass}></span>}
    </Link>
  )
}

function BrainCircuitIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-brain-circuit">
      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
      <path d="M18 8a3 3 0 0 0-3-3h-1"/>
      <path d="M9 5H8a3 3 0 0 0-3 3v1"/>
      <path d="M5 14v1a3 3 0 0 0 3 3h1"/>
      <path d="M14 18h1a3 3 0 0 0 3-3v-1"/>
      <path d="M12 18v2"/>
      <path d="M12 4V2"/>
    </svg>
  )
}