"use client"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import LogoBox from "@/components/dashboard/logo-box"
import Link from "next/link"
import { usePathname } from "next/navigation"
import React, { useEffect, useState, useRef, type JSX } from "react"
import Image from "next/image"
import {
  FolderGit2,
  KeyRound,
  CirclePlay,
  Home,
  CreditCard,
  BookText,
  Moon,
  Sun,
  MoreHorizontal,
  Layers,
  Users,
  Building2,
  Check,
  UserCircle,
  Menu,
  Shield,
  Loader2,
  Zap,
  BarChart3,
  Map,
} from "lucide-react"
import type { User as UserProfile } from "@auth0/nextjs-auth0/types"
import { SignOut } from "../ui/SignOut"
import { useViewMode } from "@/app/app/ViewModeContext"
import { usePrivacyMode } from "@/app/app/PrivacyModeContext"
import { Breadcrumb } from "./bread-crumb"
import { SIDEBAR_ANNOUNCEMENT } from "@/config/announcements"
import { Switch } from "@/components/ui/switch"
import { getCurrentUserSubscriptionData } from "@/app/(dashboard)/dashboard/action"
import { Progress } from "@/components/ui/progress"
import { formatCredits, calculateCreditsPercentage, getProgressBarClassName } from "@/lib/utils"
import { isTeamMemberCheck } from "@/lib/team-members"

interface SidebarProps {
  className: string
  user?: UserProfile
  isLoading?: boolean
  error?: Error | null
  initialSubscription?: {
    optimizations_used: number
    optimizations_limit: number
  } | null
}

export function Sidebar({
  className,
  user,
  isLoading,
  error,
  initialSubscription,
}: SidebarProps): JSX.Element {
  const currentRoute = usePathname()
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const { loading: loadingOrgs, orgs, switchToMode, currentOrg, mode } = useViewMode()
  const {
    isPrivacyMode,
    isLoading: isPrivacyLoading,
    canUsePrivacyMode,
    canTogglePrivacyMode,
    togglePrivacyMode,
    isOrgMode: isPrivacyOrgMode,
  } = usePrivacyMode()
  const [showPrivacyInfo, setShowPrivacyInfo] = useState(false)
  const [isMobileOpen, setIsMobileOpen] = useState(false)
  const [subscription, setSubscription] = useState<{
    optimizations_used: number
    optimizations_limit: number
  } | null>(initialSubscription ?? null)
  const subscriptionFetchRef = useRef(false)

  const onMobileClose = () => {
    setIsMobileOpen(false)
  }

  const isMemberOfOrg = mode === "organization" && !!currentOrg

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme")
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const shouldBeDark = savedTheme === "dark" || (!savedTheme && prefersDark)
    setIsDarkMode(shouldBeDark)

    if (shouldBeDark) {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }, [])

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsDropdownOpen(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  const usedInitialSubscriptionRef = useRef(false)

  useEffect(() => {
    if (mode !== "personal") {
      setSubscription(null)
      return
    }

    // Skip fetch if initial data was provided by the server (first render only)
    if (initialSubscription !== undefined && !usedInitialSubscriptionRef.current) {
      usedInitialSubscriptionRef.current = true
      setSubscription(initialSubscription)
      return
    }

    if (subscriptionFetchRef.current) return
    subscriptionFetchRef.current = true

    let cancelled = false
    getCurrentUserSubscriptionData()
      .then(data => {
        if (cancelled) return
        if (data) {
          setSubscription({
            optimizations_used: data.optimizations_used || 0,
            optimizations_limit: data.optimizations_limit || 0,
          })
        } else {
          setSubscription(null)
        }
      })
      .catch(() => {
        if (!cancelled) setSubscription(null)
      })

    return () => {
      cancelled = true
      subscriptionFetchRef.current = false
    }
  }, [mode, initialSubscription])

  const toggleTheme = () => {
    const newMode = !isDarkMode
    setIsDarkMode(newMode)

    if (newMode) {
      document.documentElement.classList.add("dark")
      localStorage.setItem("theme", "dark")
    } else {
      document.documentElement.classList.remove("dark")
      localStorage.setItem("theme", "light")
    }
  }

  const profileButton = () => {
    if (loadingOrgs || isLoading) {
      return (
        <div className="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-muted transition-colors">
          <div className="w-8 h-8 rounded-full bg-muted-foreground/20 animate-pulse"></div>
          <div className="flex-1">
            <div className="h-4 w-3/4 bg-muted-foreground/20 rounded mb-1 animate-pulse"></div>
            <div className="h-3 w-1/2 bg-muted-foreground/20 rounded animate-pulse"></div>
          </div>
        </div>
      )
    }
    return (
      <button
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
        className="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-muted transition-colors group"
      >
        {error ? (
          <div className="w-8 h-8 rounded-full bg-destructive/20 flex items-center justify-center">
            <span className="text-destructive text-xs">!</span>
          </div>
        ) : user ? (
          <>
            <div className="relative">
              {mode === "organization" && currentOrg ? (
                <Image
                  src={currentOrg.avatarUrl || "/default-avatar.png"}
                  alt={currentOrg.name}
                  width={32}
                  height={32}
                  className="rounded ring-2 ring-primary/20"
                />
              ) : (
                <Image
                  src={user.picture || "/default-avatar.png"}
                  alt="Profile"
                  width={32}
                  height={32}
                  className="rounded-full ring-2 ring-primary/20"
                />
              )}
              <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-background rounded-full"></div>
            </div>
            <div className="flex-1 text-left min-w-0">
              {mode === "organization" && currentOrg ? (
                <>
                  <p className="text-sm font-medium truncate">{currentOrg.name}</p>
                  <p className="text-xs text-muted-foreground truncate capitalize">
                    {currentOrg.role}
                  </p>
                </>
              ) : (
                <>
                  <p className="text-sm font-medium truncate">
                    {user.nickname || user.email?.split("@")[0] || "User"}
                  </p>
                  <p className="text-xs text-muted-foreground truncate">Personal Account</p>
                </>
              )}
            </div>
            <MoreHorizontal
              size={16}
              className="text-muted-foreground group-hover:text-foreground transition-colors"
            />
          </>
        ) : (
          <>
            <div className="w-8 h-8 rounded-full bg-muted-foreground/20"></div>
            <div className="flex-1">
              <p className="text-sm text-muted-foreground">Not signed in</p>
            </div>
          </>
        )}
      </button>
    )
  }

  return (
    <>
      {/* Mobile backdrop overlay */}
      {isMobileOpen && (
        <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={onMobileClose} />
      )}
      <div
        className={cn(
          "flex flex-col h-screen pt-3 pb-6 w-60 bg-background transition-transform duration-300 ease-in-out",
          // Mobile: fixed positioning with slide animation
          "fixed md:relative z-50",
          // Hide off-screen on mobile by default, show when open
          isMobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
          className,
        )}
      >
        {/* Mobile close button */}
        {/* <button
          onClick={onMobileClose}
          className="absolute top-4 right-4 p-2 rounded-lg hover:bg-muted transition-colors md:hidden"
          aria-label="Close menu"
        >
          <X size={20} />
        </button> */}

        <LogoBox />

        <div className="flex-1 overflow-y-auto">
          <div className="px-3 py-4">
            {/* Main Navigation Group - Always visible */}
            <Link href="/dashboard" prefetch={false} className="block mb-1">
              <Button
                variant={currentRoute === "/dashboard" ? "secondary" : "ghost"}
                className="flex items-center justify-start w-full"
              >
                <Home size={16} className="mr-2 h-4 w-4 shrink-0" />
                Dashboard
              </Button>
            </Link>

            <Link href="/review-optimizations" prefetch={false} className="block mb-1">
              <Button
                variant={currentRoute === "/review-optimizations" ? "secondary" : "ghost"}
                className="flex items-center justify-start w-full"
              >
                <Layers size={16} className="mr-2 h-4 w-4 shrink-0" />
                Review Optimizations
              </Button>
            </Link>

            {/* Show full navigation for personal mode or admin/owner in org mode */}
            <Link href="/repositories" prefetch={false} className="block mb-1">
              <Button
                variant={currentRoute === "/repositories" ? "secondary" : "ghost"}
                className="flex items-center justify-start w-full"
              >
                <FolderGit2 size={16} className="mr-2 h-4 w-4 shrink-0" />
                Repositories
              </Button>
            </Link>

            {/* Members tab - only for org members */}
            {isMemberOfOrg && (
              <Link href="/members" prefetch={false} className="block mb-1">
                <Button
                  variant={currentRoute === "/members" ? "secondary" : "ghost"}
                  className="flex items-center justify-start w-full"
                >
                  <Users size={16} className="mr-2 h-4 w-4 shrink-0" />
                  Members
                </Button>
              </Link>
            )}

            {/* Observability Links - Only for Team Members */}
            {user &&
              isTeamMemberCheck({
                email: user.email || undefined,
                nickname: user.nickname || undefined,
              }) && (
                <>
                  {/* Divider */}
                  <div className="my-3">
                    <div className="h-px bg-border" />
                  </div>

                  {/* Observability Group */}
                  <Link
                    href="/observability/traces"
                    prefetch={false}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block mb-1"
                  >
                    <Button
                      variant={currentRoute?.startsWith("/observability") ? "secondary" : "ghost"}
                      className="flex items-center justify-start w-full"
                    >
                      <BarChart3 size={16} className="mr-2 h-4 w-4 shrink-0" />
                      Observability
                    </Button>
                  </Link>
                  <Link href="/roadmap" prefetch={false} className="block mb-1">
                    <Button
                      variant={currentRoute?.startsWith("/roadmap") ? "secondary" : "ghost"}
                      className="flex items-center justify-start w-full"
                    >
                      <Map size={16} className="mr-2 h-4 w-4 shrink-0" />
                      Roadmap
                    </Button>
                  </Link>
                </>
              )}

            {/* Divider */}
            <div className="my-3">
              <div className="h-px bg-border" />
            </div>

            {/* Configuration Group */}
            <Link href="/getting-started" prefetch={false} className="block mb-1">
              <Button
                variant={currentRoute === "/getting-started" ? "secondary" : "ghost"}
                className="flex items-center justify-start w-full"
              >
                <CirclePlay size={16} className="mr-2 h-4 w-4 shrink-0" />
                Getting Started
              </Button>
            </Link>

            <Link href="https://docs.codeflash.ai" target="_blank" className="block mb-1">
              <Button variant="ghost" className="flex items-center justify-start w-full">
                <BookText className="mr-2 h-4 w-4 shrink-0" />
                Documentation
              </Button>
            </Link>

            {/* Divider */}
            <div className="my-3">
              <div className="h-px bg-border" />
            </div>

            <Link href="/apikeys" prefetch={false} className="block mb-1">
              <Button
                variant={currentRoute === "/apikeys" ? "secondary" : "ghost"}
                className="flex items-center justify-start w-full"
              >
                <KeyRound size={16} className="mr-2 h-4 w-4 shrink-0" />
                API Keys
              </Button>
            </Link>

            {/* Billing - Only for Personal Account */}
            {mode === "personal" && (
              <Link href="/billing" prefetch={false} className="block mb-1">
                <Button
                  variant={currentRoute === "/billing" ? "secondary" : "ghost"}
                  className="flex items-center justify-start w-full"
                >
                  <CreditCard size={16} className="mr-2 h-4 w-4 shrink-0" />
                  Billing
                </Button>
              </Link>
            )}
          </div>
        </div>

        {/* Theme and Profile Section */}
        <div className="px-3 border-t border-border pt-4 space-y-2">
          {/* VS Code Announcement - Subtle */}
          {SIDEBAR_ANNOUNCEMENT.enabled && (
            <Link
              href={SIDEBAR_ANNOUNCEMENT.href || "#"}
              target="_blank"
              rel="noreferrer"
              className="block mb-3"
            >
              <div className="group px-2.5 py-1.5 rounded-md border border-border/20 bg-gradient-to-br from-muted/5 to-muted/10 hover:from-muted/20 hover:to-muted/30 hover:border-primary/20 transition-all duration-200">
                <div className="flex items-center justify-between gap-2">
                  <span className="text-[10px] text-muted-foreground/70 group-hover:text-muted-foreground truncate">
                    <span className="text-primary/90 font-medium">
                      {SIDEBAR_ANNOUNCEMENT.highlight}
                    </span>{" "}
                    {SIDEBAR_ANNOUNCEMENT.message.replace(SIDEBAR_ANNOUNCEMENT.highlight || "", "")}
                  </span>
                  <span className="text-[9px] text-primary/50 group-hover:text-primary font-medium whitespace-nowrap">
                    {SIDEBAR_ANNOUNCEMENT.cta} →
                  </span>
                </div>
              </div>
            </Link>
          )}

          {/* Theme Toggle */}
          <Button
            onClick={toggleTheme}
            variant="ghost"
            className="flex items-center justify-start w-full"
          >
            {isDarkMode ? (
              <Sun size={16} className="mr-2 h-4 w-4 shrink-0" />
            ) : (
              <Moon size={16} className="mr-2 h-4 w-4 shrink-0" />
            )}
            {isDarkMode ? "Light mode" : "Dark mode"}
          </Button>

          {/* Privacy Mode Toggle */}
          <div
            className="relative"
            onMouseEnter={() => setShowPrivacyInfo(true)}
            onMouseLeave={() => setShowPrivacyInfo(false)}
          >
            <div
              className={cn(
                "flex items-center justify-between w-full px-4 py-2.5 rounded-lg transition-all",
                canTogglePrivacyMode
                  ? "cursor-pointer hover:bg-muted/80"
                  : "cursor-not-allowed opacity-60",
                isPrivacyMode && canUsePrivacyMode
                  ? "bg-primary/10 border border-primary/20"
                  : "bg-muted/50 border border-transparent",
              )}
              onClick={canTogglePrivacyMode ? togglePrivacyMode : undefined}
            >
              <div className="flex items-center gap-3">
                {isPrivacyLoading ? (
                  <Loader2
                    size={16}
                    className="h-4 w-4 shrink-0 animate-spin text-muted-foreground"
                  />
                ) : (
                  <Shield
                    size={16}
                    className={cn(
                      "h-4 w-4 shrink-0 transition-colors",
                      isPrivacyMode && canUsePrivacyMode ? "text-primary" : "text-muted-foreground",
                    )}
                  />
                )}
                <div className="flex flex-col">
                  <span
                    className={cn(
                      "text-sm font-medium transition-colors",
                      isPrivacyMode && canUsePrivacyMode ? "text-primary" : "text-foreground",
                    )}
                  >
                    Privacy Mode
                  </span>
                  <span className="text-[10px] text-muted-foreground">
                    {isPrivacyOrgMode
                      ? // Organization mode messages
                        !canUsePrivacyMode
                        ? "Org needs subscription"
                        : !canTogglePrivacyMode
                          ? isPrivacyMode
                            ? "Enabled (Admin only)"
                            : "Disabled (Admin only)"
                          : isPrivacyMode
                            ? "Your code stays on GitHub"
                            : "Optimized for speed"
                      : // Personal mode messages
                        !canUsePrivacyMode
                        ? "Upgrade to Pro"
                        : isPrivacyMode
                          ? "Your code stays on GitHub"
                          : "Optimized for speed"}
                  </span>
                </div>
              </div>
              <Switch
                checked={isPrivacyMode}
                onCheckedChange={togglePrivacyMode}
                disabled={isPrivacyLoading || !canTogglePrivacyMode}
              />
            </div>

            {/* Tooltip */}
            {showPrivacyInfo && (
              <div className="absolute bottom-full left-0 mb-2 w-72 p-4 bg-popover border border-border rounded-xl shadow-xl text-xs z-[9999]">
                <div className="flex items-center gap-2 mb-2">
                  <Shield
                    size={14}
                    className={
                      isPrivacyMode && canUsePrivacyMode ? "text-primary" : "text-muted-foreground"
                    }
                  />
                  <p className="font-semibold text-sm">Privacy Mode</p>
                  {isPrivacyOrgMode && (
                    <span className="text-[10px] bg-blue-500/10 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded font-medium">
                      Org
                    </span>
                  )}
                  {!canUsePrivacyMode && (
                    <span className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded font-medium">
                      Pro
                    </span>
                  )}
                </div>
                <div className="space-y-2">
                  {!canUsePrivacyMode && (
                    <div className="p-2 rounded-lg bg-amber-500/10 border border-amber-500/20">
                      <p className="text-amber-600 dark:text-amber-400 leading-relaxed">
                        {isPrivacyOrgMode ? (
                          <>
                            <span className="font-semibold">
                              Organization subscription required
                            </span>{" "}
                            to enable privacy mode for this organization.
                          </>
                        ) : (
                          <>
                            <span className="font-semibold">Upgrade to Pro</span> to keep your code
                            exclusively on GitHub.
                          </>
                        )}
                      </p>
                    </div>
                  )}
                  {isPrivacyOrgMode && canUsePrivacyMode && !canTogglePrivacyMode && (
                    <div className="p-2 rounded-lg bg-blue-500/10 border border-blue-500/20">
                      <p className="text-blue-600 dark:text-blue-400 leading-relaxed">
                        <span className="font-semibold">Admin only:</span> Only organization admins
                        can change this setting.
                      </p>
                    </div>
                  )}
                  <div
                    className={cn(
                      "p-2 rounded-lg transition-colors",
                      isPrivacyMode && canUsePrivacyMode ? "bg-primary/10" : "bg-muted/50",
                    )}
                  >
                    <p className="text-muted-foreground leading-relaxed">
                      {isPrivacyMode && canUsePrivacyMode ? (
                        <>
                          <span className="text-primary font-semibold">On:</span> Your code never
                          leaves GitHub. We fetch it directly when needed, which may take a moment
                          longer.
                        </>
                      ) : (
                        <>
                          <span className="font-semibold">Off:</span> We cache your code temporarily
                          for faster loading. Everything is cleaned up when you create a PR.
                        </>
                      )}
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>
          {/* Optimization Attempts Usage - Only for Personal Accounts */}
          {mode === "personal" &&
            subscription &&
            (() => {
              const percentage = calculateCreditsPercentage(
                subscription.optimizations_used,
                subscription.optimizations_limit,
              )
              const progressBarClassName = getProgressBarClassName(percentage)

              return (
                <div className="px-2 py-1.5 rounded-lg bg-muted/50 border border-border/50 space-y-1.5">
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex items-center gap-2 min-w-0 flex-1">
                      <Zap size={14} className="text-primary shrink-0" />
                      <span className="text-xs text-muted-foreground truncate">
                        Optimization Attempts
                      </span>
                    </div>
                    <div className="flex items-center gap-1 shrink-0">
                      <span className="text-xs font-medium text-foreground">
                        {formatCredits(subscription.optimizations_used)}
                      </span>
                      <span className="text-xs text-muted-foreground">/</span>
                      <span className="text-xs text-muted-foreground">
                        {formatCredits(subscription.optimizations_limit)}
                      </span>
                    </div>
                  </div>
                  <div className="relative">
                    <Progress value={percentage} className={`h-1.5 ${progressBarClassName}`} />
                  </div>
                </div>
              )
            })()}

          {/* Profile with Organization Switcher */}
          <div className="relative" ref={dropdownRef}>
            {profileButton()}

            {/* Dropdown Menu */}
            {isDropdownOpen && user && (
              <div className="absolute bottom-full left-0 right-0 mb-2 bg-card rounded-lg shadow-lg border border-border overflow-hidden z-50 max-h-96 overflow-y-auto">
                {/* Current User Info */}
                <div className="px-3 py-3 border-b border-border">
                  <div className="flex items-center gap-3">
                    <Image
                      src={user.picture || "/default-avatar.png"}
                      alt="Profile"
                      width={40}
                      height={40}
                      className="rounded-full"
                    />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">
                        {user.nickname || user.email?.split("@")[0] || "User"}
                      </p>
                      <p className="text-xs text-muted-foreground truncate">{user.email}</p>
                    </div>
                  </div>
                </div>

                {/* Account Switcher Section */}
                {!loadingOrgs && (
                  <>
                    {/* Personal Account */}
                    <div className="py-1">
                      <div className="px-3 py-1.5">
                        <p className="text-xs font-semibold text-muted-foreground">Accounts</p>
                      </div>
                      <button
                        onClick={() => {
                          setIsDropdownOpen(false)
                          switchToMode("personal")
                        }}
                        className="w-full flex items-center gap-2 px-3 py-2 hover:bg-muted transition-colors text-left"
                      >
                        {user.picture ? (
                          <Image
                            src={user.picture}
                            alt="Personal"
                            width={24}
                            height={24}
                            className="rounded-full"
                          />
                        ) : (
                          <UserCircle size={24} className="text-muted-foreground" />
                        )}
                        <div className="flex-1 min-w-0">
                          <p className="text-sm truncate">
                            {user.nickname || user.email?.split("@")[0] || "Personal"}
                          </p>
                          <p className="text-xs text-muted-foreground">Personal Account</p>
                        </div>
                        {mode === "personal" && (
                          <Check size={16} className="text-primary flex-shrink-0" />
                        )}
                      </button>
                    </div>

                    {/* Organizations */}
                    {orgs.length > 0 && (
                      <>
                        <div className="h-px bg-border" />
                        <div className="py-1">
                          <div className="px-3 py-1.5">
                            <p className="text-xs font-semibold text-muted-foreground">
                              Organizations
                            </p>
                          </div>
                          {orgs.map(org => (
                            <button
                              key={org.id}
                              onClick={() => {
                                setIsDropdownOpen(false)
                                switchToMode("organization", org.id)
                              }}
                              className="w-full flex items-center gap-2 px-3 py-2 hover:bg-muted transition-colors text-left"
                            >
                              {org.avatarUrl ? (
                                <Image
                                  src={org.avatarUrl}
                                  alt={org.name}
                                  width={24}
                                  height={24}
                                  className="rounded"
                                />
                              ) : (
                                <Building2 size={24} className="text-muted-foreground" />
                              )}
                              <div className="flex-1 min-w-0">
                                <p className="text-sm truncate">{org.name}</p>
                                <p className="text-xs text-muted-foreground capitalize">
                                  {org.role}
                                </p>
                              </div>
                              {mode === "organization" && currentOrg?.id === org.id && (
                                <Check size={16} className="text-primary flex-shrink-0" />
                              )}
                            </button>
                          ))}
                        </div>
                      </>
                    )}
                  </>
                )}

                {/* Loading State */}
                {loadingOrgs && (
                  <div className="px-3 py-6">
                    <div className="flex items-center justify-center">
                      <div className="h-5 w-5 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
                    </div>
                  </div>
                )}

                {/* Settings & Sign Out */}
                <div className="h-px bg-border" />
                <div className="py-1">
                  <SignOut />
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="md:hidden sticky top-0 z-30 bg-background border-b border-border/30 px-4 py-3 flex items-center gap-3">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setIsMobileOpen(true)}
          aria-label="Open menu"
        >
          <Menu size={20} />
        </Button>
        <div className="flex-1 overflow-hidden">
          <Breadcrumb className="text-xs" hideRoot />
        </div>
      </div>
    </>
  )
}
