import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { users } from "@/lib/admin-data"
import { Search, Filter, UserPlus, MoreHorizontal } from "lucide-react"

export default function UsersManagement() {
  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 className="bg-main-color hover:bg-main-color/90 text-white">
          <UserPlus className="w-4 h-4 ml-2" />
          إضافة مستخدم جديد
        </Button>
      </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>
            <Button variant="outline" className="border-border-color bg-transparent">
              <Filter className="w-4 h-4 ml-2" />
              تصفية
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Users 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>
                </tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr key={user.id} className="border-b border-border-color hover:bg-bg-color">
                    <td className="py-3 px-4">
                      <div className="font-medium text-dark-color">{user.name}</div>
                    </td>
                    <td className="py-3 px-4 text-parg-color">{user.email}</td>
                    <td className="py-3 px-4">
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          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>
                    </td>
                    <td className="py-3 px-4">
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          user.status === "active"
                            ? "bg-green-100 text-green-800"
                            : user.status === "suspended"
                              ? "bg-red-100 text-red-800"
                              : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {user.status === "active" ? "نشط" : user.status === "suspended" ? "معلق" : "في الانتظار"}
                      </span>
                    </td>
                    <td className="py-3 px-4 text-parg-color">{new Date(user.joinDate).toLocaleDateString("ar-SA")}</td>
                    <td className="py-3 px-4 text-parg-color">
                      {new Date(user.lastActive).toLocaleDateString("ar-SA")}
                    </td>
                    <td className="py-3 px-4">
                      <Button variant="ghost" size="sm">
                        <MoreHorizontal className="w-4 h-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}