<template>
  <div class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <h2>Users</h2>
      <div style="display: flex; gap: 10px;">
        <input 
          type="text" 
          :value="userSearch"
          @input="$emit('search-users', $event.target.value)"
          placeholder="Search users..." 
          style="padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
        >
        <button class="btn btn-primary" @click="$emit('add-user')">Add New User</button>
      </div>
    </div>
    
    <div v-if="usersLoading" class="loading">
      Loading users...
    </div>
    
    <div v-else-if="users.length === 0" class="loading">
      No users found. Create your first user!
    </div>
    
    <div v-else>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th>Status</th>
            <th>Last Login</th>
            <th>Created</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.first_name }} {{ user.last_name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.role || '-' }}</td>
            <td>{{ user.status || '-' }}</td>
            <td>{{ formatDateTime(user.last_login) || '-' }}</td>
            <td>{{ formatDateTime(user.created_at) || '-' }}</td>
            <td>
              <div class="actions">
                <button class="btn btn-primary" @click="$emit('view-user', user)">View</button>
                <button class="btn btn-warning" @click="$emit('edit-user', user)">Edit</button>
                <button class="btn btn-danger" @click="$emit('delete-user', user.id)">Delete</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from '../../api/axios'
import { formatCurrency, formatDate, formatDateTime } from '../../utils/locale'

export default {
  name: 'UsersSection',
  props: {
    activeSection: {
      type: String,
      required: true
    },
    users: {
      type: Array,
      required: true
    },
    usersLoading: {
      type: Boolean,
      default: false
    },
    userSearch: {
      type: String,
      default: ''
    }
  },
  emits: ['add-user', 'view-user', 'edit-user', 'delete-user', 'search-users'],
  methods: {
    formatDateTime
  }
}
</script>

<style scoped>
h2 {
  color: #333 !important;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #333;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th,
.table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.table tbody tr:hover {
  background-color: #f8f9fa;
}

.actions {
  display: flex;
  gap: 5px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-warning {
  background-color: #ffc107;
  color: #212529;
}

.btn-warning:hover {
  background-color: #e0a800;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}
</style>
