<template>
  <BulmaDrawer header="Konfiguration" :opening="on_open" refreshable>
    <div class="card-content">
      <div class="columns">
        <div class="column is-one-third">
          <div class="content">
            <h3>Lösung</h3>
            <dl>
              <dt>Wert</dt>
              <dd>
                Eingabe:
                <span class="is-family-monospace">
                  "{{ admin_config_model.solution.value }}"
                </span>
              </dd>
              <dd>
                Ausgabe:
                <span class="is-family-monospace">
                  "{{ admin_config_model.solution.clean }}"
                </span>
              </dd>

              <dt>Transformation</dt>
              <dd>
                Whitespace:
                <span class="is-uppercase is-family-monospace">
                  {{ admin_config_model.solution.whitespace }}
                </span>
              </dd>
              <dd>
                Sonderzeichen:
                <span class="is-uppercase is-family-monospace">
                  {{ admin_config_model.solution.special_chars }}
                </span>
              </dd>
              <dd>
                Buchstaben:
                <span class="is-uppercase is-family-monospace">
                  {{ admin_config_model.solution.case }}
                </span>
              </dd>
            </dl>

            <h3>Rätsel</h3>
            <dl>
              <dt>Offene Türchen</dt>
              <dd>{{ store.user_doors.length }}</dd>

              <dt>Zeit zum nächsten Türchen</dt>
              <dd v-if="store.next_door_target === null">
                Kein nächstes Türchen
              </dd>
              <dd v-else><CountDown :until="store.next_door_target" /></dd>

              <dt>Erstes Türchen</dt>
              <dd>{{ fmt_puzzle_date("first") }}</dd>

              <dt>Nächstes Türchen</dt>
              <dd>{{ fmt_puzzle_date("next") }}</dd>

              <dt>Letztes Türchen</dt>
              <dd>{{ fmt_puzzle_date("last") }}</dd>

              <dt>Rätsel schließt nach</dt>
              <dd>{{ fmt_puzzle_date("end") }}</dd>

              <dt>Zufalls-Seed</dt>
              <dd class="is-family-monospace">
                "{{ admin_config_model.puzzle.seed }}"
              </dd>

              <dt>Extra-Tage</dt>
              <dd>
                <template
                  v-for="(day, index) in admin_config_model.puzzle.extra_days"
                  :key="`extra_day-${index}`"
                >
                  <span>
                    <template v-if="index > 0">, </template>
                    {{ day }}
                  </span>
                </template>
              </dd>

              <dt>Leere Türchen</dt>
              <dd v-if="admin_config_model.puzzle.skip_empty">Überspringen</dd>
              <dd v-else>Anzeigen</dd>
            </dl>
          </div>
        </div>
        <div class="column is-one-third">
          <div class="content">
            <h3>Kalender</h3>
            <dl>
              <dt>Definition</dt>
              <dd>{{ admin_config_model.calendar.config_file }}</dd>

              <dt>Hintergrundbild</dt>
              <dd>{{ admin_config_model.calendar.background }}</dd>

              <dt>Favicon</dt>
              <dd>{{ admin_config_model.calendar.favicon }}</dd>

              <dt>Türchen ({{ doors.length }} Stück)</dt>
              <dd>
                <template v-for="(door, index) in doors" :key="`door-${index}`">
                  <span>
                    <template v-if="index > 0">, </template>
                    {{ door.day }}
                  </span>
                </template>
              </dd>
            </dl>

            <h3>Bilder</h3>
            <dl>
              <dt>Größe</dt>
              <dd>{{ admin_config_model.image.size }} px</dd>

              <dt>Rand</dt>
              <dd>{{ admin_config_model.image.border }} px</dd>

              <dt>Schriftarten</dt>
              <dd
                v-for="(font, index) in admin_config_model.fonts"
                :key="`font-${index}`"
              >
                {{ font.file }} ({{ font.size }} pt)
              </dd>
            </dl>
          </div>
        </div>
        <div class="column is-one-third">
          <div class="content">
            <h3>WebDAV</h3>
            <dl>
              <dt>URL</dt>
              <dd>{{ admin_config_model.webdav.url }}</dd>

              <dt>Zugangsdaten</dt>
              <dd class="is-family-monospace">
                <BulmaSecret
                  @show="load_credentials(creds.dav, 'admin/credentials/dav')"
                  @hide="clear_credentials(creds.dav)"
                >
                  <span class="tag is-danger">user</span>
                  {{ creds.dav.username }}
                  <br />
                  <span class="tag is-danger">pass</span>
                  {{ creds.dav.password }}
                </BulmaSecret>
              </dd>

              <dt>Cache-Dauer</dt>
              <dd>{{ admin_config_model.webdav.cache_ttl }} s</dd>

              <dt>Konfigurationsdatei</dt>
              <dd>{{ admin_config_model.webdav.config_file }}</dd>
            </dl>
          </div>

          <div class="content">
            <h3>Sonstige</h3>
            <dl>
              <dt>Redis</dt>
              <dd>Host: {{ admin_config_model.redis.host }}</dd>
              <dd>Port: {{ admin_config_model.redis.port }}</dd>
              <dd>Datenbank: {{ admin_config_model.redis.db }}</dd>
              <dd>Protokoll: {{ admin_config_model.redis.protocol }}</dd>

              <dt>UI-Admin</dt>
              <dd class="is-family-monospace">
                <BulmaSecret
                  @show="load_credentials(creds.ui, 'admin/credentials/ui')"
                  @hide="clear_credentials(creds.ui)"
                >
                  <span class="tag is-danger">user</span>
                  {{ creds.ui.username }}
                  <br />
                  <span class="tag is-danger">pass</span>
                  {{ creds.ui.password }}
                </BulmaSecret>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </BulmaDrawer>
</template>

<script setup lang="ts">
import { API } from "@/lib/api";
import type { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
import { advent22Store } from "@/lib/store";
import { DateTime } from "luxon";
import { ref } from "vue";

import BulmaDrawer from "../bulma/Drawer.vue";
import BulmaSecret from "../bulma/Secret.vue";
import CountDown from "../CountDown.vue";

const store = advent22Store();

const admin_config_model = ref<AdminConfigModel>({
  solution: {
    value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    whitespace: "KEEP",
    special_chars: "KEEP",
    case: "KEEP",
    clean: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  },
  puzzle: {
    first: "2023-12-01",
    next: "2023-12-01",
    last: "2023-12-24",
    end: "2024-04-01",
    seed: "",
    extra_days: [],
    skip_empty: true,
  },
  calendar: {
    config_file: "lorem ipsum",
    background: "dolor sit",
    favicon: "sit amet",
  },
  image: {
    size: 500,
    border: 0,
  },
  fonts: [{ file: "consetetur", size: 0 }],
  redis: {
    host: "0.0.0.0",
    port: 6379,
    db: 0,
    protocol: 3,
  },
  webdav: {
    url: "sadipscing elitr",
    cache_ttl: 0,
    config_file: "sed diam nonumy",
  },
});

const doors = ref<DoorSaved[]>([]);
const creds = ref<Record<string, Credentials>>({
  dav: {
    username: "",
    password: "",
  },
  ui: {
    username: "",
    password: "",
  },
});

function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
  const iso_date = admin_config_model.value.puzzle[name];
  if (!(typeof iso_date === "string")) return "-";

  return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
}

async function on_open(): Promise<void> {
  const [store_update, new_admin_config_model, new_doors] = await Promise.all([
    store.update(),
    API.request<AdminConfigModel>("admin/config_model"),
    API.request<DoorSaved[]>("admin/doors"),
  ]);

  void store_update; // discard value
  admin_config_model.value = new_admin_config_model;
  doors.value = new_doors;

  clear_credentials(creds.value.dav);
  clear_credentials(creds.value.ui);
}

async function load_credentials(
  creds: Credentials,
  endpoint: string,
): Promise<void> {
  try {
    const new_creds = await API.request<Credentials>(endpoint);

    creds.username = new_creds.username;
    creds.password = new_creds.password;
  } catch {}
}

function clear_credentials(creds: Credentials): void {
  creds.username = "";
  creds.password = "";
}
</script>

<style scoped>
dd {
  overflow-x: auto;
}
</style>
