<script setup>
import Card from '@/components/cards/Card.vue';
import { useP2postStore } from '../stores/p2postStore';
import { ref } from 'vue';
import InputText from '@/components/inputs/InputText.vue';
import Button from '@/components/buttons/Button.vue';
import { CommandLineIcon, GlobeAltIcon, PencilIcon, PlusIcon, UsersIcon, XMarkIcon } from '@heroicons/vue/24/solid';
import { p2postApi } from '../api/p2postApi';
import { noSysApi } from '@/modules/noSys/api/noSysApi';

const p2postStore = useP2postStore()

const newNetworkName = ref("")

async function loadData(){
    const networks = await noSysApi.listNetworks()
    const users = await p2postApi.getMyUsers()
    console.log(users)
    for(const user of users){
        const userData = await noSysApi.getUser(user.pubkey)
        for(const network of userData.networks){
            p2postStore.networks.push(networks.find(n => n.data.id === network))
        }
    }
}

loadData()
</script>

<template>
<div class="w-80 bg-black border-r border-yellow-400/20 p-6 space-y-6">
    <Card class="bg-black border-yellow-400/20 p-4">
    <h3 class="text-lg font-bold text-yellow-400 mb-4 flex items-center">
        <UsersIcon class="h-5 w-5 mr-2" />
        My Users
    </h3>

    <div class="space-y-3">
        <div v-for="user in p2postStore.users" class="bg-black border border-yellow-400/20 rounded-lg p-3">
            <div v-if="false" class="space-y-2">
                <InputText
                value={editNickname}
                placeholder="Nickname"
                class="bg-gray-800 border-yellow-400/30 text-white text-sm"
                />
                <InputText
                value={editBio}
                placeholder="Bio"
                class="bg-gray-800 border-yellow-400/30 text-white text-sm h-16"
                />
                <div class="flex gap-2">
                <Button
                    @click=""
                    class="bg-yellow-400 text-black hover:bg-yellow-300"
                >
                    Save
                </Button>
                <Button
                    @click=""
                    class="border-gray-400 text-gray-400"
                >
                    Cancel
                </Button>
                </div>
            </div>
            <div v-if="true">
                <div class="flex items-center justify-between mb-2">
                <div class="flex items-center space-x-2">
                    <!-- <img src={user.photo || "/placeholder.svg"} alt="" class="w-8 h-8 rounded-full" /> -->
                    <span class="text-white font-semibold text-sm">{{user.nickname}}</span>
                </div>
                <Button
                    @click=""
                    class="text-black hover:bg-yellow-400/20"
                >
                    <PencilIcon class="w-4 h-4" />
                    Edit
                </Button>
                </div>
                <p class="text-xs text-gray-400 font-mono mb-1">{{user.pubkey}}</p>
                <p class="text-xs text-gray-300">{{user.bio}}</p>
            </div>
        </div>
    </div>
    </Card>

    <Card class="bg-black border-yellow-400/20 p-4">
    <h3 class="text-lg font-bold text-yellow-400 mb-4 flex items-center">
        <GlobeAltIcon class="h-5 w-5 mr-2" />
        Networks
    </h3>

    <div class="space-y-3 mb-4">
        <div v-for="network in p2postStore.networks" class="bg-black border border-yellow-400/20 rounded-lg p-3">
            <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-white font-semibold">{{network.data.name}}</span>
            <Button
                size="sm"
                variant="ghost"
                @click=""
                class="text-black hover:bg-yellow-400"
            >
                <XMarkIcon class="h-4 w-4" />
                Remove
            </Button>
            </div>
            <div class="text-xs text-gray-400 space-y-1">
            <div>{{network.data.id}}</div>
            <div>Posts: {{network.totalPosts}}</div>
            </div>
        </div>
    </div>

    <div class="flex gap-2">
        <InputText
        value={newNetworkName}
        placeholder="Network name"
        class="bg-black border-yellow-400/30 text-white text-sm"
        />
        <Button size="sm" onClick={addNetwork} class="bg-yellow-400 text-black hover:bg-yellow-300">
        <PlusIcon class="h-4 w-4"/>
         Add
        </Button>
    </div>
    </Card>

    <Card v-if="false" class="bg-black border-yellow-400/20 p-4 flex-1">
    <h3 class="text-lg font-bold text-yellow-400 mb-4 flex items-center">
        <CommandLineIcon class="h-5 w-5 mr-2" />
        System Logs
    </h3>

    <div
        ref={logsRef}
        class="bg-black border border-yellow-400/20 rounded-lg p-3 h-64 overflow-y-auto font-mono text-xs"
    >
    <!-- V-for logs -->
        <div key={log.id} class="mb-1">
            <span class="text-gray-500">{new Date(log.timestamp).toLocaleTimeString()}</span>
            <span>
                <!-- TODO log level/type colors -->
            {log.message}
            </span>
        </div>
    </div>
    </Card>
</div>
<!-- <aside class="w-64 bg-gray-800 shadow-md p-4 overflow-y-auto">
    <div class="mt-6">
    <h3 class="text-lg font-semibold mb-2">Accounts</h3>
    <div v-for="peer in p2postStore.peers.value" :key="peer.pubkey" class="flex items-center space-x-2 mb-2">
        <img :src="peer.avatar" class="w-8 h-8 rounded-full" alt="Avatar" />
        <span class="text-sm font-medium">{{ peer.nickname }}</span>
    </div>
    </div>

    <div class="mt-6">
    <h3 class="text-lg font-semibold mb-2">Networks</h3>
    <ul>
        <li
            v-for="network in p2postStore.networks.value"
            :key="network.name"
            @click="selectNetwork(network)"
            class="cursor-pointer hover:text-blue-400"
        >
            <span class="font-medium">{{ network.name }}</span>
            <span class="text-sm text-gray-400 block">
            {{ network.peers }} peers, {{ network.posts }} posts
            </span>
            <button @click="removeNetwork(network.name)" class="text-red-400 hover:underline">
                Remove
            </button>
        </li>
    </ul>
    
    <form @submit.prevent="addNetwork" class="mb-4">
        <input
        v-model="newNetworkName"
        type="text"
        placeholder="New network..."
        class="w-full bg-gray-700 border border-gray-600 rounded p-2 mb-2 text-sm text-white"
        />
        <button
        type="submit"
        class="w-full bg-green-600 text-white text-sm py-1 rounded hover:bg-green-700"
        >
        Add Network
        </button>
    </form>
    </div> -->

    <!-- <div class="mt-6">
        <h3 class="text-lg font-semibold mb-2">Accounts</h3>
        <form @submit.prevent="updateUser" class="space-y-2">
            <input
            v-model="me.nickname"
            type="text"
            placeholder="Your nickname"
            class="w-full bg-gray-700 border border-gray-600 rounded p-2 text-sm text-white"
            />
            <input
            type="file"
            @change="onAvatarSelected"
            class="text-sm text-white"
            />
            <button
            type="submit"
            class="w-full bg-blue-600 text-white text-sm py-1 rounded hover:bg-blue-700"
            >
            Update Profile
            </button>
        </form>
        <div class="mt-2 text-sm text-gray-400">
            <p><strong>Public Key:</strong></p>
            <p class="break-all text-xs text-gray-500">{{ me.pubkey }}</p>
        </div>
    </div> -->
<!-- </aside> -->
</template>