"use client";
import React, { useState, useMemo } from "react";
import { PageHeader } from "@/components/page-header";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { Search, ShoppingCart, Eye, Printer, CheckCircle, XCircle, Truck, Package } from "lucide-react";
import { format } from "date-fns-jalali";
import { updateOrderStatus } from "@/app/actions/order";

const STATUSES: Record<string, { label: string; cls: string; icon: React.ReactNode }> = {
  PENDING:    { label: "در انتظار",     cls: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",   icon: <ShoppingCart className="w-3 h-3" /> },
  PROCESSING: { label: "پردازش",        cls: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",       icon: <Package className="w-3 h-3" /> },
  SHIPPED:    { label: "ارسال شد",      cls: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400", icon: <Truck className="w-3 h-3" /> },
  DELIVERED:  { label: "تحویل داده شد", cls: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", icon: <CheckCircle className="w-3 h-3" /> },
  CANCELLED:  { label: "لغو شد",        cls: "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",       icon: <XCircle className="w-3 h-3" /> },
  REFUNDED:   { label: "مسترد شد",      cls: "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400",      icon: <XCircle className="w-3 h-3" /> },
};

const PAY_STATUS: Record<string, { label: string; cls: string }> = {
  PENDING:  { label: "پرداخت نشده", cls: "bg-rose-100 text-rose-700" },
  PAID:     { label: "پرداخت شده",  cls: "bg-emerald-100 text-emerald-700" },
  FAILED:   { label: "ناموفق",       cls: "bg-slate-100 text-slate-600" },
  REFUNDED: { label: "برگشت",        cls: "bg-amber-100 text-amber-700" },
};

export default function OrdersClient({ orders: initialOrders }: { orders: any[] }) {
  const [orders, setOrders] = useState(initialOrders);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("ALL");
  const [selectedOrder, setSelectedOrder] = useState<any>(null);
  const [updating, setUpdating] = useState(false);

  const filtered = useMemo(() => {
    return orders.filter(o => {
      const matchSearch = !search ||
        o.orderCode?.toString().includes(search) ||
        o.customer?.firstName?.includes(search) ||
        o.customer?.lastName?.includes(search);
      const matchStatus = statusFilter === "ALL" || o.status === statusFilter;
      return matchSearch && matchStatus;
    });
  }, [orders, search, statusFilter]);

  const handleStatusChange = async (orderId: string, newStatus: string) => {
    setUpdating(true);
    const res = await updateOrderStatus(orderId, newStatus);
    if (res.success) {
      setOrders(prev => prev.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
      if (selectedOrder?.id === orderId) setSelectedOrder((p: any) => ({ ...p, status: newStatus }));
      toast.success("وضعیت سفارش بروزرسانی شد.");
    } else {
      toast.error("خطا در بروزرسانی وضعیت");
    }
    setUpdating(false);
  };

  const statusCounts = useMemo(() => {
    const c: Record<string, number> = {};
    for (const o of orders) c[o.status] = (c[o.status] || 0) + 1;
    return c;
  }, [orders]);

  return (
    <div className="flex flex-col h-full overflow-hidden" dir="rtl">
      <PageHeader
        title="سفارشات"
        subtitle={`${orders.length} سفارش ثبت شده`}
        icon={<ShoppingCart className="w-5 h-5" />}
      />

      <div className="flex-1 overflow-auto p-4 md:p-6 space-y-4">
        {/* Status filter tabs */}
        <div className="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
          {[{ value: "ALL", label: "همه", count: orders.length }, ...Object.entries(STATUSES).map(([v, s]) => ({ value: v, label: s.label, count: statusCounts[v] || 0 }))].map(s => (
            <button key={s.value} onClick={() => setStatusFilter(s.value)}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold whitespace-nowrap transition-colors border ${statusFilter === s.value ? "bg-indigo-600 text-white border-indigo-600" : "bg-card text-muted-foreground border-border hover:bg-muted"}`}>
              {s.label}
              {s.count > 0 && <span className={`font-sans text-[10px] px-1 rounded-full ${statusFilter === s.value ? "bg-white/20" : "bg-muted"}`}>{s.count}</span>}
            </button>
          ))}
        </div>

        {/* Search */}
        <div className="relative max-w-sm">
          <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input placeholder="جستجو (شماره سفارش، نام مشتری)..." className="pr-9" value={search} onChange={e => setSearch(e.target.value)} />
        </div>

        {/* Orders Table */}
        <div className="bg-card border rounded-xl shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-muted/50 border-b">
                <tr>
                  <th className="text-right p-4 font-semibold">سفارش</th>
                  <th className="text-right p-4 font-semibold hidden md:table-cell">مشتری</th>
                  <th className="text-right p-4 font-semibold hidden sm:table-cell">تاریخ</th>
                  <th className="text-right p-4 font-semibold">مبلغ (تومان)</th>
                  <th className="text-right p-4 font-semibold">وضعیت</th>
                  <th className="text-right p-4 font-semibold hidden sm:table-cell">پرداخت</th>
                  <th className="text-left p-4 font-semibold">عملیات</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {filtered.length === 0 ? (
                  <tr><td colSpan={7} className="py-12 text-center text-muted-foreground">سفارشی یافت نشد.</td></tr>
                ) : filtered.map(order => (
                  <tr key={order.id} className="hover:bg-muted/20 transition-colors">
                    <td className="p-4">
                      <div className="font-bold text-indigo-600 font-sans">#{order.orderCode}</div>
                      <div className="text-xs text-muted-foreground">{order.channel === "POS" ? "حضوری" : "آنلاین"}</div>
                    </td>
                    <td className="p-4 hidden md:table-cell">
                      <div className="font-medium">{order.customer ? `${order.customer.firstName} ${order.customer.lastName}` : "مهمان"}</div>
                      <div className="text-xs text-muted-foreground font-sans">{order.customer?.mobile || ""}</div>
                    </td>
                    <td className="p-4 hidden sm:table-cell">
                      <div className="font-sans text-xs text-muted-foreground">{format(new Date(order.createdAt), "yyyy/MM/dd")}</div>
                      <div className="font-sans text-[10px] text-muted-foreground/60">{format(new Date(order.createdAt), "HH:mm")}</div>
                    </td>
                    <td className="p-4 font-sans font-bold">{(order.payableAmount || order.totalPrice || 0).toLocaleString("fa-IR")}</td>
                    <td className="p-4">
                      <span className={`inline-flex items-center gap-1 text-xs font-bold px-2 py-1 rounded-full ${STATUSES[order.status]?.cls}`}>
                        {STATUSES[order.status]?.icon}
                        {STATUSES[order.status]?.label}
                      </span>
                    </td>
                    <td className="p-4 hidden sm:table-cell">
                      <span className={`text-xs font-bold px-2 py-1 rounded-full ${PAY_STATUS[order.paymentStatus]?.cls}`}>
                        {PAY_STATUS[order.paymentStatus]?.label}
                      </span>
                    </td>
                    <td className="p-4">
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-indigo-600" onClick={() => setSelectedOrder(order)}>
                        <Eye className="w-4 h-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* Order Detail Dialog */}
      <Dialog open={!!selectedOrder} onOpenChange={open => !open && setSelectedOrder(null)}>
        <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <ShoppingCart className="w-5 h-5 text-indigo-500" />
              جزئیات سفارش #{selectedOrder?.orderCode}
            </DialogTitle>
          </DialogHeader>
          {selectedOrder && (
            <div className="space-y-5 mt-2">
              {/* Status Changer */}
              <div className="flex items-center gap-3 bg-muted/30 p-4 rounded-xl border">
                <span className="text-sm font-bold text-muted-foreground shrink-0">تغییر وضعیت:</span>
                <Select value={selectedOrder.status} onValueChange={val => handleStatusChange(selectedOrder.id, val)} disabled={updating}>
                  <SelectTrigger className="flex-1"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {Object.entries(STATUSES).map(([v, s]) => (
                      <SelectItem key={v} value={v}>
                        <span className="flex items-center gap-2">{s.icon} {s.label}</span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Order Info Grid */}
              <div className="grid grid-cols-2 gap-3 text-sm">
                {[
                  { label: "مشتری", value: selectedOrder.customer ? `${selectedOrder.customer.firstName} ${selectedOrder.customer.lastName}` : "مهمان" },
                  { label: "کانال", value: selectedOrder.channel === "POS" ? "فروش حضوری" : "آنلاین" },
                  { label: "تاریخ ثبت", value: format(new Date(selectedOrder.createdAt), "yyyy/MM/dd HH:mm") },
                  { label: "وضعیت پرداخت", value: PAY_STATUS[selectedOrder.paymentStatus]?.label },
                ].map(row => (
                  <div key={row.label} className="bg-muted/20 p-3 rounded-lg">
                    <div className="text-xs text-muted-foreground mb-1">{row.label}</div>
                    <div className="font-semibold">{row.value}</div>
                  </div>
                ))}
              </div>

              {/* Items */}
              <div className="border rounded-xl overflow-hidden">
                <div className="bg-muted/50 px-4 py-2 text-xs font-bold grid grid-cols-12 border-b">
                  <div className="col-span-6">محصول</div>
                  <div className="col-span-2 text-center">تعداد</div>
                  <div className="col-span-2 text-center">قیمت واحد</div>
                  <div className="col-span-2 text-left">جمع</div>
                </div>
                {selectedOrder.items?.map((item: any) => (
                  <div key={item.id} className="grid grid-cols-12 px-4 py-3 text-sm border-t items-center">
                    <div className="col-span-6 font-medium">{item.title || item.product?.title}</div>
                    <div className="col-span-2 text-center font-sans">{item.quantity}</div>
                    <div className="col-span-2 text-center font-sans text-xs text-muted-foreground">{(item.unitPrice || 0).toLocaleString("fa-IR")}</div>
                    <div className="col-span-2 font-bold font-sans text-left">{(item.totalPrice || 0).toLocaleString("fa-IR")}</div>
                  </div>
                ))}
              </div>

              {/* Totals */}
              <div className="flex flex-col items-end gap-1.5 text-sm border-t pt-4">
                <div className="flex justify-between w-56">
                  <span className="text-muted-foreground">جمع کالاها:</span>
                  <span className="font-sans">{(selectedOrder.totalPrice || 0).toLocaleString("fa-IR")}</span>
                </div>
                {selectedOrder.discountAmount > 0 && (
                  <div className="flex justify-between w-56 text-rose-600">
                    <span>تخفیف:</span>
                    <span className="font-sans">- {selectedOrder.discountAmount.toLocaleString("fa-IR")}</span>
                  </div>
                )}
                {selectedOrder.shippingPrice > 0 && (
                  <div className="flex justify-between w-56">
                    <span className="text-muted-foreground">هزینه ارسال:</span>
                    <span className="font-sans">{selectedOrder.shippingPrice.toLocaleString("fa-IR")}</span>
                  </div>
                )}
                <div className="flex justify-between w-56 font-black text-lg text-indigo-700 dark:text-indigo-400 border-t pt-2 mt-1">
                  <span>قابل پرداخت:</span>
                  <span className="font-sans">{(selectedOrder.payableAmount || 0).toLocaleString("fa-IR")}</span>
                </div>
              </div>

              {/* Note */}
              {selectedOrder.note && (
                <div className="bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-900/30 rounded-xl p-3 text-sm text-amber-800 dark:text-amber-400">
                  <span className="font-bold">یادداشت مشتری: </span>{selectedOrder.note}
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}