<script setup lang="ts">
const route = useRoute()
const { data, error, pending } = useCustomer(route.params.id)
</script>

<template>
  <div class="p-8 bg-slate-100 min-h-screen">

    <!-- Loading -->
    <div v-if="pending" class="max-w-3xl">
      <UCard class="bg-white shadow-sm border border-slate-200">
        <div class="h-48 animate-pulse bg-slate-200 rounded" />
      </UCard>
    </div>

    <!-- Error -->
    <UAlert
      v-else-if="error"
      color="red"
      variant="soft"
      title="Failed to load customer"
      :description="error.message"
    />

    <!-- Customer View -->
    <div v-else-if="data" class="max-w-4xl space-y-6">

      <!-- Header Card -->
      <UCard class="bg-white border border-slate-200 shadow-sm rounded-xl">
        <div class="flex items-center justify-between">

          <div class="flex items-center gap-4">
            <UAvatar size="xl" :alt="data.first_name" />

            <div>
              <h1 class="text-2xl font-semibold text-slate-900">
                {{ data.first_name }} {{ data.last_name }}
              </h1>
              <p class="text-slate-500 text-sm">
                {{ data.email }}
              </p>
            </div>
          </div>
        </div>
      </UCard>

      <!-- Details Card -->
      <UCard class="bg-white border border-slate-200 shadow-sm rounded-xl">
        <h2 class="text-lg font-semibold text-slate-800 mb-4">
          Personal Information
        </h2>

        <div class="grid grid-cols-2 gap-6 text-sm">

          <div>
            <div class="text-slate-500">Birth Date</div>
            <div class="text-slate-800 font-medium">
              {{ data.birth_date }}
            </div>
          </div>

          <div>
            <div class="text-slate-500">Gender</div>
            <div class="text-slate-800 font-medium capitalize">
              {{ data.gender }}
            </div>
          </div>

          <div>
            <div class="text-slate-500">Phone</div>
            <div class="text-slate-800 font-medium">
              {{ data.phone }}
            </div>
          </div>

          <div>
            <div class="text-slate-500">Customer ID</div>
            <div class="text-slate-800 font-mono text-xs">
              {{ data.id }}
            </div>
          </div>

        </div>
      </UCard>

      <!-- Placeholder for Policies -->
      <UCard class="bg-white border border-slate-200 shadow-sm rounded-xl">
        <h2 class="text-lg font-semibold text-slate-800 mb-4">
          Policies
        </h2>

        <div class="text-slate-500 text-sm">
          No policies yet.
        </div>
      </UCard>

    </div>
  </div>
</template> 
