"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 } 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, hasAccessTo, loading } = 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 Main" : 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 bg-background flex flex-col hidden md:flex">
        <div className="px-6 py-5">
          <Logo href="/dashboard" className="w-full" imageClassName="object-contain object-left scale-110 origin-left" height={56} />
        </div>
        <nav className="flex-1 px-4 space-y-1.5 mt-4 overflow-y-auto">
          {/* <div className="pt-2 pb-2">
            <p className="px-3 text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
              <span className="w-1.5 h-1.5 rounded-full bg-white"></span> Free Tier
            </p>
          </div> */}
          
          <div className="pt-3 pb-1">
            <p className="px-3 text-[10px] font-black uppercase tracking-widest text-muted-foreground/60 flex items-center gap-2">
              <span className="flex-1 h-px bg-border/60"></span>
              <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-yellow-500 shadow-[0_0_8px_-2px_rgba(234,179,8,0.8)]"></span>Pro Tier</span>
              <span className="flex-1 h-px bg-border/60"></span>
            </p>
          </div>
          
          <NavItem href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
          {/* <NavItem href="/dashboard/dpp" icon={<FileText size={17} />} label="Target DPPs" active={pathname.startsWith("/dashboard/dpp")} /> */}
          <NavItem href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
          <NavItem 
            href="/dashboard/progress" 
            icon={<BarChart3 size={17} />} 
            label="Syllabus Tracker" 
            active={pathname.startsWith("/dashboard/progress")} 
            isLocked={!hasAccessTo("chapter-wise-progress-tracking")}
          />
          <NavItem 
            href="/dashboard/cbt" 
            icon={<CheckSquare size={17} />} 
            label="Mock Tests (CBT)" 
            active={pathname.startsWith("/dashboard/cbt")} 
            isLocked={!hasAccessTo("weekly-test-series")}
          />
          <NavItem 
            href="/dashboard/materials" 
            icon={<BookOpen size={17} />} 
            label="Quick Notes" 
            active={pathname.startsWith("/dashboard/materials")} 
            isLocked={!hasAccessTo("detailed-performance-analytics")}
          />
          <NavItem 
            href="/dashboard/analytics" 
            icon={<LineChart size={17} />} 
            label="Performance Analytics" 
            active={pathname.startsWith("/dashboard/analytics")} 
            isLocked={!hasAccessTo("detailed-performance-analytics")}
          />
          <NavItem 
            href="/dashboard/community" 
            icon={<School size={17} />} 
            label="Doubt Forum" 
            active={pathname.startsWith("/dashboard/community")} 
            isLocked={!hasAccessTo("doubt-resolution-community")}
          />
          
          <div className="pt-4 pb-1">
            <p className="px-3 text-[10px] font-black uppercase tracking-widest text-muted-foreground/60 flex items-center gap-2">
              <span className="flex-1 h-px bg-border/60"></span>
              <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-[#00F0FF] shadow-[0_0_8px_-2px_#00F0FF]"></span>AI Coach</span>
              <span className="flex-1 h-px bg-border/60"></span>
            </p>
          </div>
          <NavItem 
            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 
            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 
            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 
            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 
            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 
            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 
            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 
            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 
            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 
            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>
        
        <div className="p-4 border-t border-border space-y-2 bg-secondary/30">
          <Link 
            href="/dashboard/settings"
            className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 border ${
              pathname.startsWith("/dashboard/settings")
                ? "bg-background text-foreground font-medium border-border shadow-sm" 
                : "text-muted-foreground hover:bg-background/80 hover:text-foreground border-transparent hover:border-border/50"
            }`}
          >
            <Settings size={18} />
            <span className="text-sm">Settings</span>
          </Link>
          
          {/* Functional User Dropdown */}
          <div className="relative mt-2" ref={dropdownRef}>
            {dropdownOpen && user && (
              <div className="absolute bottom-full left-0 w-full mb-2 bg-background border border-border rounded-xl shadow-lg shadow-black/10 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">
                  <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>
                </div>
                <div className="p-1">
                  <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>
                  <button 
                    onClick={() => switchUser(DEMO_USERS.AI_COACH.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>
              </div>
            )}
            
            <button 
              onClick={() => setDropdownOpen(!dropdownOpen)}
              className="w-full flex items-center justify-between p-2 rounded-xl bg-background/50 hover:bg-background transition-colors border border-border/50 shadow-sm mt-3"
            >
              <div className="flex items-center gap-3 text-left">
                <div className="h-8 w-8 rounded-full bg-[#00F0FF]/25 text-[#00F0FF] flex items-center justify-center font-bold text-sm shadow-[0_0_10px_-2px_#00F0FF] shrink-0">
                  {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"><TierBadge tier={user ? (user.tier === "Al_Coach" ? "AI Coach" : user.tier) : "Free"} /></div>
                </div>
              </div>
              <ChevronUp size={16} 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-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20 font-bold tracking-wide uppercase px-2.5 py-0.5 animate-pulse">
                {targetExamLabel} Target
              </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>
            )}

            {/* Profile switcher dropdown for testing */}
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground font-bold hidden lg:inline">Demo Switcher:</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 }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean }) {
  return (
    <Link 
      href={isLocked ? "#" : href}
      className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${
        active 
          ? "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"
      }`}
    >
      <div className="flex items-center gap-2.5">
        <span className={`transition-all duration-200 ${
          active ? "text-[#00F0FF]" : isLocked ? "text-muted-foreground/30" : "text-muted-foreground/60 group-hover:text-foreground/80"
        }`}>
          {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="w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"></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>
  )
}