<template>
  <div>
    <h1 class="text-display font-bold mb-6 text-guild-100">Members</h1>

    <div v-if="pending" class="text-center text-guild-400">Loading...</div>

    <div v-else-if="error" class="text-ember-400">
      Error loading members: {{ error }}
    </div>

    <div v-else class="space-y-4">
      <div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
        <h3 class="font-semibold mb-2 text-guild-100">Total Members: {{ members?.length || 0 }}</h3>

        <div v-for="member in members" :key="member._id" class="border-b border-guild-700 pb-2 mb-2 last:border-b-0">
          <div class="flex justify-between items-center">
            <div>
              <p class="font-medium text-guild-100">{{ member.name }}</p>
              <p class="text-guild-400 text-sm">{{ member.email }}</p>
            </div>
            <div class="text-right">
              <span class="inline-block px-2 py-1 text-xs rounded bg-candlelight-900/20 text-candlelight-400">
                {{ member.circle }}
              </span>
              <p class="text-sm text-guild-500 text-ui-mono">${{ member.contributionTier }}/month</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Simple Add Member Form -->
      <div class="bg-guild-900 rounded-lg border border-guild-700 p-4">
        <h3 class="text-display-sm font-semibold mb-4 text-guild-100">Add Member</h3>
        <div class="grid grid-cols-2 gap-4">
          <input v-model="newMember.name" placeholder="Name" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
          <input v-model="newMember.email" placeholder="Email" class="border border-guild-700 bg-guild-800 text-guild-100 placeholder-guild-500 rounded p-2" />
          <select v-model="newMember.circle" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
            <option value="community">Community</option>
            <option value="founder">Founder</option>
            <option value="practitioner">Practitioner</option>
          </select>
          <select v-model="newMember.contributionTier" class="border border-guild-700 bg-guild-800 text-guild-100 rounded p-2">
            <option value="0">$0/month</option>
            <option value="5">$5/month</option>
            <option value="15">$15/month</option>
            <option value="30">$30/month</option>
            <option value="50">$50/month</option>
          </select>
        </div>
        <button @click="createMember" :disabled="creating" class="mt-4 bg-candlelight-600 text-white px-4 py-2 rounded hover:bg-candlelight-700 disabled:opacity-50">
          {{ creating ? 'Adding...' : 'Add Member' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'admin'
})

const { data: members, pending, error, refresh } = await useFetch("/api/admin/members")
const creating = ref(false)

const newMember = reactive({
  name: '',
  email: '',
  circle: 'community',
  contributionTier: '0'
})

const createMember = async () => {
  if (!newMember.name || !newMember.email) {
    alert('Please fill in name and email')
    return
  }

  creating.value = true
  try {
    await $fetch('/api/admin/members', {
      method: 'POST',
      body: newMember
    })

    Object.assign(newMember, {
      name: '',
      email: '',
      circle: 'community',
      contributionTier: '0'
    })

    await refresh()
    alert('Member added successfully!')
  } catch (error) {
    alert('Failed to add member: ' + error.message)
  } finally {
    creating.value = false
  }
}
</script>
