<template>
  <div class="servers">
    <h1>Game Servers</h1>

    <!-- Always On Section -->
    <section class="server-section">
      <h2>Always On</h2>
      <div class="server-grid">
        <div
          v-for="(server, name) in alwaysOnServers"
          :key="name"
          class="server-card"
          @click="openModal(name)"
        >
          <h3>{{ name }}</h3>
          <p>
            Status: <span :class="server.status">{{ server.status }}</span>
          </p>
        </div>
      </div>
    </section>

    <!-- Toggled Section -->
    <section class="server-section">
      <h2>Toggled On/Off As Needed</h2>
      <div class="server-grid">
        <div
          v-for="(server, name) in toggledServers"
          :key="name"
          class="server-card"
          @click="openModal(name)"
        >
          <h3>{{ name }}</h3>
          <p>
            Status: <span :class="server.status">{{ server.status }}</span>
          </p>
        </div>
      </div>
    </section>

    <!-- Modal -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <img v-if="modalData.banner" :src="modalData.banner" alt="Server Banner" class="banner" />
        <h2>{{ modalData.name || 'No Server Selected' }}</h2>
        <p>
          Status:
          <span :class="modalData.status">
            <i v-if="modalData.status === 'online'" class="fas fa-check-circle online-icon"></i>
            <i
              v-else-if="modalData.status === 'offline'"
              class="fas fa-times-circle offline-icon"
            ></i>
            <i v-else class="fas fa-question-circle unknown-icon"></i>
            {{ modalData.status || 'unknown' }}
          </span>
        </p>

        <p v-if="showPlayerCount">
          <i class="fas fa-users players-icon"></i>
          Players Online: {{ displayPlayerCount }}
        </p>

        <h3>About</h3>
        <p v-if="modalData.about" v-html="modalData.about"></p>
        <p v-else>No description available.</p>

        <h3>Connection Instructions</h3>
        <div v-if="modalData.instructions">
          <p class="ip-display" v-if="modalData.instructions.public">
            Public:&nbsp;&nbsp;
            <span class="ip">{{ modalData.instructions.public }}</span>
          </p>
          <p class="ip-display" v-if="modalData.instructions.local">
            Local:&nbsp;&nbsp;
            <span class="ip">{{ modalData.instructions.local }}</span>
          </p>
        </div>

        <h3 v-if="modalData.installInstructions">Installation Instructions</h3>
        <p v-if="modalData.installInstructions">{{ modalData.installInstructions }}</p>

        <a v-if="modalData.link" :href="modalData.link" target="_blank" class="link">
          Download Modpack
        </a>
        &nbsp;&nbsp;<button @click="closeModal" class="close-button">Close</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

interface ServerInstructions {
  public: string
  local: string
}

interface Server {
  name?: string
  banner: string
  status: string
  playersOnline?: number
  maxPlayers?: number
  about: string
  instructions: ServerInstructions
  installInstructions?: string
  queryIP: string
  link: string | null
}

export default defineComponent({
  data() {
    return {
      showModal: false,
      modalData: {} as Server,

      alwaysOnServers: {
        'Minecraft Java Modern': {
          banner: 'minecraft-modern-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 20,
          about: 'This is the modern Minecraft Java server.',
          instructions: {
            public: '',
            local: '192.168.1.201',
          },
          installInstructions: "Download Minecraft Java Edition from Mojang's website.",
          queryIP: '',
          link: '',
        },
        'Minecraft Java 1.12.2': {
          banner: 'minecraft-1-12-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 10,
          about: 'This is the Minecraft Java 1.12.2 server with mods.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions: 'Install Forge 1.12.2 and download the modpack provided.',
          queryIP: '',
          link: '',
        },
        Terraria: {
          banner: 'terraria-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 8,
          about: 'Our modded Terraria instance for friends and family.',
          instructions: {
            public: '',
            local: '192.168.1.121',
          },
          installInstructions:
            'Use TModLoader from Steam (not base Terraria) and download our pack.',
          queryIP: '',
          link: 'https://steamcommunity.com/sharedfiles/filedetails/?id=2943030068',
        },
        'Team Fortress 2': {
          banner: 'tf2-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 16,
          about: 'Classic Team Fortress 2 fun with friends.',
          instructions: {
            public: '',
            local: '192.168.1.203',
          },
          installInstructions: 'Download Team Fortress 2 for free on Steam.',
          queryIP: '',
          link: '',
        },
      } as Record<string, Server>, // Add type Record<string, Server> for alwaysOnServers

      toggledServers: {
        'Core Keeper': {
          banner: 'core-keeper-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 16,
          about: 'Explore, mine, and survive in this pixelated adventure.',
          instructions: {
            public: '',
            local: '192.168.1.204',
          },
          installInstructions: 'Available on Steam. Ensure your game is up to date.',
          queryIP: '',
          link: null,
        },
        ECO: {
          banner: 'eco-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 50,
          about: 'A global survival game where players build an ecosystem.',
          instructions: {
            public: 'eco.example.com',
            local: '',
          },
          installInstructions:
            'Download ECO from the official website or Steam. Use the provided IP.',
          queryIP: 'http://eco.example.com/status',
          link: null,
        },
        Enshrouded: {
          banner: 'enshrouded-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 16,
          about: 'A survival crafting game in a mysterious fantasy setting.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions: undefined,
          queryIP: 'http://enshrouded.example.com/status',
          link: null,
        },
        Empyrion: {
          banner: 'empyrion-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 16,
          about: 'Explore space and build your intergalactic empire.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions:
            'Download Empyrion from Steam and ensure mods match server settings.',
          queryIP: 'http://empyrion.example.com/status',
          link: null,
        },
        Palworld: {
          banner: 'palworld-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 32,
          about: 'A multiplayer game where you befriend and fight alongside creatures.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions: 'Available on Steam. Join the server via multiplayer menu.',
          queryIP: 'http://palworld.example.com/status',
          link: null,
        },
        'Survive The Nights': {
          banner: 'survive-the-nights-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 10,
          about: 'A survival horror game set in a post-apocalyptic world.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions: 'Purchase on Steam and ensure to update your client.',
          queryIP: 'http://survivethenights.example.com/status',
          link: null,
        },
        Valheim: {
          banner: 'valheim-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 10,
          about: 'A Viking-themed survival game set in a procedurally generated world.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions: 'Install via Steam and ensure mods match server settings.',
          queryIP: 'http://valheim.example.com/status',
          link: null,
        },
        'V Rising': {
          banner: 'v-rising-banner.jpg',
          status: 'unknown',
          playersOnline: 0,
          maxPlayers: 20,
          about: 'Rise as a vampire lord in this survival RPG.',
          instructions: {
            public: '',
            local: '',
          },
          installInstructions: 'Available on Steam. Ensure your game and server mods are synced.',
          queryIP: 'http://vrising.example.com/status',
          link: null,
        },
      } as Record<string, Server>, // Add type Record<string, Server> for toggledServers
    }
  },
  computed: {
    showPlayerCount(): boolean {
      return this.modalData.playersOnline !== undefined && this.modalData.maxPlayers !== undefined
    },
    displayPlayerCount(): string {
      if (this.modalData.maxPlayers === undefined) return '? / ?'
      if (this.modalData.playersOnline === undefined) return '? / ?'
      return `${this.modalData.playersOnline} / ${this.modalData.maxPlayers}`
    },
  },
  methods: {
    openModal(serverName: string) {
      this.modalData = this.alwaysOnServers[serverName] || this.toggledServers[serverName] || {}
      this.modalData.name = serverName
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
    },
  },
})
</script>
