<script setup lang="ts">
import { ref, onMounted } from "vue";
import { apiService } from "@/services/apiService";
import type { TournamentPuzzleResults } from "@/types";

const isLoading = ref(true);
const resultsData = ref<TournamentPuzzleResults | null>(null);
const error = ref<string>("");

// Modal state
const showImageModal = ref(false);
const selectedImageUrl = ref<string>("");
const selectedImageName = ref<string>("");

const fetchResults = async () => {
  isLoading.value = true;
  error.value = "";
  try {
    const response = await apiService.getPuzzleResults(5);
    if (response.data) {
      resultsData.value = response.data;
    } else if (response.error) {
      error.value = response.error;
      console.error("Error fetching results:", response.error);
    }
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Failed to fetch results";
    console.error("Error fetching results:", err);
  } finally {
    isLoading.value = false;
  }
};

const formatNumber = (num: number | undefined) => {
  return num !== undefined ? num.toLocaleString() : "—";
};

const openImageModal = (fileUrl: string, fileName: string) => {
  selectedImageUrl.value = fileUrl;
  selectedImageName.value = fileName;
  showImageModal.value = true;
};

const closeImageModal = () => {
  showImageModal.value = false;
  selectedImageUrl.value = "";
  selectedImageName.value = "";
};

const getRankBadge = (rank: number) => {
  const badges = ["🥇", "🥈", "🥉"];
  return badges[rank - 1] || `#${rank}`;
};

const getWinnersForPuzzle = (puzzle: any) => {
  if (!puzzle.submissions || puzzle.submissions.length === 0) return [];
  const topPoints = puzzle.submissions[0].rank_points;
  return puzzle.submissions.filter((submission: any) => submission.rank_points === topPoints);
};

onMounted(() => {
  fetchResults();
});
</script>

<template>
  <div class="card bg-base-100 shadow-lg">
    <div class="card-body">
      <h2 class="card-title text-2xl flex items-center gap-2">
        <i class="mdi mdi-table text-blue-500 text-3xl"></i>
        Results by Puzzle
      </h2>

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

      <div v-else-if="error" class="alert alert-error">
        <i class="mdi mdi-alert-circle text-xl"></i>
        <div>{{ error }}</div>
      </div>

      <div v-else-if="!resultsData || resultsData.results.length === 0" class="text-center py-8">
        <p class="text-base-content/70">No results available yet.</p>
      </div>

      <div v-else class="space-y-8">
        <div v-for="puzzle in resultsData.results" :key="puzzle.puzzle_id" class="border-b pb-8 last:border-b-0">
          <!-- Puzzle Header with Coefficients -->
          <div class="mb-4">
            <h3 class="text-xl font-bold mb-3">{{ puzzle.puzzle_title }}</h3>
            <div class="bg-base-200 p-3 rounded-lg mb-4" v-if="puzzle.points_factor">
              <p class="text-xs text-base-content/70 font-semibold mb-2">Points Coefficients</p>
              <div class="grid grid-cols-3 gap-2">
                <div class="text-center">
                  <span class="font-bold text-primary"><small>x</small>{{ puzzle.points_factor.cost }}</span>
                  <p class="text-xs text-base-content/70">Cost</p>
                </div>
                <div class="text-center">
                  <span class="font-bold text-primary"><small>x</small>{{ puzzle.points_factor.cycles }}</span>
                  <p class="text-xs text-base-content/70">Cycles</p>
                </div>
                <div class="text-center">
                  <span class="font-bold text-primary"><small>x</small>{{ puzzle.points_factor.area }}</span>
                  <p class="text-xs text-base-content/70">Area</p>
                </div>
              </div>
            </div>

            <!-- Winners GIF Display (all with same top points) -->
            <div v-if="puzzle.submissions.length > 0 && getWinnersForPuzzle(puzzle).length > 0"
              class="bg-base-200 p-4 rounded-lg">
              <p class="text-xs text-base-content/70 font-semibold mb-3 text-center">🏆 Winning Solutions</p>
              <div class="flex flex-wrap justify-center gap-6">
                <template v-for="submission in getWinnersForPuzzle(puzzle)"
                  :key="`${puzzle.puzzle_id}-${submission.user_id}`">
                  <div v-if="submission && submission.files && submission.files.length > 0" class="text-center w-96">
                    <div class="text-sm text-base-content/70 mb-3 font-semibold truncate">{{ submission.username }}
                    </div>
                    <button @click="openImageModal(submission.files[0].file_url, submission.files[0].original_filename)"
                      class="hover:opacity-80 transition-opacity cursor-pointer w-full flex items-center justify-center">
                      <img :src="submission.files[0].file_url" :alt="`${puzzle.puzzle_title} - ${submission.username}`"
                        class="max-h-full max-w-full object-contain" />
                    </button>
                  </div>
                </template>
              </div>
            </div>
          </div>

          <!-- Results Table -->
          <div v-if="puzzle.submissions.length > 0" class="overflow-x-auto">
            <table class="table table-sm table-zebra">
              <thead>
                <tr>
                  <th class="w-12 text-center">Pos</th>
                  <th>User</th>
                  <th class="text-right">Cost</th>
                  <th class="text-right">Cycles</th>
                  <th class="text-right">Area</th>
                  <th class="text-right font-bold">Total Pts</th>
                  <th class="text-right font-bold">Total Coef</th>
                  <th class="text-center">GIF</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="submission in puzzle.submissions" :key="`${puzzle.puzzle_id}-${submission.user_id}`">
                  <td class="text-center text-lg font-bold">
                    {{ getRankBadge(submission.rank) }}
                  </td>
                  <td class="font-semibold">{{ submission.username }}</td>
                  <td class="text-right">{{ formatNumber(submission.final_cost) }}</td>
                  <td class="text-right">{{ formatNumber(submission.final_cycles) }}</td>
                  <td class="text-right">{{ formatNumber(submission.final_area) }}</td>
                  <td class="text-right font-bold" :class="{
                    'text-yellow-600': submission.rank === 1,
                    'text-gray-600': submission.rank === 2,
                    'text-orange-600': submission.rank === 3,
                  }">
                    {{ formatNumber(submission.rank_points) }}
                  </td>
                  <td class="text-right font-bold text-primary">
                    {{ formatNumber(submission.total_coef) }}
                  </td>
                  <td class="text-center">
                    <button v-if="submission.files.length > 0"
                      @click="openImageModal(submission.files[0].file_url, submission.files[0].original_filename)"
                      class="btn btn-xs btn-primary gap-1">
                      <i class="mdi mdi-image"></i>
                      View
                    </button>
                    <span v-else class="text-base-content/50">—</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div v-else class="p-4 bg-base-200 rounded-lg text-center text-base-content/70">
            No submissions yet
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Image Modal -->
  <div v-if="showImageModal" class="modal modal-open">
    <div class="modal-box max-w-7xl w-full">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-bold text-lg">{{ selectedImageName }}</h3>
        <button @click="closeImageModal" class="btn btn-sm btn-circle btn-ghost">
          <i class="mdi mdi-close"></i>
        </button>
      </div>

      <div class="flex justify-center bg-base-200 rounded-lg p-4">
        <img :src="selectedImageUrl" :alt="selectedImageName" class="object-contain" />
      </div>

      <div class="modal-action mt-4">
        <a :href="selectedImageUrl" target="_blank" class="btn btn-primary btn-sm">
          <i class="mdi mdi-download"></i>
          Download
        </a>
        <button @click="closeImageModal" class="btn btn-sm">Close</button>
      </div>
    </div>
    <div class="modal-backdrop" @click="closeImageModal"></div>
  </div>
</template>
