<template>
  <div class="dashboard-container">
    <!-- Total Calculations -->
    <box>
      <div class="dashboard-box">
        <div class="dashboard-box-icon dashboard-box-icon--primary">

          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256">
            <polygon points="32 80 128 136 224 80 128 24 32 80" fill="currentColor" opacity="0.2"/>
            <polygon points="32 128 128 184 224 128 128 72 32 128" fill="currentColor" opacity="0.2"/>
            <polygon points="32 176 128 232 224 176 128 120 32 176" fill="currentColor" opacity="0.2"/>
            <rect width="256" height="256" fill="none"/><polyline points="32 176 128 232 224 176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="32 128 128 184 224 128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="32 80 128 136 224 80 128 24 32 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>

        </div>
        <div class="dashboard-box-info">
          <div v-if="completed !== null" class="dashboard-box-number">{{ completed }}</div>
          <div v-else class="dashboard-box-number"><spinner size="s"/></div>
          <div class="dashboard-box-number-text">Completed</div>
        </div>
      </div>
    </box>

    <!-- Draft Calculations -->
    <box>
      <div class="dashboard-box">
        <div class="dashboard-box-icon dashboard-box-icon--primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24">
            <rect x="9" y="-1" width="8" height="24" fill="currentcolor" opacity="0.2" transform="rotate(45 13 11)"/>
            <path d="M14.078 4.232l-12.64 12.639-1.438 7.129 7.127-1.438 12.641-12.64-5.69-5.69zm-10.369 14.893l-.85-.85 11.141-11.125.849.849-11.14 11.126zm2.008 2.008l-.85-.85 11.141-11.125.85.85-11.141 11.125zm18.283-15.444l-2.816 2.818-5.691-5.691 2.816-2.816 5.691 5.689z"/></svg>
        </div>
        <div class="dashboard-box-info">
          <div v-if="drafts !== null" class="dashboard-box-number">{{ drafts }}</div>
          <div v-else class="dashboard-box-number"><spinner size="s"/></div>
          <div class="dashboard-box-number-text">Drafts</div>
        </div>
      </div>
    </box>

    <!-- Running Calculations -->
    <box>
      <div class="dashboard-box">
        <div class="dashboard-box-icon dashboard-box-icon--primary">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
            <circle cx="14" cy="14" r="10" fill="currentcolor" opacity="0.2"/>
            <path fill="currentcolor" d="M15.91 13.34l2.636-4.026-.454-.406-3.673 3.099c-.675-.138-1.402.068-1.894.618-.736.823-.665 2.088.159 2.824.824.736 2.088.665 2.824-.159.492-.55.615-1.295.402-1.95zm-3.91-10.646v-2.694h4v2.694c-1.439-.243-2.592-.238-4 0zm8.851 2.064l1.407-1.407 1.414 1.414-1.321 1.321c-.462-.484-.964-.927-1.5-1.328zm-18.851 4.242h8v2h-8v-2zm-2 4h8v2h-8v-2zm3 4h7v2h-7v-2zm21-3c0 5.523-4.477 10-10 10-2.79 0-5.3-1.155-7.111-3h3.28c1.138.631 2.439 1 3.831 1 4.411 0 8-3.589 8-8s-3.589-8-8-8c-1.392 0-2.693.369-3.831 1h-3.28c1.811-1.845 4.321-3 7.111-3 5.523 0 10 4.477 10 10z"/>
          </svg>        </div>
        <div class="dashboard-box-info">
          <div v-if="running !== null" class="dashboard-box-number">{{ running }}</div>
          <div v-else class="dashboard-box-number"><spinner size="s"/></div>
          <div class="dashboard-box-number-text">Running</div>
        </div>
      </div>
    </box>

    <!-- Failed Calculations -->
    <box>
      <div class="dashboard-box">
        <div class="dashboard-box-icon dashboard-box-icon--primary">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 4L44 40H4L24 4Z" fill="currentColor" opacity="0.2"/>
            <path d="M24 4L44 40H4L24 4Z" stroke="currentColor" stroke-width="3" stroke-linejoin="round" fill="none"/>
            <path d="M24 18V28" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
            <circle cx="24" cy="34" r="1.5" fill="currentColor"/>
          </svg>
        </div>
        <div class="dashboard-box-info">
          <div v-if="failed !== null" class="dashboard-box-number">{{ failed }}</div>
          <div v-else class="dashboard-box-number"><spinner size="s"/></div>
          <div class="dashboard-box-number-text">Failed</div>
        </div>
      </div>
    </box>
  </div>
</template>

<script>
import Box from "@/components/UI/Box.vue";
import { PhStack, PhPencilSimple, PhHourglassMedium, PhWarning } from "@phosphor-icons/vue";
import {useDashboardStore} from "@/store/dashboard.js";
import {mapStores} from "pinia";
import {usePremiseStore} from "@/store/premise.js";
import {useActiveUserStore} from "@/store/activeuser.js";
import Spinner from "@/components/UI/Spinner.vue";

export default {
  name: "TheDashboard",
  components: {
    Spinner,
    PhStack,
    PhPencilSimple,
    PhHourglassMedium,
    PhWarning,
    Box
  },
  computed: {
    ...mapStores(useDashboardStore),
    completed() {
      return this.dashboardStore.completed
    },
    drafts() {
      return this.dashboardStore.drafts
    },
    running() {
      return this.dashboardStore.running
    },
    failed() {
      return this.dashboardStore.failed
    }
  },
  created() {
    this.dashboardStore.load();
  },
  mounted() {
    this.dashboardStore.startPulling();
  },
  unmounted() {
    this.dashboardStore.stopPulling();
  }
}
</script>

<style scoped>
.dashboard-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin: 1.6rem 0 3.6rem 0;
}

.dashboard-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 2.4rem;
  gap: 1.6rem;
}

.dashboard-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-box-more-link {
  color: #002F54;
  font-weight: 400;
  font-size: 1.2rem;
  text-decoration: none;
  text-transform: none;
}

.dashboard-box-icon--primary {
  color: #002F54;
}

.dashboard-box-icon--draft {
  color: #6b7280;
}

.dashboard-box-icon--running {
  color: #3b82f6;
}

.dashboard-box-icon--error {
  color: #BC2B72;
}

.dashboard-box-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dashboard-box-number {
  font-weight: 500;
  color: #002F54;
  font-size: 3.2rem;
  line-height: 1;
}

.dashboard-box-number-text {
  font-weight: 400;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dashboard-container {
    grid-template-columns: 1fr;
  }

  .dashboard-box {
    padding: 1.6rem 2rem;
  }

  .dashboard-box-number {
    font-size: 2.8rem;
  }
}
</style>