"use client";

import {
  Baby,
  BadgeCheck,
  Bell,
  ChevronDown,
  ChevronRight,
  Clapperboard,
  Clock,
  CreditCard,
  Download,
  Film,
  Flag,
  HelpCircle,
  History,
  Home,
  ListVideo,
  LogOut,
  type LucideIcon,
  Menu,
  MessageSquare,
  Music,
  Music2,
  PlaySquare,
  Radio,
  Search,
  Settings,
  ShoppingBag,
  Sparkles,
  ThumbsUp,
} from "lucide-react";
import * as React from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  useSidebar,
} from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";

function getInitials(name: string) {
  return (
    name
      .split(" ")
      .filter(Boolean)
      .slice(0, 2)
      .map((part) => part[0]?.toUpperCase())
      .join("") || "U"
  );
}

const data = {
  user: {
    name: "علی رضایی",
    email: "ali@example.com",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar1.jpg",
  },
  navPrimary: [
    { title: "خانه", url: "#", icon: Home, isActive: true },
    { title: "ویدیوهای کوتاه", url: "#", icon: Clapperboard },
    { title: "اشتراک‌ها", url: "#", icon: PlaySquare },
    { title: "شما", url: "#", icon: History },
  ],
  subscriptions: [
    { name: "Theo - t3.gg", avatar: "/avatars/theo.jpg", isLive: true },
    { name: "Fireship", avatar: "/avatars/fireship.jpg", hasNew: true },
    { name: "Web Dev Simplified", avatar: "/avatars/webdev.jpg" },
    { name: "Traversy Media", avatar: "/avatars/traversy.jpg", hasNew: true },
    { name: "The Primeagen", avatar: "/avatars/prime.jpg" },
    { name: "Jack Herrington", avatar: "/avatars/jack.jpg", hasNew: true },
    { name: "Coding in Public", avatar: "/avatars/cip.jpg" },
  ],
  navYou: [
    { title: "تاریخچه", url: "#", icon: History },
    { title: "لیست‌های پخش", url: "#", icon: ListVideo },
    { title: "تماشا بعداً", url: "#", icon: Clock },
    { title: "ویدیوهای پسندیده", url: "#", icon: ThumbsUp },
    { title: "ویدیوهای شما", url: "#", icon: PlaySquare },
    { title: "دانلودها", url: "#", icon: Download },
  ],
  navExplore: [
    { title: "خرید", url: "#", icon: ShoppingBag },
    { title: "موسیقی", url: "#", icon: Music },
    { title: "فیلم", url: "#", icon: Film },
  ],
  navMoreFrom: [
    { title: "استودیوی ری یو آی", url: "#", icon: Radio },
    { title: "موسیقی ری یو آی", url: "#", icon: Music2 },
    { title: "ری یو آی کودکان", url: "#", icon: Baby },
  ],
  navFooter: [
    { title: "تنظیمات", url: "#", icon: Settings },
    { title: "تاریخچه گزارش", url: "#", icon: Flag },
    { title: "راهنما", url: "#", icon: HelpCircle },
    { title: "ارسال بازخورد", url: "#", icon: MessageSquare },
  ],
};

// Primary nav (Home, Shorts, Subscriptions, You)
function NavPrimary({
  items,
}: {
  items: { title: string; url: string; icon: LucideIcon; isActive?: boolean }[];
}) {
  return (
    <SidebarGroup>
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.title}>
            <SidebarMenuButton
              asChild
              isActive={item.isActive}
              tooltip={item.title}
            >
              <a href={item.url}>
                <item.icon />
                <span>{item.title}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}

// Subscriptions section with channel avatars
function NavSubscriptions({
  subscriptions,
}: {
  subscriptions: {
    name: string;
    avatar: string;
    isLive?: boolean;
    hasNew?: boolean;
  }[];
}) {
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <Collapsible defaultOpen>
        <SidebarGroupLabel asChild>
          <CollapsibleTrigger className="group/collapsible flex w-full items-center text-start">
            اشتراک‌ها
            <ChevronRight className="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
          </CollapsibleTrigger>
        </SidebarGroupLabel>
        <CollapsibleContent>
          <SidebarMenu>
            {subscriptions.map((channel) => (
              <SidebarMenuItem key={channel.name}>
                <SidebarMenuButton asChild>
                  <a href="#">
                    <Avatar className="size-6 ring-2 ring-muted">
                      <AvatarImage src={channel.avatar} />
                      <AvatarFallback className="bg-primary text-xs text-primary-foreground">
                        {channel.name[0]}
                      </AvatarFallback>
                    </Avatar>
                    <span className="truncate">{channel.name}</span>
                    {channel.isLive && (
                      <Radio className="ms-auto size-4 text-red-500" />
                    )}
                    {channel.hasNew && !channel.isLive && (
                      <span className="ms-auto size-2 rounded-full bg-blue-500" />
                    )}
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
            <SidebarMenuItem>
              <SidebarMenuButton>
                <ChevronDown className="size-4" />
                <span>نمایش بیشتر</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </CollapsibleContent>
      </Collapsible>
    </SidebarGroup>
  );
}

// "You" section - History, Playlists, etc.
function NavYou({
  items,
}: {
  items: { title: string; url: string; icon: LucideIcon }[];
}) {
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <Collapsible defaultOpen>
        <SidebarGroupLabel asChild>
          <CollapsibleTrigger className="group/collapsible flex w-full items-center text-start">
            شما
            <ChevronRight className="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
          </CollapsibleTrigger>
        </SidebarGroupLabel>
        <CollapsibleContent>
          <SidebarMenu>
            {items.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild>
                  <a href={item.url}>
                    <item.icon />
                    <span>{item.title}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
            <SidebarMenuItem>
              <SidebarMenuButton>
                <ChevronDown className="size-4" />
                <span>نمایش بیشتر</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </CollapsibleContent>
      </Collapsible>
    </SidebarGroup>
  );
}

// Explore section - Shopping, Music, Movies
function NavExplore({
  items,
}: {
  items: { title: string; url: string; icon: LucideIcon }[];
}) {
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <Collapsible defaultOpen>
        <SidebarGroupLabel asChild>
          <CollapsibleTrigger className="group/collapsible flex w-full items-center text-start">
            کاوش
            <ChevronRight className="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180" />
          </CollapsibleTrigger>
        </SidebarGroupLabel>
        <CollapsibleContent>
          <SidebarMenu>
            {items.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild>
                  <a href={item.url}>
                    <item.icon />
                    <span>{item.title}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
            <SidebarMenuItem>
              <SidebarMenuButton>
                <ChevronDown className="size-4" />
                <span>نمایش بیشتر</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </CollapsibleContent>
      </Collapsible>
    </SidebarGroup>
  );
}

// More from Zerotube section
function NavMoreFrom({
  items,
}: {
  items: { title: string; url: string; icon: LucideIcon }[];
}) {
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>بیشتر از ری یو آی</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.title}>
            <SidebarMenuButton asChild>
              <a href={item.url}>
                <item.icon />
                <span>{item.title}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}

// Footer nav - Settings, Help, etc.
function NavFooter({
  items,
}: {
  items: { title: string; url: string; icon: LucideIcon }[];
}) {
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.title}>
            <SidebarMenuButton asChild size="sm">
              <a href={item.url}>
                <item.icon />
                <span>{item.title}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}

// Footer links at the very bottom
function FooterLinks() {
  return (
    <div className="px-4 py-4 text-start text-xs text-muted-foreground">
      <div className="flex flex-wrap gap-x-2 gap-y-1">
        <a href="#" className="hover:underline">
          درباره
        </a>
        <a href="#" className="hover:underline">
          مطبوعات
        </a>
        <a href="#" className="hover:underline">
          حق نشر
        </a>
        <a href="#" className="hover:underline">
          تماس با ما
        </a>
        <a href="#" className="hover:underline">
          سازندگان
        </a>
        <a href="#" className="hover:underline">
          تبلیغات
        </a>
        <a href="#" className="hover:underline">
          توسعه‌دهندگان
        </a>
      </div>
      <div className="mt-2 flex flex-wrap gap-x-2 gap-y-1">
        <a href="#" className="hover:underline">
          قوانین
        </a>
        <a href="#" className="hover:underline">
          حریم خصوصی
        </a>
        <a href="#" className="hover:underline">
          سیاست و ایمنی
        </a>
      </div>
      <p className="mt-3">© ۱۴۰۴ ری یو آی</p>
    </div>
  );
}

function SiteHeader() {
  const { toggleSidebar } = useSidebar();

  return (
    <header className="fixed top-0 z-50 hidden w-full items-center border-b bg-background md:flex">
      {/* Left: Menu + Logo */}
      <div className="flex h-(--header-height) w-(--sidebar-width-icon) shrink-0 items-center justify-center">
        <Button
          className="size-9"
          variant="ghost"
          size="icon"
          onClick={toggleSidebar}
          aria-label="منو"
        >
          <Menu className="size-5" />
        </Button>
      </div>
      <div className="flex h-(--header-height) items-center pe-4">
        <a href="#" className="flex items-center gap-2">
          <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
            <img
              src="/block-media/shadcnblocks/block/logos/NovaSales-logo.svg"
              alt="شاد‌سی‌ان بلاکس"
              className="size-5 invert dark:invert-0"
            />
          </div>
          <span className="hidden text-lg font-semibold sm:block">
            ری یو آی
          </span>
        </a>
      </div>

      {/* Center: Search Bar */}
      <div className="flex flex-1 justify-center px-4">
        <InputGroup className="h-10 max-w-xl rounded-full">
          <InputGroupAddon>
            <Search className="text-muted-foreground" />
          </InputGroupAddon>
          <InputGroupInput placeholder="جستجو" />
          <InputGroupAddon align="inline-end">
            <Kbd>⌘K</Kbd>
          </InputGroupAddon>
        </InputGroup>
      </div>

      {/* Right: Avatar */}
      <div className="flex h-(--header-height) items-center gap-1 px-4">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              className="flex h-auto items-center gap-2 px-2 py-1"
            >
              <Avatar className="size-8">
                <AvatarImage src={data.user.avatar} alt={data.user.name} />
                <AvatarFallback>{getInitials(data.user.name)}</AvatarFallback>
              </Avatar>
              <span className="hidden font-medium sm:inline">
                {data.user.name}
              </span>
              <ChevronDown className="size-3 text-muted-foreground" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56" align="start">
            <DropdownMenuLabel className="font-normal">
              <div className="flex flex-col space-y-1 text-start">
                <p className="text-sm font-medium">{data.user.name}</p>
                <p className="text-xs text-muted-foreground">
                  {data.user.email}
                </p>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Sparkles className="me-2 size-4" />
                ارتقا به نسخه حرفه‌ای
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck className="me-2 size-4" />
                حساب کاربری
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCard className="me-2 size-4" />
                صورتحساب
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell className="me-2 size-4" />
                اعلان‌ها
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <LogOut className="me-2 size-4" />
              خروج
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}

function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar
      side="right"
      collapsible="icon"
      className="top-(--header-height) hidden h-[calc(100svh-var(--header-height))]! md:flex"
      {...props}
    >
      <SidebarContent className="overflow-hidden">
        <ScrollArea className="min-h-0 flex-1">
          <NavPrimary items={data.navPrimary} />
          <NavSubscriptions subscriptions={data.subscriptions} />
          <NavYou items={data.navYou} />
          <NavExplore items={data.navExplore} />
          <NavMoreFrom items={data.navMoreFrom} />
          <NavFooter items={data.navFooter} />
        </ScrollArea>
      </SidebarContent>
      <SidebarFooter className="group-data-[collapsible=icon]:hidden">
        <FooterLinks />
      </SidebarFooter>
    </Sidebar>
  );
}

export const iframeHeight = "800px";

export const description = "سایدبار با هدر و فرم جستجو.";

function MobileHeader() {
  return (
    <header className="sticky top-0 z-50 flex h-14 items-center justify-between border-b bg-background px-4 md:hidden">
      <a href="#" className="flex items-center gap-2">
        <div className="flex size-8 items-center justify-center rounded-sm bg-primary">
          <img
            src="/block-media/shadcnblocks/block/logos/NovaSales-logo.svg"
            alt="شاد‌سی‌ان بلاکس"
            className="size-5 invert dark:invert-0"
          />
        </div>
        <span className="text-lg font-semibold">ری یو آی</span>
      </a>
      <div className="flex items-center gap-1">
        <Button variant="ghost" size="icon" className="size-9" aria-label="جستجو">
          <Search className="size-5" />
          <span className="sr-only">جستجو</span>
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="size-9">
              <Avatar className="size-8">
                <AvatarImage src={data.user.avatar} alt={data.user.name} />
                <AvatarFallback>{getInitials(data.user.name)}</AvatarFallback>
              </Avatar>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56" align="start">
            <DropdownMenuLabel className="font-normal">
              <div className="flex flex-col space-y-1 text-start">
                <p className="text-sm font-medium">{data.user.name}</p>
                <p className="text-xs text-muted-foreground">
                  {data.user.email}
                </p>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Sparkles className="me-2 size-4" />
                ارتقا به نسخه حرفه‌ای
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck className="me-2 size-4" />
                حساب کاربری
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCard className="me-2 size-4" />
                صورتحساب
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell className="me-2 size-4" />
                اعلان‌ها
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <LogOut className="me-2 size-4" />
              خروج
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}

function MobileBottomNav() {
  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden">
      <div className="grid grid-cols-4">
        {data.navPrimary.map((item) => {
          const Icon = item.icon;
          return (
            <button
              key={item.title}
              type="button"
              className={cn(
                "flex flex-col items-center gap-1 py-2 text-xs transition-colors",
                item.isActive
                  ? "text-foreground"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              <Icon className="size-5" />
              <span className="sr-only">{item.title}</span>
              <span aria-hidden="true">{item.title}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
}

function ContentGrid() {
  return (
    <div className="flex flex-1 flex-col gap-4 p-4">
      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
        <div className="aspect-video rounded-xl bg-muted/50" />
        <div className="aspect-video rounded-xl bg-muted/50" />
        <div className="aspect-video rounded-xl bg-muted/50" />
      </div>
      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
        <div className="aspect-video rounded-xl bg-muted/50" />
        <div className="aspect-video rounded-xl bg-muted/50" />
        <div className="aspect-video rounded-xl bg-muted/50" />
      </div>
      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
        <div className="aspect-video rounded-xl bg-muted/50" />
        <div className="aspect-video rounded-xl bg-muted/50" />
        <div className="aspect-video rounded-xl bg-muted/50" />
      </div>
    </div>
  );
}

export function ApplicationShell11() {
  return (
    <div className="w-full [--header-height:calc(--spacing(14))]">
      <SidebarProvider
        dir="rtl"
        lang="fa"
        className="flex flex-col"
        style={{ "--sidebar-width-icon": "3rem" } as React.CSSProperties}
      >
        {/* Desktop layout */}
        <SiteHeader />
        <div className="hidden flex-1 pt-(--header-height) md:flex">
          <AppSidebar />
          <SidebarInset>
            <ContentGrid />
          </SidebarInset>
        </div>

        {/* Mobile layout */}
        <div className="flex flex-col md:hidden">
          <MobileHeader />
          <div className="pb-16">
            <ContentGrid />
          </div>
          <MobileBottomNav />
        </div>
      </SidebarProvider>
    </div>
  );
}