import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { complaints } from "@/lib/admin-data"
import { Search, MessageSquare, Clock, CheckCircle } from "lucide-react"

export default function ComplaintsManagement() {
  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>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <MessageSquare className="w-8 h-8 text-red-500" />
              <div>
                <div className="text-2xl font-bold text-dark-color">12</div>
                <div className="text-sm text-parg-color">شكاوى جديدة</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Clock className="w-8 h-8 text-yellow-500" />
              <div>
                <div className="text-2xl font-bold text-dark-color">8</div>
                <div className="text-sm text-parg-color">قيد المعالجة</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <CheckCircle className="w-8 h-8 text-green-500" />
              <div>
                <div className="text-2xl font-bold text-dark-color">45</div>
                <div className="text-sm text-parg-color">تم حلها</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="border-border-color">
          <CardContent className="p-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-main-color">4.2</div>
              <div className="text-sm text-parg-color">متوسط وقت الاستجابة (ساعات)</div>
            </div>
          </CardContent>
        </Card>
      </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="open">مفتوحة</option>
              <option value="in-progress">قيد المعالجة</option>
              <option value="resolved">محلولة</option>
            </select>
            <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="high">عالية</option>
              <option value="medium">متوسطة</option>
              <option value="low">منخفضة</option>
            </select>
          </div>
        </CardContent>
      </Card>

      {/* Complaints List */}
      <div className="grid gap-4">
        {complaints.map((complaint) => (
          <Card key={complaint.id} className="border-border-color">
            <CardContent className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="font-bold text-dark-color text-lg">{complaint.subject}</h3>
                  <p className="text-parg-color">من: {complaint.customerName}</p>
                  <p className="text-sm text-parg-color">رقم الشكوى: {complaint.id}</p>
                </div>
                <div className="flex gap-2">
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      complaint.priority === "high"
                        ? "bg-red-100 text-red-800"
                        : complaint.priority === "medium"
                          ? "bg-yellow-100 text-yellow-800"
                          : "bg-green-100 text-green-800"
                    }`}
                  >
                    {complaint.priority === "high" ? "عالية" : complaint.priority === "medium" ? "متوسطة" : "منخفضة"}
                  </span>
                  <span
                    className={`px-3 py-1 rounded-full text-xs font-medium ${
                      complaint.status === "open"
                        ? "bg-red-100 text-red-800"
                        : complaint.status === "in-progress"
                          ? "bg-blue-100 text-blue-800"
                          : "bg-green-100 text-green-800"
                    }`}
                  >
                    {complaint.status === "open"
                      ? "مفتوحة"
                      : complaint.status === "in-progress"
                        ? "قيد المعالجة"
                        : "محلولة"}
                  </span>
                </div>
              </div>

              <div className="flex justify-between items-center">
                <div className="text-sm text-parg-color">
                  <p>تاريخ الإنشاء: {new Date(complaint.date).toLocaleDateString("ar-SA")}</p>
                  {complaint.assignedTo && <p>مُسند إلى: {complaint.assignedTo}</p>}
                </div>
                <div className="flex gap-2">
                  <Button size="sm" variant="outline">
                    عرض التفاصيل
                  </Button>
                  <Button size="sm" className="bg-main-color hover:bg-main-color/90 text-white">
                    الرد
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}