<template>
  <div class="min-h-screen p-8 flex items-center justify-center">
    <!-- Loading State -->
    <div v-if="loading" class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full">
      <div class="flex flex-col items-center gap-6">
        <div class="spinner"></div>
        <p>Loading your profile...</p>
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="error"
      class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full text-gray-800">
      <svg class="w-12 h-12 mx-auto mb-4 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <circle cx="12" cy="12" r="10" stroke-width="2" />
        <line x1="12" y1="8" x2="12" y2="12" stroke-width="2" />
        <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2" />
      </svg>
      <h3 class="text-2xl mb-2 text-black">Oops! Something went wrong</h3>
      <p class="text-gray-600 mb-6">{{ error }}</p>
      <button @click="retry"
        class="flex items-center gap-2 px-6 py-3 bg-black text-white cursor-pointer text-base font-medium transition-colors hover:bg-gray-800 mx-auto">
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M1 4v6h6M23 20v-6h-6" stroke-width="2" />
          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke-width="2" />
        </svg>
        Try Again
      </button>
    </div>

    <!-- User Profile -->
    <div v-else-if="authStore.currentUser"
      class="bg-white border border-gray-300 shadow-lg max-w-4xl w-full overflow-hidden">
      <div class="bg-black p-12 text-center relative text-white border-b border-gray-300">
        <div class="mb-6 relative inline-block">
          <img v-if="authStore.currentUser.photo_avatar_filename"
            :src="`${API_BASE_URL.replace('/api/v1', '').replace('v1/')}/storage/photos_avatars/${authStore.currentUser.photo_avatar_filename}`"
            :alt="authStore.currentUser.name" class="w-24 h-24 border-[3px] border-white object-cover" />
          <div v-else
            class="w-24 h-24 border-[3px] border-white bg-white text-black flex items-center justify-center text-4xl font-semibold">
            {{ authStore.currentUser.name.charAt(0).toUpperCase() }}
          </div>
          <button @click="triggerFileInput"
            class="absolute bottom-0 right-0 w-9 h-9 bg-white border-2 border-black cursor-pointer flex items-center justify-center transition-colors hover:bg-gray-100">
            <svg class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
                stroke-width="1.5" />
              <circle cx="12" cy="13" r="4" stroke-width="1.5" />
            </svg>
          </button>
          <input ref="fileInput" type="file" accept="image/*" @change="handleAvatarUpload" class="hidden" />
        </div>
        <div>
          <h1 class="text-3xl font-semibold mb-2">{{ authStore.currentUser.name }}</h1>
          <p class="text-base opacity-80">@{{ authStore.currentUser.nickname }}</p>
        </div>
        <div
          class="inline-flex items-center gap-2 bg-white text-black px-4 py-2 mt-6 font-medium text-base border border-gray-300">
          <svg class="w-5 h-5 text-black" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10" stroke-width="1.5" />
            <text x="12" y="16" text-anchor="middle" fill="currentColor" font-size="12" font-weight="bold">$</text>
          </svg>
          <span>{{ authStore.currentUser.coins_balance }} coins</span>
        </div>
      </div>

      <div>
        <!-- Tab Navigation -->
        <div class="flex border-b border-gray-300 bg-gray-50">
          <button
            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'info' }]"
            @click="activeTab = 'info'">
            Profile Information
          </button>
          <button
            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'edit' }]"
            @click="activeTab = 'edit'">
            Edit Profile
          </button>
          <button
            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'transaction-history' }]"
            @click="activeTab = 'transaction-history'">
            Transaction History
          </button>
          <button
            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'game-history' }]"
            @click="activeTab = 'game-history'">
            Game History
          </button>
          <button
            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'password' }]"
            @click="activeTab = 'password'">
            Change Password
          </button>
          <button
            :class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'delete' }]"
            @click="activeTab = 'delete'">
            Delete Account
          </button>
        </div>

        <!-- Profile Information Tab -->
        <div v-if="activeTab === 'info'" class="p-8">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                  <polyline points="22,6 12,13 2,6" />
                </svg>
              </div>
              <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Email</label>
                <p class="text-sm text-black">{{ authStore.currentUser.email }}</p>
              </div>
            </div>

            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                  <circle cx="12" cy="7" r="4" />
                </svg>
              </div>
              <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Account
                  Type</label>
                <p class="text-sm text-black">{{ authStore.currentUser.type === 'P' ? 'Player' : 'Other' }}</p>
              </div>
            </div>

            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                  <line x1="16" y1="2" x2="16" y2="6" />
                  <line x1="8" y1="2" x2="8" y2="6" />
                  <line x1="3" y1="10" x2="21" y2="10" />
                </svg>
              </div>
              <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Member
                  Since</label>
                <p class="text-sm text-black">{{ formatDate(authStore.currentUser.created_at) }}</p>
              </div>
            </div>

            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <circle cx="12" cy="12" r="10" />
                  <path d="M9 12l2 2 4-4" />
                </svg>
              </div>
              <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Status</label>
                <p>
                  <span
                    :class="['inline-block px-3 py-1 text-sm font-medium border', authStore.currentUser.blocked ? 'bg-black text-white border-black' : 'bg-white text-black border-black']">
                    {{ authStore.currentUser.blocked ? 'Blocked' : 'Active' }}
                  </span>
                </p>
              </div>
            </div>

            <div v-if="authStore.currentUser.email_verified_at"
              class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                  <polyline points="22 4 12 14.01 9 11.01" />
                </svg>
              </div>
              <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Email
                  Verified</label>
                <p class="text-sm text-black">{{ formatDate(authStore.currentUser.email_verified_at) }}</p>
              </div>
            </div>

            <div class="flex items-start gap-4 p-5 bg-white border border-gray-300 transition-shadow hover:shadow-md">
              <div class="w-10 h-10 flex items-center justify-center flex-shrink-0 text-gray-600">
                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <polyline points="23 4 23 10 17 10" />
                  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
                </svg>
              </div>
              <div class="flex-1">
                <label class="block text-xs font-semibold text-gray-500 mb-1 uppercase tracking-wider">Last
                  Updated</label>
                <p class="text-sm text-black">{{ formatDate(authStore.currentUser.updated_at) }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Edit Profile Tab -->
        <div v-if="activeTab === 'edit'" class="p-8">
          <form @submit.prevent="updateProfile" class="max-w-lg">
            <div class="mb-6">
              <label for="name" class="block text-sm font-semibold text-gray-800 mb-2">Name</label>
              <input id="name" v-model="profileForm.name" type="text" required :disabled="updatingProfile"
                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
            </div>

            <div class="mb-6">
              <label for="nickname" class="block text-sm font-semibold text-gray-800 mb-2">Nickname</label>
              <input id="nickname" v-model="profileForm.nickname" type="text" required :disabled="updatingProfile"
                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
            </div>

            <div class="flex gap-4 mt-8">
              <button type="button" @click="resetProfileForm" :disabled="updatingProfile"
                class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
                Cancel
              </button>
              <button type="submit" :disabled="updatingProfile"
                class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
                {{ updatingProfile ? 'Saving...' : 'Save Changes' }}
              </button>
            </div>

            <div v-if="profileMessage"
              :class="['mt-4 px-3 py-3 border text-sm', profileMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
              {{ profileMessage }}
            </div>
          </form>
        </div>

        <!-- Transaction History Tab -->
        <div v-if="activeTab === 'transaction-history'" class="p-8">

          <div class="flex flex-wrap gap-4 mb-6 items-end">
            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">Type</label>
              <select v-model="filters.type" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none">
                <option value="all">All Types</option>
                <option value="credit">Credit (+)</option>
                <option value="debit">Debit (-)</option>
              </select>
            </div>

            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">From</label>
              <input type="date" v-model="filters.startDate" :max="filters.endDate" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none" />
            </div>

            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">To</label>
              <input type="date" v-model="filters.endDate" :min="filters.startDate" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none" />
            </div>

            <button @click="clearFilters" class="text-xs text-purple-500 hover:underline pb-2">
              Clear Filters
            </button>
          </div>

          <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
            <div v-if="transactions.length === 0" class="p-6 text-center text-sm text-muted-foreground">
              No transactions yet.
            </div>
            <div v-else class="max-h-[450px] overflow-y-auto custom-scrollbar p-1">

              <div v-for="(transaction) in transactions" :key="transaction.id"
                class="flex items-center justify-between p-4 mb-3 border rounded-lg transition-all hover:bg-muted/50 hover:border-purple-500"
                :class="[transaction.type === 'credit' ? 'border-green-500/30' : 'border-red-500/30']">

                <div class="flex items-center gap-4">
                  <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-bold"
                    :class="transaction.type === 'credit' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'">
                    <span v-if="transaction.type === 'credit'">+</span>
                    <span v-else>-</span>
                  </div>

                  <div class="flex flex-col">
                    <div class="font-semibold text-sm">
                      {{ transaction.category }} </div>
                    <div class="text-xs text-muted-foreground">
                      {{ new Date(transaction.began_at).toLocaleDateString() }} •
                      {{ new Date(transaction.began_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
                      }}
                    </div>
                  </div>
                </div>

                <div class="text-right">
                  <div class="font-bold text-sm"
                    :class="transaction.type === 'credit' ? 'text-green-600' : 'text-red-600'">
                    {{ transaction.type === 'credit' ? '+' : '-' }}{{ transaction.amount }} coins
                  </div>
                  <div class="text-[10px] text-muted-foreground uppercase tracking-wider">
                    {{ transaction.reference }} </div>
                </div>
              </div>

              <div ref="observerTarget" class="h-10 flex items-center justify-center">
                <span v-if="isLoading" class="text-xs text-purple-500 animate-pulse">Loading
                  more...</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Game History Tab -->
        <div v-if="activeTab === 'game-history'" class="p-8">
          <div class="flex flex-wrap gap-4 mb-6 items-end">
            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">Variant</label>
              <select v-model="filters.variant" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm outline-none">
                <option value="all">All Variants</option>
                <option value="3">Bisca 3</option>
                <option value="9">Bisca 9</option>
              </select>
            </div>

            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">Outcome</label>
              <select v-model="filters.outcome" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm outline-none">
                <option value="all">All Results</option>
                <option value="win">Win</option>
                <option value="loss">Loss</option>
                <option value="draw">Draw</option>
                <option value="forfeit">Forfeit</option>
              </select>
            </div>

            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">From</label>
              <input type="date" v-model="filters.startDate" :max="filters.endDate" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none" />
            </div>

            <div class="flex flex-col gap-1">
              <label class="text-xs font-medium text-muted-foreground">To</label>
              <input type="date" v-model="filters.endDate" :min="filters.startDate" @change="resetAndFetch"
                class="bg-background border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 outline-none" />
            </div>

            <button @click="clearFilters" class="text-xs text-purple-500 hover:underline pb-2">
              Clear Filters
            </button>

            <div class="flex flex-row gap-4 ml-auto">
              <div class="flex flex-col gap-1">
                <label class="text-xs font-medium text-muted-foreground">Sort By</label>
                <div class="flex gap-2">
                  <select v-model="filters.sort.column" @change="resetAndFetch"
                    class="bg-background border rounded-md px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="began_at">Date</option>
                    <option value="outcome">Outcome</option>
                    <option value="total_time">Duration</option>
                  </select>

                  <button @click="handleSortChange(filters.sort.column)"
                    class="bg-background border rounded-md px-4 py-2 text-sm outline-none transition-all hover:ring-2 hover:ring-purple-500 flex items-center justify-center min-w-[42px]"
                    title="Toggle Order">
                    <span v-if="filters.sort.order === 'desc'" class="leading-none">↓</span>
                    <span v-else class="leading-none">↑</span>
                  </button>
                </div>
              </div>
            </div>

          </div>
          <div class="rounded-lg border bg-card text-card-foreground shadow-sm">
            <div v-if="games.length === 0" class="p-6 text-center text-sm text-muted-foreground">
              No games played yet.
            </div>
            <div v-else class="max-h-[450px] overflow-y-auto custom-scrollbar p-1">
              <div v-for="game in games" :key="game.id"
                class="p-4 mb-3 border rounded-lg transition-all hover:bg-muted/50 hover:border-purple-500">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-4">
                    <div :class="game.outcome === 'win' ? 'text-green-500' : 'text-red-500'"
                      class="font-bold uppercase text-xs">
                      {{ game.outcome }}
                    </div>
                    <div>
                      <div class="font-semibold text-sm">vs {{ game.opponent }}</div>
                      <div class="text-xs text-muted-foreground">
                        {{ game.variant }} • {{ game.duration }}
                      </div>
                    </div>
                  </div>

                  <div class="text-right">
                    <div class="font-bold text-sm">{{ game.amount }} pts</div>
                    <div class="text-[10px] text-muted-foreground">
                      {{ new Date(game.began_at).toLocaleDateString() }} • {{ new
                        Date(game.began_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
                    </div>
                  </div>
                </div>

                <div class="mt-3 pt-3 border-t flex gap-4 text-[10px] uppercase font-medium text-muted-foreground">
                  <span>Capotes: {{ game.details.capotes }}</span>
                  <span>Bandeiras: {{ game.details.bandeiras }}</span>
                </div>
              </div>

              <div ref="observerTarget" class="h-10 flex items-center justify-center">
                <span v-if="isLoading" class="text-xs text-purple-500 animate-pulse">Loading
                  more...</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Change Password Tab -->
        <div v-if="activeTab === 'password'" class="p-8">
          <form @submit.prevent="changePassword" class="max-w-lg">
            <div class="mb-6">
              <label for="current_password" class="block text-sm font-semibold text-gray-800 mb-2">Current
                Password</label>
              <input id="current_password" v-model="passwordForm.current_password" type="password" required
                :disabled="updatingPassword"
                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
            </div>

            <div class="mb-6">
              <label for="new_password" class="block text-sm font-semibold text-gray-800 mb-2">New Password</label>
              <input id="new_password" v-model="passwordForm.new_password" type="password" required minlength="8"
                :disabled="updatingPassword"
                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
              <small class="block mt-1 text-xs text-gray-600">Password must be at least 8 characters long</small>
            </div>

            <div class="mb-6">
              <label for="confirm_password" class="block text-sm font-semibold text-gray-800 mb-2">Confirm New
                Password</label>
              <input id="confirm_password" v-model="passwordForm.confirm_password" type="password" required
                :disabled="updatingPassword"
                class="w-full px-3 py-3 border border-gray-300 text-base transition-colors focus:outline-none focus:border-black disabled:bg-gray-100 disabled:cursor-not-allowed" />
            </div>

            <div class="flex gap-4 mt-8">
              <button type="button" @click="resetPasswordForm" :disabled="updatingPassword"
                class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-white text-black hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed">
                Cancel
              </button>
              <button type="submit" :disabled="updatingPassword"
                class="px-6 py-3 border border-black cursor-pointer text-base font-medium transition-all bg-black text-white hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
                {{ updatingPassword ? 'Updating...' : 'Change Password' }}
              </button>
            </div>

            <div v-if="passwordMessage"
              :class="['mt-4 px-3 py-3 border text-sm', passwordMessageType === 'success' ? 'bg-blue-50 border-black text-black' : 'bg-red-50 border-black text-black']">
              {{ passwordMessage }}
            </div>
          </form>
        </div>

        <!-- Delete Account Tab -->
        <div v-if="activeTab === 'delete'" class="p-8 flex flex-col items-center">
          <div class="max-w-lg">
            <div class="border border-red-600 bg-red-50 p-6 mb-6">
              <div class="flex items-start gap-3">
                <svg class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                  <line x1="12" y1="9" x2="12" y2="13" />
                  <line x1="12" y1="17" x2="12.01" y2="17" />
                </svg>
                <div>
                  <h3 class="text-lg font-semibold text-red-900 mb-2">Danger Zone</h3>
                  <p class="text-sm text-red-800 mb-2">
                    Deleting your account is permanent and cannot be undone. This action will:
                  </p>
                  <ul class="text-sm text-red-800 list-disc list-inside space-y-1">
                    <li>Permanently delete all your account data</li>
                    <li>Forfeit your current coin balance of <strong>{{ authStore.currentUser.coins_balance }}
                        coins</strong></li>
                    <li>Remove your access to all games and matches</li>
                    <li>Delete your profile and all associated information</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="bg-white border border-gray-300 p-6">
              <h4 class="text-base font-semibold text-gray-900 mb-4">
                Are you absolutely sure?
              </h4>
              <p class="text-sm text-gray-600 mb-4">
                To confirm deletion, please type your email address: <strong class="text-black">{{
                  authStore.currentUser.email }}</strong>
              </p>

              <input v-model="deleteConfirmEmail" type="text" placeholder="Enter your email to confirm"
                class="w-full px-3 py-3 border border-gray-300 text-base mb-4 focus:outline-none focus:border-red-600" />

              <div class="flex gap-4">
                <button type="button" @click="activeTab = 'info'"
                  class="flex-1 px-6 py-3 border border-gray-300 cursor-pointer text-base font-medium transition-all bg-white text-gray-700 hover:bg-gray-50">
                  Cancel
                </button>
                <button @click="showDeleteConfirmation = true"
                  :disabled="deleteConfirmEmail !== authStore.currentUser.email"
                  class="flex-1 px-6 py-3 border border-red-600 cursor-pointer text-base font-medium transition-all bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600">
                  Delete My Account
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div v-if="showDeleteConfirmation"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
      @click.self="showDeleteConfirmation = false">
      <div class="bg-white border border-gray-300 max-w-md w-full shadow-xl">
        <div class="p-6 border-b border-gray-300">
          <h3 class="text-xl font-semibold text-gray-900">Final Confirmation</h3>
        </div>

        <div class="p-6">
          <div class="flex items-start gap-3 mb-4">
            <svg class="w-12 h-12 text-red-600 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2">
              <circle cx="12" cy="12" r="10" />
              <line x1="15" y1="9" x2="9" y2="15" />
              <line x1="9" y1="9" x2="15" y2="15" />
            </svg>
            <div>
              <p class="text-base text-gray-900 font-semibold mb-2">
                This is your last chance to cancel.
              </p>
              <p class="text-sm text-gray-600">
                Once you click "Yes, Delete My Account", your account and all associated data will be permanently
                deleted. You will lose your <strong>{{ authStore.currentUser.coins_balance }} coins</strong> forever.
              </p>
            </div>
          </div>

          <div v-if="deletingAccount" class="text-center py-4">
            <div class="spinner mx-auto mb-3"></div>
            <p class="text-sm text-gray-600">Deleting your account...</p>
          </div>
        </div>

        <div class="p-6 border-t border-gray-300 flex gap-3">
          <button @click="showDeleteConfirmation = false" :disabled="deletingAccount"
            class="flex-1 px-6 py-3 border border-gray-300 cursor-pointer text-base font-medium transition-all bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
            Cancel
          </button>
          <button @click="deleteAccount" :disabled="deletingAccount"
            class="flex-1 px-6 py-3 border border-red-600 cursor-pointer text-base font-medium transition-all bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed">
            Yes, Delete My Account
          </button>
        </div>
      </div>
    </div>

    <!-- No Data State -->
    <div v-else-if="!authStore.isLoggedIn"
      class="bg-white border border-gray-300 p-12 text-center shadow-sm max-w-md w-full">
      <div class="flex flex-col items-center gap-6">
        <div class="spinner"></div>
        <p>Redirecting to login...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, watch, nextTick } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useAPIStore } from '@/stores/api'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const authStore = useAuthStore()
const apiStore = useAPIStore()
const router = useRouter()
const API_BASE_URL = inject('apiBaseURL')

const loading = ref(false)
const error = ref(null)
const activeTab = ref('info')
const fileInput = ref(null)

const profileForm = reactive({
  name: '',
  nickname: ''
})
const updatingProfile = ref(false)
const profileMessage = ref('')
const profileMessageType = ref('')

const passwordForm = reactive({
  current_password: '',
  new_password: '',
  confirm_password: ''
})
const updatingPassword = ref(false)
const passwordMessage = ref('')
const passwordMessageType = ref('')

const deleteConfirmEmail = ref('')
const showDeleteConfirmation = ref(false)
const deletingAccount = ref(false)

const transactions = ref([]);
const games = ref([]);

const observerTarget = ref(null);
const observer = ref(null);
const isLoading = ref(false);

const pagination = ref({
  transactions: { page: 1, hasMore: true },
  games: { page: 1, hasMore: true }
});

const filters = ref({
  type: 'all',
  variant: 'all',
  outcome: 'all',
  startDate: '',
  endDate: '',
  sort: {
    column: 'began_at',
    order: 'desc'
  }
});

const handleSortChange = (column) => {
  if (filters.value.sort.column === column) {
    filters.value.sort.order = filters.value.sort.order === 'asc' ? 'desc' : 'asc';
  } else {
    filters.value.sort.column = column;
    filters.value.sort.order = 'desc';
  }
  resetAndFetch();
};

watch(activeTab, async (newTab) => {
  if (newTab !== 'transaction-history' && newTab !== 'game-history') return;

  await nextTick();

  if (transactions.value.length !== 0 && games.value.length !== 0) return;

  await fetchData();
  setupObserver();
});

const fetchData = async () => {
  const currentTab = activeTab.value;
  const isTransaction = currentTab === 'transaction-history';
  const isGame = currentTab === 'game-history';
  const state = isTransaction ? pagination.value.transactions : pagination.value.games;

  if (isLoading.value || !state.hasMore) return;
  isLoading.value = true;

  try {
    let newData = [];

    if (isTransaction) {
      const apiParams = {
        page: state.page,
        type: filters.value.type === 'credit' ? 'C' : filters.value.type === 'debit' ? 'D' : undefined,
        date_from: filters.value.startDate || undefined,
        date_to: filters.value.endDate || undefined,
      };

      const response = await apiStore.getCurrentUserTransactions(apiParams);
      const apiTxns = response.data.data;

      newData = apiTxns.map(txn => ({
        id: txn.id.toString(),
        type: txn.type.type === 'D' ? 'debit' : 'credit',
        category: txn.type.name,
        amount: Math.abs(txn.coins),
        began_at: txn.transaction_datetime,
        reference: txn.match_id ? `Match #${txn.match_id}` : txn.game_id ? `Game #${txn.game_id}` : 'N/A'
      }));

      transactions.value.push(...newData);
    }

    if (isGame) {
      const apiParams = {
        page: state.page,
        type: filters.value.variant !== 'all' ? filters.value.variant : undefined,
        outcome: filters.value.outcome !== 'all' ? filters.value.outcome : undefined,
        status: 'Ended',
        date_from: filters.value.startDate || undefined,
        date_to: filters.value.endDate || undefined,
        sort_by: filters.value.sort.column,
        sort_direction: filters.value.sort.order,
      };

      const response = await apiStore.getCurrentUserMatches(apiParams);
      const apiGames = response.data.data;

      newData = apiGames.map(game => {
        const isPlayer1 = game.player1_user_id === authStore.currentUser.id;
        const opponent = isPlayer1 ? game.player2 : game.player1;

        let outcome = 'loss';
        if (game.is_draw) outcome = 'draw';
        else if (game.winner_user_id === authStore.currentUser.id) outcome = 'win';

        return {
          id: game.id,
          variant: `Type ${game.type}`,
          outcome: outcome,
          opponent: opponent?.nickname || 'Unknown Player',
          amount: isPlayer1 ? game.player1_points : game.player2_points,
          duration: `${Math.floor(game.total_time / 60)}m ${game.total_time % 60}s`,
          began_at: game.began_at,
          details: {
            capotes: 0,
            bandeiras: 0
          }
        };
      });
      games.value.push(...newData);
    }

    if (newData.length < 10) state.hasMore = false;
    state.page++;
  } catch (error) {
    console.error("Fetch failed", error);
  } finally {
    isLoading.value = false;
  }
};

const setupObserver = () => {
  if (observer.value) observer.value.disconnect();

  const scrollContainer = document.querySelector('.custom-scrollbar');

  observer.value = new IntersectionObserver(async (entries) => {
    const isGame = activeTab.value === 'game-history';
    const hasMore = isGame ? pagination.value.games.hasMore : pagination.value.transactions.hasMore;

    if (entries[0].isIntersecting && !isLoading.value && hasMore) {
      fetchData();
    }
  }, {
    root: scrollContainer,
    threshold: 0.1,
    rootMargin: '100px'
  });

  if (observerTarget.value) observer.value.observe(observerTarget.value);
};

const resetAndFetch = async () => {
  if (activeTab.value === 'transaction-history') {
    transactions.value = [];
    pagination.value.transactions = { page: 1, hasMore: true };
  }

  if (activeTab.value === 'game-history') {
    games.value = [];
    pagination.value.games = { page: 1, hasMore: true };
  }

  await nextTick();
  await fetchData();
  setupObserver();
};

const clearFilters = () => {
  const isGameTab = activeTab.value === 'game-history';
  const defaultSortColumn = isGameTab ? 'began_at' : 'transaction_datetime';

  const isAlreadyDefault =
    filters.value.startDate === '' &&
    filters.value.endDate === '' &&
    filters.value.sort.column === defaultSortColumn &&
    filters.value.sort.order === 'desc' &&
    (isGameTab
      ? (filters.value.variant === 'all' && filters.value.outcome === 'all')
      : (filters.value.type === 'all')
    );

  if (isAlreadyDefault) {
    return;
  }

  if (isGameTab) {
    filters.value.variant = 'all';
    filters.value.outcome = 'all';
  } else {
    filters.value.type = 'all';
  }

  filters.value.startDate = '';
  filters.value.endDate = '';
  filters.value.sort = {
    column: defaultSortColumn,
    order: 'desc'
  };

  resetAndFetch();
};

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const fetchProfile = async () => {
  loading.value = true
  error.value = null

  try {
    const response = await apiStore.getAuthUser()
    authStore.currentUser = response.data
    resetProfileForm()
  } catch (err) {
    error.value = err.response?.data?.message || 'Failed to fetch user profile'

    if (err.response?.status === 401) {
      await authStore.logout()
      router.push('/login')
    }
  } finally {
    loading.value = false
  }
}

const retry = () => {
  fetchProfile()
}

const resetProfileForm = () => {
  profileForm.name = authStore.currentUser?.name || ''
  profileForm.nickname = authStore.currentUser?.nickname || ''
  profileMessage.value = ''
}

const resetPasswordForm = () => {
  passwordForm.current_password = ''
  passwordForm.new_password = ''
  passwordForm.confirm_password = ''
  passwordMessage.value = ''
}

const updateProfile = async () => {
  profileMessage.value = ''

  if (!profileForm.name.trim() || !profileForm.nickname.trim()) {
    profileMessage.value = 'Name and nickname are required'
    profileMessageType.value = 'error'
    return
  }

  updatingProfile.value = true

  try {
    const response = await axios.put(`${API_BASE_URL}/users/me`, {
      name: profileForm.name,
      nickname: profileForm.nickname
    })

    authStore.currentUser = response.data
    profileMessage.value = 'Profile updated successfully!'
    profileMessageType.value = 'success'
  } catch (err) {
    profileMessage.value = err.response?.data?.message || 'Failed to update profile'
    profileMessageType.value = 'error'
  } finally {
    updatingProfile.value = false
  }
}

const changePassword = async () => {
  passwordMessage.value = ''

  if (passwordForm.new_password !== passwordForm.confirm_password) {
    passwordMessage.value = 'New passwords do not match'
    passwordMessageType.value = 'error'
    return
  }

  if (passwordForm.new_password.length < 8) {
    passwordMessage.value = 'Password must be at least 8 characters long'
    passwordMessageType.value = 'error'
    return
  }

  updatingPassword.value = true

  try {
    await axios.put(`${API_BASE_URL}/users/me/password`, {
      current_password: passwordForm.current_password,
      new_password: passwordForm.new_password,
      new_password_confirmation: passwordForm.confirm_password
    })

    passwordMessage.value = 'Password changed successfully!'
    passwordMessageType.value = 'success'
    resetPasswordForm()
  } catch (err) {
    passwordMessage.value = err.response?.data?.message || 'Failed to change password'
    passwordMessageType.value = 'error'
  } finally {
    updatingPassword.value = false
  }
}

const triggerFileInput = () => {
  fileInput.value?.click()
}

const handleAvatarUpload = async (event) => {
  const file = event.target.files?.[0]
  if (!file) return

  const formData = new FormData()
  formData.append('avatar', file)

  try {
    const response = await axios.post(`${API_BASE_URL}/users/me/avatar`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    authStore.currentUser = response.data
  } catch (err) {
    alert(err.response?.data?.message || 'Failed to upload avatar')
  }
}

const deleteAccount = async () => {
  deletingAccount.value = true

  try {
    await axios.delete(`${API_BASE_URL}/users/me`)

    await authStore.logout()

    showDeleteConfirmation.value = false

    router.push('/login')
  } catch (err) {
    deletingAccount.value = false
    showDeleteConfirmation.value = false
    alert(err.response?.data?.message || 'Failed to delete account')
  }
}

onMounted(async () => {
  if (!authStore.isLoggedIn) {
    router.push('/login')
    return
  }
  const route = useRoute()
  if (route.query.tab) {
    activeTab.value = route.query.tab;
    router.replace({ query: {} });
  }

  if (!authStore.currentUser) {
    await fetchProfile()
  } else {
    resetProfileForm()
  }
})
</script>

<style scoped>
@import './UserPage.css';
</style>
