"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  BarChart3,
  FileText,
  Home,
  LightbulbIcon,
  LogOut,
  MessageSquare,
  Settings,
  User,
  VoteIcon,
  Info,
  ExternalLink,
  History,
  Bell,
  Twitter,
  Github,
  Linkedin,
  ClipboardList,
  ShieldCheck,
  ShieldAlert,
} from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ConnectWalletButton } from "@/components/connect-wallet-button"
import { useWalletStore } from "@/lib/wallet-store"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"

export function AppSidebar() {
  const pathname = usePathname()
  const { walletConnected, walletAddress, username, isVerified, disconnectWallet } = useWalletStore()

  const isActive = (path: string) => {
    if (path === '/') {
      return pathname === path
    }
    return pathname?.startsWith(path)
  }

  const mainNavItems = [
    {
      title: "Home",
      icon: Home,
      href: "/",
    },
    {
      title: "Issues",
      icon: ClipboardList,
      href: "/issues",
    },
    {
      title: "Submit Perspective",
      icon: MessageSquare,
      href: "/submit",
    },
    {
      title: "Insights Dashboard",
      icon: LightbulbIcon,
      href: "/insights",
    },
    {
      title: "Contributions",
      icon: VoteIcon,
      href: "/contributions",
    },
    {
      title: "Resolutions",
      icon: FileText,
      href: "/resolutions",
    },
    {
      title: "About",
      icon: Info,
      href: "/about",
    },
  ]

  const userNavItems = [
    {
      title: "Profile",
      icon: User,
      href: "/profile",
    },
    {
      title: "Settings",
      icon: Settings,
      href: "/settings",
    },
  ]

  return (
    <Sidebar variant="inset">
      <SidebarHeader className="flex flex-col gap-2 p-4">
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
              <BarChart3 className="h-4 w-4" />
            </div>
            <span className="text-lg font-bold">VoxPop</span>
          </Link>
          <SidebarTrigger className="ml-auto" />
        </div>
        <div className="mt-2">
          {walletConnected ? (
            <div className="rounded-md border p-3">
              <div className="flex items-center gap-2">
                <Avatar className="h-8 w-8">
                  <AvatarFallback>{username?.[0] || "V"}</AvatarFallback>
                </Avatar>
                <div className="flex flex-col overflow-hidden">
                  <div className="flex items-center gap-1">
                    <span className="truncate font-medium">{username || "VoxPop User"}</span>
                    {isVerified ? (
                      <ShieldCheck className="h-4 w-4 text-green-500" title="Verified User" />
                    ) : (
                      <ShieldAlert className="h-4 w-4 text-amber-500" title="Unverified User" />
                    )}
                  </div>
                  <span className="truncate text-xs text-muted-foreground">{walletAddress}</span>
                </div>
              </div>

              <div className="mt-1">
                <Link
                  href="/settings"
                  className="text-xs text-primary hover:underline inline-flex items-center"
                >
                  {isVerified ?
                    "Verified User (Full Access)" :
                    "Unverified User (Limited Access)"
                  }
                  <Settings className="ml-1 h-3 w-3" />
                </Link>
              </div>

              <div className="mt-3 flex flex-wrap gap-2">
                <Button variant="outline" size="sm" className="h-7 w-7 p-0" asChild>
                  <Link href="/profile/social">
                    <Twitter className="h-3.5 w-3.5" />
                    <span className="sr-only">Twitter</span>
                  </Link>
                </Button>
                <Button variant="outline" size="sm" className="h-7 w-7 p-0" asChild>
                  <Link href="/profile/social">
                    <Github className="h-3.5 w-3.5" />
                    <span className="sr-only">Github</span>
                  </Link>
                </Button>
                <Button variant="outline" size="sm" className="h-7 w-7 p-0" asChild>
                  <Link href="/profile/social">
                    <Linkedin className="h-3.5 w-3.5" />
                    <span className="sr-only">LinkedIn</span>
                  </Link>
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm" className="ml-auto h-7">
                      <span className="sr-only">More options</span>
                      <ExternalLink className="h-3.5 w-3.5" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuLabel>Account</DropdownMenuLabel>
                    <DropdownMenuItem asChild>
                      <Link href="/profile/transactions">
                        <History className="mr-2 h-4 w-4" />
                        Transaction History
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem asChild>
                      <Link href="/profile/notifications">
                        <Bell className="mr-2 h-4 w-4" />
                        Notifications
                      </Link>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={disconnectWallet} className="text-destructive focus:text-destructive">
                      <LogOut className="mr-2 h-4 w-4" />
                      Disconnect
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
          ) : (
            <ConnectWalletButton />
          )}
        </div>
      </SidebarHeader>
      <SidebarSeparator />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {mainNavItems.map((item) => (
                <SidebarMenuItem key={item.href}>
                  <SidebarMenuButton asChild isActive={isActive(item.href)} tooltip={item.title}>
                    <Link href={item.href}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarSeparator />
        <SidebarGroup>
          <SidebarGroupLabel>User</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {userNavItems.map((item) => (
                <SidebarMenuItem key={item.href}>
                  <SidebarMenuButton asChild isActive={isActive(item.href)} tooltip={item.title}>
                    <Link href={item.href}>
                      <item.icon className="h-4 w-4" />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      {walletConnected && (
        <SidebarFooter>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton onClick={disconnectWallet}>
                <LogOut className="mr-2 h-4 w-4" />
                <span>Disconnect</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarFooter>
      )}
    </Sidebar>
  )
}