<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import PuzzleCard from "@/components/PuzzleCard.vue";
import SubmissionForm from "@/components/SubmissionForm.vue";
import AdminPanel from "@/components/AdminPanel.vue";
import Results from "@/components/Results.vue";
import Winners from "@/components/Winners.vue";
import PuzzleResults from "@/components/PuzzleResults.vue";
import TopUsersLeaderboard from "@/components/TopUsersLeaderboard.vue";
import { polylanSubmitterApiGetUserInfo, submissionsApiGetCollection } from "@/api";
import { errorHelpers } from "@/services/apiService";
import { usePuzzlesStore } from "@/stores/puzzles";
import { useSubmissionsStore } from "@/stores/submissions";
import type { PuzzleResponse, UserInfo, SteamCollection } from "@/types";
import { useCountdown } from "@vueuse/core";
import { storeToRefs } from "pinia";

const props = defineProps<{
  collectionTitle: string;
  collectionUrl: string;
  collectionDescription: string;
}>();

const puzzlesStore = usePuzzlesStore();
const submissionsStore = useSubmissionsStore();

const { submissions, isSubmissionModalOpen } = storeToRefs(submissionsStore);
const { openSubmissionModal, loadSubmissions, closeSubmissionModal } =
  submissionsStore;

// Local state
const userInfo = ref<UserInfo | null>(null);
const collection = ref<SteamCollection | null>(null);
const isLoading = ref(true);
const error = ref<string>("");

// Computed properties
const isSuperuser = computed(() => {
  return userInfo.value?.is_superuser || false;
});

const isTournamentClosed = computed(() => {
  return !!(collection.value && !collection.value.accepting_submissions);
});

// Computed property to get responses grouped by puzzle
const responsesByPuzzle = computed(() => {
  const grouped: Record<number, PuzzleResponse[]> = {};
  submissions.value.forEach((submission) => {
    submission.responses.forEach((response) => {
      // Handle both number and object types for puzzle field
      if (!grouped[response.puzzle_id]) {
        grouped[response.puzzle_id] = [];
      }
      grouped[response.puzzle_id].push(response);
    });
  });
  return grouped;
});

async function initialize() {
  try {
    isLoading.value = true;
    error.value = "";

    console.log("Starting data load...");

    // Load user info
    console.log("Loading user info...");
    const userResponse = await polylanSubmitterApiGetUserInfo();
    if (userResponse.data) {
      userInfo.value = userResponse.data as UserInfo;
      console.log("User info loaded:", userResponse.data);
    } else if (userResponse.error) {
      console.warn("User info error:", userResponse.error);
    }

    // Load collection data
    console.log("Loading collection...");
    const collectionResponse = await submissionsApiGetCollection();
    if (collectionResponse.data) {
      collection.value = collectionResponse.data as SteamCollection;
      console.log("Collection loaded:", collectionResponse.data);
    } else if (collectionResponse.error) {
      console.warn("Collection error:", collectionResponse.error);
    }

    // Load puzzles from API using store
    console.log("Loading puzzles...");
    await puzzlesStore.loadPuzzles();
    console.log("Puzzles loaded:", puzzlesStore.puzzles.length);

    // Load existing submissions using store
    console.log("Loading submissions...");
    await loadSubmissions();
    console.log("Submissions loaded:", submissions.value.length);

    console.log("Data load complete!");
  } catch (err) {
    error.value = errorHelpers.getErrorMessage(err);
    console.error("Failed to load data:", err);
  } finally {
    isLoading.value = false;
    console.log("Loading state set to false");
  }

  if (userInfo.value?.is_superuser) {
    start();
  }
}

const { remaining, start } = useCountdown(60, {
  onComplete() {
    initialize();
  },
});

onMounted(async () => {
  await initialize();
});

// Function to match puzzle name from OCR to actual puzzle
const findPuzzleByName = (ocrPuzzleName: string) => {
  return puzzlesStore.findPuzzleByName(ocrPuzzleName);
};

const reloadPage = () => {
  window.location.reload();
};

const goHome = () => {
  window.location.href = "/";
};
</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">Opus Magnum Puzzle Submitter</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">
      <!-- Loading State -->
      <div v-if="userInfo?.is_superuser" class="flex justify-center">
        <div class="text-center">
          <p class="mb-6 text-base-content/70">
            <span class="loading loading-spinner loading-lg"></span>
            Auto reload page in {{ remaining }} seconds ...
          </p>
        </div>
      </div>

      <div v-if="isLoading" class="flex justify-center items-center min-h-[400px]">
        <div class="text-center">
          <span class="loading loading-spinner loading-lg"></span>
          <p class="mt-4 text-base-content/70">Loading puzzles...</p>
        </div>
      </div>

      <!-- Error State -->
      <div v-else-if="error" class="alert alert-error max-w-2xl mx-auto">
        <i class="mdi mdi-alert-circle text-xl"></i>
        <div>
          <h3 class="font-bold">Error Loading Data</h3>
          <div class="text-sm">{{ error }}</div>
        </div>
        <button @click="reloadPage" class="btn btn-sm btn-outline">
          <i class="mdi mdi-refresh mr-1"></i>
          Retry
        </button>
      </div>

      <!-- Main Content -->
      <div v-else class="space-y-8">

        <!-- Results Section (only when tournament is closed) -->
        <div v-if="isTournamentClosed" class="space-y-8">
          <TopUsersLeaderboard />
          <PuzzleResults />
          <Winners />
        </div>

        <template v-else>

          <!-- Collection Info -->
          <div class="mb-8">
            <div class="card bg-base-100 shadow-lg">
              <div class="card-body">
                <h2 class="card-title text-2xl">{{ props.collectionTitle }}</h2>
                <p class="text-base-content/70">
                  {{ props.collectionDescription }}
                </p>
                <div class="flex flex-wrap gap-4 mt-4">
                  <button @click="openSubmissionModal" class="btn btn-primary" :disabled="isTournamentClosed">
                    <i class="mdi mdi-plus mr-2"></i>
                    Submit Solution
                  </button>
                </div>
                <div v-if="isTournamentClosed" class="alert alert-warning mt-4">
                  <i class="mdi mdi-alert-circle text-xl"></i>
                  <div>
                    <h3 class="font-bold">Tournament Closed</h3>
                    <div class="text-sm">This tournament is no longer accepting new submissions.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <Results />

          <!-- Admin Panel (only for superusers) -->
          <div v-if="isSuperuser">
            <AdminPanel />
          </div>

          <!-- Puzzles Grid -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <PuzzleCard v-for="puzzle in puzzlesStore.puzzles" :key="puzzle.id" :puzzle="puzzle"
              :responses="responsesByPuzzle[puzzle.id] || []" />
          </div>

          <!-- Empty State -->
          <div v-if="puzzlesStore.puzzles.length === 0" class="text-center py-12">
            <div class="text-6xl mb-4">🧩</div>
            <h3 class="text-xl font-bold mb-2">No Puzzles Available</h3>
            <p class="text-base-content/70">
              Check back later for new puzzle collections!
            </p>
          </div>
        </template>
      </div>
    </div>

    <!-- Submission Modal -->
    <div v-if="isSubmissionModalOpen" class="modal modal-open">
      <div class="modal-box max-w-6xl">
        <div class="flex justify-between items-center mb-4">
          <h3 class="font-bold text-lg">Submit Solution</h3>
          <button @click="closeSubmissionModal" class="btn btn-sm btn-circle btn-ghost">
            <i class="mdi mdi-close"></i>
          </button>
        </div>

        <SubmissionForm :puzzles="puzzlesStore.puzzles" :find-puzzle-by-name="findPuzzleByName" />
      </div>
      <div class="modal-backdrop" @click="closeSubmissionModal"></div>
    </div>
  </div>
</template>
