'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  User, 
  Mail, 
  Phone, 
  Calendar,
  Home,
  DollarSign,
  Search,
  Filter,
  Eye
} from 'lucide-react';

export default function UsersList() {
  const [users, setUsers] = useState([
    {
      id: 1,
      name: 'أحمد محمد',
      email: 'ahmed@example.com',
      phone: '0938123456',
      identityType: 'syrian',
      identityNumber: '123456789',
      joinDate: '2024-01-15',
      totalBookings: 3,
      activeBookings: 1,
      totalSpent: 1500000
    },
    {
      id: 2,
      name: 'سارة أحمد',
      email: 'sara@example.com',
      phone: '0945123789',
      identityType: 'passport',
      identityNumber: 'AB123456',
      joinDate: '2024-02-10',
      totalBookings: 2,
      activeBookings: 0,
      totalSpent: 500000
    }
  ]);

  const [searchTerm, setSearchTerm] = useState('');
  const [selectedUser, setSelectedUser] = useState(null);

  const filteredUsers = users.filter(user =>
    user.name.includes(searchTerm) || 
    user.email.includes(searchTerm) ||
    user.phone.includes(searchTerm)
  );

  return (
    <div className="space-y-4">
      <div className="flex gap-4">
        <div className="flex-1 relative">
          <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            placeholder="بحث عن مستخدم..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pr-10 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <button className="px-4 py-2 border rounded-lg flex items-center gap-2 hover:bg-gray-50">
          <Filter className="w-4 h-4" />
          تصفية
        </button>
      </div>

      <div className="space-y-3">
        {filteredUsers.map((user, index) => (
          <motion.div
            key={user.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white border rounded-lg p-4 hover:shadow-md transition-shadow"
          >
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                  <User className="w-6 h-6 text-blue-600" />
                </div>
                <div>
                  <h3 className="font-bold">{user.name}</h3>
                  <div className="flex flex-wrap gap-3 mt-1 text-sm text-gray-600">
                    <div className="flex items-center gap-1">
                      <Mail className="w-3 h-3" />
                      {user.email}
                    </div>
                    <div className="flex items-center gap-1">
                      <Phone className="w-3 h-3" />
                      {user.phone}
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex gap-4">
                <div className="text-center">
                  <div className="text-lg font-bold text-blue-600">{user.totalBookings}</div>
                  <div className="text-xs text-gray-500">إجمالي الحجوزات</div>
                </div>
                <div className="text-center">
                  <div className="text-lg font-bold text-green-600">{user.activeBookings}</div>
                  <div className="text-xs text-gray-500">حجوزات نشطة</div>
                </div>
                <div className="text-center">
                  <div className="text-lg font-bold text-amber-600">
                    {user.totalSpent.toLocaleString()}
                  </div>
                  <div className="text-xs text-gray-500">إجمالي المنصرف</div>
                </div>
              </div>

              <button
                onClick={() => setSelectedUser(user)}
                className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm flex items-center gap-1 hover:bg-blue-700"
              >
                <Eye className="w-4 h-4" />
                عرض التفاصيل
              </button>
            </div>
          </motion.div>
        ))}
      </div>

      {selectedUser && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-white rounded-xl w-full max-w-2xl p-6"
          >
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-bold">تفاصيل المستخدم</h2>
              <button
                onClick={() => setSelectedUser(null)}
                className="p-1 hover:bg-gray-100 rounded"
              >
                ✕
              </button>
            </div>

            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-gray-500">الاسم</label>
                  <div className="font-medium">{selectedUser.name}</div>
                </div>
                <div>
                  <label className="text-sm text-gray-500">البريد الإلكتروني</label>
                  <div className="font-medium">{selectedUser.email}</div>
                </div>
                <div>
                  <label className="text-sm text-gray-500">رقم الهاتف</label>
                  <div className="font-medium">{selectedUser.phone}</div>
                </div>
                <div>
                  <label className="text-sm text-gray-500">نوع الهوية</label>
                  <div className="font-medium">
                    {selectedUser.identityType === 'syrian' ? 'هوية سورية' : 'جواز سفر'}
                  </div>
                </div>
                <div>
                  <label className="text-sm text-gray-500">رقم الهوية</label>
                  <div className="font-medium">{selectedUser.identityNumber}</div>
                </div>
                <div>
                  <label className="text-sm text-gray-500">تاريخ التسجيل</label>
                  <div className="font-medium">{selectedUser.joinDate}</div>
                </div>
              </div>

              <div className="border-t pt-4">
                <h3 className="font-bold mb-3">سجل الحجوزات</h3>
                <p className="text-gray-500 text-center py-4">
                  لا توجد حجوزات سابقة
                </p>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}