<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import RankBadge from "@/components/RankBadge.vue";
import { useNoitaStore, type Objective } from "@/stores/noita";
import {
  createColumnHelper,
  useVueTable,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  type ColumnFiltersState,
  type SortingState,
} from "@tanstack/vue-table";

const noitaStore = useNoitaStore();
const { userInfo, objectives, leaderboard, isLoadingLeaderboard, isUploading } = storeToRefs(noitaStore);

const uploadedFiles = ref<File[]>([]);
const isDragover = ref(false);

const columnHelper = createColumnHelper<Objective>();
const sorting = ref<SortingState>([]);
const columnFilters = ref<ColumnFiltersState>([]);

const formatDate = (dateString: string | null) => {
  if (!dateString) {
    return ""
  }
  const date = dayjs(dateString);
  return date.format("MMM DD, YYYY HH:mm");
};

const columns = [
  columnHelper.accessor("objectiv_id", {
    header: "Objective ID",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("total_points", {
    header: "Your points",
    cell: (info) => info.getValue() || 0,
  }),
  columnHelper.accessor("first_seen_at", {
    header: "First seen",
    cell: (info) => formatDate(info.getValue()),
    sortingFn: (rowA, rowB) => {
      const dateA = dayjs(rowA.original.first_seen_at);
      const dateB = dayjs(rowB.original.first_seen_at);
      if (!rowA.original.first_seen_at) {
        return rowB.original.first_seen_at ? 1 : 0
      }
      if (!rowB.original.first_seen_at) {
        return rowA.original.first_seen_at ? 0 : 1
      }
      return dateA.isBefore(dateB) ? -1 : dateA.isAfter(dateB) ? 1 : 0;
    },
  }),
  columnHelper.accessor("seed", {
    header: "Seed",
    cell: (info) => info.getValue(),
  }),
];

const table = computed(() =>
  useVueTable({
    get data() {
      return objectives.value;
    },
    columns,
    state: {
      get sorting() {
        return sorting.value;
      },
      get columnFilters() {
        return columnFilters.value;
      },
    },
    onSortingChange: (updater) => {
      sorting.value =
        typeof updater === "function" ? updater(sorting.value) : updater;
    },
    onColumnFiltersChange: (updater) => {
      columnFilters.value =
        typeof updater === "function" ? updater(columnFilters.value) : updater;
    },
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    filterFns: {
      fuzzy: (row, columnId, value) => {
        const itemData = row.getValue(columnId);
        const searchValue = value.toLowerCase();
        if (columnId === "first_seen_at") {
          return formatDate(itemData as string).includes(searchValue)
        }
        return String(itemData).toLowerCase().includes(searchValue);
      },
    },
  })
);

const filteredObjectives = computed(() => table.value.getRowModel().rows);

const handleFileUpload = (event: Event) => {
  const input = event.target as HTMLInputElement;
  if (input.files) {
    uploadedFiles.value = Array.from(input.files);
  }
};

const handleDragover = (event: DragEvent) => {
  event.preventDefault();
  event.stopPropagation();
  isDragover.value = true;
};

const handleDragleave = (event: DragEvent) => {
  event.preventDefault();
  event.stopPropagation();
  isDragover.value = false;
};

const handleDrop = (event: DragEvent) => {
  event.preventDefault();
  event.stopPropagation();
  isDragover.value = false;

  if (event.dataTransfer?.files) {
    uploadedFiles.value = Array.from(event.dataTransfer.files);
  }
};

const submitRun = async () => {
  if (uploadedFiles.value.length === 0) return;

  try {
    await noitaStore.submitRun(uploadedFiles.value);
    uploadedFiles.value = [];
    alert("Run submitted successfully!");
  } catch (error) {
    console.error("Error submitting run:", error);
    alert("Error submitting run. Please try again.");
  }
};

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

const clearCache = async () => {
  try {
    await noitaStore.clearCache();
    alert("Cache cleared successfully!");
  } catch (error) {
    console.error("Error clearing cache:", error);
    alert("Error clearing cache. Please try again.");
  }
};

onMounted(() => {
  noitaStore.loadUserData();
});
</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">Noita Submitter</h1>
        <div class="flex-1"></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>

    <!-- Main Content -->
    <div class="container min-w-3/4 mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Left Column: User Ranking -->
        <div class="lg:col-span-1">
          <div class="card bg-base-100 shadow-lg sticky top-8">
            <div class="bg-gradient-to-br from-purple-600 to-purple-400 p-8 text-white rounded-t-2xl">
              <h2 class="text-3xl font-bold">
                <i class="mdi mdi-trophy text-3xl"></i>
                Your Ranking
              </h2>
            </div>
            <div class="card-body p-8">
              <div class="text-center mb-8">
                <p class="text-base text-base-content/70">Player</p>
                <p class="text-4xl font-bold mt-2">{{ userInfo.username }}</p>
              </div>

              <div class="divider"></div>

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

              <div v-else class="space-y-6">
                <div class="text-center">
                  <p class="text-base text-base-content/70 mb-3">Current Rank</p>
                  <RankBadge :rank="userInfo.rank" />
                </div>

                <div class="text-center">
                  <p class="text-base text-base-content/70 mb-2">Total Score</p>
                  <p class="text-3xl font-bold">{{ userInfo.score.toLocaleString() }}</p>
                </div>

                <div class="text-center">
                  <p class="text-base text-base-content/70 mb-2">Objectives Completed</p>
                  <p class="text-3xl font-bold">{{ userInfo.runsSubmitted }}</p>
                </div>

                <div class="text-center">
                  <p class="text-base text-base-content/70 mb-2">Deaths</p>
                  <p class="text-3xl font-bold text-error">{{ userInfo.deathsCount }}</p>
                </div>
              </div>

              <!-- Leaderboard Table -->
              <div class="mt-6">
                <h3 class="font-bold text-lg mb-3">Global Leaderboard</h3>
                <div class="overflow-x-auto">
                  <table class="table table-sm w-full">
                    <thead>
                      <tr>
                        <th>Rank</th>
                        <th>Player</th>
                        <th class="text-right">Score</th>
                        <th class="text-right">Objectives</th>
                        <th class="text-right">Deaths</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="entry in leaderboard" :key="entry.username"
                        :class="{ 'bg-primary/20': entry.username === userInfo.username }">
                        <td class="font-bold">
                          <RankBadge :rank="entry.rank" />
                        </td>
                        <td class="text-sm">
                          {{ entry.username }}
                          <span v-if="entry.username === userInfo.username" class="badge badge-primary badge-sm ml-1">
                            You
                          </span>
                          <span v-if="entry.is_staff" class="badge badge-warning badge-sm ml-1">
                            admin
                          </span>
                        </td>
                        <td class="text-right text-sm font-bold text-primary">{{ entry.total_score.toLocaleString() }}
                        </td>
                        <td class="text-right text-sm">{{ entry.objectives_count }}</td>
                        <td class="text-right text-sm text-error">{{ entry.deaths_count }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <button v-if="userInfo.isStaff" @click="clearCache" class="btn btn-error btn-sm w-full mt-3">
                <i class="mdi mdi-cache-clear mr-1"></i>
                Clear Cache
              </button>
            </div>
          </div>
        </div>

        <!-- Right Column: Upload -->
        <div class="lg:col-span-1">
          <div class="card bg-base-100 shadow-lg">
            <div class="card-body">
              <h2 class="card-title text-2xl mb-6">
                <i class="mdi mdi-cloud-upload text-purple-500 mr-2"></i>
                Submit Your Run
              </h2>

              <!-- Upload Area -->
              <div @dragover="handleDragover" @dragleave="handleDragleave" @drop="handleDrop" :class="[
                'border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer bg-base-200/50 mb-6',
                isDragover ? 'border-primary bg-primary/10' : 'border-base-300 hover:border-primary'
              ]">
                <input type="file" multiple @change="handleFileUpload" class="hidden" id="file-upload"
                  accept="text/plain,text/x-log" />
                <label for="file-upload" class="cursor-pointer flex flex-col items-center gap-3">
                  <i
                    :class="['mdi text-4xl', isDragover ? 'mdi-cloud-check text-primary' : 'mdi-file-upload text-base-content/50']"></i>
                  <div>
                    <p class="font-semibold">Click to upload or drag and drop</p>
                    <p class="text-sm text-base-content/70">The log file <code>polylan_mod_log.txt</code></p>
                  </div>
                </label>
              </div>

              <!-- Uploaded Files List -->
              <div v-if="uploadedFiles.length > 0" class="mb-6">
                <p class="font-semibold mb-3">Selected Files:</p>
                <div class="space-y-2">
                  <div v-for="(file, index) in uploadedFiles" :key="index"
                    class="flex items-center gap-3 bg-base-200 p-3 rounded-lg">
                    <i class="mdi mdi-file text-primary"></i>
                    <div class="flex-1 min-w-0">
                      <p class="font-medium truncate">{{ file.name }}</p>
                      <p class="text-xs text-base-content/70">{{ (file.size / 1024 / 1024).toFixed(2) }} MB</p>
                    </div>
                    <button @click="uploadedFiles.splice(index, 1)" class="btn btn-ghost btn-xs">
                      <i class="mdi mdi-close"></i>
                    </button>
                  </div>
                </div>
              </div>

              <!-- Submit Button -->
              <div class="flex gap-3">
                <label for="file-upload" class="btn btn-outline flex-1">
                  <i class="mdi mdi-folder-open mr-2"></i>
                  Choose Files
                </label>
                <button @click="submitRun" :disabled="uploadedFiles.length === 0 || isUploading"
                  :class="['btn btn-primary flex-1', { 'loading': isUploading }]">
                  <i v-if="!isUploading" class="mdi mdi-send mr-2"></i>
                  {{ isUploading ? 'Submitting...' : 'Submit Run' }}
                </button>
              </div>

              <p class="text-xs text-base-content/70 text-center mt-4">
                Maximum file size: 256 MB per file
              </p>
            </div>
          </div>

          <!-- Objectives Table -->
          <div class="card bg-base-100 shadow-lg mt-8">
            <div class="card-body">
              <h2 class="card-title text-2xl mb-6">
                <i class="mdi mdi-view-list text-purple-500 mr-2"></i>
                Objectives
              </h2>

              <div v-if="objectives.length === 0" class="text-center py-8">
                <p class="text-base-content/70 mb-2">No objectives completed yet</p>
                <p class="text-sm text-base-content/50">Submit your runs to unlock objectives!</p>
              </div>

              <div v-if="objectives.length > 0" class="space-y-4">
                <!-- Search Input -->
                <input :value="columnFilters.find((f) => f.id === 'objectiv_id')?.value ?? ''" @input="
                  (e) => {
                    const target = e.target as HTMLInputElement;
                    table.getColumn('objectiv_id')?.setFilterValue(target.value);
                  }
                " type="text" placeholder="Search objectives..." class="input input-bordered w-full" />

                <!-- Results Summary -->
                <div class="text-sm text-base-content/70">
                  Showing {{ filteredObjectives.length }} of {{ objectives.length }} objectives
                </div>

                <!-- Objectives Table -->
                <div v-if="filteredObjectives.length > 0" class="overflow-x-auto">
                  <table class="table table-zebra w-full">
                    <thead>
                      <tr>
                        <th v-for="header in table.getHeaderGroups()[0]?.headers" :key="header.id" :class="[
                          'cursor-pointer hover:bg-base-300',
                          header.column.columnDef.id === 'objectiv_id' ? 'text-left' : 'text-right',
                        ]" @click="header.column.toggleSorting()">
                          <div class="flex items-center justify-between">
                            <span v-if="header.column.columnDef.id === 'objectiv_id'">
                              {{ header.isPlaceholder ? null : header.column.columnDef.header }}
                            </span>
                            <span v-else class="ml-auto">
                              {{ header.isPlaceholder ? null : header.column.columnDef.header }}
                            </span>
                            <i v-if="header.column.getIsSorted()" :class="[
                              'mdi ml-2',
                              header.column.getIsSorted() === 'desc'
                                ? 'mdi-arrow-down'
                                : 'mdi-arrow-up',
                            ]"></i>
                          </div>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="row in filteredObjectives" :key="row.id">
                        <td v-for="cell in row.getVisibleCells()" :key="cell.id" :class="[
                          cell.column.id === 'objectiv_id'
                            ? 'font-medium'
                            : 'text-right',
                        ]">
                          <template v-if="cell.column.id === 'objectiv_id'">
                            <a :href="`https://noita.wiki.gg/wiki/${row.original.objectiv_id}`" target="_blank">
                              {{ row.original.display_string }}
                              <i class="mdi mdi-open-in-new"></i>
                            </a>
                          </template>
                          <template v-else-if="cell.column.id === 'total_points'">
                            <span :class="row.original.count >= row.original.max_count ? 'text-primary' : 'text-error'">
                              {{ row.original.total_points }} / {{ row.original.points_per_objectiv *
                                row.original.max_count }}
                            </span>
                          </template>
                          <template v-else-if="cell.column.id === 'first_seen_at'">
                            <span :title="formatDate(row.original.first_seen_at)">
                              {{ formatDate(row.original.first_seen_at) }}
                            </span>
                          </template>
                          <template v-else>
                            {{ cell.renderValue() }}
                          </template>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <!-- No Results -->
                <div v-if="filteredObjectives.length === 0" class="text-center py-8">
                  <p class="text-base-content/70">No objectives match your search</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
