reui-blocks/blocks/application-shell10.tsx

"use client";

import {
  Archive,
  ArrowLeft,
  Bug,
  ChevronDown,
  Clock,
  CommandIcon,
  File,
  Inbox,
  Lightbulb,
  MailOpen,
  MessageSquare,
  MoreHorizontal,
  PanelRight,
  Plus,
  Search,
  Send,
  Sparkles,
  Trash2,
  User,
  UserCheck,
  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 {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  useSidebar,
} from "@/components/ui/sidebar";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

type NavItemId =
  | "inbox"
  | "unassigned"
  | "assigned"
  | "drafts"
  | "archived"
  | "spam";

type BucketId = "support" | "bugs" | "features" | "internal";

type TicketStatus = "active" | "pending" | "closed";

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

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

type User = {
  id: string;
  name: string;
  email: string;
  avatar: string;
  role?: string;
};

type Customer = {
  id: string;
  name: string;
  email: string;
  company: string;
  role: string;
  avatar: string;
  isHighValue: boolean;
};

type Message = {
  id: string;
  sender: User | Customer;
  content: string;
  timestamp: string;
  date: string;
  isStaff: boolean;
};

type Ticket = {
  id: string;
  subject: string;
  preview: string;
  timestamp: string;
  read: boolean;
  customer: Customer;
  assignee?: User;
  status: TicketStatus;
  messages: Message[];
  respondingUser?: User;
};

type PreviousConversation = {
  id: string;
  subject: string;
  timestamp: string;
};

const navItems: NavItem[] = [
  { id: "inbox", label: "صندوق ورودی", icon: Inbox, count: 6 },
  { id: "unassigned", label: "بدون مسئول", icon: MailOpen, count: 10 },
  { id: "assigned", label: "محول‌شده", icon: UserCheck, count: 3 },
  { id: "drafts", label: "پیش‌نویس‌ها", icon: File, count: 1 },
  { id: "archived", label: "بایگانی", icon: Archive },
  { id: "spam", label: "هرزنامه", icon: Trash2 },
];

const buckets: Bucket[] = [
  { id: "support", label: "درخواست‌های پشتیبانی", icon: MessageSquare },
  { id: "bugs", label: "گزارش باگ", icon: Bug },
  { id: "features", label: "درخواست ویژگی", icon: Lightbulb },
  { id: "internal", label: "داخلی", icon: Users },
];

const staffUsers: User[] = [
  {
    id: "peter",
    name: "رضا کریمی",
    email: "peter.lann@cloudstar.com",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
    role: "کارشناس پشتیبانی",
  },
  {
    id: "alex",
    name: "امیر چناری",
    email: "alex.chen@cloudstar.com",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.webp",
    role: "کارشناس پشتیبانی",
  },
];

const mockCustomers: Customer[] = [
  {
    id: "sarah",
    name: "مریم Tran",
    email: "sarah.tran@example.com",
    company: "BrightWave Marketing",
    role: "مدیر عملیات",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar2.webp",
    isHighValue: true,
  },
  {
    id: "mike",
    name: "محمد جعفری",
    email: "mike.j@techcorp.io",
    company: "TechCorp",
    role: "توسعه‌دهنده",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar5.webp",
    isHighValue: false,
  },
];

const mockTickets: Ticket[] = [
  {
    id: "1",
    subject: "مشکل اتصال یکپارچه‌سازی Slack",
    preview:
      "تیم ما می‌خواهد Slack را به CloudStar وصل کند، اما فرایند احراز هویت با خطا مواجه می‌شود...",
    timestamp: "۶ ساعت پیش",
    read: false,
    customer: mockCustomers[0],
    assignee: staffUsers[0],
    status: "active",
    respondingUser: staffUsers[0],
    messages: [
      {
        id: "m1",
        sender: mockCustomers[0],
        content: `سلام پشتیبانی CloudStar،

تیم ما می‌خواهد پیام‌رسان تیمی را به CloudStar وصل کند، اما فرایند احراز هویت با این خطا متوقف می‌شود: «احراز هویت token invalid».

چند بار دوباره وصل شدیم و حتی workspace را ری‌استارت کردیم، اما نتیجه‌ای نگرفتیم.

می‌توانید کمک کنید این یکپارچه‌سازی کار کند؟

ممنون،
مریم Tran
مدیر عملیات، BrightWave Marketing`,
        timestamp: "۸:۰۳",
        date: "۲۹ مرداد",
        isStaff: false,
      },
      {
        id: "m2",
        sender: staffUsers[0],
        content: `سلام مریم،

ممنون از پیام‌تان  خوشحال می‌شوم کمک کنم! این خطا معمولاً وقتی رخ می‌دهد که پیام‌رسان تیمی هنگام اتصال، مجوزهای لازم را به CloudStar نمی‌دهد. این موارد را امتحان کنید:

۱ قبل از شروع اتصال، در workspace درست پیام‌رسان تیمی وارد شده باشید.
۲ هنگام درخواست، همه مجوزها را به CloudStar بدهید (گاهی «Deny» اشتباهی زده می‌شود).
۳. یک پنجره ناشناس/خصوصی امتحان کنید تا credentialهای قدیمی مزاحم نباشند.

اگر جواب داد یا هنوز خطا می‌بینید، خبر دهید!`,
        timestamp: "۱۲:۵۶",
        date: "۲۹ مرداد",
        isStaff: true,
      },
    ],
  },
  {
    id: "2",
    subject: "فایل‌های گم‌شده در فضای کار مشترک",
    preview:
      "دیروز مجموعه‌ای از فایل‌های پروژه را در فضای کار مشترک بارگذاری کردم. امروز دو فایل دیگر نیست...",
    timestamp: "۶ ساعت پیش",
    read: false,
    customer: mockCustomers[1],
    status: "active",
    respondingUser: staffUsers[1],
    messages: [],
  },
  {
    id: "3",
    subject: "مغایرت در صورتحساب آخر",
    preview:
      "فاکتور این ماه ۱۰ لایسنس Pro نشان می‌دهد، در حالی که فقط ۸ کاربر فعال داریم. لطفاً بررسی کنید...",
    timestamp: "۸ ساعت پیش",
    read: true,
    customer: mockCustomers[0],
    status: "pending",
    messages: [],
  },
  {
    id: "4",
    subject: "امکان بازنشانی رمز عبور نیست",
    preview:
      'با لینک «فراموشی رمز عبور» سعی کردم رمز CloudStar را بازنشانی کنم، اما ایمیل بازنشانی هرگز نرسید...',
    timestamp: "۱۲ ساعت پیش",
    read: true,
    customer: mockCustomers[1],
    status: "active",
    messages: [],
  },
  {
    id: "5",
    subject: "آمار داشبورد به‌روز نمی‌شود",
    preview:
      "داشبورد آمار از دیروز حدود ساعت ۱۵ به‌روزرسانی نمی‌شود. همه نمودارها روی همان مقادیر مانده‌اند...",
    timestamp: "۱ روز پیش",
    read: true,
    customer: mockCustomers[0],
    status: "closed",
    messages: [],
  },
  {
    id: "6",
    subject: "درخواست مستندات انطباق HIPAA",
    preview:
      "قبل از ادامه فرایند onboarding، تیم حقوقی ما به مستندات CloudStar درباره HIPAA نیاز دارد...",
    timestamp: "۲ هفته پیش",
    read: true,
    customer: mockCustomers[1],
    status: "pending",
    messages: [],
  },
];

const previousConversations: PreviousConversation[] = [
  {
    id: "prev1",
    subject: "مشکل اتصال یکپارچه‌سازی Slack",
    timestamp: "۶ ساعت پیش",
  },
  {
    id: "prev2",
    subject: "انقضای توکن API",
    timestamp: "۲ هفته پیش",
  },
];

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

function getStatusColor(status: TicketStatus) {
  switch (status) {
    case "active":
      return "bg-emerald-500";
    case "pending":
      return "bg-amber-500";
    case "closed":
      return "bg-muted-foreground";
    default:
      return "bg-muted-foreground";
  }
}

function getStatusLabel(status: TicketStatus) {
  switch (status) {
    case "active":
      return "فعال";
    case "pending":
      return "در انتظار";
    case "closed":
      return "بسته";
    default:
      return status;
  }
}

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
  activeNavItem: NavItemId;
  activeBucket: BucketId | null;
  onNavItemChange: (id: NavItemId) => void;
  onBucketChange: (id: BucketId | null) => void;
  onSearchClick: () => void;
}

function AppSidebar({
  activeNavItem,
  activeBucket,
  onNavItemChange,
  onBucketChange,
  onSearchClick,
  className,
  ...props
}: AppSidebarProps) {
  const { state } = useSidebar();
  const isCollapsed = state === "collapsed";
  return (
    <Sidebar
      side="right"
      collapsible="offcanvas"
      variant="inset"
      className={cn(className)}
      {...props}
    >
      <SidebarHeader
        className={cn("flex h-14 flex-row items-center justify-between")}
      >
        <SidebarMenu>
          <SidebarMenuItem>
            <DropdownMenu>
              <div className="flex w-full items-center group-data-[collapsible=icon]:justify-center">
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="ghost"
                    className="flex h-auto items-center gap-3 p-0! hover:bg-transparent"
                  >
                    <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>
                    {!isCollapsed && (
                      <>
                        <span className="font-semibold">ری یو آی</span>
                        <ChevronDown className="size-3 text-muted-foreground" />
                      </>
                    )}
                  </Button>
                </DropdownMenuTrigger>
              </div>
              <DropdownMenuContent className="w-56" align="start">
                <DropdownMenuLabel>فضای کار</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem>تنظیمات فضای کار</DropdownMenuItem>
                  <DropdownMenuItem>دعوت هم‌تیمی‌ها</DropdownMenuItem>
                  <DropdownMenuItem>صورتحساب</DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuItem>خروج</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        </SidebarMenu>
        <Button variant="ghost" size="icon" className="size-7">
          <MoreHorizontal className="size-4" />
        </Button>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup className="py-2">
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton onClick={onSearchClick} className="px-2">
                  <Search className="size-4" />
                  <span>جستجو</span>
                  <kbd className="ms-auto hidden items-center justify-center rounded-md font-mono font-medium text-muted-foreground/70 sm:flex">
                    <CommandIcon
                      className="size-3 font-medium"
                      strokeWidth={1.5}
                    />
                    <span>K</span>
                  </kbd>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup className="py-0">
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => {
                const Icon = item.icon;
                const isActive =
                  activeNavItem === item.id && activeBucket === null;
                return (
                  <SidebarMenuItem key={item.id}>
                    <SidebarMenuButton
                      onClick={() => {
                        onNavItemChange(item.id);
                        onBucketChange(null);
                      }}
                      isActive={isActive}
                      className="px-2"
                    >
                      <Icon className="size-4" />
                      <span>{item.label}</span>
                      {item.count !== undefined && (
                        <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
                      )}
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>دسته‌ها</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {buckets.map((bucket) => {
                const Icon = bucket.icon;
                return (
                  <SidebarMenuItem key={bucket.id}>
                    <SidebarMenuButton
                      onClick={() => onBucketChange(bucket.id)}
                      isActive={activeBucket === bucket.id}
                      className="px-2"
                    >
                      <Icon className="size-4" />
                      <span>{bucket.label}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

interface TicketListPanelProps {
  tickets: Ticket[];
  selectedTicketId: string | null;
  onTicketSelect: (ticketId: string) => void;
  activeNavItem: NavItemId;
}

function TicketListPanel({
  tickets,
  selectedTicketId,
  onTicketSelect,
  activeNavItem,
}: TicketListPanelProps) {
  const navItem = navItems.find((item) => item.id === activeNavItem);
  const title = navItem?.label ?? "صندوق ورودی";

  return (
    <div className="flex h-full w-1/4 max-w-[320px] min-w-[240px] shrink-0 flex-col overflow-hidden border-e bg-background">
      <div className="flex h-14 shrink-0 items-center justify-between border-b px-4">
        <div className="truncate text-start text-base font-medium text-foreground">
          {title} شما
        </div>
      </div>
      <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
        {tickets.map((ticket) => {
          const isSelected = selectedTicketId === ticket.id;
          return (
            <button
              type="button"
              key={ticket.id}
              onClick={() => onTicketSelect(ticket.id)}
              className={cn(
                "w-full border-b p-4 text-start text-sm leading-tight last:border-b-0 hover:bg-muted/50",
                !ticket.read && "bg-muted/30",
                isSelected && "bg-muted",
              )}
            >
              <div className="min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <span
                    className={cn(
                      "truncate text-sm",
                      !ticket.read && "font-semibold",
                    )}
                  >
                    {ticket.subject}
                  </span>
                </div>
                <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
                  {ticket.preview}
                </p>
                {ticket.respondingUser && (
                  <div className="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground">
                    <Avatar className="size-4">
                      <AvatarImage
                        src={ticket.respondingUser.avatar}
                        alt={ticket.respondingUser.name}
                      />
                      <AvatarFallback className="text-[8px]">
                        {getInitials(ticket.respondingUser.name)}
                      </AvatarFallback>
                    </Avatar>
                    <span>
                      {ticket.respondingUser.name.split(" ")[0]} در حال
                      پاسخ است...
                    </span>
                  </div>
                )}
              </div>
            </button>
          );
        })}
      </ScrollArea>
    </div>
  );
}

interface MessageBubbleProps {
  message: Message;
}

function MessageBubble({ message }: MessageBubbleProps) {
  const sender = message.sender;
  const isCustomer = "company" in sender;

  return (
    <div className="space-y-3">
      <div className="flex items-start gap-3">
        <Avatar className="mt-0.5 size-10 shrink-0">
          <AvatarImage src={sender.avatar} alt={sender.name} />
          <AvatarFallback className="bg-primary text-xs font-medium text-primary-foreground">
            {getInitials(sender.name)}
          </AvatarFallback>
        </Avatar>
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <span className="font-medium">{sender.name}</span>
            {!isCustomer && (
              <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
                پشتیبانی
              </Badge>
            )}
          </div>
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <span>از</span>
            <span>{sender.email}</span>
          </div>
          <span className="text-xs text-muted-foreground">
            {message.date}, {message.timestamp}
          </span>
        </div>
      </div>
      <div className="ps-13 text-sm leading-relaxed whitespace-pre-wrap">
        {message.content}
      </div>
    </div>
  );
}

interface ReplyComposerProps {
  recipientEmail: string;
  respondingUser?: User;
}

function ReplyComposer({ recipientEmail, respondingUser }: ReplyComposerProps) {
  return (
    <div className="shrink-0 border-t bg-background px-6 py-4 lg:px-10">
      <div className="mx-auto max-w-3xl rounded-lg border bg-muted/30">
        <div className="flex items-center gap-2 border-b px-3 py-2">
          <ArrowLeft className="size-4 shrink-0 rotate-[135deg] text-muted-foreground" />
          <span className="truncate text-sm text-muted-foreground">
            {recipientEmail}
          </span>
          <Button
            variant="ghost"
            size="sm"
            className="ms-auto h-6 shrink-0 px-2 text-xs"
          >
            رونوشت
          </Button>
        </div>
        <Textarea
          placeholder="پاسخ خود را بنویسید..."
          className="min-h-[80px] resize-none border-0 bg-transparent focus-visible:ring-0 md:min-h-[100px]"
        />
        <div className="flex flex-wrap items-center justify-between gap-2 border-t px-3 py-2">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="size-8 shrink-0">
              <Plus className="size-4" />
            </Button>
            <span className="hidden text-xs text-muted-foreground sm:inline">
              از <kbd className="rounded bg-muted px-1">/</kbd> برای میانبرها
            </span>
          </div>
          <div className="flex items-center gap-2">
            {respondingUser && (
              <div className="hidden items-center gap-1.5 text-xs text-muted-foreground sm:flex">
                <Avatar className="size-5">
                  <AvatarImage
                    src={respondingUser.avatar}
                    alt={respondingUser.name}
                  />
                  <AvatarFallback className="text-[8px]">
                    {getInitials(respondingUser.name)}
                  </AvatarFallback>
                </Avatar>
                <span>
                  {respondingUser.name.split(" ")[0]} در حال پاسخ است...
                </span>
              </div>
            )}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="gap-1">
                  بستن
                  <ChevronDown className="size-3" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                <DropdownMenuItem>بستن به‌عنوان حل‌شده</DropdownMenuItem>
                <DropdownMenuItem>بستن به‌عنوان هرزنامه</DropdownMenuItem>
                <DropdownMenuItem>بستن بدون پاسخ</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            <Button size="sm" className="gap-1">
              <Send className="size-3" />
              ارسال
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

interface InboxAgentPanelProps {
  ticket: Ticket;
  previousConversations: PreviousConversation[];
}

function InboxAgentPanel({
  ticket,
  previousConversations,
}: InboxAgentPanelProps) {
  const customer = ticket.customer;

  return (
    <div className="flex h-full w-1/4 max-w-[360px] min-w-[280px] shrink-0 flex-col overflow-hidden border-s bg-background">
      <div className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
        <Sparkles className="size-4" />
        <span className="font-semibold">دستیار صندوق ورودی</span>
      </div>
      <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
        <div className="space-y-6 p-4 text-start">
          <section className="space-y-3">
            <div className="flex items-start gap-3">
              <Avatar className="size-10 shrink-0">
                <AvatarImage src={customer.avatar} alt={customer.name} />
                <AvatarFallback className="bg-primary font-medium text-primary-foreground">
                  {getInitials(customer.name)}
                </AvatarFallback>
              </Avatar>
              <div className="min-w-0 flex-1">
                <div className="font-medium">{customer.name}</div>
                <div className="text-sm text-muted-foreground">
                  {customer.role}, {customer.company}
                </div>
                {customer.isHighValue && (
                  <Badge
                    variant="outline"
                    className="mt-1.5 border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400"
                  >
                    مشتری ارزشمند
                  </Badge>
                )}
              </div>
            </div>
          </section>

          <section className="space-y-3">
            <div className="rounded-lg bg-muted/50 p-3 text-sm">
              <p className="text-muted-foreground">
                مشتری آرام به نظر می‌رسد، اما ممکن است ناراضی شود. احتمالاً
                فنی نیست چون راهنمای یکپارچه‌سازی پیام‌رسان تیمی را نخوانده است.
              </p>
              <p className="mt-3 text-muted-foreground">
                رضا با جزئیات لازم پاسخ داده، اما هنوز تأیید نکرده که مشکل
                حل شده است یا نه.
              </p>
            </div>
          </section>

          <section className="space-y-3">
            <p className="text-sm text-muted-foreground">
              اگر مشتری در ۱۲ ساعت آینده پاسخ ندهد، پیگیری ارسال شود:
            </p>
            <div className="rounded-lg border bg-muted/30 p-3 text-sm">
              <p>
                سلام مریم، پیگیری می‌کنم ببینم توانستید یکپارچه‌سازی را راه
                بیندازید؟
              </p>
              <p className="mt-2">
                اگر هنوز مشکل دارید، خوشحال می‌شوم یک تماس هماهنگ کنیم تا
                سریع‌تر راه بیفتید.
              </p>
              <p className="mt-2">با احترام، رضا کریمی</p>
            </div>
            <Button variant="outline" className="w-full gap-2">
              <Clock className="size-4" />
              زمان‌بندی پیگیری
            </Button>
          </section>

          <section className="space-y-3">
            <p className="text-xs font-medium tracking-wide text-muted-foreground">
              گفتگوهای قبلی
            </p>
            <div className="space-y-2">
              {previousConversations.map((conv) => (
                <button
                  key={conv.id}
                  type="button"
                  className="flex w-full items-start justify-between gap-2 rounded-md p-2 text-start hover:bg-muted"
                >
                  <span className="line-clamp-2 text-sm">{conv.subject}</span>
                  <span className="shrink-0 text-xs text-muted-foreground">
                    {conv.timestamp}
                  </span>
                </button>
              ))}
            </div>
          </section>
        </div>
      </ScrollArea>
    </div>
  );
}

interface TicketCommandPaletteProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  tickets: Ticket[];
  onTicketSelect: (ticketId: string) => void;
  onNavItemSelect: (navItemId: NavItemId) => void;
}

function TicketCommandPalette({
  open,
  onOpenChange,
  tickets,
  onTicketSelect,
  onNavItemSelect,
}: TicketCommandPaletteProps) {
  return (
    <CommandDialog open={open} onOpenChange={onOpenChange}>
      <CommandInput placeholder="جستجوی تیکت، مشتری یا ناوبری..." />
      <CommandList>
        <CommandEmpty>نتیجه‌ای یافت نشد.</CommandEmpty>
        <CommandGroup heading="تیکت‌ها">
          {tickets.slice(0, 5).map((ticket) => (
            <CommandItem
              key={ticket.id}
              onSelect={() => {
                onTicketSelect(ticket.id);
                onOpenChange(false);
              }}
            >
              <MessageSquare className="me-2 size-4" />
              <span className="truncate">{ticket.subject}</span>
              <span className="ms-auto text-xs text-muted-foreground">
                {ticket.timestamp}
              </span>
            </CommandItem>
          ))}
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="مشتریان">
          {mockCustomers.map((customer) => (
            <CommandItem key={customer.id}>
              <User className="me-2 size-4" />
              <span>{customer.name}</span>
              <span className="ms-2 text-xs text-muted-foreground">
                {customer.company}
              </span>
            </CommandItem>
          ))}
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="ناوبری">
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <CommandItem
                key={item.id}
                onSelect={() => {
                  onNavItemSelect(item.id);
                  onOpenChange(false);
                }}
              >
                <Icon className="me-2 size-4" />
                <span>{item.label}</span>
                {item.count !== undefined && (
                  <Badge variant="secondary" className="ms-auto">
                    {item.count}
                  </Badge>
                )}
              </CommandItem>
            );
          })}
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

export function ApplicationShell10() {
  const [activeNavItem, setActiveNavItem] = React.useState<NavItemId>("inbox");
  const [activeBucket, setActiveBucket] = React.useState<BucketId | null>(null);
  const [selectedTicketId, setSelectedTicketId] = React.useState<string | null>(
    mockTickets[0]?.id ?? null,
  );
  const [tickets, setTickets] = React.useState<Ticket[]>(mockTickets);
  const [isAgentPanelOpen, setIsAgentPanelOpen] = React.useState(true);
  const [isCommandOpen, setIsCommandOpen] = React.useState(false);
  const [isMobileTicketListOpen, setIsMobileTicketListOpen] =
    React.useState(false);
  const [isMobileConversationOpen, setIsMobileConversationOpen] =
    React.useState(false);
  const [isMobileAgentOpen, setIsMobileAgentOpen] = React.useState(false);

  const selectedTicket = tickets.find((t) => t.id === selectedTicketId) ?? null;

  // Keyboard shortcut for command palette
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setIsCommandOpen((open) => !open);
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

  const handleTicketSelect = (ticketId: string) => {
    setSelectedTicketId(ticketId);
    setTickets((prev) =>
      prev.map((t) => (t.id === ticketId ? { ...t, read: true } : t)),
    );
    if (window.innerWidth < 768) {
      setIsMobileConversationOpen(true);
    }
  };

  return (
    <SidebarProvider dir="rtl" lang="fa" className="h-svh overflow-hidden">
      <AppSidebar
        activeNavItem={activeNavItem}
        activeBucket={activeBucket}
        onNavItemChange={setActiveNavItem}
        onBucketChange={setActiveBucket}
        onSearchClick={() => setIsCommandOpen(true)}
        className="hidden md:flex"
      />

      <div className="flex h-full flex-col overflow-hidden pb-16 md:hidden">
        <div className="flex h-14 shrink-0 items-center justify-between border-b px-4">
          <div 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="font-semibold">
              {navItems.find((item) => item.id === activeNavItem)?.label ??
                "صندوق ورودی"}{" "}
              شما
            </span>
          </div>
        </div>
        <ScrollArea className="min-h-0 flex-1 [&>[data-slot=scroll-area-viewport]>div]:!block">
          {tickets.map((ticket) => {
            const isSelected = selectedTicketId === ticket.id;
            return (
              <button
                type="button"
                key={ticket.id}
                onClick={() => handleTicketSelect(ticket.id)}
                className={cn(
                  "w-full border-b p-4 text-start text-sm leading-tight last:border-b-0 hover:bg-muted/50",
                  !ticket.read && "bg-muted/30",
                  isSelected && "bg-muted",
                )}
              >
                <div className="min-w-0">
                  <div className="flex items-center justify-between gap-2">
                    <span
                      className={cn(
                        "truncate text-sm",
                        !ticket.read && "font-semibold",
                      )}
                    >
                      {ticket.subject}
                    </span>
                    <span className="shrink-0 text-xs text-muted-foreground">
                      {ticket.timestamp}
                    </span>
                  </div>
                  <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
                    {ticket.preview}
                  </p>
                  {ticket.respondingUser && (
                    <div className="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground">
                      <Avatar className="size-4">
                        <AvatarImage
                          src={ticket.respondingUser.avatar}
                          alt={ticket.respondingUser.name}
                        />
                        <AvatarFallback className="text-[8px]">
                          {getInitials(ticket.respondingUser.name)}
                        </AvatarFallback>
                      </Avatar>
                      <span>
                        {ticket.respondingUser.name.split(" ")[0]} در حال
                        پاسخ است...
                      </span>
                    </div>
                  )}
                </div>
              </button>
            );
          })}
        </ScrollArea>
      </div>

      <SidebarInset className="hidden min-h-0 overflow-hidden md:flex">
        <div className="flex h-full w-full">
          <TicketListPanel
            tickets={tickets}
            selectedTicketId={selectedTicketId}
            onTicketSelect={handleTicketSelect}
            activeNavItem={activeNavItem}
          />

          <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
            {selectedTicket ? (
              <>
                <header className="flex h-14 shrink-0 items-center justify-between border-b bg-background px-4">
                  <div className="flex items-center gap-3">
                    <MessageSquare className="size-5" />
                    <span className="font-medium">
                      پاسخ: {selectedTicket.subject}
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="outline" size="sm" className="gap-1.5">
                          <span
                            className={cn(
                              "size-2 rounded-full",
                              getStatusColor(selectedTicket.status),
                            )}
                          />
                          <span>{getStatusLabel(selectedTicket.status)}</span>
                          <ChevronDown className="size-3" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="start">
                        <DropdownMenuItem>فعال</DropdownMenuItem>
                        <DropdownMenuItem>در انتظار</DropdownMenuItem>
                        <DropdownMenuItem>بسته</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="size-8"
                      onClick={() => setIsAgentPanelOpen(!isAgentPanelOpen)}
                    >
                      <PanelRight
                        className={cn(
                          "size-4",
                          isAgentPanelOpen && "text-primary",
                        )}
                      />
                    </Button>
                  </div>
                </header>

                <ScrollArea className="min-h-0 flex-1">
                  <div className="px-6 py-6 lg:px-10">
                    <div className="mx-auto max-w-3xl space-y-8">
                      {selectedTicket.messages.map((message) => (
                        <MessageBubble key={message.id} message={message} />
                      ))}
                    </div>
                  </div>
                </ScrollArea>

                <ReplyComposer
                  recipientEmail={selectedTicket.customer.email}
                  respondingUser={selectedTicket.respondingUser}
                />
              </>
            ) : (
              <div className="flex flex-1 items-center justify-center text-muted-foreground">
                <div className="text-center">
                  <MessageSquare className="mx-auto size-12 opacity-50" />
                  <p className="mt-2 text-sm">یک تیکت را برای مشاهده انتخاب کنید</p>
                </div>
              </div>
            )}
          </div>

          {isAgentPanelOpen && selectedTicket && (
            <InboxAgentPanel
              ticket={selectedTicket}
              previousConversations={previousConversations}
            />
          )}
        </div>
      </SidebarInset>

      <TicketCommandPalette
        open={isCommandOpen}
        onOpenChange={setIsCommandOpen}
        tickets={tickets}
        onTicketSelect={handleTicketSelect}
        onNavItemSelect={(navItemId) => {
          setActiveNavItem(navItemId);
          setActiveBucket(null);
        }}
      />

      <Drawer
        open={isMobileTicketListOpen}
        onOpenChange={setIsMobileTicketListOpen}
        dismissible
      >
        <DrawerContent dir="rtl" className="h-[85vh] text-start md:hidden">
          <DrawerHeader>
            <DrawerTitle className="text-start">تیکت‌ها</DrawerTitle>
          </DrawerHeader>
          <ScrollArea className="min-h-0 flex-1 px-4">
            {tickets.map((ticket) => (
              <button
                type="button"
                key={ticket.id}
                onClick={() => {
                  handleTicketSelect(ticket.id);
                  setIsMobileTicketListOpen(false);
                }}
                className={cn(
                  "w-full border-b p-4 text-start text-sm",
                  !ticket.read && "bg-muted/30",
                )}
              >
                <div className="min-w-0">
                  <div className="flex items-center justify-between gap-2">
                    <span
                      className={cn(
                        "truncate",
                        !ticket.read && "font-semibold",
                      )}
                    >
                      {ticket.subject}
                    </span>
                    <span className="shrink-0 text-xs text-muted-foreground">
                      {ticket.timestamp}
                    </span>
                  </div>
                  <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
                    {ticket.preview}
                  </p>
                </div>
              </button>
            ))}
          </ScrollArea>
        </DrawerContent>
      </Drawer>

      <Drawer
        open={isMobileConversationOpen}
        onOpenChange={setIsMobileConversationOpen}
        dismissible
      >
        <DrawerContent
          dir="rtl"
          className="h-[90vh] overflow-hidden text-start md:hidden"
        >
          <DrawerHeader className="sr-only">
            <DrawerTitle>گفتگو</DrawerTitle>
          </DrawerHeader>
          {selectedTicket && (
            <div className="flex h-full min-h-0 flex-col overflow-hidden">
              <div className="flex shrink-0 items-center justify-between border-b px-4 py-3">
                <span className="line-clamp-1 font-medium">
                  {selectedTicket.subject}
                </span>
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-8 shrink-0"
                  onClick={() => setIsMobileAgentOpen(true)}
                >
                  <Sparkles className="size-4" />
                </Button>
              </div>
              <ScrollArea className="min-h-0 flex-1">
                <div className="space-y-6 p-4">
                  {selectedTicket.messages.map((message) => (
                    <MessageBubble key={message.id} message={message} />
                  ))}
                </div>
              </ScrollArea>
              <div className="shrink-0">
                <ReplyComposer
                  recipientEmail={selectedTicket.customer.email}
                  respondingUser={selectedTicket.respondingUser}
                />
              </div>
            </div>
          )}
        </DrawerContent>
      </Drawer>

      <Drawer
        open={isMobileAgentOpen}
        onOpenChange={setIsMobileAgentOpen}
        dismissible
      >
        <DrawerContent dir="rtl" className="h-[85vh] text-start md:hidden">
          <DrawerHeader>
            <DrawerTitle className="flex items-center gap-2 text-start">
              <Sparkles className="size-4" />
              دستیار صندوق ورودی
            </DrawerTitle>
          </DrawerHeader>
          {selectedTicket && (
            <ScrollArea className="min-h-0 flex-1 px-4 pb-6">
              <div className="space-y-6">
                <section className="space-y-3">
                  <div className="flex items-start gap-3">
                    <Avatar className="size-10 shrink-0">
                      <AvatarImage
                        src={selectedTicket.customer.avatar}
                        alt={selectedTicket.customer.name}
                      />
                      <AvatarFallback>
                        {getInitials(selectedTicket.customer.name)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <div className="font-medium">
                        {selectedTicket.customer.name}
                      </div>
                      <div className="text-sm text-muted-foreground">
                        {selectedTicket.customer.role},{" "}
                        {selectedTicket.customer.company}
                      </div>
                      {selectedTicket.customer.isHighValue && (
                        <Badge
                          variant="outline"
                          className="mt-1.5 border-amber-500 bg-amber-50 text-amber-700"
                        >
                          مشتری ارزشمند
                        </Badge>
                      )}
                    </div>
                  </div>
                </section>

                <section className="rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground">
                  <p>
                    مشتری آرام به نظر می‌رسد، اما ممکن است ناراضی شود.
                  </p>
                </section>

                <section className="space-y-3">
                  <div className="rounded-lg border bg-muted/30 p-3 text-sm">
                    <p>سلام مریم، پیگیری می‌کنم...</p>
                  </div>
                  <Button variant="outline" className="w-full gap-2">
                    <Clock className="size-4" />
                    زمان‌بندی پیگیری
                  </Button>
                </section>
              </div>
            </ScrollArea>
          )}
        </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">
          {[
            {
              id: "inbox",
              label: "صندوق ورودی",
              icon: Inbox,
              onClick: () => {
                setActiveNavItem("inbox");
                setIsMobileTicketListOpen(true);
              },
            },
            {
              id: "unassigned",
              label: "بدون مسئول",
              icon: MailOpen,
              onClick: () => {
                setActiveNavItem("unassigned");
                setIsMobileTicketListOpen(true);
              },
            },
            {
              id: "assigned",
              label: "محول‌شده",
              icon: UserCheck,
              onClick: () => {
                setActiveNavItem("assigned");
                setIsMobileTicketListOpen(true);
              },
            },
            {
              id: "search",
              label: "جستجو",
              icon: Search,
              onClick: () => setIsCommandOpen(true),
            },
            {
              id: "more",
              label: "بیشتر",
              icon: MoreHorizontal,
              onClick: () => {},
            },
          ].map((item) => {
            const Icon = item.icon;
            const isActive = activeNavItem === item.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={item.onClick}
                className={cn(
                  "flex flex-col items-center gap-1 py-2 text-xs",
                  isActive
                    ? "text-foreground"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                <Icon className="size-5" />
                <span>{item.label}</span>
              </button>
            );
          })}
        </div>
      </nav>
    </SidebarProvider>
  );
}