<template>
  <div class="certification-details-dialog" v-if="show">
    <Dialog :show="show" :dialogName="dialogName">
      <template #header>
        <p class="title">{{ $t('signatures.certificateViewerDialog.title') }}</p>
        <p class="desc">{{ $t('signatures.certificateViewerDialog.title') }}</p>
      </template>

      <div class="container">
        <div class="left">
          <p v-for="(signer, index) in signature.signerList" :key="index"
            :class="{ 'highlighted': selectedSignerIndex === index }"
            @focus="selectedSignerIndex = index"
            @blur="selectedSignerIndex = 0"
            tabindex="-1">
            {{ signer.certificateList[0].subject.CN }}
          </p>
        </div>

        <div class="right">
          <div class="tabs">
            <div @click="activePanel = 1" :class="{ active: activePanel === 1 }">{{ $t('signatures.certificateViewerDialog.abstracts') }}</div>
            <div @click="activePanel = 2" :class="{ active: activePanel === 2 }">{{ $t('signatures.certificateViewerDialog.details') }}</div>
            <div @click="activePanel = 3" :class="{ active: activePanel === 3 }">{{ $t('signatures.certificateViewerDialog.trust') }}</div>
          </div>
          <div class="panel">
            <div class="summary">
              <div class="title">{{ activePanel === 3 ? $t('signatures.certificateViewerDialog.sign') : $t('signatures.certificateViewerDialog.summary') }}</div>
              <div class="info">
                <div v-show="activePanel === 1" class="abstracts">
                  <p>{{ $t('signatures.certificateViewerDialog.issuedTo') }} <span>{{ selectedSigner.issuer.CN }} &lt;{{ selectedSigner.issuer.email }}&gt;</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.issuer') }} <span>{{ selectedSigner.issuer.CN }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.validFrom') }} <span>{{ formatDate(selectedSigner.validDateStart) }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.validTo') }} <span>{{ formatDate(selectedSigner.validDateEnd) }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.intendedUsage') }} <span>Digital Signature, Non-Repudiation</span></p>
                </div>

                <div v-show="activePanel === 2" class="details">
                  <p>{{ $t('signatures.certificateViewerDialog.version') }} <span>{{ selectedSigner.version }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.algorithm') }} <span>{{ selectedSigner.signAlgOidType }} ({{ selectedSigner.signAlgOid }})</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.subject') }} <span>C={{ selectedSigner.subject.C }},ST={{ selectedSigner.subject.ST }},L={{ selectedSigner.subject.L }},O={{ selectedSigner.subject.O }},OU={{ selectedSigner.subject.OU }},CN={{ selectedSigner.subject.CN }},emailAddress={{ selectedSigner.subject.email }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.issuer') }} <span>C={{ selectedSigner.issuer.C }},ST={{ selectedSigner.issuer.ST }},L={{ selectedSigner.issuer.L }},O={{ selectedSigner.issuer.O }},OU={{ selectedSigner.issuer.OU }},CN={{ selectedSigner.issuer.CN }},emailAddress={{ selectedSigner.issuer.email }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.serialNumber') }} <span>{{ selectedSigner.serialNumber }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.validFrom') }} <span>{{ formatDate(selectedSigner.validDateStart) }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.validTo') }} <span>{{ formatDate(selectedSigner.validDateEnd) }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.certificatePolicy') }} <span>{{ selectedSigner.certificatePolicies[0] }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.crlDistributionPoints') }} <span>{{ selectedSigner.CRLDistributionPoints }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.issuerInfoAccess') }} <span v-for="(info, index) in selectedSigner.sccessInfo" :key="index">{{ info.Key }}={{ info.AccessInfo }}{{ index === selectedSigner.sccessInfo.length - 1 ? '' : ',' }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.issuerKeyIdentifier') }} <span>{{ selectedSigner.authorityKeyIdentifier }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.subjectKeyIdentifier') }} <span>{{ selectedSigner.subjectKeyIdentifier }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.basicConstraints') }} <span>{{ selectedSigner.basicConstraints }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.keyUsage') }} <span>{{ selectedSigner.keyUsage }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.publicKey') }} <span>{{ selectedSigner.publicKey }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.X509') }} <span>{{ selectedSigner.X509Data }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.SHA1Digest') }} <span>{{ selectedSigner.SHA1Digest }}</span></p>
                  <p>{{ $t('signatures.certificateViewerDialog.MD5Digest') }} <span>{{ selectedSigner.MD5Digest }}</span></p>
                </div>

                <div v-show="activePanel === 3" class="trust">
                  <p>
                    <SuccessIcon v-if="selectedSigner.isTrusted" />
                    <FailedIcon v-else />
                    <span>{{ $t('signatures.certificateViewerDialog.sign') }}</span>
                  </p>
                  <p>
                    <SuccessIcon v-if="selectedSigner.isTrusted" />
                    <FailedIcon v-else />
                    <span>{{ $t('signatures.certificateViewerDialog.certify') }}</span>
                  </p>
                </div>
              </div>
              <div v-show="activePanel === 3" class="trust-button">
                <div :class="selectedSigner.isTrusted && 'disabled'"  @click="addToTrustedCertificateLists">{{ $t('signatures.certificateViewerDialog.addToTrust') }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="rect-button blue" @click="close">{{ $t('signatures.certificateViewerDialog.done') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'

const dialogName = 'certificateViewerDialog'

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const show = computed(() => useViewer.isElementOpen(dialogName))
const signature = computed(() => useDocument.getSelectedSignature)
const selectedSigner = computed(() => signature.value.signerList[0].certificateList[selectedSignerIndex.value])

const activePanel = ref(1)
const selectedSignerIndex = ref(0)

const close = () => {
  useViewer.closeElement(dialogName)
}

const formatDate = (dateStr) => {
    // const isoString = dateStr.replace(/Z$/, '')

    // const utcDate = new Date(isoString)
    // const localDate = new Date(utcDate.getTime() + (utcDate.getTimezoneOffset() * 60000))

    // const year = localDate.getFullYear()
    // const month = String(localDate.getMonth() + 1).padStart(2, '0')
    // const day = String(localDate.getDate()).padStart(2, '0')
    // const hours = String(localDate.getHours()).padStart(2, '0')
    // const minutes = String(localDate.getMinutes()).padStart(2, '0')
    // const seconds = String(localDate.getSeconds()).padStart(2, '0')

    // const timeZoneOffset = '+0800'
    // return `${year}/${month}/${day} ${hours}:${minutes}:${seconds} ${timeZoneOffset}`

    let year = dateStr.slice(0, 4)
    let month = dateStr.slice(4, 6)
    let day = dateStr.slice(6, 8)
    let hours = dateStr.slice(8, 10)
    let minutes = dateStr.slice(10, 12)
    let seconds = dateStr.slice(12, 14)
    
    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
}

const addToTrustedCertificateLists = () => {
  if (selectedSigner.value.isTrusted) return
  const trustedCertificatesBuffer = core.addToTrustedCertificateLists(selectedSignerIndex.value)
  selectedSigner.value.isTrusted = !!trustedCertificatesBuffer
  if (trustedCertificatesBuffer) {
    useDocument.setTrustedCertificateLists(trustedCertificatesBuffer)
  }
}
</script>

<style lang="scss">
.certification-details-dialog {

  .dialog-container {
    display: flex;
    flex-direction: column;
    margin: 64px 20px 20px;
    padding: 20px;
    width: 100%;
    height: 100%;
    max-height: min(575px, calc(100% - 84px));
    max-width: min(870px, calc(100% - 40px));
    min-height: 405px;
    border-radius: 0;

    header {
      
      .title {
        font-size: 16px;
        line-height: 24px;
        color: var(--c-right-side-header-text);
      }

      .desc {
        margin-top: 20px;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
      }
    }

    main {
      padding: 32px 0;
      margin: 0;
      height: calc(100% - 92px);
    }

    footer {
      .rect-button {
        border-radius: 4px;
      }
    }
  }

  .container {
    display: flex;
    height: 100%;

    .left {
      margin-right: 32px;
      padding: 2px;
      width: 246px;
      border: 1px solid var(--c-header-border);

      p {
        padding: 4px;
        font-size: 14px;
        line-height: 16px;
        color: var(--c-black-text);
        cursor: default;

        &.highlighted {
          background: #1460F3;
          color: white;
        }
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      flex: 1;
      border: 1px solid var(--c-header-border);
      max-width: 76%;

      .tabs {
        display: flex;
        justify-content: center;
        border-bottom: 1px solid var(--c-header-border);

        > div {
          margin: 10px 12px -1px 12px;
          padding-bottom: 4px;
          font-size: 16px;
          line-height: 24px;
          cursor: pointer;

          &.active {
            color: var(--c-right-side-header-text);
            font-weight: 700;
            border-bottom: 2px solid #4982E6;
          }
        }
      }

      .panel {
        height: calc(100% - 40px);
        padding-top: 30px;
        padding: 20px;

        .summary {
          display: flex;
          flex-direction: column;
          height: 100%;

          .title {
            position: relative;
            z-index: 1;
            top: 8px;
            margin: 0 auto 0 16px;
            padding: 0 4px;
            display: flex;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            background-color: var(--c-dialog-bg);
            color: var(--c-black-text);
          }

          .info {
            position: relative;
            display: flex;
            padding: 20px 20px 16px;
            border: 1px solid var(--c-header-border);
            overflow-y: auto;
            
            p {
              font-size: 14px;
              line-height: 20px;

              & + p {
                margin-top: 12px;
              }
            }

            span {
              color: var(--c-side-annotation-text);
            }

            .details {
              overflow-y: auto;
              max-height: 564px;

              p {
                color: var(--c-black-text);
                word-break: break-all;
              }
            }

            .trust p {
              display: flex;
              align-items: center;
              
              span {
                color: var(--c-right-side-header-text);
              }

              svg {
                max-width: 20px;
                width: 20px;
                height: 20px;
                margin-right: 4px;
              }
            }
          }
        }

        .trust-button {
          margin-top: 24px;
          text-align: right;

          > div {
            padding: 0 12px;
            display: inline-block;
            height: 32px;
            border: 1px solid var(--c-header-border);
            border-radius: 1px;
            background: var(--c-header-button-active);
            cursor: pointer;
            font-size: 14px;
            line-height: 32px;
            color: var(--c-right-side-header-text);

            &:hover {
              background: var(--c-popup-bg-hover);
              color: white;
            }

            &.disabled {
              cursor: not-allowed;
              background-color: var(--c-header-border);
              color: var(--c-right-side-header-text);
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 767.9px){
  .certification-details-dialog .container {

    .left {
      display: none;
    }

    .right {
      max-width: 100%;

      .panel {
        padding: 10px;
      }
    }
  }
}
</style>
