import React from 'react';
import AdminLayout from '../../components/AdminLayout';
import UserModal from '../../components/UserModal';


const initialUsers = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Citizen', ministry: 'Ministry of Health' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Admin', ministry: 'Ministry of Education' },
  { id: 3, name: 'Alice Brown', email: 'alice@example.com', role: 'Moderator', ministry: 'Ministry of Works' },
  { id: 4, name: 'Bob Lee', email: 'bob@example.com', role: 'Citizen', ministry: 'Ministry of Health' },
  { id: 5, name: 'Sarah Kim', email: 'sarah@example.com', role: 'Citizen', ministry: 'Ministry of Education' },
];

const ministries = [
  'Ministry of Health',
  'Ministry of Education',
  'Ministry of Works',
  'Ministry of Finance',
  'Ministry of Agriculture',
];



export default function UsersAll() {
  const [users, setUsers] = React.useState(initialUsers);
  const [modalOpen, setModalOpen] = React.useState(false);
  const [editingUser, setEditingUser] = React.useState(null);

  const handleAddUser = () => {
    setEditingUser(null);
    setModalOpen(true);
  };

  const handleEditUser = (user) => {
    setEditingUser(user);
    setModalOpen(true);
  };

  const handleSaveUser = (userData) => {
    if (editingUser) {
      setUsers(users.map(u => u.id === editingUser.id ? { ...u, ...userData } : u));
    } else {
      const newId = users.length ? Math.max(...users.map(u => u.id)) + 1 : 1;
      setUsers([...users, { ...userData, id: newId }]);
    }
    setModalOpen(false);
  };

  return (
    <AdminLayout>
      <div className="p-6">
        <h1 className="text-2xl font-bold text-blue-900 mb-6">All Users</h1>
        <div className="mb-4 text-right">
          <button className="bg-blue-600 text-white px-4 py-2 rounded" onClick={handleAddUser}>Add User</button>
        </div>
        <div className="overflow-x-auto bg-white rounded-lg shadow border border-gray-200">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-blue-600">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">ID</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Name</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Email</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Role</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Ministry</th>
                <th className="px-4 py-3"></th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-100">
              {users.map((user, idx) => (
                <tr key={user.id} className={idx % 2 === 1 ? 'bg-gray-100' : ''}>
                  <td className="px-4 py-2 text-sm text-gray-700">{user.id}</td>
                  <td className="px-4 py-2 text-sm text-gray-900 font-medium">{user.name}</td>
                  <td className="px-4 py-2 text-sm text-gray-700">{user.email}</td>
                  <td className="px-4 py-2 text-sm text-gray-700">{user.role}</td>
                  <td className="px-4 py-2 text-sm text-gray-700">{user.ministry}</td>
                  <td className="px-4 py-2 text-sm text-right">
                    <button
                      className="text-blue-600 hover:underline mr-2"
                      onClick={() => handleEditUser(user)}
                    >
                      Edit
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <UserModal
          open={modalOpen}
          onClose={() => setModalOpen(false)}
          onSave={handleSaveUser}
          user={editingUser}
          ministries={ministries}
        />
      </div>
    </AdminLayout>
  );
}
