import { getCurrentUser } from "@/lib/auth"
import { getOrdersByCustomerId } from "@/lib/orders"
import StatsCard from "@/components/dashboard/stats-card"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ShoppingBag, Wrench, Heart, Clock, Package, CheckCircle } from "lucide-react"
import Link from "next/link"

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

  const productOrders = orders.filter((order) => order.type === "product")
  const serviceOrders = orders.filter((order) => order.type === "service")
  const completedOrders = orders.filter((order) => order.status === "delivered")
  const pendingOrders = orders.filter((order) =>
    ["pending", "confirmed", "processing", "shipped"].includes(order.status),
  )

  const recentOrders = orders.slice(0, 5)

  return (
    <div className="space-y-6">
      {/* Welcome Section */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-[var(--dark-color)] mb-2">مرحباً، {user?.name}</h1>
        <p className="text-[var(--parg-color)]">إليك نظرة عامة على حسابك وطلباتك</p>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatsCard
          title="إجمالي الطلبات"
          value={orders.length}
          icon={ShoppingBag}
          color="var(--main-color)"
          description="جميع طلباتك"
        />

        <StatsCard
          title="طلبات المنتجات"
          value={productOrders.length}
          icon={Package}
          color="var(--name-item)"
          description="طلبات الخامات"
        />

        <StatsCard
          title="طلبات الخدمات"
          value={serviceOrders.length}
          icon={Wrench}
          color="var(--dark-red)"
          description="خدمات الصيانة"
        />

        <StatsCard
          title="الطلبات المكتملة"
          value={completedOrders.length}
          icon={CheckCircle}
          color="#10b981"
          description="تم التسليم بنجاح"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Orders */}
        <Card className="border-[var(--border-color)]">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-[var(--dark-color)]">الطلبات الأخيرة</CardTitle>
            <Link href="/dashboard/orders">
              <Button variant="outline" size="sm">
                عرض الكل
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            {recentOrders.length > 0 ? (
              <div className="space-y-4">
                {recentOrders.map((order) => (
                  <div
                    key={order.id}
                    className="flex items-center justify-between p-3 border border-[var(--border-color)] rounded-lg"
                  >
                    <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 ${order.type === "product" ? "text-[var(--main-color)]" : "text-[var(--name-item)]"}`}
                          />
                        ) : (
                          <Wrench className="w-5 h-5 text-[var(--name-item)]" />
                        )}
                      </div>

                      <div>
                        <p className="font-medium text-[var(--dark-color)]">{order.id}</p>
                        <p className="text-sm text-[var(--parg-color)]">
                          {order.type === "product" ? "طلب منتجات" : order.serviceRequest?.serviceName}
                        </p>
                      </div>
                    </div>

                    <div className="text-left">
                      <Badge
                        className={`mb-1 ${
                          order.status === "delivered"
                            ? "bg-green-100 text-green-800"
                            : order.status === "pending"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-blue-100 text-blue-800"
                        }`}
                      >
                        {order.status === "delivered"
                          ? "مكتمل"
                          : order.status === "pending"
                            ? "في الانتظار"
                            : "قيد التنفيذ"}
                      </Badge>
                      <p className="text-sm font-medium text-[var(--dark-color)]">{order.totalAmount} جنيه</p>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8">
                <ShoppingBag className="w-12 h-12 mx-auto text-[var(--parg-color)] mb-4" />
                <p className="text-[var(--parg-color)]">لا توجد طلبات بعد</p>
                <Link href="/store">
                  <Button className="mt-4 bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]">
                    تصفح المنتجات
                  </Button>
                </Link>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Quick Actions */}
        <Card className="border-[var(--border-color)]">
          <CardHeader>
            <CardTitle className="text-[var(--dark-color)]">إجراءات سريعة</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <Link href="/store">
              <Button className="w-full justify-start gap-3 bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]">
                <ShoppingBag className="w-5 h-5" />
                تصفح المنتجات
              </Button>
            </Link>

            <Link href="/services">
              <Button
                variant="outline"
                className="w-full justify-start gap-3 border-[var(--name-item)] text-[var(--name-item)] hover:bg-[var(--name-item)] hover:text-white bg-transparent"
              >
                <Wrench className="w-5 h-5" />
                احجز خدمة صيانة
              </Button>
            </Link>

            <Link href="/dashboard/favorites">
              <Button variant="outline" className="w-full justify-start gap-3 bg-transparent">
                <Heart className="w-5 h-5" />
                المنتجات المفضلة
              </Button>
            </Link>

            <Link href="/dashboard/support">
              <Button variant="outline" className="w-full justify-start gap-3 bg-transparent">
                <Clock className="w-5 h-5" />
                تواصل مع الدعم
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>

      {/* Pending Orders Alert */}
      {pendingOrders.length > 0 && (
        <Card className="border-[var(--main-color)] bg-[var(--main-color)]/5">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <Clock className="w-6 h-6 text-[var(--main-color)]" />
              <div>
                <h3 className="font-semibold text-[var(--dark-color)]">لديك {pendingOrders.length} طلب في الانتظار</h3>
                <p className="text-[var(--parg-color)]">تابع حالة طلباتك من صفحة الطلبات</p>
              </div>
              <Link href="/dashboard/orders" className="mr-auto">
                <Button
                  size="sm"
                  className="bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]"
                >
                  عرض الطلبات
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}