<script setup>

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;

import { ref, onMounted } from 'vue';
import { Button } from 'pankow';
import Section from  '../components/Section.vue';
import NetworkModel from  '../models/NetworkModel.js';

const networkModel = NetworkModel.create(API_ORIGIN, localStorage.token);

// keep in sync with sysinfo.js
const ipv4Providers = [
    { name: 'Disabled', value: 'noop' },
    { name: 'Public IP', value: 'generic' },
    { name: 'Static IP Address', value: 'fixed' },
    { name: 'Network Interface', value: 'network-interface' }
];

const ipv6Providers = [
    { name: 'Disabled', value: 'noop' },
    { name: 'Public IP', value: 'generic' },
    { name: 'Static IP Address', value: 'fixed' },
    { name: 'Network Interface', value: 'network-interface' }
];

function prettyIpProviderName(provider) {
  switch (provider) {
    case 'noop': return 'Disabled';
    case 'generic': return 'Public IP';
    case 'fixed': return 'Static IP Address';
    case 'network-interface': return 'Network Interface';
    default: return 'Unknown';
  }
}

// IPv4
const ipv4Provider = ref('');
const ipv4Address = ref('');
const ipv4DetectedAddress = ref('');
const ipv4InterfaceName = ref('');

async function refreshIpv4() {
  let [error, result] = await networkModel.getIpv4Config();
  if (error) return console.error(error);

  ipv4Provider.value = result.provider;
  ipv4Address.value = result.ip;
  ipv4InterfaceName.value = result.ifname;

  [error, result] = await networkModel.getIpv4();
  if (error) return console.error(error);

  ipv4DetectedAddress.value = result;
}

function onIpv4Configure() {

}

// IPv6
const ipv6Provider = ref('');
const ipv6Address = ref('');
const ipv6DetectedAddress = ref('');
const ipv6InterfaceName = ref('');

async function refreshIpv6() {
  let [error, result] = await networkModel.getIpv6Config();
  if (error) return console.error(error);

  ipv6Provider.value = result.provider;
  ipv6Address.value = result.ip;
  ipv6InterfaceName.value = result.ifname;

  [error, result] = await networkModel.getIpv6();
  if (error) return console.error(error);

  ipv6DetectedAddress.value = result;
}

function onIpv6Configure() {

}

// Firewall

const blocklistLength = ref(0);
const blocklist = ref('');

function onBlocklistEdit() {

}

async function refreshBlocklist() {
  const [error, result] = await networkModel.getBlocklist();
  if (error) return console.error(error);

  blocklist.value = result;
  blocklistLength.value = result.split('\n').filter(function (l) { return l.length !== 0 && l[0] !== '#'; }).length;
}

const trustedIpsLength = ref(0);
const trustedIps = ref('');

function onTrustedIpsEdit() {
}

async function refreshTrustedIps() {
  const [error, result] = await networkModel.getTrustedIps();
  if (error) return console.error(error);

  trustedIps.value = result;
  trustedIpsLength.value = result.split('\n').filter(function (l) { return l.length !== 0 && l[0] !== '#'; }).length;
}

// dyndns
const dynDnsBusy = ref(false);
const dynDnsIsEnabled = ref(false);

async function refreshDynDns() {
  const [error, result] = await networkModel.getDynDnsConfig();
  if (error) return console.error(error);

  dynDnsIsEnabled.value = result.enabled;
}

async function onDyndnsToggle() {
  dynDnsBusy.value = true;

  const [error] = await networkModel.setDynDnsConfig(!dynDnsIsEnabled.value);
  if (error) return console.error(error);

  await refreshDynDns();
  dynDnsBusy.value = false;
}

onMounted(async () => {
  await refreshIpv4();
  await refreshIpv6();
  await refreshDynDns();
  await refreshBlocklist();
  await refreshTrustedIps();
});

</script>

<template>
  <div class="content">
    <h1>{{ $t('network.title') }}</h1>

    <Section :title="$t('network.ip.title')">
      <p>{{ $t('network.ip.description') }}</p>

      <div class="info-row">
        <div class="info-label">{{ $t('network.ip.provider') }}</div>
        <div class="info-value">{{ prettyIpProviderName(ipv4Provider) }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('network.ip.address') }}</div>
        <div class="info-value">{{ ipv4Address || `${ipv4DetectedAddress} (${$t('network.ip.detected')})` }}</div>
      </div>
      <div class="info-row" v-show="ipv4InterfaceName">
        <div class="info-label">{{ $t('network.ip.interface') }}</div>
        <div class="info-value">{{ ipv4InterfaceName }}</div>
      </div>

      <Button @click="onIpv4Configure()">{{ $t('network.ip.configure') }}</Button>
    </Section>

    <Section :title="$t('network.ipv6.title')">
      <p>{{ $t('network.ipv6.description') }}</p>

      <div class="info-row">
        <div class="info-label">{{ $t('network.ip.provider') }}</div>
        <div class="info-value">{{ prettyIpProviderName(ipv6Provider) }}</div>
      </div>
      <div class="info-row" v-show="ipv6Provider !== 'noop'">
        <div class="info-label">{{ $t('network.ip.address') }}</div>
        <div class="info-value">{{ ipv6Address || `${ipv6DetectedAddress} (${$t('network.ip.detected')})` }}</div>
        <!-- TODO <span ng-show="ipv6Configure.displayError" class="text-danger">{{ ipv6Configure.displayError }}</span> -->
      </div>
      <div class="info-row" v-show="ipv6InterfaceName">
        <div class="info-label">{{ $t('network.ip.interface') }}</div>
        <div class="info-value">{{ ipv6InterfaceName }}</div>
      </div>

      <Button @click="onIpv6Configure()">{{ $t('network.ip.configure') }}</Button>
    </Section>

    <Section :title="$t('network.firewall.title')">
      <div class="info-row">
        <div class="info-label">{{ $t('network.firewall.blockedIpRanges') }}</div>
        <div class="info-value">{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }} <span @click="onBlocklistEdit()"><i class="fa-solid fa-edit text-small"></i></span></div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('network.trustedIpRanges') }}</div>
        <div class="info-value">{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }} <span @click="onTrustedIpsEdit()"><i class="fa-solid fa-edit text-small"></i></span></div>
      </div>
    </Section>

    <Section :title="$t('network.dyndns.title')">
      <p>{{ $t('network.dyndns.description') }}</p>
      <!-- TODO<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p> -->

      <p>
        <i class="fa-solid fa-circle" :class="{ 'status-active': dynDnsIsEnabled, 'status-inactive': !dynDnsIsEnabled }"></i> {{ $t(dynDnsIsEnabled ? 'main.statusEnabled' : 'main.statusDisabled') }}
      </p>

      <!-- TODO use toggle component -->
      <Button :danger="dynDnsIsEnabled ? true : undefined" @click="onDyndnsToggle()" :disabled="dynDnsBusy" :loading="dynDnsBusy">{{ $t(dynDnsIsEnabled ? 'main.disableAction' : 'main.enableAction') }}</Button>
    </Section>
  </div>
</template>
