---
import Layout from '@/layouts/Layout.astro'
import { getI18n } from '@/i18n/utils'
import { href, ROUTES } from '@/lib/routes'

const { locale, t } = getI18n(Astro)

const titleLabel = t('my account')
const pleaseLabel = t('please log in')
const loginLabel = t('login')
const accountLabel = t('account')
const emailLabel = t('email')
const signOutLabel = t('sign out')
const collectionsLabel = t('my collections')
const historyLabel = t('my history')
const soonLabel = t('coming soon')
---
<Layout title={titleLabel}>
  <main class="mx-auto w-full max-w-6xl px-6 py-12 md:px-8 lg:px-12 lg:py-16" x-data="accountPage" data-locale={locale}>
    <div class="grid gap-8 lg:grid-cols-[0.9fr_1.5fr]">
      <aside class="rounded-[30px] border border-black/10 bg-black p-6 text-white shadow-[0_20px_60px_rgba(0,0,0,0.08)] md:p-8">
        <div class="mb-10 flex items-center justify-between gap-3">
          <span class="text-[10px] font-mono uppercase tracking-[0.38em] text-white/60">Archive</span>
          <span class="border border-white/20 bg-white/5 px-2 py-1 text-[9px] font-mono uppercase tracking-[0.32em] text-white">2026</span>
        </div>

        <div class="mb-10">
          <p class="mb-4 text-[10px] font-mono uppercase tracking-[0.38em] text-white/50">Member profile</p>
          <h1 class="font-serif text-4xl uppercase leading-none tracking-[-0.06em] md:text-5xl">{titleLabel}</h1>
        </div>

        <div class="space-y-3 text-sm text-white/70">
          <p class="text-[11px] font-mono uppercase tracking-[0.32em] text-white/45">Portfolio Studio</p>
          <p class="leading-relaxed">Curated access to runway archives, editorial notes, and private collections.</p>
        </div>
      </aside>

      <section class="rounded-[30px] border border-black/10 bg-[#f7f5f1] p-6 shadow-[0_18px_50px_rgba(0,0,0,0.04)] md:p-8 lg:p-10">
        <div x-show="!user" x-cloak class="space-y-6">
          <p class="text-[10px] font-mono uppercase tracking-[0.32em] text-black/45">{pleaseLabel}</p>
          <a href={href(locale, ROUTES.login) + '?redirect=' + encodeURIComponent(href(locale, ROUTES.account))}
            class="inline-flex items-center justify-center border border-black bg-black px-5 py-3 text-[11px] font-bold uppercase tracking-[0.24em] text-white transition-colors hover:bg-white hover:text-black">{loginLabel}</a>
        </div>

        <div x-show="user" x-cloak class="space-y-8">
          <div>
            <p class="mb-4 text-[10px] font-mono uppercase tracking-[0.32em] text-black/45">Account</p>
            <dl class="space-y-4">
              <div class="flex gap-5 border-b border-black/10 pb-4">
                <dt class="w-28 pt-1 text-[10px] font-mono uppercase tracking-[0.26em] text-black/45">{accountLabel}</dt>
                <dd class="flex-1 font-medium" x-text="user?.username"></dd>
              </div>
              <div class="flex gap-5 border-b border-black/10 pb-4">
                <dt class="w-28 pt-1 text-[10px] font-mono uppercase tracking-[0.26em] text-black/45">{emailLabel}</dt>
                <dd class="flex-1 font-medium break-all" x-text="user?.email"></dd>
              </div>
            </dl>
          </div>

          <div class="flex flex-wrap gap-3">
            <button @click="logout()" class="border border-black bg-black px-5 py-3 text-[11px] font-bold uppercase tracking-[0.24em] text-white transition-colors hover:bg-white hover:text-black">{signOutLabel}</button>
            <a href={href(locale, ROUTES.runwayLooks)} class="border border-black/15 bg-transparent px-5 py-3 text-[11px] font-bold uppercase tracking-[0.24em] text-black transition-colors hover:bg-black hover:text-white">{t('View archive')}</a>
          </div>

          <div class="space-y-8 pt-4">
            <section class="border-t border-black/10 pt-6">
              <h2 class="mb-3 font-serif text-2xl uppercase tracking-[-0.04em]">{collectionsLabel}</h2>
              <p class="text-sm text-black/45">{soonLabel}</p>
            </section>
            <section class="border-t border-black/10 pt-6">
              <h2 class="mb-3 font-serif text-2xl uppercase tracking-[-0.04em]">{historyLabel}</h2>
              <p class="text-sm text-black/45">{soonLabel}</p>
            </section>
          </div>
        </div>
      </section>
    </div>
  </main>
</Layout>

<script>
  import { getUser, logout as logoutApi } from "@/lib/api"
  import { clientHref, ROUTES } from "@/lib/routes"

  document.addEventListener("alpine:init", () => {
    Alpine.data("accountPage", () => ({
      user: null,
      init() {
        const loc = this.$el.dataset.locale || "en"
        const u = getUser()
        if (!u) {
          window.location.href = clientHref(loc, ROUTES.login) + "?redirect=" + encodeURIComponent(clientHref(loc, ROUTES.account))
          return
        }
        this.user = u
      },
      logout() {
        logoutApi().finally(() => window.location.reload())
      }
    }))
  })
</script>