<template>
  <div v-if="activeSection === 'clients'" class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <h2>Customers</h2>
      <div style="display: flex; gap: 10px;">
        <input 
          type="text" 
          :value="clientSearch"
          @input="$emit('search-clients', $event.target.value)"
          placeholder="Search customers..." 
          style="padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
        >
        <button class="btn btn-primary" @click="$emit('add-client')">Add New Customer</button>
      </div>
    </div>
    
    <div v-if="clientsLoading" class="loading">
      Loading customers...
    </div>
    
    <div v-else-if="clients.length === 0" class="loading">
      No customers found. Add your first customer!
    </div>
    
    <table v-else class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Company</th>
          <th>Email</th>
          <th>Phone</th>
          <th>City</th>
          <th>Contact Persons</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="client in clients" :key="client.id">
          <td>{{ client.id }}</td>
          <td>{{ client.first_name }} {{ client.last_name }}</td>
          <td>{{ client.company_name || '-' }}</td>
          <td>{{ client.email }}</td>
          <td>{{ client.phone || '-' }}</td>
          <td>{{ client.city || '-' }}</td>
          <td>
            <div class="contact-persons">
              <div v-if="client.contact_persons && client.contact_persons.length > 0" class="contact-list">
                <div v-for="contact in client.contact_persons.slice(0, 2)" :key="contact.id" class="contact-item">
                  {{ contact.first_name }} {{ contact.last_name }}
                  <span v-if="contact.is_primary" class="primary-badge">P</span>
                </div>
                <span v-if="client.contact_persons.length > 2" class="more-contacts">
                  +{{ client.contact_persons.length - 2 }} more
                </span>
              </div>
              <div v-else class="no-contacts">
                No contacts
              </div>
              <button class="btn btn-sm btn-primary" @click="$emit('manage-contacts', client)">
                Manage
              </button>
            </div>
          </td>
          <td>
            <div class="actions">
              <button class="btn btn-warning" @click="$emit('edit-client', client)">Edit</button>
              <button class="btn btn-danger" @click="$emit('delete-client', client.id)">Delete</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ClientsSection',
  props: {
    activeSection: {
      type: String,
      required: true
    },
    clients: {
      type: Array,
      required: true
    },
    clientsLoading: {
      type: Boolean,
      default: false
    },
    clientSearch: {
      type: String,
      default: ''
    }
  },
  emits: ['add-client', 'edit-client', 'delete-client', 'manage-contacts', 'update:clientSearch', 'search-clients']
}
</script>

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

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

.contact-persons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.primary-badge {
  background-color: #007bff;
  color: white;
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
}

.more-contacts {
  font-size: 11px;
  color: #666;
  font-style: italic;
}

.no-contacts {
  font-size: 12px;
  color: #999;
  font-style: italic;
}

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

.table {
  width: 100%;
  border-collapse: collapse;
}

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

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

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

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

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

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

.btn:hover {
  opacity: 0.9;
}
</style>
