<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { onMounted, nextTick } from 'vue';
import UserLayout from '../../layouts/user/userlayout.vue';

type Guild = { id:number; name:string; tag:string; logo_url?:string|null; points:number; members_count:number };

const props = defineProps<{ guilds: Guild[] }>();

onMounted(() => nextTick(() => { if (window.lucide) window.lucide.createIcons(); }));
</script>

<template>
  <UserLayout>
    <Head :title="$t('guilds.top_title')" />
    <section class="content">
      <div class="wrap">
        <div class="panel main-panel">
          <header class="page-head">
            <div class="head-flex">
                <div class="title-group">
                    <div class="title">{{ $t('guilds.top_title') }}</div>
                    <p class="subtitle">{{ $t('guilds.top_desc') }}</p>
                </div>
                <div class="trophy-icon">
                    <i data-lucide="trophy"></i>
                </div>
            </div>
          </header>

          <div class="list-container">
            <div class="list-header-row">
                <div class="col rank">{{ $t('guilds.rank') }}</div>
                <div class="col guild">{{ $t('guilds.guild') }}</div>
                <div class="col spacer"></div>
                <div class="col stat">{{ $t('guilds.points') }}</div>
                <div class="col stat">{{ $t('guilds.members_col') }}</div>
            </div>

            <div class="list">
                <div v-for="(g, i) in props.guilds" :key="g.id" class="row" :class="`rank-${i+1}`">
                  <div class="rank-cell">
                      <span v-if="i < 3" class="medal">
                          <i data-lucide="medal" v-if="i===0" class="gold"></i>
                          <i data-lucide="medal" v-if="i===1" class="silver"></i>
                          <i data-lucide="medal" v-if="i===2" class="bronze"></i>
                      </span>
                      <span v-else class="num">#{{ i+1 }}</span>
                  </div>

                  <div class="logo-cell">
                      <div class="logo" :style="{ backgroundImage: g.logo_url ? `url(${g.logo_url})` : '' }">
                        <span v-if="!g.logo_url">{{ g.tag?.[0] || 'G' }}</span>
                      </div>
                  </div>

                  <div class="name-cell">
                      <div class="g-name">{{ g.name }}</div>
                      <div class="g-tag">[{{ g.tag }}]</div>
                  </div>

                  <div class="spacer"></div>

                  <div class="stat-cell points">
                      <i data-lucide="zap" class="stat-icon"></i>
                      <span>{{ g.points.toLocaleString() }}</span>
                  </div>

                  <div class="stat-cell members">
                      <i data-lucide="users" class="stat-icon"></i>
                      <span>{{ g.members_count }}</span>
                  </div>
                </div>

                <div v-if="!props.guilds?.length" class="empty-state">
                    <i data-lucide="shield-off"></i>
                    <p>{{ $t('guilds.no_guilds') }}</p>
                </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </UserLayout>
</template>

<style scoped>
:global(:root) { --bg-card:#0a0a0a; --border:#151515; --cyan:#00f2ff; --magenta:#ff007a; --green:#00ff9d; --gold:#f7931a; --silver:#c0c0c0; --bronze:#cd7f32; }

.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
.wrap { max-width: 1000px; margin: 0 auto; }
.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }

/* Header */
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(247,147,26,0.05), transparent); }
.head-flex { display: flex; justify-content: space-between; align-items: center; }
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }
.trophy-icon { width: 40px; height: 40px; background: rgba(247,147,26,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid rgba(247,147,26,0.2); }

/* List Header */
.list-container { padding: 20px; }
.list-header-row { display: flex; padding: 0 20px 10px; border-bottom: 1px solid #151515; margin-bottom: 10px; font-size: 10px; font-weight: 900; color: #555; text-transform: uppercase; letter-spacing: 1px; }
.col.rank { width: 60px; text-align: center; }
.col.guild { width: 200px; }
.col.spacer { flex: 1; }
.col.stat { width: 100px; text-align: right; }

/* List Items */
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; background: #050505; border: 1px solid var(--border); border-radius: 14px; padding: 12px 20px; transition: 0.2s; }
.row:hover { transform: translateX(5px); border-color: #333; background: #0a0a0a; }

/* Rank Styling */
.rank-cell { width: 60px; display: flex; justify-content: center; align-items: center; font-weight: 900; font-size: 14px; color: #444; }
.medal i { width: 20px; height: 20px; }
.gold { color: var(--gold); filter: drop-shadow(0 0 5px rgba(247,147,26,0.5)); }
.silver { color: var(--silver); filter: drop-shadow(0 0 5px rgba(192,192,192,0.5)); }
.bronze { color: var(--bronze); filter: drop-shadow(0 0 5px rgba(205,127,50,0.5)); }

/* Top 3 Highlights */
.rank-1 { border-color: rgba(247,147,26,0.3); background: linear-gradient(90deg, rgba(247,147,26,0.05), transparent); }
.rank-2 { border-color: rgba(192,192,192,0.2); }
.rank-3 { border-color: rgba(205,127,50,0.2); }

.logo-cell { margin-right: 15px; }
.logo { width: 42px; height: 42px; border-radius: 12px; background: #000 center/cover no-repeat; border: 1px solid #222; display: grid; place-items: center; font-weight: 900; color: #666; }

.name-cell { display: flex; flex-direction: column; }
.g-name { color: #fff; font-weight: 800; font-size: 13px; }
.g-tag { color: var(--cyan); font-size: 10px; font-weight: 700; }

.spacer { flex: 1; }

.stat-cell { width: 100px; text-align: right; font-weight: 800; font-size: 13px; color: #ccc; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.stat-icon { width: 14px; color: #444; }
.points { color: var(--gold); }
.points .stat-icon { color: var(--gold); opacity: 0.5; }

.empty-state { padding: 40px; text-align: center; color: #444; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-state i { width: 32px; height: 32px; opacity: 0.5; }

@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) {
    .list-header-row { display: none; }
    .row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; padding: 15px; }
    .rank-cell { width: 30px; }
    .stat-cell { width: auto; font-size: 11px; }
    .stat-cell.members { display: none; } /* Hide members count on very small screens */
}
</style>
