<script setup>
import { useChatStore } from '../stores/chat';
import { storeToRefs } from 'pinia';
import MessageList from './MessageList.vue';
import UserList from './UserList.vue';
import UserList from './UserList.vue';
import MusicPlayer from './MusicPlayer.vue';
import { Hash, Volume2, VolumeX, Settings, X, Coins, Menu, User } from 'lucide-vue-next';
import { ref } from 'vue';

const showProfile = ref(false);
const selectedProfileAddress = ref(null);
const showMobileMenu = ref(false);

const chatStore = useChatStore();
const { channels, currentChannel, username, walletAddress } = storeToRefs(chatStore);

const isMuted = ref(true);
const showSettings = ref(false);
const newUsername = ref(username.value);
const emit = defineEmits(['toggleMute']);

const toggleMute = () => {
  isMuted.value = !isMuted.value;
  emit('toggleMute', isMuted.value);
};

const saveSettings = () => {
  if (newUsername.value.trim()) {
    chatStore.username = newUsername.value;
    // In a real app, we would emit a socket event to update the DB
    chatStore.socket.emit('join', { walletAddress: walletAddress.value, username: newUsername.value });
    showSettings.value = false;
  }
};
</script>

<template>
  <div class="flex h-screen w-full overflow-hidden relative bg-discord-dark">
    <!-- Mobile Menu Overlay -->
    <div 
      v-if="showMobileMenu" 
      @click="showMobileMenu = false"
      class="fixed inset-0 bg-black/60 z-40 md:hidden backdrop-blur-sm transition-opacity"
    ></div>

    <!-- Settings Modal -->
    <div v-if="showSettings" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
      <div class="bg-discord-sidebar border border-white/10 rounded-2xl w-full max-w-md shadow-2xl animate-pop-in">
        <div class="p-6 border-b border-white/5 flex items-center justify-between">
          <h2 class="text-xl font-bold text-white">Profile Settings</h2>
          <button @click="showSettings = false" class="text-gray-400 hover:text-white transition-colors">
            <X size="24" />
          </button>
        </div>
        <div class="p-6 space-y-4">
          <div>
            <label class="block text-xs font-bold text-crypto-muted uppercase tracking-wider mb-2">Username</label>
            <input 
              v-model="newUsername" 
              type="text" 
              class="w-full bg-discord-black border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-all"
              placeholder="Enter new username"
            />
          </div>
          <div>
            <label class="block text-xs font-bold text-crypto-muted uppercase tracking-wider mb-2">Wallet Address</label>
            <div class="w-full bg-discord-black/50 border border-white/5 rounded-xl px-4 py-3 text-gray-500 text-sm truncate">
              {{ walletAddress }}
            </div>
          </div>
        </div>
        <div class="p-6 border-t border-white/5 flex gap-3">
          <button 
            @click="showSettings = false"
            class="flex-1 px-4 py-2.5 rounded-xl border border-white/10 text-white font-medium hover:bg-white/5 transition-all"
          >
            Cancel
          </button>
          <button 
            @click="saveSettings"
            class="flex-1 px-4 py-2.5 rounded-xl bg-violet-600 text-white font-medium hover:bg-violet-500 shadow-lg shadow-violet-600/20 transition-all"
          >
            Save Changes
          </button>
        </div>
      </div>
    </div>

    <!-- Channels Sidebar -->
    <div 
      :class="[
        'fixed inset-y-0 left-0 w-64 bg-discord-sidebar flex flex-col border-r border-black/20 z-50 transition-transform duration-300 md:relative md:translate-x-0',
        showMobileMenu ? 'translate-x-0' : '-translate-x-full'
      ]"
    >
      <div class="h-12 px-4 flex items-center justify-between border-b border-black/20 shadow-sm">
        <h1 class="font-bold text-white truncate">Plexus Server</h1>
        <button @click="toggleMute" class="text-gray-400 hover:text-gray-200 transition-colors">
          <VolumeX v-if="isMuted" size="18" />
          <Volume2 v-else size="18" />
        </button>
      </div>
      
      <div class="flex-1 overflow-y-auto py-3 space-y-0.5 px-2">
        <!-- Profile Link -->
        <button 
          @click="selectedProfileAddress = walletAddress; showProfile = true; showMobileMenu = false"
          :class="['w-full flex items-center gap-2 px-2 py-1.5 rounded-md transition-all group mb-4',
            showProfile && selectedProfileAddress === walletAddress ? 'bg-[#3f4147] text-white' : 'text-gray-400 hover:bg-[#35373c] hover:text-gray-200']"
        >
          <User size="18" class="text-violet-400" />
          <span class="text-sm font-medium">My Profile</span>
        </button>

        <div class="px-2 mb-2 text-[11px] font-bold text-gray-500 uppercase tracking-wider">Text Channels</div>
        <div v-for="channel in channels" :key="channel.id">
          <button 
            @click="chatStore.setChannel(channel.id); showProfile = false; showMobileMenu = false"
            :class="['w-full flex items-center gap-2 px-2 py-1.5 rounded-md transition-all group', 
              currentChannel === channel.id && !showProfile ? 'bg-[#3f4147] text-white' : 'text-gray-400 hover:bg-[#35373c] hover:text-gray-200']"
          >
            <Hash size="18" :class="currentChannel === channel.id && !showProfile ? 'text-gray-200' : 'text-gray-500 group-hover:text-gray-400'" />
            <span class="text-sm font-medium">{{ channel.name }}</span>
          </button>
        </div>
      </div>

      <!-- Music Player & Profile -->
      <div class="bg-discord-black p-2 space-y-2">
        <MusicPlayer />
        
        <div class="flex items-center gap-2 p-1.5 rounded-md hover:bg-[#35373c] transition-all group cursor-pointer" @click="showSettings = true">
          <div class="relative">
            <div class="w-8 h-8 rounded-full bg-violet-600 flex items-center justify-center text-white text-xs font-bold">
              {{ username?.substring(0, 2).toUpperCase() }}
            </div>
            <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-discord-black rounded-full"></div>
          </div>
          <div class="flex-1 min-w-0">
            <div class="text-xs font-bold text-white truncate">{{ username }}</div>
            <div class="text-[10px] text-gray-400 truncate">#{{ walletAddress?.slice(-4) }}</div>
          </div>
          <Settings size="14" class="text-gray-400 group-hover:text-gray-200" />
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col bg-discord-dark relative overflow-hidden">
      <!-- Header -->
      <div class="h-12 px-4 flex items-center border-b border-black/20 shadow-sm bg-discord-dark/95 backdrop-blur-sm z-10">
        <button 
          @click="showMobileMenu = true" 
          class="md:hidden mr-3 text-gray-400 hover:text-white transition-colors"
        >
          <Menu size="24" />
        </button>
        <Hash size="20" class="text-gray-400 mr-2" />
        <span class="font-bold text-white mr-4">{{ showProfile ? (selectedProfileAddress === walletAddress ? 'My Profile' : 'User Profile') : currentChannel }}</span>
      </div>

      <div class="flex-1 flex overflow-hidden">
        <div class="flex-1 flex flex-col relative overflow-hidden">
          <UserProfile v-if="showProfile" :address="selectedProfileAddress" />
          <MessageList v-else @view-profile="(addr) => { selectedProfileAddress = addr; showProfile = true; }" />
        </div>

        <!-- Member List (Discord Style) -->
        <div class="w-60 bg-discord-sidebar border-l border-black/20 hidden xl:flex flex-col">
          <UserList @view-profile="(addr) => { selectedProfileAddress = addr; showProfile = true; }" />
        </div>
      </div>
    </div>
  </div>
</template>
