import { getCurrentUser } from "@/lib/auth"
import { getOrdersByCustomerId, getOrderStatusColor, getOrderStatusText } from "@/lib/orders"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Package, Wrench, Calendar, MapPin, Phone, Eye } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default async function OrdersPage() {
  const user = await getCurrentUser()
  const orders = user ? getOrdersByCustomerId(user.id) : []

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-[var(--dark-color)]">طلباتي</h1>
          <p className="text-[var(--parg-color)]">تتبع جميع طلباتك وخدماتك</p>
        </div>
        <div className="flex gap-2">
          <Link href="/store">
            <Button className="bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]">
              طلب جديد
            </Button>
          </Link>
        </div>
      </div>

      {orders.length > 0 ? (
        <div className="space-y-4">
          {orders.map((order) => (
            <Card key={order.id} className="border-[var(--border-color)]">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div
                      className={`w-10 h-10 rounded-full flex items-center justify-center ${
                        order.type === "product" ? "bg-[var(--main-color)]/10" : "bg-[var(--name-item)]/10"
                      }`}
                    >
                      {order.type === "product" ? (
                        <Package className="w-5 h-5 text-[var(--main-color)]" />
                      ) : (
                        <Wrench className="w-5 h-5 text-[var(--name-item)]" />
                      )}
                    </div>
                    <div>
                      <CardTitle className="text-lg text-[var(--dark-color)]">{order.id}</CardTitle>
                      <p className="text-sm text-[var(--parg-color)]">
                        {order.type === "product" ? "طلب منتجات" : "طلب خدمة"}
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3">
                    <Badge className={getOrderStatusColor(order.status)}>{getOrderStatusText(order.status)}</Badge>
                    <span className="text-lg font-bold text-[var(--dark-color)]">{order.totalAmount} جنيه</span>
                  </div>
                </div>
              </CardHeader>

              <CardContent>
                {order.type === "product" && order.items && (
                  <div className="space-y-3 mb-4">
                    <h4 className="font-medium text-[var(--dark-color)]">المنتجات:</h4>
                    <div className="space-y-2">
                      {order.items.map((item, index) => (
                        <div key={index} className="flex items-center gap-3 p-2 bg-[var(--bg-color)] rounded-lg">
                          <Image
                            src={item.productImage || "/placeholder.svg"}
                            alt={item.productName}
                            width={40}
                            height={40}
                            className="rounded object-cover"
                          />
                          <div className="flex-1">
                            <p className="font-medium text-[var(--dark-color)] text-sm">{item.productName}</p>
                            <p className="text-xs text-[var(--parg-color)]">
                              الكمية: {item.quantity} × {item.price} جنيه
                            </p>
                          </div>
                          <span className="font-medium text-[var(--dark-color)]">{item.totalPrice} جنيه</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {order.type === "service" && order.serviceRequest && (
                  <div className="space-y-3 mb-4">
                    <h4 className="font-medium text-[var(--dark-color)]">تفاصيل الخدمة:</h4>
                    <div className="bg-[var(--bg-color)] p-4 rounded-lg space-y-2">
                      <p className="font-medium text-[var(--dark-color)]">{order.serviceRequest.serviceName}</p>
                      <div className="flex items-center gap-2 text-sm text-[var(--parg-color)]">
                        <Calendar className="w-4 h-4" />
                        <span>
                          {order.serviceRequest.scheduledDate} في {order.serviceRequest.scheduledTime}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-[var(--parg-color)]">
                        <Phone className="w-4 h-4" />
                        <span>السباك: {order.serviceRequest.plumberName}</span>
                      </div>
                    </div>
                  </div>
                )}

                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div>
                    <span className="text-[var(--parg-color)]">تاريخ الطلب:</span>
                    <p className="font-medium text-[var(--dark-color)]">
                      {new Date(order.createdAt).toLocaleDateString("ar-EG")}
                    </p>
                  </div>

                  <div>
                    <span className="text-[var(--parg-color)]">طريقة الدفع:</span>
                    <p className="font-medium text-[var(--dark-color)]">{order.paymentMethod}</p>
                  </div>

                  {order.trackingNumber && (
                    <div>
                      <span className="text-[var(--parg-color)]">رقم التتبع:</span>
                      <p className="font-medium text-[var(--dark-color)]">{order.trackingNumber}</p>
                    </div>
                  )}
                </div>

                {order.shippingAddress && (
                  <div className="mt-4 pt-4 border-t border-[var(--border-color)]">
                    <div className="flex items-start gap-2">
                      <MapPin className="w-4 h-4 text-[var(--parg-color)] mt-1" />
                      <div>
                        <span className="text-[var(--parg-color)] text-sm">عنوان التسليم:</span>
                        <p className="text-[var(--dark-color)]">{order.shippingAddress}</p>
                      </div>
                    </div>
                  </div>
                )}

                <div className="flex justify-end mt-4">
                  <Link href={`/dashboard/orders/${order.id}`}>
                    <Button variant="outline" size="sm">
                      <Eye className="w-4 h-4 ml-2" />
                      عرض التفاصيل
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : (
        <Card className="border-[var(--border-color)]">
          <CardContent className="text-center py-16">
            <Package className="w-16 h-16 mx-auto text-[var(--parg-color)] mb-4" />
            <h3 className="text-xl font-semibold text-[var(--dark-color)] mb-2">لا توجد طلبات بعد</h3>
            <p className="text-[var(--parg-color)] mb-6">ابدأ بتصفح منتجاتنا أو احجز خدمة صيانة</p>
            <div className="flex gap-4 justify-center">
              <Link href="/store">
                <Button className="bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]">
                  تصفح المنتجات
                </Button>
              </Link>
              <Link href="/services">
                <Button
                  variant="outline"
                  className="border-[var(--name-item)] text-[var(--name-item)] hover:bg-[var(--name-item)] hover:text-white bg-transparent"
                >
                  احجز خدمة
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}