"use client";

import { Server } from "revolt-api";
import { Button } from "../../ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { useState } from "react";
import { updateServerDiscoverability, updateServerFlags } from "@/lib/actions";
import { useToast } from "../../ui/use-toast";

export function ServerActions({ server }: { server: Server }) {
  const [selectBadges, setSelectBadges] = useState(false);
  const [serverDraft, setDraft] = useState(server);
  const { toast } = useToast();

  return (
    <div className="flex gap-2">
      {serverDraft.discoverable ? (
        <Button
          className="flex-1"
          onClick={async () => {
            try {
              await updateServerDiscoverability(server._id, false);
              setDraft((server) => ({ ...server, discoverable: false }));
              toast({
                title: "Removed server from Discover",
              });
            } catch (err) {
              toast({
                title: "Failed to remove server from Discover",
                description: String(err),
                variant: "destructive",
              });
            }
          }}
        >
          Remove from Discover
        </Button>
      ) : (
        <Button
          className="flex-1"
          onClick={async () => {
            try {
              await updateServerDiscoverability(server._id, true);
              setDraft((server) => ({ ...server, discoverable: true }));
              toast({
                title: "Added server to Discover",
              });
            } catch (err) {
              toast({
                title: "Failed to add server to Discover",
                description: String(err),
                variant: "destructive",
              });
            }
          }}
        >
          Add to Discover
        </Button>
      )}

      <Popover open={selectBadges} onOpenChange={setSelectBadges}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={selectBadges}
            className="flex-1 justify-between"
          >
            {serverDraft.flags === 1
              ? "Official"
              : serverDraft.flags === 2
              ? "Verified"
              : "No Badge"}
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>

        <PopoverContent className="w-[200px] p-0">
          <Command>
            {[
              { value: 0, label: "No Badge" },
              { value: 1, label: "Official" },
              { value: 2, label: "Verified" },
            ].map((flag) => (
              <CommandItem
                key={flag.value}
                onSelect={async () => {
                  setSelectBadges(false);

                  try {
                    await updateServerFlags(server._id, flag.value);
                    setDraft((server) => ({ ...server, flags: flag.value }));
                    toast({
                      title: "Updated server flags",
                    });
                  } catch (err) {
                    toast({
                      title: "Failed to update server flags",
                      description: String(err),
                      variant: "destructive",
                    });
                  }
                }}
              >
                <Check
                  className={cn(
                    "mr-2 h-4 w-4",
                    /*value === framework.value*/ false
                      ? "opacity-100"
                      : "opacity-0"
                  )}
                />
                {flag.label}
              </CommandItem>
            ))}
          </Command>
        </PopoverContent>
      </Popover>

      <Button className="flex-1" variant="destructive">
        Quarantine
      </Button>
    </div>
  );
}