<script setup lang="ts">
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useMarketStore } from "./stores/market";
import MarketCard from "./components/MarketCard.vue";
import UserBets from "./components/UserBets.vue";

const marketStore = useMarketStore();
const { markets, userInfo, isLoading } = storeToRefs(marketStore);

const goHome = () => {
  window.location.href = "/";
};

const reloadPage = async () => {
  await marketStore.refreshPage();
};

onMounted(() => {
  marketStore.initializeMarketPage();
});
</script>

<template>
  <div class="min-h-screen bg-base-200">
    <!-- Header -->
    <div class="navbar bg-base-100 shadow-lg">
      <div class="container min-w-3/4 mx-auto w-full flex items-center gap-4">
        <button @click="goHome" class="btn btn-primary btn-sm">
          <i class="mdi mdi-arrow-left"></i>
          Back
        </button>
        <h1 class="text-xl font-bold">Market</h1>
        <div class="flex-1"></div>
        <div class="flex items-center gap-4">
          <div v-if="userInfo?.is_authenticated" class="flex items-center gap-2">
            <div class="text-sm">
              <span class="font-medium">{{ userInfo.username }}</span>
              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">Admin</span>
            </div>
          </div>
          <div v-else class="text-sm text-base-content/70">Not logged in</div>
          <a href="/api/docs" class="btn btn-xs">API docs</a>
          <a href="/admin" class="btn btn-xs btn-warning">Admin panel</a>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="container min-w-3/4 mx-auto px-4 py-8">
      <!-- Header -->
      <div class="mb-8">
        <h2 class="text-3xl font-bold mb-2">Market</h2>
        <p class="text-base-content/70">Place your bets on upcoming events</p>
      </div>

      <!-- Loading -->
      <div v-if="isLoading" class="flex justify-center py-20">
        <span class="loading loading-spinner loading-lg"></span>
      </div>

      <!-- Content -->
      <template v-else>
        <div class="space-y-8">
          <!-- My Bets Section -->
          <div v-if="userInfo?.is_authenticated">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-2xl font-bold flex items-center gap-2">
                <i class="mdi mdi-heart text-error"></i>
                My Bets
              </h3>
              <div class="text-lg font-semibold">
                <span class="text-primary">{{ userInfo.points }}</span>
                <span class="text-base-content/60 ml-1">pts</span>
              </div>
            </div>
            <UserBets :markets="markets" @refresh="reloadPage" />
          </div>

          <!-- All Markets Section -->
          <div>
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-2xl font-bold flex items-center gap-2">
                <i class="mdi mdi-list"></i>
                All Markets
              </h3>
              <a v-if="userInfo?.is_superuser" href="/admin/market/market/add/" class="btn btn-sm btn-primary">
                <i class="mdi mdi-plus"></i>
                Create Market
              </a>
            </div>

            <div v-if="markets.length === 0" class="alert">
              <i class="mdi mdi-information mr-2"></i>
              <span>No markets available</span>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <MarketCard v-for="market in markets" :key="market.uuid" :market="market" @refresh="reloadPage" />
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
