import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { products } from "@/lib/admin-data"
import { Search, Filter, Plus, Edit, Trash2 } from "lucide-react"

export default function ProductsManagement() {
  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">
          <Plus 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>
            <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="pipes">أنابيب</option>
              <option value="fittings">تركيبات</option>
              <option value="tools">أدوات</option>
            </select>
            <Button variant="outline" className="border-border-color bg-transparent">
              <Filter className="w-4 h-4 ml-2" />
              تصفية
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Products Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map((product) => (
          <Card key={product.id} className="border-border-color">
            <CardHeader>
              <div className="flex justify-between items-start">
                <div>
                  <CardTitle className="text-lg text-dark-color">{product.name}</CardTitle>
                  <p className="text-sm text-parg-color">{product.category}</p>
                </div>
                <span
                  className={`px-2 py-1 rounded-full text-xs ${
                    product.status === "active" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                  }`}
                >
                  {product.status === "active" ? "نشط" : "غير نشط"}
                </span>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-parg-color">السعر:</span>
                  <span className="font-bold text-main-color">{product.price} ر.س</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-parg-color">المخزون:</span>
                  <span className={`font-medium ${product.stock > 0 ? "text-green-600" : "text-red-600"}`}>
                    {product.stock}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-parg-color">المبيعات:</span>
                  <span className="font-medium text-dark-color">{product.sales}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-parg-color">آخر تحديث:</span>
                  <span className="text-sm text-parg-color">
                    {new Date(product.lastUpdated).toLocaleDateString("ar-SA")}
                  </span>
                </div>
                <div className="flex gap-2 pt-3">
                  <Button size="sm" variant="outline" className="flex-1 bg-transparent">
                    <Edit className="w-4 h-4 ml-1" />
                    تعديل
                  </Button>
                  <Button size="sm" variant="outline" className="text-red-600 hover:text-red-700 bg-transparent">
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}