<script setup>
import Button from "primevue/button";
import Message from "primevue/message";
import Tag from "primevue/tag";
import { useToast } from "primevue/usetoast";
import { computed, onMounted, ref } from "vue";

import { api, ensureCsrf } from "../../services/api.js";

const toast = useToast();

const loading = ref(false);
const error = ref("");
const report = ref(null);

function severityFor(status) {
  if (status === "ok") return "success";
  if (status === "warn") return "warn";
  return "danger";
}

function statusLabel(status) {
  if (status === "ok") return "OK";
  if (status === "warn") return "Attention";
  return "Blocked";
}

function overallSeverity(overall) {
  return severityFor(overall ?? "warn");
}

function overallLabel(overall) {
  if (overall === "ok") return "All checks passed.";
  if (overall === "warn") return "Some items need attention.";
  return "Blocking issues detected — fix CLI steps below.";
}

const overall = computed(() => report.value?.overall ?? null);
const checkedAt = computed(() => report.value?.checked_at ?? "");

async function load() {
  loading.value = true;
  error.value = "";
  try {
    await ensureCsrf();
    const { data } = await api.get("/api/superadmin/installation-health");
    report.value = data?.data ?? null;
  } catch (e) {
    error.value =
      e?.response?.data?.message ??
      "Could not load installation health. Forbidden or server error.";
    report.value = null;
  } finally {
    loading.value = false;
  }
}

async function copyText(text, kind) {
  try {
    await navigator.clipboard.writeText(text);
    toast.add({
      severity: "success",
      summary: "Copied",
      detail: `${kind} copied to clipboard.`,
      life: 2500,
    });
  } catch {
    toast.add({
      severity: "error",
      summary: "Copy failed",
      detail: "Clipboard API unavailable in this browser context.",
      life: 4500,
    });
  }
}

onMounted(load);
</script>

<template>
  <div>
    <h1 class="title-h5 mb-4">Installation health</h1>
    <p class="body-small text-surface-600 dark:text-surface-400 mb-6">
      Read-only checklist for this instance: database tables, seed data,
      Customers config vs runtime toggles, and shell commands to resolve gaps.
      Migrations and seeding always run via
      <code class="text-xs px-1 rounded bg-surface-100 dark:bg-surface-800"
        >php artisan</code
      >
      on the server — not from the browser.
    </p>

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

    <div class="flex flex-wrap items-start justify-between gap-3 mb-6">
      <div
        v-if="overall"
        class="flex flex-wrap items-center gap-3 rounded-lg border px-4 py-3"
        :class="{
          'border-green-300 bg-green-50 dark:border-green-800 dark:bg-green-950/40':
            overall === 'ok',
          'border-amber-300 bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/30':
            overall === 'warn',
          'border-red-300 bg-red-50 dark:border-red-900/40 dark:bg-red-950/30':
            overall === 'fail',
        }"
      >
        <span
          class="inline-flex h-3 w-3 shrink-0 rounded-full"
          :class="{
            'bg-green-500': overall === 'ok',
            'bg-amber-500': overall === 'warn',
            'bg-red-500': overall === 'fail',
          }"
          aria-hidden="true"
        />
        <Tag :severity="overallSeverity(overall)" :value="statusLabel(overall)" />
        <span class="body-small text-surface-700 dark:text-surface-200">
          {{ overallLabel(overall) }}
        </span>
      </div>
      <Button
        label="Refresh checks"
        icon="pi pi-refresh"
        severity="secondary"
        outlined
        :loading="loading"
        @click="load"
      />
    </div>

    <p v-if="checkedAt && !loading" class="text-xs text-surface-500 mb-6">
      Last checked {{ checkedAt }}
    </p>

    <div class="flex flex-col gap-6">
      <section
        v-for="group in report?.groups ?? []"
        :key="group.id"
        class="rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 overflow-hidden"
      >
        <div
          class="px-4 py-3 border-b border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-950/60"
        >
          <h2 class="font-semibold text-surface-800 dark:text-surface-100">
            {{ group.title }}
          </h2>
        </div>
        <ul class="divide-y divide-surface-200 dark:divide-surface-700">
          <li
            v-for="step in group.steps"
            :key="step.id"
            class="px-4 py-4 flex flex-col gap-2 sm:flex-row sm:gap-6 sm:items-start"
          >
            <span
              class="mt-1 inline-flex h-2.5 w-2.5 shrink-0 rounded-full sm:mt-1.5"
              :class="{
                'bg-green-500': step.status === 'ok',
                'bg-amber-500': step.status === 'warn',
                'bg-red-500': step.status === 'fail',
              }"
              :title="statusLabel(step.status)"
            />
            <div class="min-w-0 flex-1">
              <div class="flex flex-wrap items-center gap-2 mb-1">
                <span class="font-medium text-surface-800 dark:text-surface-100">
                  {{ step.label }}
                </span>
                <Tag
                  :severity="severityFor(step.status)"
                  :value="statusLabel(step.status)"
                  class="text-xs"
                />
              </div>
              <p class="body-small text-surface-600 dark:text-surface-400">
                {{ step.detail }}
              </p>
              <div v-if="step.fix_commands?.length" class="mt-3 flex flex-wrap gap-x-4 gap-y-2">
                <div
                  v-for="cmd in step.fix_commands"
                  :key="`${step.id}-${cmd}`"
                  class="flex items-center gap-1 min-w-0 max-w-full"
                >
                  <code
                    class="text-xs px-2 py-1.5 rounded bg-surface-100 dark:bg-surface-800 break-all flex-1 min-w-0"
                  >
                    {{ cmd }}
                  </code>
                  <Button
                    icon="pi pi-copy"
                    severity="secondary"
                    text
                    rounded
                    size="small"
                    v-tooltip.bottom="'Copy command'"
                    aria-label="Copy command"
                    @click="copyText(cmd, 'Command')"
                  />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>
