import { defineComponent, onMounted, ref, watch, onUnmounted, nextTick } from 'vue'

import { CTitleBanner } from '../../../components/CTitleBanner'
import { CDateTime } from '../../../components/CDateTime'
import { CMyFieldDb } from '../../../components/CMyFieldDb'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
import { useCircuitStore } from '@store/CircuitStore'
import { tools } from '@store/Modules/tools'
import { costanti } from '@costanti'
import { shared_consts } from '@src/common/shared_vuejs'


export default defineComponent({
  name: 'server',
  components: { CTitleBanner, CDateTime, CMyFieldDb },
  props: {},
  setup() {
    const $q = useQuasar()
    const { t } = useI18n()
    const circuitStore = useCircuitStore()

    const messages = ref('')
    const input = ref('')
    const scriptName = ref('')
    const inputRequired = ref(false)
    const inputPrompt = ref('')
    const statusWs = ref('')

    let ws: any = null;

    const ris = ref('')
    const riga = ref(0)
    const numpersone = ref(7)
    const date_start = ref(new Date())
    const col = ref(0)
    const placca = ref('')
    const valmin = ref(200)
    const circuitId = ref('')
    const valmax = ref(400)
    const defmin = ref(shared_consts.CIRCUIT_PARAMS.SCOPERTO_MIN_GRP)
    const defmax = ref(shared_consts.CIRCUIT_PARAMS.SCOPERTO_MAX_GRP)
    const defpersmin = ref(100)
    const defpersmax = ref(200)
    const search_username = ref('')
    const replace_username = ref('')
    const incaricamento = ref(false)

    const myarrscript = ref(<any>[])
    const myarroptionsdir = ref(<any>[])
    const myarrdir = ref(<any>[])
    const mydir = ref(<string>'')

    const scrollArea = ref(<any>null)

    const globalStore = useGlobalStore()

    watch(() => mydir.value, async (to: any, from: any) => {
      // ...

      // console.log('Watching ' + mydir.value)

      myarrscript.value = []

      if (mydir.value)
        myarrscript.value = await getArrayByScript('ls "admin_scripts/' + mydir.value + '/"', 'sh')

    })

    watch(() => messages.value, async (to: any, from: any) => {
      await nextTick(); // Aspetta che il DOM si aggiorni
      scrollToBottom();
    });


    async function eseguiScriptSenzaConferma(script: string, ritornaout: boolean, dir: string, listafiles: boolean, extfiles: string, withinput: boolean) {

      // console.log('eseguiScriptSenzaConferma ' + script)

      const mydata = {
        script,
        dir,
        tokcheck: "php8.1_version_762321HSD121nJDokq@?!aFS.tar.gz",
        listafiles,
        extfiles,
        withinput
      }

      const risfunz = await globalStore.execScript({ mydata })

      if (ritornaout) {
        if (listafiles) {
          return risfunz.arrout
        } else {
          return risfunz.stdout
        }

      } else {
        return risfunz
      }

    }

    async function getArrayByScript(script: string, extfiles: string) {
      let mystr = 'admin_scripts/'
      if (mydir.value) {
        mystr += mydir.value
      }
      return await eseguiScriptSenzaConferma(script, true, mystr, true, extfiles, false)


    }

    async function mounted() {
      myarrdir.value = await getArrayByScript('cd admin_scripts; ls -d */', '')

      myarroptionsdir.value = []

      if (myarrdir.value) {
        for (let i = 0; i < myarrdir.value.length; i++) {
          const opt = { label: myarrdir.value[i].label, value: myarrdir.value[i].value }
          myarroptionsdir.value.push(opt)
        }

      }

      if (myarrdir.value && myarrdir.value.length > 0) {
        mydir.value = myarrdir.value[0].value
      }

      connectWebSocket()

      scrollToBottom()

    }

    const scrollToBottom = () => {
      nextTick(() => {
        if (scrollArea.value) {
          const el = scrollArea.value.$el;

          let scrollHeight = el.scrollHeight

          if (el) {
            // Use el.scrollIntoView() to instantly scroll to the element
            scrollArea.value.setScrollPosition('vertical', 10000)
          }
        }
      })
    };

    onUnmounted(() => {
      if (ws) {
        ws.close();
        statusWs.value = 'CLOSE';
      }
    });

    function EseguiScript(script: string) {
      const userStore = useUserStore()

      $q.dialog({
        message: t('dialog.continue') + ' ' + script + ' ?',
        ok: {
          label: t('dialog.yes'),
          push: true,
        },
        cancel: {
          label: t('dialog.cancel'),
        },
        title: 'Funzione:',
      }).onOk(async () => {

        incaricamento.value = true
        $q.loading.show({ message: t('otherpages.update') })

        const risfunz = await eseguiScriptSenzaConferma(script, false, '', false, '', true)

        $q.loading.hide()

        // await globalStore.loadSite()

        incaricamento.value = false

        console.log('EseguiScript', risfunz)

        //write the string of the time now
        let timenowstr = '<span style="font-style: italic; color: gray;">✅ Eseguito alle ' + tools.getstrTimeAll(Date.now()) + ' -> ' + '</span><br>'


        if (risfunz.stderr)
          ris.value = timenowstr + '<span style="color: red;">' + 'ERRORE: ' + risfunz.stderr + '</span><br>' + ris.value
        if (risfunz.stdout)
          ris.value = timenowstr + risfunz.stdout + '<br>' + ris.value

      })
    }

    const connectWebSocket = () => {
      let myurlws = tools.getWssUrl()
      ws = new WebSocket(myurlws)

      const input = ref('');

      console.log('connectWebSocket ... ' + myurlws)


      ws.onmessage = (event: any) => {
        const data = JSON.parse(event.data);
        if (data.type === 'output' || data.type === 'error') {
          messages.value += data.data;
          scrollToBottom()
        } else if (data.type === 'input_required') {
          inputRequired.value = true;
          inputPrompt.value = data.prompt;
        } else if (data.type === 'close') {
          messages.value += '\n' + data.data
        }
      };

      ws.onclose = () => {
        statusWs.value = 'CLOSE';
        messages.value += '\nConnessione chiusa. Riconnessione...'
        setTimeout(connectWebSocket, 5000);
      };
    };

    const startScript = (scriptName: string) => {
      if (ws && ws.readyState === WebSocket.OPEN && scriptName) {
        // ('Start Script ', ws)
        statusWs.value = 'OPEN'
        // messages.value = '' // Pulisce i messaggi precedenti
        inputRequired.value = false;

        let timenowstr = '<br><span style="font-style: italic; color: gray;">✅ Eseguito alle ' + tools.getstrTimeAll(Date.now()) + ' -> ' + '</span><br>'
        messages.value += timenowstr

        ws.send(JSON.stringify({ type: 'start_script', scriptName, dir: mydir.value }));
      }
    };

    const sendInput = () => {
      if (ws && ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({ type: 'input', data: input.value }));
        // messages.value.push(input.value + '\n')
        input.value = '';
        inputRequired.value = false;
      }
    };

    onMounted(mounted)

    return {
      EseguiScript,
      tools,
      costanti,
      search_username,
      replace_username,
      valmin,
      valmax,
      defmin,
      defmax,
      defpersmin,
      defpersmax,
      circuitId,
      circuitStore,
      incaricamento,
      ris,
      myarrscript,
      mydir,
      myarrdir,
      myarroptionsdir,
      messages,
      input,
      scriptName,
      startScript,
      sendInput,
      inputRequired,
      inputPrompt,
      statusWs,
      scrollArea,
    }
  },
})