<script setup>
import Button from '@/components/buttons/Button.vue';
import InputText from '@/components/inputs/InputText.vue';
import Label from '@/components/labels/Label.vue';
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
import { noSysApi } from '../api/noSysApi';
import InputComboBox from '@/components/inputs/InputComboBox.vue';
import { useNoSysStore } from '../stores/noSysStore'
import { getSocket } from '@/plugins/socketioManager'
import Card from '@/components/cards/Card.vue';
import { ArrowPathIcon, EllipsisHorizontalIcon, GlobeAltIcon, LinkIcon, MapIcon, WifiIcon, XMarkIcon } from '@heroicons/vue/24/solid';
import { TabPanel} from '@headlessui/vue'

var socket = null
const noSysStore = useNoSysStore()

const ip = ref("n0sys.duckdns.org")
const port = ref("40441")
const user = ref()
const peers = ref([])

async function listUsers(){
    noSysStore.users.value = await noSysApi.getUsers()
}

async function connect(){
    const response = await noSysApi.connectAddress(user.value.id, ip.value, port.value)
}

async function reconnect(connectionId){
    // const response = await noSysApi.connectAddress(user.value.user, ip.value, port.value)
}

async function disconnect(connectionId){
    const response = await noSysApi.disconnectPeer(connectionId)
}

async function listPeers(){
    peers.value = await noSysApi.listPeers()
}

onActivated(async () => {
  socket = await getSocket("noSys_noSys")
  socket.on('tempEvent', onTemporaryEvent)

  listUsers()
  listPeers()
});

onDeactivated(() => {
  socket.off('tempEvent')
});

function onTemporaryEvent(data) {
  console.log('Received temporary event in HomeView:', data)
}

// function sendMessage(){
//     messageElement = document.getElementById("message")
//     message = messageElement.value;
//     if (connectionClicked && message){
//         const data = {"message":{"action":"test", "data":message},"toModule": {"package": "noSys","module": "noSys"},"encrypted": true};
//         const requestOptions = {
//             method: 'POST',
//             headers: {
//                 'Content-Type': 'application/json',
//             },
//             body: JSON.stringify(data),
//         };

//         fetch(noSysApiUrl+"/peers/"+connectionClicked, requestOptions)
//             .then(response => {
//                 if (!response.ok) {
//                     throw new Error('Network response was not ok');
//                 }
//                 return response.json();
//             })
//             .then(data => {
//                 console.log(data);
//                 addMessage(connectionClicked, message, false)
//                 messageElement.value = ""
//             })
//             .catch(error => {
//                 console.error

//             ('Error:', error);
//             });
//     }
// }
</script>

<template>
<TabPanel>
    <div class="container mx-auto px-6 py-1 space-y-8">
        <div class="grid md:grid-cols-4 gap-6">
          <Card class="border-yellow-400/20 p-6">
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
                <WifiIcon class="text-green-400 w-6 h-6"/>
              </div>
              <div>
                <p class="text-2xl font-bold text-white">
                  {{peers.filter((p) => p.status === "CONNECTED").length}}
                </p>
                <p class="text-gray-400 text-sm">Connected</p>
              </div>
            </div>
          </Card>

          <Card class=" border-yellow-400/20 p-6">
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center">
                <EllipsisHorizontalIcon class="text-yellow-400 h-6 w-6" size={24} />
              </div>
              <div>
                <p class="text-2xl font-bold text-white">
                  {{peers.filter((p) => p.status === "CONNECTING").length}}
                </p>
                <p class="text-gray-400 text-sm">Connecting</p>
              </div>
            </div>
          </Card>

          <Card class=" border-yellow-400/20 p-6">
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12 bg-red-500/20 rounded-lg flex items-center justify-center">
                <XMarkIcon class="text-red-400 h-6 w-6"/>
              </div>
              <div>
                <p class="text-2xl font-bold text-white">
                  {{peers.filter((p) => p.status === "ERROR").length}}
                </p>
                <p class="text-gray-400 text-sm">Failed</p>
              </div>
            </div>
          </Card>

          <Card class=" border-yellow-400/20 p-6">
            <div class="flex items-center space-x-3">
              <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
                <LinkIcon class="text-blue-400 h-6 w-6"/>
              </div>
              <div>
                <p class="text-2xl font-bold text-white">{{peers.length}}</p>
                <p class="text-gray-400 text-sm">Total</p>
              </div>
            </div>
          </Card>
        </div>

        <Card class="bg-black border-yellow-400/20 p-8">
          <div class="flex items-center space-x-3 mb-6">
            <LinkIcon class="text-yellow-400 h-6 w-6" />
            <h2 class="text-2xl font-bold text-yellow-400">Connect to Peer</h2>
          </div>

          <div class="grid md:grid-cols-4 gap-6">
            <div>
              <Label class="text-gray-300 mb-2 block">IP Address</Label>
              <InputText id="ip" type="text" v-model="ip" placeholder="" class="border-yellow-400/30 w-full"/>
            </div>

            <div>
              <Label class="text-gray-300 mb-2 block">Port</Label>
              <InputText id="port" type="text" v-model="port" placeholder="" class="border-yellow-400/30 w-full"/>
            </div>

            <div>
              <Label class="text-gray-300 mb-2 block">User</Label>
              <InputComboBox v-model="user" :items="noSysStore.users.value" labelKey="id" keyField="id" class="border-yellow-400/30"></InputComboBox>
            </div>
            <div class="flex items-end">
                <Button @click="connect()" class="w-full bg-yellow-400 text-black hover:bg-yellow-300 font-bold">Connect</Button>
            </div>
          </div>
        </Card>

        <Card class=" border-yellow-400/20 p-8">
          <div class="flex items-center justify-between mb-6">
            <div class="flex items-center space-x-3">
              <GlobeAltIcon class="text-yellow-400 h-6 w-6" />
              <h2 class="text-2xl font-bold text-yellow-400">Active Connections</h2>
            </div>
          </div>

          
            <div v-if="peers.length === 0" class="text-center py-12">
              <WifiIcon class="text-gray-600 mx-auto mb-4 h-7 w-7" />
              <p class="text-gray-400 text-lg">No connections established</p>
              <p class="text-gray-500 text-sm">Connect to peers to start building the decentralized network</p>
            </div>
          
            <div v-else class="space-y-4">
                <div v-for="peer in peers" :key="peer.id" class="bg-black border border-yellow-400/20 rounded-lg p-6">
                  <div class="grid lg:grid-cols-7 gap-4 items-center">
                    <div>
                      <Label class="text-gray-400 text-xs">Connection ID</Label>
                      <p class="text-white font-mono text-sm">{{ peer.id }}</p>
                    </div>

                    <div>
                      <Label class="text-gray-400 text-xs">Address</Label>
                      <p class="text-white text-sm">
                        {{peer.address}}
                      </p>
                    </div>

                    <div>
                      <Label class="text-gray-400 text-xs">Bind Address</Label>
                      <p class="text-white text-sm">
                        {{peer.bindAddress}}
                      </p>
                    </div>

                    <div>
                      <Label class="text-gray-400 text-xs">Status</Label>
                      <div class="flex items-center space-x-2"
                       :class="{
                                'text-green-400': peer.status === 'CONNECTED',
                                'text-blue-400': peer.status === 'CONNECTING',
                                'text-yellow-400': peer.status === 'HANDSHAKING',
                                'text-red-400': peer.status === 'DISCONNECTED',
                                'text-gray-300': !['CONNECTED', 'CONNECTING', 'HANDSHAKING', 'DISCONNECTED'].includes(peer.status)
                                }">
                        {{peer.status}}
                      </div>
                    </div>

                    <div>
                      <Label class="text-gray-400 text-xs">Users</Label>
                      <p class="text-sm">
                        <span class="text-yellow-400">{{peer.user}}</span>
                        <!-- TODO MyUser, PeerUser/ProofOfWork -->
                        <span class="text-gray-400"> ↔ </span>
                        <span class="text-blue-400">{{peer.user}}</span> 
                      </p>
                    </div>

                    <div>
                      <Label class="text-gray-400 text-xs">Last Activity</Label>
                      <!-- TODO Last Activity -->
                      <p class="text-white text-sm">{{ new Date().toLocaleTimeString() }}</p> 
                    </div>

                    <div class="flex gap-2">
                        <Button v-if="peer.status === 'CONNECTED'"
                            @click="disconnect(peer.id)"
                            class="bg-red-500 hover:bg-red-600 text-white"
                        >
                            <XMarkIcon class="mr-1 h-4 w-4" />
                            Close
                        </Button>

                        <Button v-if="peer.status === 'DISCONNECTED'"
                            @click="reconnect(peer.id)"
                            class="bg-green-500 hover:bg-green-600 text-white"
                        >
                            <ArrowPathIcon class="mr-1 h-4 w-4" />
                            Reconnect
                        </Button>
                        

                    </div>
                  </div>

                  <div class="mt-4 pt-4 border-t border-yellow-400/10">
                    <div class="flex justify-between text-xs text-gray-400">
                        <!-- Connected At -->
                      <span>Connected: {{new Date(peer.connectedAt).toLocaleString()}}</span>
                      <span>
                        Duration: {{Math.floor((Date.now() - new Date(peer.connectedAt).getTime()) / 60000)}}{" "}
                        minutes
                      </span>
                    </div>
                  </div>
                </div>
            </div>
        </Card>

    </div>
</TabPanel>
</template>