<template>
  <div class="mt-20 mb-10">
    <h1 class="text-5xl font-bold">Select a server</h1>
    <h2 class="text-xl text-muted-foreground mb-5">You manage <span class="text-primary">{{ user?.guilds.length }}</span> servers</h2>

    <Button variant="outline" @click="refreshGuilds">
      <Icon icon="radix-icons:reload" class="mr-2 h-5 w-5" />
      <span class="text-base">Refresh</span>
    </Button>

    <div class="mx-1 h-px bg-muted my-10" />
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-9">
    <Card v-for="(guild, i) in guilds" :key="i" class="flex flex-col justify-between flex-grow">
      <CardHeader>
        <img :src="`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`" alt="icon" height="70" width="70" class="rounded-full">
        <CardTitle class="pt-3 text-lg break-words">{{ guild.name }}</CardTitle>
        <CardDescription class="text-base">{{ guild.owner ? 'Owner' : 'Server Manager' }}</CardDescription>
      </CardHeader>
      <CardFooter>
        <Button :variant="guild.botInGuild ? 'default' : 'outline'" class="w-full text-base">
          <RouterLink :external="guild.botInGuild ? false : true" :to="guild.botInGuild ? `/dashboard/${guild.id}/member-screening` : `https://discord.com/oauth2/authorize?client_id=${runtimeConfig.public.url}&guild_id=${guild.id}&redirect_uri=${encodeURIComponent(`${runtimeConfig.public.url}/dashboard`)}&response_type=code&permissions=8&scope=bot`">
            {{ guild.botInGuild ? 'Configure' : 'Add Bot' }}
          </RouterLink>
        </Button>
      </CardFooter>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from "@iconify/vue";
  import { useToast } from "@/components/ui/toast/use-toast";

  const { toast } = useToast();
  const runtimeConfig = useRuntimeConfig();

  const user = useUser();
  const { data: guilds } = useFetch("/api/discord/guilds");

  async function refreshGuilds() { // TODO: ratelimit
    if(!user) return toast({ title: "Uh oh! Something went wrong.", description: "If this issue persists, please contact the site manager." });

    // TODO
  }
</script>

<template>
  <div class="mt-20 mb-10">
    <h1 class="text-5xl font-bold">Select a server</h1>
    <h2 class="text-xl text-muted-foreground mb-5">You manage <span class="text-primary">{{ user?.guilds.length }}</span> servers</h2>

    <Button variant="outline" @click="refreshGuilds">
      <Icon icon="radix-icons:reload" class="mr-2 h-5 w-5" />
      <span class="text-base">Refresh</span>
    </Button>

    <div class="mx-1 h-px bg-muted my-10" />
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-9">
    <Card v-for="(guild, i) in guilds" :key="i" class="flex flex-col justify-between flex-grow">
      <CardHeader>
        <img :src="`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`" alt="icon" height="70" width="70" class="rounded-full">
        <CardTitle class="pt-3 text-lg break-words">{{ guild.name }}</CardTitle>
        <CardDescription class="text-base">{{ guild.owner ? 'Owner' : 'Server Manager' }}</CardDescription>
      </CardHeader>
      <CardFooter>
        <Button :variant="guild.botInGuild ? 'default' : 'outline'" class="w-full text-base">
          <RouterLink :external="guild.botInGuild ? false : true" :to="guild.botInGuild ? `/dashboard/${guild.id}/member-screening` : `https://discord.com/oauth2/authorize?client_id=${runtimeConfig.public.url}&guild_id=${guild.id}&redirect_uri=${encodeURIComponent(`${runtimeConfig.public.url}/dashboard`)}&response_type=code&permissions=8&scope=bot`">
            {{ guild.botInGuild ? 'Configure' : 'Add Bot' }}
          </RouterLink>
        </Button>
      </CardFooter>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from "@iconify/vue";
  import { useToast } from "@/components/ui/toast/use-toast";

  const { toast } = useToast();
  const runtimeConfig = useRuntimeConfig();

  const user = useUser();
  const { data: guilds } = useFetch("/api/discord/guilds");

  async function refreshGuilds() { // TODO: ratelimit
    if(!user) return toast({ title: "Uh oh! Something went wrong.", description: "If this issue persists, please contact the site manager." });

    // TODO
  }
</script>