import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { orders } from "@/lib/admin-data"
import { Search, Eye, Download } from "lucide-react"

export default function OrdersManagement() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold text-dark-color">إدارة الطلبات</h1>
        <Button variant="outline" className="border-border-color bg-transparent">
          <Download className="w-4 h-4 ml-2" />
          تصدير التقرير
        </Button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-dark-color">156</div>
              <div className="text-sm text-parg-color">إجمالي الطلبات</div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-yellow-600">23</div>
              <div className="text-sm text-parg-color">معلقة</div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">45</div>
              <div className="text-sm text-parg-color">قيد التنفيذ</div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-green-600">88</div>
              <div className="text-sm text-parg-color">مكتملة</div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <Card className="border-border-color">
        <CardContent className="p-4">
          <div className="flex gap-4 items-center">
            <div className="flex-1 relative">
              <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-parg-color w-4 h-4" />
              <input
                type="text"
                placeholder="البحث عن الطلبات..."
                className="w-full pr-10 pl-4 py-2 border border-border-color rounded-lg focus:outline-none focus:ring-2 focus:ring-main-color"
              />
            </div>
            <select className="px-4 py-2 border border-border-color rounded-lg focus:outline-none focus:ring-2 focus:ring-main-color">
              <option value="">جميع الأنواع</option>
              <option value="product">منتجات</option>
              <option value="service">خدمات</option>
            </select>
            <select className="px-4 py-2 border border-border-color rounded-lg focus:outline-none focus:ring-2 focus:ring-main-color">
              <option value="">جميع الحالات</option>
              <option value="pending">معلق</option>
              <option value="processing">قيد التنفيذ</option>
              <option value="completed">مكتمل</option>
              <option value="cancelled">ملغي</option>
            </select>
          </div>
        </CardContent>
      </Card>

      {/* Orders Table */}
      <Card className="border-border-color">
        <CardHeader>
          <CardTitle className="text-dark-color">قائمة الطلبات</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-border-color">
                  <th className="text-right py-3 px-4 font-medium text-parg-color">رقم الطلب</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">العميل</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">النوع</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">المبلغ</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">الحالة</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">التاريخ</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">السباك</th>
                  <th className="text-right py-3 px-4 font-medium text-parg-color">الإجراءات</th>
                </tr>
              </thead>
              <tbody>
                {orders.map((order) => (
                  <tr key={order.id} className="border-b border-border-color hover:bg-bg-color">
                    <td className="py-3 px-4 font-medium text-dark-color">{order.id}</td>
                    <td className="py-3 px-4 text-parg-color">{order.customerName}</td>
                    <td className="py-3 px-4">
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          order.type === "product" ? "bg-blue-100 text-blue-800" : "bg-green-100 text-green-800"
                        }`}
                      >
                        {order.type === "product" ? "منتج" : "خدمة"}
                      </span>
                    </td>
                    <td className="py-3 px-4 font-bold text-main-color">{order.total} ر.س</td>
                    <td className="py-3 px-4">
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          order.status === "completed"
                            ? "bg-green-100 text-green-800"
                            : order.status === "processing"
                              ? "bg-blue-100 text-blue-800"
                              : order.status === "cancelled"
                                ? "bg-red-100 text-red-800"
                                : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {order.status === "completed"
                          ? "مكتمل"
                          : order.status === "processing"
                            ? "قيد التنفيذ"
                            : order.status === "cancelled"
                              ? "ملغي"
                              : "معلق"}
                      </span>
                    </td>
                    <td className="py-3 px-4 text-parg-color">{new Date(order.date).toLocaleDateString("ar-SA")}</td>
                    <td className="py-3 px-4 text-parg-color">{order.plumberName || "-"}</td>
                    <td className="py-3 px-4">
                      <Button variant="ghost" size="sm">
                        <Eye className="w-4 h-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}