<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal">
      <div class="modal-header">
        <h3>User Details</h3>
        <button @click="$emit('close')" class="close-btn">×</button>
      </div>

      <div class="modal-body">
        <div class="info-grid">
          <div class="info-item">
            <span class="label">Name:</span>
            <span class="value">{{ user.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">Email:</span>
            <span class="value">{{ user.email }}</span>
          </div>
          <div class="info-item">
            <span class="label">Phone:</span>
            <span class="value">{{ user.phone }}</span>
          </div>
          <div class="info-item">
            <span class="label">Role:</span>
            <span class="value">{{ user.roles[0]?.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">Status:</span>
            <span class="value" :class="user.status || 'active'">{{ user.status || 'active' }}</span>
          </div>
          <div class="info-item">
            <span class="label">Created:</span>
            <span class="value">{{ formatDate(user.created_at) }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">Address:</span>
            <span class="value">{{ user.address || 'N/A' }}</span>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button @click="$emit('close')" class="btn-close">Close</button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({ user: Object });
const formatDate = (date) => new Date(date).toLocaleString();
</script>

<style scoped>
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: white; border-radius: 16px; width: 90%; max-width: 600px; }
.modal-header { background: linear-gradient(135deg, #ff6b35, #f7931e); color: white; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-radius: 16px 16px 0 0; }
.modal-header h3 { margin: 0; font-size: 1.25rem; }
.close-btn { background: rgba(255,255,255,0.2); border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; border-radius: 8px; }
.modal-body { padding: 2rem; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.info-item { display: flex; flex-direction: column; gap: 0.5rem; }
.info-item.full-width { grid-column: 1 / -1; }
.label { font-size: 0.875rem; color: #6b7280; font-weight: 600; }
.value { font-size: 1rem; color: #1f2937; font-weight: 500; }
.value.active { color: #16a34a; }
.value.blocked { color: #dc2626; }
.modal-footer { padding: 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; }
.btn-close { padding: 0.75rem 1.5rem; background: #f3f4f6; color: #6b7280; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
</style>
