<script setup>
import { computed, onMounted, ref } from 'vue'

import { apiRequest } from '../api'
import { useAuthStore } from '../stores/authStore'

const auth = useAuthStore()

const items = ref([])
const loading = ref(false)
const error = ref('')

const title = computed(() => auth.user?.name || auth.user?.email || 'Your account')

async function load() {
  loading.value = true
  error.value = ''

  try {
    const data = await apiRequest('/media?type=strip')
    items.value = data?.items || data || []
  } catch (err) {
    error.value = err?.message || 'Failed to load saved items.'
  } finally {
    loading.value = false
  }
}

async function remove(itemId) {
  try {
    await apiRequest(`/media/${encodeURIComponent(itemId)}`, { method: 'DELETE' })
    items.value = items.value.filter((i) => i.id !== itemId)
  } catch (err) {
    error.value = err?.message || 'Failed to delete.'
  }
}

onMounted(load)
</script>

<template>
  <main class="account">
    <section class="panel">
      <div class="header">
        <div>
          <h1>{{ title }}</h1>
          <p>Your saved photobooth strips.</p>
        </div>
        <button class="ghost" type="button" @click="load" :disabled="loading">Refresh</button>
      </div>

      <p v-if="error" class="error">{{ error }}</p>
      <p v-else-if="loading" class="muted">Loading…</p>
      <p v-else-if="items.length === 0" class="muted">No saved strips yet.</p>

      <div class="grid" v-if="items.length">
        <article v-for="item in items" :key="item.id" class="card">
          <img class="thumb" :src="item.thumbUrl || item.url" :alt="item.type" />
          <div class="meta">
            <small>{{ item.createdAt ? new Date(item.createdAt).toLocaleString() : '' }}</small>
            <small v-if="item.themeId">Theme: {{ item.themeId }}</small>
          </div>
          <div class="actions">
            <a class="primary" :href="item.url" target="_blank" rel="noreferrer">Open</a>
            <button class="danger" type="button" @click="remove(item.id)">Delete</button>
          </div>
        </article>
      </div>
    </section>
  </main>
</template>

<style scoped>
.account {
  display: grid;
  padding: 8px 0 28px;
}

.panel {
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 16px;
}

.header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.header h1 {
  margin: 0;
}

.header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.ghost {
  border: 1px solid rgba(200, 90, 124, 0.3);
  background: rgba(255, 255, 255, 0.85);
  color: #7c3b54;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.error {
  margin: 0;
  color: #a13b56;
  background: rgba(255, 236, 243, 0.7);
  border: 1px solid rgba(200, 90, 124, 0.25);
  padding: 10px 12px;
  border-radius: 14px;
}

.muted {
  margin: 0;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(200, 90, 124, 0.18);
  display: grid;
  gap: 10px;
}

.thumb {
  width: 100%;
  aspect-ratio: 2 / 5;
  object-fit: cover;
  border-radius: 16px;
  background: rgba(255, 236, 243, 0.7);
}

.meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.primary {
  text-align: center;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: #c85a7c;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 14px 24px rgba(200, 90, 124, 0.22);
}

.danger {
  border: 1px solid rgba(161, 59, 86, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: #a13b56;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
</style>
