<script setup lang="ts">
import Button from "primevue/button";
import Card from "primevue/card";
import Message from "primevue/message";
import Skeleton from "primevue/skeleton";
import Tag from "primevue/tag";
import type { Signal } from "~/types";

definePageMeta({
  middleware: "auth"
});

type SignalDetails = Signal & {
  settlement?: {
    explanation: string;
  } | null;
};

const route = useRoute();
const { formatDateTime, browserTimeZone } = useBrowserDateTime();
const { copyText } = useClipboard();
const signal = ref<SignalDetails | null>(null);
const loadError = ref("");

const botName = computed(() => signal.value?.rawPayload?.botName || null);
const botKey = computed(() => signal.value?.rawPayload?.botKey || null);
const forecastImageUrl = computed(() => signal.value?.rawPayload?.forecastImageUrl || null);
const displayForecast = computed(() => signal.value?.forecast || signal.value?.rawPayload?.forecast || "");
const forecastImageFailed = ref(false);
const isInactiveForecast = computed(() => signal.value?.rawPayload?.forecastInactive === true);
const copiedMatch = ref(false);
let copiedMatchResetTimeout: ReturnType<typeof setTimeout> | null = null;

const statusLabels: Record<Signal["status"], string> = {
  pending: "LIVE",
  win: "WIN",
  lose: "LOSE",
  void: "VOID",
  manual_review: "CHECK",
  unpublished: "OFF"
};

const displayStatusLabel = computed(() => {
  if (!signal.value) {
    return "";
  }

  if (signal.value.status === "pending" && isInactiveForecast.value) {
    return "OFF";
  }

  return statusLabels[signal.value.status];
});

const statusSeverity = computed(() => {
  if (!signal.value) {
    return "secondary";
  }

  if (signal.value.status === "pending" && isInactiveForecast.value) {
    return "secondary";
  }

  switch (signal.value.status) {
    case "win":
      return "success";
    case "lose":
      return "danger";
    case "manual_review":
      return "warn";
    case "pending":
      return "info";
    default:
      return "secondary";
  }
});

const formattedSignalTime = computed(() => {
  return signal.value ? formatDateTime(signal.value.signalTime) : ""
});
const formattedOdds = computed(() => (signal.value ? signal.value.odds.toFixed(2) : ""));
const formattedLineValue = computed(() => {
  if (!signal.value || signal.value.lineValue === null) {
    return null;
  }

  return String(signal.value.lineValue);
});

const shouldShowForecastImage = computed(() => Boolean(forecastImageUrl.value) && !forecastImageFailed.value);

const detailItems = computed(() => {
  if (!signal.value) {
    return [];
  }

  return [
    { label: "Статус", value: displayStatusLabel.value },
    // { label: "Источник", value: signal.value.sourceType },
    { label: "Время сигнала", value: formattedSignalTime.value },
    { label: "Часовой пояс", value: browserTimeZone.value ?? "UTC" },
    { label: "Коэффициент", value: formattedOdds.value },
    { label: "Линия", value: formattedLineValue.value ?? "Не указана" }
  ];
});

onMounted(async () => {
  try {
    signal.value = await useApi<SignalDetails>(`/signals/${route.params.id}`);
    loadError.value = "";
  } catch (error) {
    loadError.value = error instanceof Error ? error.message : "Не удалось загрузить сигнал";
  }
});

watch(
  () => signal.value?.rawPayload?.forecastImageUrl,
  () => {
    forecastImageFailed.value = false;
  }
);

const copyMatchName = async () => {
  const copied = await copyText(`${signal.value?.homeTeam ?? ""} - ${signal.value?.awayTeam ?? ""}`);
  if (!copied) {
    return;
  }
  copiedMatch.value = true;

  if (copiedMatchResetTimeout) {
    clearTimeout(copiedMatchResetTimeout);
  }

  copiedMatchResetTimeout = setTimeout(() => {
    copiedMatch.value = false;
  }, 1600);
};
</script>

<template>
  <section class="sakai-page">
    <div class="sakai-hero-card">
      <div>
        <div class="sakai-page-back">
          <NuxtLink :to="botKey ? `/bots/${botKey}` : '/'">
            <Button
              text
              severity="secondary"
              icon="pi pi-arrow-left"
              :label="botKey ? 'Назад к сигналам' : 'На главную'"
            />
          </NuxtLink>
        </div>
        <span class="sakai-section-label">Детали сигнала</span>
        <h2>{{ signal ? `${signal.homeTeam} - ${signal.awayTeam}` : "Загрузка сигнала" }}</h2>
      </div>
      <div v-if="signal" class="sakai-hero-card__tags">
        <Tag class="rounded" :value="signal.sportType" severity="contrast" />
        <Tag class="rounded" :value="signal.leagueName" severity="info" />
      </div>
    </div>

    <Message v-if="loadError" severity="error" :closable="false">{{ loadError }}</Message>

    <div v-else-if="!signal" class="sakai-signal-detail-loading">
      <Card class="sakai-signal-panel">
        <template #content>
          <div class="sakai-signal-detail-skeleton">
            <Skeleton width="30%" height="1rem" />
            <Skeleton width="65%" height="2rem" />
            <Skeleton width="45%" height="1.2rem" />
            <Skeleton width="100%" height="16rem" />
          </div>
        </template>
      </Card>
    </div>

    <div v-else class="sakai-signal-layout sakai-signal-layout--detail">
      <div class="sakai-signal-detail-main">
        <Card class="sakai-signal-panel">
          <template #content>
            <article class="sakai-signal-card sakai-signal-card--detail">
              <div class="sakai-signal-card__main">
                <div class="sakai-signal-card__meta">
                  <span>
                    <i class="pi pi-calendar" />
                    Сигнал: {{ formattedSignalTime }}
                  </span>
                  <span>
                    <i class="pi pi-flag" />
                    {{ signal.leagueName }}
                  </span>
                  <span v-if="botName">
                    <AppLogo size="14px" />
                    {{ botName }}
                  </span>
                </div>

                <div class="sakai-signal-card__teams">
                  <strong>{{ signal.homeTeam }}</strong>
                  <strong>{{ signal.awayTeam }}</strong>
                </div>

                <div class="sakai-signal-card__actions">
                  <button
                    type="button"
                    class="sakai-copy-button sakai-copy-button--wide"
                    :aria-label="`Скопировать матч ${signal.homeTeam} - ${signal.awayTeam}`"
                    @click="copyMatchName"
                  >
                    <i class="pi" :class="copiedMatch ? 'pi-check' : 'pi-copy'" aria-hidden="true" />
                    <span>{{ copiedMatch ? "Скопировано" : "Скопировать матч" }}</span>
                  </button>
                </div>

                <div class="sakai-signal-card__market">
                  <span>{{ signal.marketType }}</span>
                  <span>{{ signal.selection }}</span>
                  <span v-if="formattedLineValue">{{ formattedLineValue }}</span>
                  <span>{{ signal.sourceType }}</span>
                </div>

                <p class="sakai-signal-detail__timezone">
                  Время показано в часовом поясе: {{ browserTimeZone ?? "UTC" }}
                </p>
              </div>

              <div class="sakai-signal-card__side sakai-signal-card__side--detail">
                <div v-if="forecastImageUrl || displayForecast" class="sakai-signal-card__forecast">
                  <img
                    v-if="shouldShowForecastImage"
                    :src="forecastImageUrl"
                    :alt="displayForecast || `${signal.homeTeam} - ${signal.awayTeam}`"
                    class="sakai-signal-card__forecast-image sakai-signal-card__forecast-image--detail"
                    loading="lazy"
                    @error="forecastImageFailed = true"
                  >
                  <p v-else-if="displayForecast" class="sakai-signal-card__forecast-text">
                    {{ displayForecast }}
                  </p>
                  <p v-else class="sakai-signal-card__forecast-text sakai-signal-card__forecast-text--empty">
                    Прогноз недоступен
                  </p>
                </div>

                <div class="sakai-signal-detail__status-row">
                  <Tag class="rounded" :value="displayStatusLabel" :severity="statusSeverity" />
                  <div class="sakai-signal-card__odds">{{ formattedOdds }}</div>
                </div>
              </div>
            </article>
          </template>
        </Card>
      </div>

      <div class="sakai-signal-detail-aside">
        <Card class="sakai-summary-panel sakai-summary-panel--sticky">
          <template #title>Сводка</template>
          <template #content>
            <div class="sakai-signal-detail-grid">
              <div v-for="item in detailItems" :key="item.label" class="sakai-signal-detail-item">
                <span>{{ item.label }}</span>
                <strong>{{ item.value }}</strong>
              </div>
            </div>
          </template>
        </Card>
      </div>
    </div>
  </section>
</template>
