<template>
  <div class="error-overview-container">
    <div class="error-overview">

      <div>
        <basic-button icon="clipboard" @click="copyToClipboard">Copy error to clipboard</basic-button>
      </div>

      <div class="error-section">
        <div class="error-label">Type</div>
        <div class="error-value">
          <basic-badge :icon="badgeIcon" :variant="badgeVariant">{{ error.type || 'UNKNOWN' }}</basic-badge>
        </div>
      </div>

      <div class="error-section">
        <div class="error-label">Title</div>
        <div class="error-value">
          {{ error.title || 'No title provided' }}
        </div>
      </div>

      <div class="error-section">
        <div class="error-label">Details</div>
        <div class="error-value">
          {{ error.message || 'No details available' }}
        </div>
      </div>

      <div class="error-section">
        <div class="error-label">Exception</div>
        <div class="error-value">
          {{ error.code || 'N/A' }}
        </div>
      </div>

      <div class="error-section">
        <div class="error-label">Timestamp</div>
        <div class="error-value">
          {{ formattedTimestamp }}
        </div>
      </div>

      <div class="error-section">
        <div class="error-label">User ID</div>
        <div class="error-value">
          {{ error.user_id || 'N/A' }}
        </div>
      </div>

      <div class="error-section" v-if="errorLocation">
        <div class="error-label">File</div>
        <div class="error-value">
          {{ errorLocation }}
        </div>
      </div>

      <div class="error-section" v-if="errorMethod">
        <div class="error-label">Method</div>
        <div class="error-value">
          {{ errorMethod }}
        </div>
      </div>

      <div class="error-section" v-if="error.calculation_job_id">
        <div class="error-label">Calculation Job ID</div>
        <div class="error-value">
          {{ error.calculation_job_id }}
        </div>
      </div>

      <div class="error-section" v-if="error.bulk_operation_id">
        <div class="error-label">Bulk Operation ID</div>
        <div class="error-value">
          {{ error.bulk_operation_id }}
        </div>
      </div>


    </div>
  </div>
</template>

<script>

import BasicBadge from "@/components/UI/BasicBadge.vue";
import {buildDate} from "@/common.js";
import BasicButton from "@/components/UI/BasicButton.vue";
import logger from "@/logger.js";
import {mapStores} from "pinia";
import {useNotificationStore} from "@/store/notification.js";

export default {
  name: "ErrorModalOverview",
  components: {BasicButton, BasicBadge},
  props: {
    isSelected: {
      type: Boolean,
      required: true,
    },
    error: {
      type: Object,
      required: true,
    }
  },
  methods: {
    async copyToClipboard() {
      try {
        await navigator.clipboard.writeText(JSON.stringify(this.error));

        this.notificationStore.addNotification({
              icon: 'Clipboard',
              message: "The error has been copied to clipboard",
              title: "Successful copied to clipboard",
              variant: 'success',
              duration: 4000
            }
        )

      } catch (err) {
        logger.error('Fehler beim Kopieren:', err);

        this.notificationStore.addNotification({
              icon: 'Clipboard',
              message: "Cannot copy to clipboard",
              title: "Not copied to clipboard",
              variant: 'error',
              duration: 4000
            }
        )
      }
    }
  },
  computed: {
    ...mapStores(useNotificationStore),
    badgeIcon() {
      if (this.error.type === "FRONTEND") {
        return "desktop";
      } else if (this.error.type === "BACKEND") {
        return "hardDrives"
      } else if (this.error.type === "BULK") {
        return "stack"
      } else if (this.error.type === "CALCULATION") {
        return "calculator"
      } else
        return ""
    },
    badgeVariant() {
      switch (this.error.type) {
        case "FRONTEND":
          return "primary";
        case "BACKEND":
          return "secondary";
        default:
          return "grey";
      }
    },
    formattedTimestamp() {
      if (!this.error.timestamp) return 'N/A';

      try {
        return buildDate(this.error.timestamp, true);
      } catch (e) {
        return this.error.timestamp;
      }
    },
    errorLocation() {
      if (!this.error.trace || this.error.trace.length === 0) {
        return null;
      }

      const firstTrace = this.error.trace[0];


      return `${firstTrace.file}:${firstTrace.line}`;
    },
    errorMethod() {
      if (!this.error.trace || this.error.trace.length === 0) {
        return null;
      }

      const firstTrace = this.error.trace[0];

      return `${firstTrace.method}`;

    }
  }
}
</script>

<style scoped>

code {
  font-family: Roboto Mono, monospace;
  font-size: 1.2rem;
}

.error-overview-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.error-overview {
  overflow: auto;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
  min-height: 0;
}

.error-section {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: center;
  padding: 0.8rem;
  gap: 0.6rem;
  border-bottom: .1rem solid #E3EDFF
}

.error-label {
  font-weight: 500;
  font-size: 1.4rem;
  align-self: start;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.error-value {
  color: #6b7280;
  font-size: 1.4rem;
  word-break: break-word;
}

.error-section:last-child {
  border-bottom: none;
}

.error-code code {
  color: #c7254e;
  font-size: 1.3rem;
}

</style>