"use client";

import {
  ArchiveX,
  BadgeCheck,
  Bell,
  Calendar,
  ChevronDown,
  ChevronsUpDown,
  CreditCard,
  File,
  FileSpreadsheet,
  Inbox,
  LogOut,
  Mail,
  MoreHorizontal,
  Send,
  Settings,
  Sparkles,
  StickyNote,
  Trash2,
  Users,
} from "lucide-react";
import * as React from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  useSidebar,
} from "@/components/ui/sidebar";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

type FolderId = "inbox" | "sent" | "drafts" | "junk" | "trash";

type Folder = {
  id: FolderId;
  label: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  count?: number;
};

const folders: Folder[] = [
  { id: "inbox", label: "صندوق ورودی", icon: Inbox },
  { id: "drafts", label: "پیش‌نویس‌ها", icon: File },
  { id: "sent", label: "ارسال‌شده", icon: Send },
  { id: "junk", label: "هرزنامه", icon: ArchiveX },
  { id: "trash", label: "سطل زباله", icon: Trash2 },
];

const navTitleToFolderId: Record<string, FolderId> = {
  "صندوق ورودی": "inbox",
  "پیش‌نویس‌ها": "drafts",
  "ارسال‌شده": "sent",
  "هرزنامه": "junk",
  "سطل زباله": "trash",
};

type SidebarModule = {
  id: string;
  label: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
};

const sidebarModules: SidebarModule[] = [
  { id: "emails", label: "ایمیل‌ها", icon: Mail },
  { id: "calendar", label: "تقویم", icon: Calendar },
  { id: "contacts", label: "مخاطبین", icon: Users },
  { id: "tasks", label: "وظایف", icon: FileSpreadsheet },
  { id: "notes", label: "یادداشت‌ها", icon: StickyNote },
];

const userData = {
  name: "علی رضایی",
  email: "ali@example.com",
  avatar:
    "/block-media/shadcnblocks/block/avatar/avatar1.webp",
};

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

const data = {
  user: {
    name: "shadcn",
    email: "m@example.com",
    avatar: "/avatars/shadcn.jpg",
  },
  navMain: [
    {
      title: "صندوق ورودی",
      url: "#",
      icon: Inbox,
      isActive: true,
    },
    {
      title: "پیش‌نویس‌ها",
      url: "#",
      icon: File,
      isActive: false,
    },
    {
      title: "ارسال‌شده",
      url: "#",
      icon: Send,
      isActive: false,
    },
    {
      title: "هرزنامه",
      url: "#",
      icon: ArchiveX,
      isActive: false,
    },
    {
      title: "سطل زباله",
      url: "#",
      icon: Trash2,
      isActive: false,
    },
  ],
  mails: [
    {
      id: "1",
      name: "مریم Mitchell",
      email: "sarah.mitchell@acme.io",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar2.webp",
      verified: true,
      subject: "بررسی نقشه راه محصول Q4",
      date: "۰۹:۳۰",
      teaser:
        "سلام تیم، پیش‌نویس نقشه راه Q4 را آماده کردم و قبل از نهایی‌سازی هفته آینده نظر شما را می‌خواهم...",
      read: false,
      starred: true,
    },
    {
      id: "2",
      name: "GitHub",
      email: "noreply@github.com",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar2.webp",
      verified: true,
      subject: "[acme/dashboard] ادغام PR #847",
      date: "دیروز",
      teaser:
        "درخواست ادغام شما در main ادغام شد. خط لوله CI/CD شروع شده و استقرار روی staging در جریان است...",
      read: true,
      starred: false,
    },
    {
      id: "3",
      name: "امیر احمدی",
      email: "alex.t@designstudio.co",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar3.webp",
      verified: true,
      subject: "دارایی‌های برند جدید آماده بازبینی",
      date: "دیروز",
      teaser:
        "سلام! راهنمای برند و کتابخانه دارایی به‌روزرسانی شد. پالت رنگ جدید هم اضافه شده است...",
      read: true,
      starred: false,
    },
    {
      id: "4",
      name: "Stripe",
      email: "notifications@stripe.com",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar4.webp",
      verified: true,
      subject: "واریز آذر ماه آغاز شد",
      date: "۲ روز پیش",
      teaser:
        "مبلغ ۱۲٬۴۵۰ دلار آمریکا به حساب بانکی با پایان •••• 4521 در حال واریز است...",
      read: true,
      starred: true,
    },
    {
      id: "5",
      name: "مهدی جعفری",
      email: "marcus@venturecap.fund",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar5.webp",
      verified: false,
      subject: "پیگیری: گفتگوی Series A",
      date: "۳ روز پیش",
      teaser:
        "از ملاقات در TechCrunch Disrupt هفته گذشته خوشحال شدم. دوست دارم درباره رشد شما ادامه دهیم...",
      read: true,
      starred: false,
    },
    {
      id: "6",
      name: "Linear",
      email: "notifications@linear.app",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar6.webp",
      verified: true,
      subject: "خلاصه هفتگی پروژه",
      date: "۳ روز پیش",
      teaser:
        "خلاصه این هفته: ۲۳ مورد انجام‌شده، ۸ در جریان، ۵ مورد جدید ایجاد شده...",
      read: true,
      starred: false,
    },
    {
      id: "7",
      name: "Emma حسینی",
      email: "emma.w@clientcorp.com",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar8.webp",
      verified: true,
      subject: "تمدید قرارداد  اقدام لازم",
      date: "۴ روز پیش",
      teaser:
        "قرارداد سالانه ماه آینده برای تمدید است. می‌خواستم درباره سطح‌های قیمت جدید صحبت کنیم...",
      read: false,
      starred: false,
    },
    {
      id: "8",
      name: "Vercel",
      email: "notifications@vercel.com",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar8.webp",
      verified: true,
      subject: "خطای build: acme-dashboard",
      date: "۴ روز پیش",
      teaser:
        "آخرین استقرار acme-dashboard ناموفق بود. خطا: Module not found: Can't resolve 'componen...",
      read: true,
      starred: false,
    },
  ],
};

type NavItem = (typeof data.navMain)[number];
type MailItem = (typeof data.mails)[number];

function VerifiedIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 22 22"
      className={cn("size-4 text-[#38bdf8]", className)}
      fill="currentColor"
    >
      <path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z" />
    </svg>
  );
}

export function NavUser({
  user,
}: {
  user: {
    name: string;
    email: string;
    avatar: string;
  };
}) {
  const { isMobile } = useSidebar();

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
            >
              <Avatar className="h-8 w-8 rounded-lg">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-lg">
                  {getInitials(user.name)}
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="truncate text-xs">{user.email}</span>
              </div>
              <ChevronsUpDown className="ms-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? "bottom" : "left"}
            align="start"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarImage src={user.avatar} alt={user.name} />
                  <AvatarFallback className="rounded-lg">
                    {getInitials(user.name)}
                  </AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-start text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
                  <span className="truncate text-xs">{user.email}</span>
                </div>
              </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>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}

interface FolderTabsProps {
  className?: string;
  folders: Folder[];
  activeFolder: FolderId;
  onFolderChange: (folderId: FolderId) => void;
  activeEmailCount: number;
}

function FolderTabs({
  className,
  folders,
  activeFolder,
  onFolderChange,
  activeEmailCount,
}: FolderTabsProps) {
  const mainFolders = folders.slice(0, 5);
  const additionalFolders = folders.slice(5);

  return (
    <div className={cn("flex items-center gap-2", className)}>
      {/* Desktop: All folders visible at 2xl */}
      <div className="hidden items-center gap-1 2xl:flex">
        {folders.map((folder) => {
          const Icon = folder.icon;
          const isActive = activeFolder === folder.id;
          return (
            <Button
              key={folder.id}
              variant="ghost"
              size="sm"
              onClick={() => onFolderChange(folder.id)}
              className={cn(
                "h-[30px] gap-1.5",
                isActive && "bg-muted text-foreground hover:bg-muted",
              )}
            >
              <Icon className="size-4" />
              <span className="text-[13px]">{folder.label}</span>
              {isActive && (
                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                  {activeEmailCount.toLocaleString("fa-IR")}
                </Badge>
              )}
            </Button>
          );
        })}
      </div>

      {/* Large: Main folders + dropdown for additional */}
      <div className="hidden items-center gap-1 xl:flex 2xl:hidden">
        {mainFolders.map((folder) => {
          const Icon = folder.icon;
          const isActive = activeFolder === folder.id;
          return (
            <Button
              key={folder.id}
              variant="ghost"
              size="sm"
              onClick={() => onFolderChange(folder.id)}
              className={cn(
                "h-[30px] gap-1.5",
                isActive && "bg-muted text-foreground hover:bg-muted",
              )}
            >
              <Icon className="size-4" />
              <span className="text-[13px]">{folder.label}</span>
              {isActive && (
                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                  {activeEmailCount.toLocaleString("fa-IR")}
                </Badge>
              )}
            </Button>
          );
        })}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="size-[30px]">
              <MoreHorizontal className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            {additionalFolders.map((folder) => {
              const Icon = folder.icon;
              return (
                <DropdownMenuItem
                  key={folder.id}
                  onClick={() => onFolderChange(folder.id)}
                >
                  <Icon className="me-2 size-4" />
                  {folder.label}
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {/* Medium: First 3 folders + dropdown */}
      <div className="hidden items-center gap-1 lg:flex xl:hidden">
        {mainFolders.slice(0, 3).map((folder) => {
          const Icon = folder.icon;
          const isActive = activeFolder === folder.id;
          return (
            <Button
              key={folder.id}
              variant="ghost"
              size="sm"
              onClick={() => onFolderChange(folder.id)}
              className={cn(
                "h-[30px] gap-1.5",
                isActive && "bg-muted text-foreground hover:bg-muted",
              )}
            >
              <Icon className="size-4" />
              <span className="text-[13px]">{folder.label}</span>
              {isActive && (
                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                  {activeEmailCount.toLocaleString("fa-IR")}
                </Badge>
              )}
            </Button>
          );
        })}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="size-[30px]">
              <MoreHorizontal className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            {[...mainFolders.slice(3), ...additionalFolders].map((folder) => {
              const Icon = folder.icon;
              return (
                <DropdownMenuItem
                  key={folder.id}
                  onClick={() => onFolderChange(folder.id)}
                >
                  <Icon className="me-2 size-4" />
                  {folder.label}
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {/* Small: First 2 folders + dropdown */}
      <div className="hidden items-center gap-1 md:flex lg:hidden">
        {mainFolders.slice(0, 2).map((folder) => {
          const Icon = folder.icon;
          const isActive = activeFolder === folder.id;
          return (
            <Button
              key={folder.id}
              variant="ghost"
              size="sm"
              onClick={() => onFolderChange(folder.id)}
              className={cn(
                "h-[30px] gap-1.5",
                isActive && "bg-muted text-foreground hover:bg-muted",
              )}
            >
              <Icon className="size-4" />
              <span className="text-[13px]">{folder.label}</span>
              {isActive && (
                <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                  {activeEmailCount.toLocaleString("fa-IR")}
                </Badge>
              )}
            </Button>
          );
        })}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="size-[30px]">
              <MoreHorizontal className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            {[...mainFolders.slice(2), ...additionalFolders].map((folder) => {
              const Icon = folder.icon;
              return (
                <DropdownMenuItem
                  key={folder.id}
                  onClick={() => onFolderChange(folder.id)}
                >
                  <Icon className="me-2 size-4" />
                  {folder.label}
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {/* Mobile: Single dropdown */}
      <div className="flex items-center gap-1 md:hidden">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="h-[30px] gap-1.5">
              {(() => {
                const ActiveIcon =
                  folders.find((f) => f.id === activeFolder)?.icon || Inbox;
                return <ActiveIcon className="size-4" />;
              })()}
              <span className="text-[13px]">
                {folders.find((f) => f.id === activeFolder)?.label}
              </span>
              <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                {activeEmailCount.toLocaleString()}
              </Badge>
              <ChevronDown className="size-3" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            {folders.map((folder) => {
              const Icon = folder.icon;
              const isActive = activeFolder === folder.id;
              return (
                <DropdownMenuItem
                  key={folder.id}
                  onClick={() => onFolderChange(folder.id)}
                >
                  <Icon className="me-2 size-4" />
                  {folder.label}
                  {isActive && (
                    <span className="ms-auto text-xs text-muted-foreground">
                      {activeEmailCount.toLocaleString("fa-IR")}
                    </span>
                  )}
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
  activeModule: string;
  onModuleChange: (moduleId: string) => void;
}

export function AppSidebar({
  activeModule,
  onModuleChange,
  ...props
}: AppSidebarProps) {
  return (
    <Sidebar side="right" collapsible="icon" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
              <a href="#">
                <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
                  <img
                    src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
                    alt="شاد‌سی‌ان بلاکس"
                    className="size-6 text-primary-foreground invert dark:invert-0"
                  />
                </div>
                <div className="grid flex-1 text-start text-sm leading-tight">
                  <span className="truncate font-medium">ری یو آی</span>
                  <span className="truncate text-xs">سازمانی</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent className="px-1.5 md:px-0">
            <SidebarMenu>
              {sidebarModules.map((moduleItem) => (
                <SidebarMenuItem key={moduleItem.id}>
                  <SidebarMenuButton
                    tooltip={{
                      children: moduleItem.label,
                      hidden: false,
                    }}
                    onClick={() => onModuleChange(moduleItem.id)}
                    isActive={activeModule === moduleItem.id}
                    className="px-2.5 md:px-2"
                  >
                    <moduleItem.icon />
                    <span>{moduleItem.label}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              tooltip={{
                children: "تنظیمات",
                hidden: false,
              }}
              className="px-2.5 md:px-2"
              aria-label="تنظیمات"
            >
              <Settings />
              <span>تنظیمات</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}

interface MailSidebarProps {
  activeItem: NavItem;
  mails: MailItem[];
  selectedEmailId: string | null;
  onEmailSelect: (emailId: string) => void;
}

function MailSidebar({
  activeItem,
  mails,
  selectedEmailId,
  onEmailSelect,
}: MailSidebarProps) {
  return (
    <Sidebar
      collapsible="none"
      className="w-full shrink-0 border-e md:flex md:w-[320px]"
    >
      <SidebarHeader className="gap-3.5 border-b p-4">
        <div className="flex w-full items-center justify-between">
          <div className="text-start text-base font-medium text-foreground">
            {activeItem?.title}
          </div>
          <Label className="flex items-center gap-2 text-sm">
            <span>خوانده‌نشده</span>
            <Switch className="shadow-none" />
          </Label>
        </div>
        <SidebarInput placeholder="جستجو..." aria-label="جستجو" />
      </SidebarHeader>
      <SidebarContent className="overflow-hidden">
        <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
          <SidebarGroup className="px-0">
            <SidebarGroupContent>
              {mails.map((mail) => {
                const isSelected = selectedEmailId === mail.id;
                return (
                  <button
                    type="button"
                    key={mail.id}
                    onClick={() => onEmailSelect(mail.id)}
                    className={cn(
                      "flex w-full gap-3 border-b p-4 text-start text-sm leading-tight last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                      !mail.read && "bg-muted/30",
                      isSelected && "bg-sidebar-accent",
                    )}
                  >
                    <Avatar className="mt-0.5 size-9 shrink-0">
                      <AvatarImage src={mail.avatar} alt={mail.name} />
                      <AvatarFallback className="bg-primary text-xs font-medium text-primary-foreground">
                        {getInitials(mail.name)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center justify-between gap-2">
                        <div className="flex min-w-0 items-center gap-1">
                          <span
                            className={cn(
                              "truncate text-sm",
                              !mail.read && "font-semibold",
                            )}
                          >
                            {mail.name}
                          </span>
                          {mail.verified && (
                            <VerifiedIcon className="size-3.5 shrink-0" />
                          )}
                        </div>
                        <span className="shrink-0 text-xs text-muted-foreground">
                          {mail.date}
                        </span>
                      </div>
                      <p
                        className={cn(
                          "mt-0.5 truncate text-sm",
                          !mail.read && "font-medium",
                        )}
                      >
                        {mail.subject}
                      </p>
                      <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
                        {mail.teaser}
                      </p>
                    </div>
                  </button>
                );
              })}
            </SidebarGroupContent>
          </SidebarGroup>
        </ScrollArea>
      </SidebarContent>
    </Sidebar>
  );
}

export function ApplicationShell8() {
  const [activeModule, setActiveModule] = React.useState("emails");
  const [activeFolder, setActiveFolder] = React.useState<FolderId>("inbox");
  const [mails, setMails] = React.useState<MailItem[]>(data.mails);
  const [selectedEmailId, setSelectedEmailId] = React.useState<string | null>(
    data.mails[0]?.id ?? null,
  );
  const [isMobileDetailOpen, setIsMobileDetailOpen] = React.useState(false);

  const filteredEmails = mails;
  const selectedEmail = mails.find((m) => m.id === selectedEmailId) ?? null;

  const handleModuleChange = (moduleId: string) => {
    setActiveModule(moduleId);
  };

  const handleFolderChange = (folderId: FolderId) => {
    setActiveFolder(folderId);
    const mail = [...data.mails].sort(() => Math.random() - 0.5);
    setMails(mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1)));
  };

  const handleEmailSelect = (emailId: string) => {
    setSelectedEmailId(emailId);
    setMails((prev) =>
      prev.map((m) => (m.id === emailId ? { ...m, read: true } : m)),
    );
    if (window.innerWidth < 768) {
      setIsMobileDetailOpen(true);
    }
  };

  const activeItem =
    data.navMain.find(
      (item) => navTitleToFolderId[item.title] === activeFolder,
    ) || data.navMain[0];

  return (
    <SidebarProvider
      dir="rtl"
      lang="fa"
      defaultOpen={false}
      className="h-svh overflow-hidden"
      style={
        {
          "--sidebar-width": "var(--sidebar-width-icon)",
        } as React.CSSProperties
      }
    >
      <AppSidebar
        activeModule={activeModule}
        onModuleChange={handleModuleChange}
      />
      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
        <header className="flex h-14 shrink-0 items-center justify-between border-b bg-background px-4">
          <div className="flex items-center">
            <div className="ms-2 flex items-center md:hidden">
              <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
                <img
                  src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
                  alt="شاد‌سی‌ان بلاکس"
                  className="size-6 text-primary-foreground invert dark:invert-0"
                />
              </div>
            </div>
            {activeModule === "emails" ? (
              <FolderTabs
                folders={folders}
                activeFolder={activeFolder}
                onFolderChange={handleFolderChange}
                activeEmailCount={filteredEmails.length}
              />
            ) : (
              <div className="flex items-center gap-2">
                {(() => {
                  const moduleData = sidebarModules.find(
                    (m) => m.id === activeModule,
                  );
                  if (!moduleData) return null;
                  const Icon = moduleData.icon;
                  return (
                    <>
                      <Icon className="size-5" />
                      <span className="text-base font-medium">
                        {moduleData.label}
                      </span>
                    </>
                  );
                })()}
              </div>
            )}
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                className="flex h-auto items-center gap-2 px-2 py-1"
              >
                <Avatar className="size-7">
                  <AvatarImage src={userData.avatar} alt={userData.name} />
                  <AvatarFallback>{getInitials(userData.name)}</AvatarFallback>
                </Avatar>
                <span className="hidden font-medium sm:inline">
                  {userData.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">{userData.name}</p>
                  <p className="text-xs text-muted-foreground">
                    {userData.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>
        </header>
        <div className="flex min-h-0 flex-1 overflow-hidden pb-14 md:pb-0">
          {activeModule === "emails" && (
            <MailSidebar
              activeItem={activeItem}
              mails={mails}
              selectedEmailId={selectedEmailId}
              onEmailSelect={handleEmailSelect}
            />
          )}
          <SidebarInset className="hidden min-h-0 md:flex">
            <ScrollArea className="flex-1">
              <div className="flex flex-1 flex-col gap-4 p-4">
                {activeModule === "emails" ? (
                  Array.from({ length: 24 }).map((_, index) => (
                    <div
                      key={index}
                      className="aspect-video h-12 w-full rounded-lg bg-muted/50"
                    />
                  ))
                ) : (
                  <div className="flex h-full items-center justify-center text-muted-foreground">
                    <div className="text-center">
                      {(() => {
                        const moduleData = sidebarModules.find(
                          (m) => m.id === activeModule,
                        );
                        if (!moduleData) return null;
                        const Icon = moduleData.icon;
                        return (
                          <>
                            <Icon className="mx-auto size-12 opacity-50" />
                            <p className="mt-2 text-sm">
                              محتوای {moduleData.label} به‌زودی
                            </p>
                          </>
                        );
                      })()}
                    </div>
                  </div>
                )}
              </div>
            </ScrollArea>
          </SidebarInset>
        </div>
      </div>

      <Drawer
        open={isMobileDetailOpen}
        onOpenChange={setIsMobileDetailOpen}
        dismissible
      >
        <DrawerContent dir="rtl" className="h-[90vh] text-start md:hidden">
          <DrawerHeader className="sr-only">
            <DrawerTitle>جزئیات ایمیل</DrawerTitle>
          </DrawerHeader>
          <div className="flex h-full flex-col">
            {selectedEmail ? (
              <ScrollArea className="flex-1 p-4">
                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <Avatar className="size-10 shrink-0">
                      <AvatarImage
                        src={selectedEmail.avatar}
                        alt={selectedEmail.name}
                      />
                      <AvatarFallback className="bg-primary font-medium text-primary-foreground">
                        {getInitials(selectedEmail.name)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-1">
                        <span className="font-medium">
                          {selectedEmail.name}
                        </span>
                        {selectedEmail.verified && (
                          <VerifiedIcon className="size-4" />
                        )}
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {selectedEmail.email}
                      </p>
                      <p className="mt-0.5 text-xs text-muted-foreground">
                        {selectedEmail.date}
                      </p>
                    </div>
                  </div>
                  <h1 className="text-xl font-medium">
                    {selectedEmail.subject}
                  </h1>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {selectedEmail.teaser}
                  </p>
                </div>
              </ScrollArea>
            ) : (
              <div className="flex flex-1 items-center justify-center text-muted-foreground">
                <Mail className="size-12 opacity-50" />
              </div>
            )}
          </div>
        </DrawerContent>
      </Drawer>

      <nav
        aria-label="ناوبری پایین موبایل"
        className="fixed inset-x-0 bottom-0 z-40 border-t bg-background/95 backdrop-blur md:hidden"
      >
        <div className="grid grid-cols-5">
          {sidebarModules.map((moduleItem) => {
            const Icon = moduleItem.icon;
            const isActive = activeModule === moduleItem.id;
            return (
              <button
                key={moduleItem.id}
                type="button"
                onClick={() => setActiveModule(moduleItem.id)}
                className={cn(
                  "flex flex-col items-center justify-center py-3 text-xs",
                  isActive
                    ? "text-foreground"
                    : "text-muted-foreground hover:text-foreground",
                )}
                aria-label={moduleItem.label}
              >
                <Icon className="size-5" />
                <span className="sr-only">{moduleItem.label}</span>
              </button>
            );
          })}
        </div>
      </nav>
    </SidebarProvider>
  );
}