"use client";
import Link from "next/link";
import { ShoppingCart, Package, Users, TrendingUp, AlertTriangle, ArrowLeft, Plus, ClipboardList, DollarSign } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PageHeader } from "@/components/page-header";
import { format } from "date-fns-jalali";

const ORDER_STATUS = {
  PENDING: { label: "در انتظار", cls: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400" },
  PROCESSING: { label: "پردازش", cls: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400" },
  SHIPPED: { label: "ارسال شد", cls: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400" },
  DELIVERED: { label: "تحویل شد", cls: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" },
  CANCELLED: { label: "لغو شد", cls: "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400" },
  REFUNDED: { label: "مسترد", cls: "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400" },
};

export default function DashboardClient({ userRole, stats, recentOrders, lowStockProducts }: {
  userRole: string;
  stats: { totalProducts: number; totalOrders: number; pendingOrders: number; totalCustomers: number; todayRevenue: number; todayOrders: number };
  recentOrders: any[];
  lowStockProducts: any[];
}) {
  const statCards = [
    { label: "فروش امروز", value: stats.todayRevenue.toLocaleString("fa-IR") + " تومان", sub: `${stats.todayOrders} سفارش`, icon: <TrendingUp className="w-5 h-5" />, color: "from-emerald-500/20 to-emerald-500/5 border-emerald-200 dark:border-emerald-800", iconBg: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", link: "/orders" },
    { label: "سفارشات در انتظار", value: stats.pendingOrders.toString(), sub: `از ${stats.totalOrders} سفارش کل`, icon: <ShoppingCart className="w-5 h-5" />, color: "from-amber-500/20 to-amber-500/5 border-amber-200 dark:border-amber-800", iconBg: "bg-amber-500/10 text-amber-600 dark:text-amber-400", link: "/orders" },
    { label: "کل محصولات", value: stats.totalProducts.toString(), sub: `${lowStockProducts.length} محصول کم موجود`, icon: <Package className="w-5 h-5" />, color: "from-indigo-500/20 to-indigo-500/5 border-indigo-200 dark:border-indigo-800", iconBg: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400", link: "/products" },
    { label: "مشتریان", value: stats.totalCustomers.toString(), sub: "مشتری ثبت شده", icon: <Users className="w-5 h-5" />, color: "from-purple-500/20 to-purple-500/5 border-purple-200 dark:border-purple-800", iconBg: "bg-purple-500/10 text-purple-600 dark:text-purple-400", link: "/customers" },
  ];

  return (
    <div className="flex flex-col h-full overflow-y-auto" dir="rtl">
      <PageHeader
        title="داشبورد فروشگاه"
        subtitle="خلاصه عملکرد فروشگاه"
        icon={<TrendingUp className="w-5 h-5" />}
        actions={[
          { label: "صندوق فروش", icon: <ClipboardList className="w-4 h-4" />, onClick: () => window.location.href = "/pos", variant: "outline" },
          { label: "محصول جدید", icon: <Plus className="w-4 h-4" />, onClick: () => window.location.href = "/products/add", variant: "default", className: "bg-indigo-600 hover:bg-indigo-700 text-white" },
        ]}
      />

      <div className="p-4 md:p-6 space-y-6 max-w-7xl mx-auto w-full">
        {/* Stats Grid */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {statCards.map(card => (
            <Link key={card.label} href={card.link}>
              <Card className={`bg-gradient-to-br ${card.color} hover:shadow-md transition-all cursor-pointer`}>
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div className={`p-2.5 rounded-xl ${card.iconBg}`}>{card.icon}</div>
                  </div>
                  <div className="mt-3">
                    <div className="text-2xl font-black font-sans tracking-tight">{card.value}</div>
                    <div className="text-xs text-muted-foreground mt-1 font-medium">{card.label}</div>
                    <div className="text-[10px] text-muted-foreground/70 mt-0.5">{card.sub}</div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Recent Orders */}
          <Card className="lg:col-span-2 shadow-sm">
            <CardHeader className="flex flex-row items-center justify-between pb-3">
              <CardTitle className="text-base font-bold">آخرین سفارشات</CardTitle>
              <Button asChild variant="ghost" size="sm" className="text-indigo-600 gap-1">
                <Link href="/admin/orders">همه <ArrowLeft className="w-3 h-3" /></Link>
              </Button>
            </CardHeader>
            <CardContent className="p-0">
              <div className="divide-y">
                {recentOrders.length === 0 ? (
                  <div className="text-center py-8 text-muted-foreground text-sm">هنوز سفارشی ثبت نشده است.</div>
                ) : recentOrders.map(order => (
                  <div key={order.id} className="flex items-center justify-between px-6 py-3 hover:bg-muted/20">
                    <div className="flex items-center gap-3">
                      <div className="w-9 h-9 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 font-bold text-xs font-sans">
                        #{order.orderCode}
                      </div>
                      <div>
                        <div className="text-sm font-semibold">
                          {order.customer ? `${order.customer.firstName} ${order.customer.lastName}` : "مهمان"}
                        </div>
                        <div className="text-xs text-muted-foreground font-sans">
                          {format(new Date(order.createdAt), "yyyy/MM/dd HH:mm")}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="font-sans font-bold text-sm hidden sm:block">
                        {(order.payableAmount || 0).toLocaleString("fa-IR")}
                      </span>
                      <span className={`text-xs font-bold px-2 py-1 rounded-full ${(ORDER_STATUS as any)[order.status]?.cls || "bg-muted"}`}>
                        {(ORDER_STATUS as any)[order.status]?.label || order.status}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Low Stock & Quick Actions */}
          <div className="space-y-4">
            {/* Quick Actions */}
            <Card className="shadow-sm">
              <CardHeader className="pb-3">
                <CardTitle className="text-base font-bold">دسترسی سریع</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                {[
                  { label: "صندوق فروش حضوری (POS)", href: "/pos", icon: <ClipboardList className="w-4 h-4" />, cls: "bg-emerald-50 text-emerald-700 border-emerald-100 hover:bg-emerald-100 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-900/30" },
                  { label: "افزودن محصول جدید", href: "/products/add", icon: <Plus className="w-4 h-4" />, cls: "bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100 dark:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-900/30" },
                  { label: "مدیریت سفارشات", href: "/orders", icon: <ShoppingCart className="w-4 h-4" />, cls: "bg-amber-50 text-amber-700 border-amber-100 hover:bg-amber-100 dark:bg-amber-900/20 dark:text-amber-400 dark:border-amber-900/30" },
                  { label: "بروزرسانی قیمت‌ها با نرخ دلار", href: "/settings?tab=pricing", icon: <DollarSign className="w-4 h-4" />, cls: "bg-violet-50 text-violet-700 border-violet-100 hover:bg-violet-100 dark:bg-violet-900/20 dark:text-violet-400 dark:border-violet-900/30" },
                ].map(a => (
                  <Button key={a.href} asChild variant="outline" className={`w-full justify-start gap-2 ${a.cls}`}>
                    <Link href={a.href}>{a.icon}{a.label}</Link>
                  </Button>
                ))}
              </CardContent>
            </Card>

            {/* Low Stock Alert */}
            {lowStockProducts.length > 0 && (
              <Card className="border-rose-200 dark:border-rose-900/30 shadow-sm">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base font-bold text-rose-700 dark:text-rose-400 flex items-center gap-2">
                    <AlertTriangle className="w-4 h-4" /> هشدار کم موجودی
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {lowStockProducts.map(p => (
                    <Link key={p.id} href={`/admin/products/${p.id}/edit`}>
                      <div className="flex items-center justify-between p-2 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-900/10 transition-colors">
                        <div className="flex items-center gap-2">
                          {p.images?.[0] ? (
                            <img src={p.images[0].imageUrl} alt={p.title} className="w-8 h-8 rounded object-cover" />
                          ) : (
                            <div className="w-8 h-8 rounded bg-muted flex items-center justify-center"><Package className="w-4 h-4 text-muted-foreground/30" /></div>
                          )}
                          <span className="text-sm font-medium line-clamp-1">{p.title}</span>
                        </div>
                        <span className="font-sans font-black text-rose-600 text-sm">{p.stockQuantity}</span>
                      </div>
                    </Link>
                  ))}
                  <Button asChild variant="outline" size="sm" className="w-full mt-2 text-rose-600 border-rose-200">
                    <Link href="/admin/products?filter=low-stock">مشاهده همه</Link>
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}