import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { adminStats, orders, users } from "@/lib/admin-data"
import { Users, DollarSign, Wrench, ShoppingCart } from "lucide-react"

export default function AdminDashboard() {
  const recentOrders = orders.slice(0, 5)
  const recentUsers = users.slice(0, 5)

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold text-dark-color">لوحة التحكم الرئيسية</h1>
        <div className="text-sm text-parg-color">آخر تحديث: {new Date().toLocaleDateString("ar-SA")}</div>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="border-border-color">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-parg-color">إجمالي المستخدمين</CardTitle>
            <Users className="h-4 w-4 text-name-item" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-dark-color">{adminStats.totalUsers.toLocaleString()}</div>
            <p className="text-xs text-parg-color">+{adminStats.monthlyGrowth}% من الشهر الماضي</p>
          </CardContent>
        </Card>

        <Card className="border-border-color">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-parg-color">السباكين المسجلين</CardTitle>
            <Wrench className="h-4 w-4 text-main-color" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-dark-color">{adminStats.totalPlumbers}</div>
            <p className="text-xs text-parg-color">نشط: {adminStats.activeServices}</p>
          </CardContent>
        </Card>

        <Card className="border-border-color">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-parg-color">إجمالي الطلبات</CardTitle>
            <ShoppingCart className="h-4 w-4 text-name-item" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-dark-color">{adminStats.totalOrders.toLocaleString()}</div>
            <p className="text-xs text-parg-color">معلق: {adminStats.pendingOrders}</p>
          </CardContent>
        </Card>

        <Card className="border-border-color">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-parg-color">إجمالي الإيرادات</CardTitle>
            <DollarSign className="h-4 w-4 text-main-color" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-dark-color">{adminStats.totalRevenue.toLocaleString()} ر.س</div>
            <p className="text-xs text-parg-color">رضا العملاء: {adminStats.customerSatisfaction}/5 ⭐</p>
          </CardContent>
        </Card>
      </div>

      {/* Recent Activity */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Orders */}
        <Card className="border-border-color">
          <CardHeader>
            <CardTitle className="text-dark-color">الطلبات الأخيرة</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentOrders.map((order) => (
                <div key={order.id} className="flex items-center justify-between p-3 bg-bg-color rounded-lg">
                  <div>
                    <p className="font-medium text-dark-color">{order.customerName}</p>
                    <p className="text-sm text-parg-color">
                      {order.type === "product" ? "منتج" : "خدمة"} - {order.id}
                    </p>
                  </div>
                  <div className="text-left">
                    <p className="font-bold text-main-color">{order.total} ر.س</p>
                    <span
                      className={`text-xs px-2 py-1 rounded-full ${
                        order.status === "completed"
                          ? "bg-green-100 text-green-800"
                          : order.status === "processing"
                            ? "bg-blue-100 text-blue-800"
                            : "bg-yellow-100 text-yellow-800"
                      }`}
                    >
                      {order.status === "completed" ? "مكتمل" : order.status === "processing" ? "قيد التنفيذ" : "معلق"}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Recent Users */}
        <Card className="border-border-color">
          <CardHeader>
            <CardTitle className="text-dark-color">المستخدمين الجدد</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentUsers.map((user) => (
                <div key={user.id} className="flex items-center justify-between p-3 bg-bg-color rounded-lg">
                  <div>
                    <p className="font-medium text-dark-color">{user.name}</p>
                    <p className="text-sm text-parg-color">{user.email}</p>
                  </div>
                  <div className="text-left">
                    <span
                      className={`text-xs px-2 py-1 rounded-full ${
                        user.role === "customer"
                          ? "bg-blue-100 text-blue-800"
                          : user.role === "plumber"
                            ? "bg-green-100 text-green-800"
                            : "bg-purple-100 text-purple-800"
                      }`}
                    >
                      {user.role === "customer" ? "عميل" : user.role === "plumber" ? "سباك" : "إدارة"}
                    </span>
                    <p className="text-xs text-parg-color mt-1">
                      {new Date(user.joinDate).toLocaleDateString("ar-SA")}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}