import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Progress } from "@/components/ui/progress";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Activity,
  ArrowDownRight,
  ArrowUpRight,
  BarChart2,
  Bell,
  Calendar,
  ChevronRight,
  DollarSign,
  FileText,
  Home,
  LogOut,
  Menu,
  MessageSquare,
  MoreHorizontal,
  Package,
  Search,
  Settings,
  ShoppingCart,
  Star,
  TrendingUp,
  User,
  Users,
} from "lucide-react";
import { useState } from "react";

// Navigation items data
const navItems = [
  { icon: Home, label: "Dashboard", active: true },
  { icon: BarChart2, label: "Analytics", active: false },
  { icon: ShoppingCart, label: "Orders", active: false },
  { icon: Package, label: "Products", active: false },
  { icon: Users, label: "Customers", active: false },
  { icon: FileText, label: "Reports", active: false },
  { icon: Calendar, label: "Calendar", active: false },
  { icon: Settings, label: "Settings", active: false },
];

// Stats cards data
const statsCards = [
  {
    title: "Total Revenue",
    value: "$45,231.89",
    change: "+20.1%",
    trend: "up",
    icon: DollarSign,
    description: "from last month",
    color: "text-emerald-500",
    bg: "bg-emerald-50",
  },
  {
    title: "Active Users",
    value: "+2,350",
    change: "+15.3%",
    trend: "up",
    icon: Users,
    description: "from last month",
    color: "text-blue-500",
    bg: "bg-blue-50",
  },
  {
    title: "New Orders",
    value: "+12,234",
    change: "+8.2%",
    trend: "up",
    icon: ShoppingCart,
    description: "from last month",
    color: "text-violet-500",
    bg: "bg-violet-50",
  },
  {
    title: "Growth Rate",
    value: "+573",
    change: "-2.4%",
    trend: "down",
    icon: TrendingUp,
    description: "from last month",
    color: "text-orange-500",
    bg: "bg-orange-50",
  },
];

// Recent orders data
const recentOrders = [
  {
    id: "#ORD-001",
    customer: "Alice Johnson",
    email: "alice@example.com",
    product: "Premium Plan",
    amount: "$299.00",
    status: "Completed",
    date: "Jan 15, 2024",
    avatar: "AJ",
  },
  {
    id: "#ORD-002",
    customer: "Bob Smith",
    email: "bob@example.com",
    product: "Basic Plan",
    amount: "$99.00",
    status: "Pending",
    date: "Jan 14, 2024",
    avatar: "BS",
  },
  {
    id: "#ORD-003",
    customer: "Carol White",
    email: "carol@example.com",
    product: "Enterprise Plan",
    amount: "$599.00",
    status: "Processing",
    date: "Jan 13, 2024",
    avatar: "CW",
  },
  {
    id: "#ORD-004",
    customer: "David Brown",
    email: "david@example.com",
    product: "Premium Plan",
    amount: "$299.00",
    status: "Completed",
    date: "Jan 12, 2024",
    avatar: "DB",
  },
  {
    id: "#ORD-005",
    customer: "Eva Martinez",
    email: "eva@example.com",
    product: "Basic Plan",
    amount: "$99.00",
    status: "Cancelled",
    date: "Jan 11, 2024",
    avatar: "EM",
  },
  {
    id: "#ORD-006",
    customer: "Frank Lee",
    email: "frank@example.com",
    product: "Enterprise Plan",
    amount: "$599.00",
    status: "Completed",
    date: "Jan 10, 2024",
    avatar: "FL",
  },
];

// Top products data
const topProducts = [
  { name: "Enterprise Plan", sales: 1240, revenue: "$742,560", progress: 85 },
  { name: "Premium Plan", sales: 980, revenue: "$293,220", progress: 67 },
  { name: "Basic Plan", sales: 760, revenue: "$75,240", progress: 52 },
  { name: "Starter Pack", sales: 540, revenue: "$27,000", progress: 37 },
  { name: "Add-on Bundle", sales: 320, revenue: "$16,000", progress: 22 },
];

// Recent activity data
const recentActivity = [
  {
    user: "Alice Johnson",
    action: "placed a new order",
    time: "2 minutes ago",
    avatar: "AJ",
    type: "order",
  },
  {
    user: "Bob Smith",
    action: "submitted a review",
    time: "15 minutes ago",
    avatar: "BS",
    type: "review",
  },
  {
    user: "Carol White",
    action: "upgraded to Enterprise",
    time: "1 hour ago",
    avatar: "CW",
    type: "upgrade",
  },
  {
    user: "David Brown",
    action: "cancelled subscription",
    time: "2 hours ago",
    avatar: "DB",
    type: "cancel",
  },
  {
    user: "Eva Martinez",
    action: "registered as new user",
    time: "3 hours ago",
    avatar: "EM",
    type: "register",
  },
  {
    user: "Frank Lee",
    action: "requested a refund",
    time: "5 hours ago",
    avatar: "FL",
    type: "refund",
  },
];

// Notifications data
const notifications = [
  {
    title: "New order received",
    description: "Order #ORD-007 from Grace Kim",
    time: "Just now",
    unread: true,
  },
  {
    title: "Payment confirmed",
    description: "Payment for #ORD-005 confirmed",
    time: "5 min ago",
    unread: true,
  },
  {
    title: "Server alert",
    description: "CPU usage exceeded 80%",
    time: "1 hour ago",
    unread: false,
  },
  {
    title: "New user registered",
    description: "Henry Wilson joined the platform",
    time: "2 hours ago",
    unread: false,
  },
];

// Status badge color mapping
const statusColors: Record<string, string> = {
  Completed: "bg-emerald-100 text-emerald-700",
  Pending: "bg-yellow-100 text-yellow-700",
  Processing: "bg-blue-100 text-blue-700",
  Cancelled: "bg-red-100 text-red-700",
};

export const Box = (): JSX.Element => {
  const [activeNav, setActiveNav] = useState("Dashboard");
  const [sidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="flex min-h-screen bg-gray-50 font-sans">
      {/* Sidebar */}
      <aside
        className={`${
          sidebarOpen ? "w-64" : "w-16"
        } bg-white border-r border-gray-200 flex flex-col transition-all duration-300 shrink-0`}
      >
        {/* Logo */}
        <div className="flex items-center gap-3 px-4 py-5 border-b border-gray-100">
          <div className="w-8 h-8 rounded-lg bg-violet-600 flex items-center justify-center shrink-0">
            <Activity className="w-4 h-4 text-white" />
          </div>
          {sidebarOpen && (
            <span className="font-bold text-gray-900 text-lg">Dashify</span>
          )}
        </div>

        {/* Navigation */}
        <ScrollArea className="flex-1 py-4">
          <nav className="flex flex-col gap-1 px-2">
            {navItems.map((item) => (
              <button
                key={item.label}
                onClick={() => setActiveNav(item.label)}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors w-full text-left ${
                  activeNav === item.label
                    ? "bg-violet-50 text-violet-700"
                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                }`}
              >
                <item.icon
                  className={`w-5 h-5 shrink-0 ${
                    activeNav === item.label
                      ? "text-violet-600"
                      : "text-gray-400"
                  }`}
                />
                {sidebarOpen && <span>{item.label}</span>}
              </button>
            ))}
          </nav>
        </ScrollArea>

        {/* User profile at bottom */}
        <div className="border-t border-gray-100 p-3">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-3 w-full px-2 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                <Avatar className="w-8 h-8 shrink-0">
                  <AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-semibold">
                    JD
                  </AvatarFallback>
                </Avatar>
                {sidebarOpen && (
                  <div className="flex-1 text-left min-w-0">
                    <p className="text-sm font-medium text-gray-900 truncate">
                      John Doe
                    </p>
                    <p className="text-xs text-gray-500 truncate">
                      john@example.com
                    </p>
                  </div>
                )}
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuLabel>My Account</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <User className="w-4 h-4 mr-2" />
                Profile
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Settings className="w-4 h-4 mr-2" />
                Settings
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="text-red-600">
                <LogOut className="w-4 h-4 mr-2" />
                Log out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </aside>

      {/* Main content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Top header */}
        <header className="bg-white border-b border-gray-200 px-6 py-4 flex items-center gap-4 shrink-0">
          <Button
            variant="ghost"
            size="icon"
            className="h-auto w-auto p-1.5"
            onClick={() => setSidebarOpen(!sidebarOpen)}
          >
            <Menu className="w-5 h-5 text-gray-500" />
          </Button>

          {/* Search */}
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <Input
              className="pl-9 bg-gray-50 border-gray-200 text-sm"
              placeholder="Search anything..."
            />
          </div>

          <div className="flex items-center gap-3 ml-auto">
            {/* Notifications */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-auto w-auto p-2 relative"
                >
                  <Bell className="w-5 h-5 text-gray-500" />
                  <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-80">
                <DropdownMenuLabel className="flex items-center justify-between">
                  Notifications
                  <Badge className="bg-violet-100 text-violet-700 text-xs">
                    2 new
                  </Badge>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                {notifications.map((notif, idx) => (
                  <DropdownMenuItem
                    key={idx}
                    className="flex flex-col items-start gap-0.5 py-3 cursor-pointer"
                  >
                    <div className="flex items-center gap-2 w-full">
                      <span className="font-medium text-sm text-gray-900">
                        {notif.title}
                      </span>
                      {notif.unread && (
                        <span className="ml-auto w-2 h-2 bg-violet-500 rounded-full shrink-0" />
                      )}
                    </div>
                    <span className="text-xs text-gray-500">
                      {notif.description}
                    </span>
                    <span className="text-xs text-gray-400">{notif.time}</span>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>

            {/* Avatar */}
            <Avatar className="w-9 h-9 cursor-pointer">
              <AvatarFallback className="bg-violet-100 text-violet-700 text-sm font-semibold">
                JD
              </AvatarFallback>
            </Avatar>
          </div>
        </header>

        {/* Page content */}
        <main className="flex-1 p-6 overflow-auto">
          {/* Page title */}
          <div className="mb-6">
            <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
            <p className="text-sm text-gray-500 mt-1">
              Welcome back, John! Here's what's happening today.
            </p>
          </div>

          {/* Stats cards */}
          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-6">
            {statsCards.map((stat) => (
              <Card
                key={stat.title}
                className="border border-gray-200 shadow-sm"
              >
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-sm font-medium text-gray-500">
                        {stat.title}
                      </p>
                      <p className="text-2xl font-bold text-gray-900 mt-1">
                        {stat.value}
                      </p>
                    </div>
                    <div className={`p-2.5 rounded-xl ${stat.bg}`}>
                      <stat.icon className={`w-5 h-5 ${stat.color}`} />
                    </div>
                  </div>
                  <div className="flex items-center gap-1.5 mt-3">
                    {stat.trend === "up" ? (
                      <ArrowUpRight className="w-4 h-4 text-emerald-500" />
                    ) : (
                      <ArrowDownRight className="w-4 h-4 text-red-500" />
                    )}
                    <span
                      className={`text-sm font-semibold ${
                        stat.trend === "up"
                          ? "text-emerald-600"
                          : "text-red-600"
                      }`}
                    >
                      {stat.change}
                    </span>
                    <span className="text-sm text-gray-400">
                      {stat.description}
                    </span>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Middle section: Orders table + Activity */}
          <div className="grid grid-cols-1 xl:grid-cols-3 gap-5 mb-6">
            {/* Recent Orders Table */}
            <Card className="xl:col-span-2 border border-gray-200 shadow-sm">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base font-semibold text-gray-900">
                      Recent Orders
                    </CardTitle>
                    <CardDescription className="text-sm text-gray-500 mt-0.5">
                      Latest transactions from your store
                    </CardDescription>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    className="h-auto text-xs px-3 py-1.5 border-gray-200"
                  >
                    View all
                    <ChevronRight className="w-3 h-3 ml-1" />
                  </Button>
                </div>
              </CardHeader>
              <CardContent className="p-0">
                <Tabs defaultValue="all">
                  <div className="px-6 pb-3">
                    <TabsList className="bg-gray-100 h-8">
                      <TabsTrigger value="all" className="text-xs h-6 px-3">
                        All
                      </TabsTrigger>
                      <TabsTrigger
                        value="completed"
                        className="text-xs h-6 px-3"
                      >
                        Completed
                      </TabsTrigger>
                      <TabsTrigger value="pending" className="text-xs h-6 px-3">
                        Pending
                      </TabsTrigger>
                    </TabsList>
                  </div>
                  <TabsContent value="all" className="mt-0">
                    <Table>
                      <TableHeader>
                        <TableRow className="bg-gray-50 hover:bg-gray-50">
                          <TableHead className="text-xs font-semibold text-gray-500 pl-6">
                            Customer
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Order ID
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Product
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Amount
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Status
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500 pr-6">
                            Date
                          </TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {recentOrders.map((order) => (
                          <TableRow
                            key={order.id}
                            className="hover:bg-gray-50 cursor-pointer"
                          >
                            <TableCell className="pl-6 py-3">
                              <div className="flex items-center gap-2.5">
                                <Avatar className="w-7 h-7">
                                  <AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-semibold">
                                    {order.avatar}
                                  </AvatarFallback>
                                </Avatar>
                                <div>
                                  <p className="text-sm font-medium text-gray-900">
                                    {order.customer}
                                  </p>
                                  <p className="text-xs text-gray-400">
                                    {order.email}
                                  </p>
                                </div>
                              </div>
                            </TableCell>
                            <TableCell className="text-sm text-gray-500">
                              {order.id}
                            </TableCell>
                            <TableCell className="text-sm text-gray-700">
                              {order.product}
                            </TableCell>
                            <TableCell className="text-sm font-semibold text-gray-900">
                              {order.amount}
                            </TableCell>
                            <TableCell>
                              <span
                                className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                                  statusColors[order.status]
                                }`}
                              >
                                {order.status}
                              </span>
                            </TableCell>
                            <TableCell className="text-sm text-gray-500 pr-6">
                              {order.date}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </TabsContent>
                  <TabsContent value="completed" className="mt-0">
                    <Table>
                      <TableHeader>
                        <TableRow className="bg-gray-50 hover:bg-gray-50">
                          <TableHead className="text-xs font-semibold text-gray-500 pl-6">
                            Customer
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Order ID
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Amount
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500 pr-6">
                            Date
                          </TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {recentOrders
                          .filter((o) => o.status === "Completed")
                          .map((order) => (
                            <TableRow
                              key={order.id}
                              className="hover:bg-gray-50 cursor-pointer"
                            >
                              <TableCell className="pl-6 py-3">
                                <div className="flex items-center gap-2.5">
                                  <Avatar className="w-7 h-7">
                                    <AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-semibold">
                                      {order.avatar}
                                    </AvatarFallback>
                                  </Avatar>
                                  <p className="text-sm font-medium text-gray-900">
                                    {order.customer}
                                  </p>
                                </div>
                              </TableCell>
                              <TableCell className="text-sm text-gray-500">
                                {order.id}
                              </TableCell>
                              <TableCell className="text-sm font-semibold text-gray-900">
                                {order.amount}
                              </TableCell>
                              <TableCell className="text-sm text-gray-500 pr-6">
                                {order.date}
                              </TableCell>
                            </TableRow>
                          ))}
                      </TableBody>
                    </Table>
                  </TabsContent>
                  <TabsContent value="pending" className="mt-0">
                    <Table>
                      <TableHeader>
                        <TableRow className="bg-gray-50 hover:bg-gray-50">
                          <TableHead className="text-xs font-semibold text-gray-500 pl-6">
                            Customer
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Order ID
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500">
                            Amount
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-gray-500 pr-6">
                            Date
                          </TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {recentOrders
                          .filter((o) => o.status === "Pending")
                          .map((order) => (
                            <TableRow
                              key={order.id}
                              className="hover:bg-gray-50 cursor-pointer"
                            >
                              <TableCell className="pl-6 py-3">
                                <div className="flex items-center gap-2.5">
                                  <Avatar className="w-7 h-7">
                                    <AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-semibold">
                                      {order.avatar}
                                    </AvatarFallback>
                                  </Avatar>
                                  <p className="text-sm font-medium text-gray-900">
                                    {order.customer}
                                  </p>
                                </div>
                              </TableCell>
                              <TableCell className="text-sm text-gray-500">
                                {order.id}
                              </TableCell>
                              <TableCell className="text-sm font-semibold text-gray-900">
                                {order.amount}
                              </TableCell>
                              <TableCell className="text-sm text-gray-500 pr-6">
                                {order.date}
                              </TableCell>
                            </TableRow>
                          ))}
                      </TableBody>
                    </Table>
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>

            {/* Recent Activity */}
            <Card className="border border-gray-200 shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="text-base font-semibold text-gray-900">
                  Recent Activity
                </CardTitle>
                <CardDescription className="text-sm text-gray-500">
                  Latest actions on your platform
                </CardDescription>
              </CardHeader>
              <CardContent className="p-0">
                <ScrollArea className="h-[360px]">
                  <div className="px-6 pb-4">
                    {recentActivity.map((activity, idx) => (
                      <div key={idx}>
                        <div className="flex items-start gap-3 py-3">
                          <Avatar className="w-8 h-8 shrink-0">
                            <AvatarFallback className="bg-violet-100 text-violet-700 text-xs font-semibold">
                              {activity.avatar}
                            </AvatarFallback>
                          </Avatar>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm text-gray-800">
                              <span className="font-semibold">
                                {activity.user}
                              </span>{" "}
                              {activity.action}
                            </p>
                            <p className="text-xs text-gray-400 mt-0.5">
                              {activity.time}
                            </p>
                          </div>
                        </div>
                        {idx < recentActivity.length - 1 && (
                          <Separator className="bg-gray-100" />
                        )}
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>
          </div>

          {/* Bottom section: Top Products + Quick Stats */}
          <div className="grid grid-cols-1 xl:grid-cols-3 gap-5">
            {/* Top Products */}
            <Card className="xl:col-span-2 border border-gray-200 shadow-sm">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-base font-semibold text-gray-900">
                      Top Products
                    </CardTitle>
                    <CardDescription className="text-sm text-gray-500 mt-0.5">
                      Best performing products this month
                    </CardDescription>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-auto w-auto p-1.5"
                      >
                        <MoreHorizontal className="w-4 h-4 text-gray-400" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>View all products</DropdownMenuItem>
                      <DropdownMenuItem>Export data</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col gap-5">
                  {topProducts.map((product, idx) => (
                    <div key={idx} className="flex flex-col gap-1.5">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-medium text-gray-400 w-4">
                            {idx + 1}
                          </span>
                          <span className="text-sm font-medium text-gray-800">
                            {product.name}
                          </span>
                        </div>
                        <div className="flex items-center gap-4">
                          <span className="text-xs text-gray-500">
                            {product.sales} sales
                          </span>
                          <span className="text-sm font-semibold text-gray-900">
                            {product.revenue}
                          </span>
                        </div>
                      </div>
                      <Progress
                        value={product.progress}
                        className="h-1.5 bg-gray-100"
                      />
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* Quick Stats */}
            <div className="flex flex-col gap-5">
              {/* Customer Satisfaction */}
              <Card className="border border-gray-200 shadow-sm">
                <CardHeader className="pb-2">
                  <CardTitle className="text-base font-semibold text-gray-900">
                    Customer Satisfaction
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-3 mb-4">
                    <div className="flex items-center gap-1">
                      {[1, 2, 3, 4, 5].map((star) => (
                        <Star
                          key={star}
                          className={`w-4 h-4 ${
                            star <= 4
                              ? "text-yellow-400 fill-yellow-400"
                              : "text-gray-200 fill-gray-200"
                          }`}
                        />
                      ))}
                    </div>
                    <span className="text-2xl font-bold text-gray-900">
                      4.8
                    </span>
                  </div>
                  <div className="flex flex-col gap-2">
                    {[
                      { label: "5 stars", value: 72 },
                      { label: "4 stars", value: 18 },
                      { label: "3 stars", value: 6 },
                      { label: "2 stars", value: 3 },
                      { label: "1 star", value: 1 },
                    ].map((rating) => (
                      <div
                        key={rating.label}
                        className="flex items-center gap-2"
                      >
                        <span className="text-xs text-gray-500 w-12 shrink-0">
                          {rating.label}
                        </span>
                        <Progress
                          value={rating.value}
                          className="h-1.5 flex-1 bg-gray-100"
                        />
                        <span className="text-xs text-gray-500 w-8 text-right shrink-0">
                          {rating.value}%
                        </span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Support Tickets */}
              <Card className="border border-gray-200 shadow-sm">
                <CardHeader className="pb-2">
                  <CardTitle className="text-base font-semibold text-gray-900">
                    Support Tickets
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-3">
                    {[
                      {
                        label: "Open",
                        value: "24",
                        color: "text-blue-600",
                        bg: "bg-blue-50",
                      },
                      {
                        label: "Resolved",
                        value: "142",
                        color: "text-emerald-600",
                        bg: "bg-emerald-50",
                      },
                      {
                        label: "Pending",
                        value: "8",
                        color: "text-yellow-600",
                        bg: "bg-yellow-50",
                      },
                      {
                        label: "Closed",
                        value: "89",
                        color: "text-gray-600",
                        bg: "bg-gray-100",
                      },
                    ].map((ticket) => (
                      <div
                        key={ticket.label}
                        className={`${ticket.bg} rounded-xl p-3 flex flex-col gap-1`}
                      >
                        <span className={`text-xl font-bold ${ticket.color}`}>
                          {ticket.value}
                        </span>
                        <span className="text-xs text-gray-500">
                          {ticket.label}
                        </span>
                      </div>
                    ))}
                  </div>
                  <Button
                    variant="outline"
                    className="w-full mt-4 h-auto py-2 text-sm border-gray-200 text-gray-600"
                  >
                    <MessageSquare className="w-4 h-4 mr-2" />
                    View all tickets
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};