<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import {
  GnBadge,
  GnButton,
  GnCheckbox,
  GnInput,
  GnModal,
  GnTabs,
  GnTextarea
} from "gnexus-ui-kit/vue";

import { api } from "./api";

const tabs = [
  { id: "secrets", label: "Secrets" },
  { id: "history", label: "History" },
  { id: "audit", label: "Audit" },
  { id: "tokens", label: "Tokens" },
  { id: "settings", label: "Settings" }
];

const activeTab = ref("secrets");
const me = ref(null);
const loading = ref(false);
const error = ref("");
const secrets = ref([]);
const total = ref(0);
const query = ref("");
const selected = ref(null);
const revealed = ref(null);
const versions = ref([]);
const auditEvents = ref([]);
const tokens = ref([]);
const newToken = ref(null);
const showDeleteConfirm = ref(false);

const form = reactive({
  title: "",
  purpose: "",
  category: "",
  source: "",
  notes: "",
  tags: "",
  allow_ui: true,
  allow_rest_api: true,
  allow_mcp: false,
  fieldsText: "username=\npassword=*"
});

const visibleFields = computed(() => selected.value?.fields || []);
const activeSecrets = computed(() => secrets.value.filter((secret) => !secret.archived).length);
const mcpSecrets = computed(() => secrets.value.filter((secret) => secret.allow_mcp).length);

function parseFields() {
  return form.fieldsText
    .split("\n")
    .map((line, index) => {
      const [rawName, ...rest] = line.split("=");
      const name = rawName.trim();
      if (!name) return null;
      const rawValue = rest.join("=");
      const encrypted = rawValue.startsWith("*");
      return {
        name,
        value: encrypted ? rawValue.slice(1) : rawValue,
        encrypted,
        masked: encrypted,
        position: index
      };
    })
    .filter(Boolean);
}

async function loadSecrets() {
  loading.value = true;
  error.value = "";
  try {
    const payload = await api.listSecrets({ q: query.value, limit: 50 });
    secrets.value = payload.items;
    total.value = payload.total;
    selected.value = secrets.value[0] || null;
    revealed.value = null;
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
}

async function createSecret() {
  await api.createSecret({
    title: form.title,
    purpose: form.purpose || null,
    category: form.category || null,
    source: form.source || null,
    notes: form.notes || null,
    tags: form.tags.split(",").map((tag) => tag.trim()).filter(Boolean),
    allow_ui: form.allow_ui,
    allow_rest_api: form.allow_rest_api,
    allow_mcp: form.allow_mcp,
    fields: parseFields()
  });
  form.title = "";
  form.purpose = "";
  form.category = "";
  form.source = "";
  form.notes = "";
  form.tags = "";
  await loadSecrets();
}

async function reveal(secret) {
  revealed.value = await api.revealSecret(secret.id);
}

async function copyField(secret, field) {
  const payload = revealed.value?.id === secret.id ? revealed.value : await api.revealSecret(secret.id);
  const full = payload.fields.find((item) => item.name === field.name);
  if (full?.value) {
    await navigator.clipboard.writeText(full.value);
  }
}

async function loadVersions(secret) {
  selected.value = secret;
  activeTab.value = "history";
  versions.value = await api.versions(secret.id);
}

async function loadAudit() {
  activeTab.value = "audit";
  auditEvents.value = (await api.audit()).items;
}

async function loadTokens() {
  activeTab.value = "tokens";
  tokens.value = await api.tokens();
}

async function createApiToken() {
  newToken.value = await api.createToken({
    name: "MCP client",
    scopes: ["read", "reveal", "write", "mcp"]
  });
  await loadTokens();
}

async function exportData() {
  const payload = await api.exportData();
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "gnexus-creds-export.json";
  link.click();
  URL.revokeObjectURL(url);
}

async function deleteAllData() {
  await api.deleteAccountData();
  showDeleteConfirm.value = false;
  await loadSecrets();
}

onMounted(async () => {
  try {
    me.value = await api.me();
    await loadSecrets();
  } catch {
    window.location.href = "/auth/login";
  }
});
</script>

<template>
  <main class="creds-app">
    <header class="app-header">
      <div>
        <p class="eyebrow">Personal secret storage</p>
        <h1>gnexus-creds</h1>
      </div>
      <div class="session-box">
        <span>{{ me?.email || "Session loading" }}</span>
        <GnBadge :tone="me?.role === 'admin' ? 'warning' : 'info'">{{ me?.role || "user" }}</GnBadge>
      </div>
    </header>

    <nav class="app-tabs" aria-label="Main sections">
      <GnTabs v-model="activeTab" :items="tabs" />
    </nav>

    <section class="metrics-row" aria-label="Overview">
      <div class="metric">
        <span>Total</span>
        <strong>{{ total }}</strong>
      </div>
      <div class="metric">
        <span>Active</span>
        <strong>{{ activeSecrets }}</strong>
      </div>
      <div class="metric">
        <span>MCP</span>
        <strong>{{ mcpSecrets }}</strong>
      </div>
      <div class="metric wide">
        <span>Search</span>
        <div class="search-line">
          <GnInput v-model="query" label="" placeholder="service, login, tag, source" />
          <GnButton variant="primary" @click="loadSecrets">Search</GnButton>
        </div>
      </div>
    </section>

    <section v-if="activeTab === 'secrets'" class="workspace-grid">
      <aside class="panel list-panel">
        <p v-if="error" class="error">{{ error }}</p>
        <div class="panel-title">
          <h2>Secrets</h2>
          <span>{{ loading ? "Loading" : `${total} records` }}</span>
        </div>
        <button
          v-for="secret in secrets"
          :key="secret.id"
          class="secret-row"
          :class="{ selected: selected?.id === secret.id }"
          type="button"
          @click="selected = secret; revealed = null"
        >
          <span>
            <strong>{{ secret.title }}</strong>
            <small>{{ secret.purpose || secret.category || "No purpose" }}</small>
          </span>
          <span class="row-meta">
            <GnBadge :tone="secret.status === 'actual' ? 'success' : 'warning'">
              {{ secret.status }}
            </GnBadge>
            <small>{{ secret.category || "uncategorized" }}</small>
          </span>
        </button>
        <div v-if="!secrets.length" class="empty-state">
          <strong>No secrets yet</strong>
          <span>Create the first record using the form on the right.</span>
        </div>
      </aside>

      <section class="panel detail-panel">
        <div class="panel-title">
          <h2>{{ selected?.title || "No secret selected" }}</h2>
          <GnBadge v-if="selected" :tone="selected.status === 'actual' ? 'success' : 'warning'">
            {{ selected.status }}
          </GnBadge>
        </div>
        <template v-if="selected">
          <div class="description-grid">
            <span>Purpose</span>
            <strong>{{ selected.purpose || "Not set" }}</strong>
            <span>Category</span>
            <strong>{{ selected.category || "Not set" }}</strong>
            <span>Tags</span>
            <strong>{{ selected.tags?.join(", ") || "No tags" }}</strong>
            <span>Access</span>
            <strong>
              UI {{ selected.allow_ui ? "on" : "off" }} · REST
              {{ selected.allow_rest_api ? "on" : "off" }} · MCP
              {{ selected.allow_mcp ? "on" : "off" }}
            </strong>
          </div>
          <div class="field-list">
            <div v-for="field in visibleFields" :key="field.name" class="field-row">
              <span>
                <strong>{{ field.name }}</strong>
                <small>{{ field.encrypted ? "encrypted" : "plain" }}</small>
              </span>
              <code>{{ field.value ?? "••••••" }}</code>
              <GnButton size="sm" @click="copyField(selected, field)">Copy</GnButton>
            </div>
          </div>
          <div class="toolbar">
            <GnButton variant="primary" @click="reveal(selected)">Reveal</GnButton>
            <GnButton @click="loadVersions(selected)">Versions</GnButton>
          </div>
          <div v-if="revealed" class="field-list revealed">
            <div v-for="field in revealed.fields" :key="field.name" class="field-row">
              <span>{{ field.name }}</span>
              <code>{{ field.value }}</code>
            </div>
          </div>
        </template>
        <div v-else class="empty-state large">
          <strong>Select a secret</strong>
          <span>Metadata is shown by default. Values are available through reveal.</span>
        </div>
      </section>

      <aside class="panel form-panel">
        <div class="panel-title">
          <h2>Create secret</h2>
        </div>
        <div class="form-grid">
          <GnInput v-model="form.title" label="Title" />
          <GnInput v-model="form.purpose" label="Purpose" />
          <GnInput v-model="form.category" label="Category" />
          <GnInput v-model="form.tags" label="Tags" placeholder="comma,separated" />
          <GnTextarea v-model="form.fieldsText" label="Fields" rows="6" />
          <GnInput v-model="form.source" label="Source" />
          <GnInput v-model="form.notes" label="Notes" maxlength="140" />
          <div class="checks">
            <GnCheckbox v-model="form.allow_ui" label="UI" />
            <GnCheckbox v-model="form.allow_rest_api" label="REST API" />
            <GnCheckbox v-model="form.allow_mcp" label="MCP" />
          </div>
        </div>
        <GnButton variant="primary" @click="createSecret">Create</GnButton>
      </aside>
    </section>

    <section v-if="activeTab === 'history'" class="panel-stack">
      <div class="panel">
        <h2>Version history</h2>
        <p class="muted">{{ selected?.title || "Select a secret first" }}</p>
        <div v-for="version in versions" :key="version.id" class="secret-row">
          <span>Version {{ version.version_number }}</span>
          <small>{{ version.created_at }}</small>
        </div>
      </div>
    </section>

    <section v-if="activeTab === 'audit'" class="panel-stack">
      <div class="panel">
        <div class="toolbar">
          <h2>Audit</h2>
          <GnButton @click="loadAudit">Refresh</GnButton>
        </div>
        <div v-for="event in auditEvents" :key="event.id" class="secret-row">
          <span>{{ event.action }}</span>
          <small>{{ event.channel }} · {{ event.created_at }}</small>
        </div>
      </div>
    </section>

    <section v-if="activeTab === 'tokens'" class="panel-stack">
      <div class="panel">
        <div class="toolbar">
          <h2>API tokens</h2>
          <GnButton @click="loadTokens">Refresh</GnButton>
          <GnButton variant="primary" @click="createApiToken">Create MCP token</GnButton>
        </div>
        <GnTextarea v-if="newToken" :model-value="newToken.token" label="New token" readonly />
        <div v-for="token in tokens" :key="token.id" class="secret-row">
          <span>{{ token.name }}</span>
          <small>{{ token.scopes.join(", ") }}</small>
        </div>
      </div>
    </section>

    <section v-if="activeTab === 'settings'" class="panel-stack">
      <div class="panel">
        <h2>Settings</h2>
        <div class="toolbar">
          <GnButton @click="exportData">Export decrypted JSON</GnButton>
          <GnButton variant="danger" @click="showDeleteConfirm = true">Delete all data</GnButton>
        </div>
      </div>
    </section>

    <GnModal v-model="showDeleteConfirm" title="Delete all data">
      <p>This permanently removes all secrets and versions. Audit records remain.</p>
      <template #footer>
        <GnButton @click="showDeleteConfirm = false">Cancel</GnButton>
        <GnButton variant="danger" @click="deleteAllData">Delete</GnButton>
      </template>
    </GnModal>
  </main>
</template>