"use client";

import { approveAlias, deleteAlias, fetchAllAliases } from "@/lib/actions";
import GenericConfirmationDialog from "@/lib/components/ui/GenericConfirmationDialog";
import GhostMessage from "@/lib/components/ui/GhostMessage";
import LoadingSpinner from "@/lib/components/ui/LoadingSpinner";
import { AliasEntry } from "@/lib/db";
import { Badge, Button, Card, Code, Dialog, Flex, Heading, Table } from "@radix-ui/themes";
import { ListChecksIcon } from "lucide-react";
import Image from "next/image";
import { useEffect, useState } from "react";

export default function Aliases() {
  const [aliases, setAliases] = useState<AliasEntry[] | null>();
  const pending = aliases?.filter((alias) => alias.pending);
  const active = aliases?.filter((alias) => !alias.pending);

  useEffect(() => {
    fetchAllAliases().then(setAliases);
  }, []);

  return (
    <>
      <Heading className="pb-4">Aliases</Heading>

      <Flex gap="3" direction="column">
        <Card>
          <Heading size="3" className="pb-2">Pending</Heading>

          {pending
            ? pending.length
              ? <Table.Root>
                <Table.Header>
                  <Table.Row>
                    <Table.ColumnHeaderCell justify='start'>User</Table.ColumnHeaderCell>
                    <Table.ColumnHeaderCell justify='start'>Alias</Table.ColumnHeaderCell>
                    <Table.ColumnHeaderCell justify='end'>Actions</Table.ColumnHeaderCell>
                  </Table.Row>
                </Table.Header>

                <Table.Body>
                  {pending.map((alias) => (
                    <Table.Row key={alias.id}>
                      <Table.Cell justify='start'>{alias.address}</Table.Cell>
                      <Table.Cell justify='start'>{alias.alias}</Table.Cell>
                      <Table.Cell justify='end'>
                        <Flex gap='3' justify="end">
                          <GenericConfirmationDialog
                            title="Approve alias request"
                            description={<>Are you sure you want to approve <Code>{alias.address}</Code>&apos;s request for <Code>{alias.alias}</Code>?</>}
                            labelConfirm="Approve"
                            action={() => approveAlias(alias.alias)
                              .then(() => setAliases(aliases?.map((a) => a.id == alias.id ? { ...a, pending: false } : a)))}
                          >
                            <Button size="1" variant="surface">
                              Approve
                            </Button>
                          </GenericConfirmationDialog>
                          <GenericConfirmationDialog
                            title="Deny alias request"
                            description={<>Are you sure you want to deny <Code>{alias.address}</Code>&apos;s request for <Code>{alias.alias}</Code>?</>}
                            labelConfirm="Delete"
                            action={() => deleteAlias(alias.alias)
                              .then(() => setAliases(aliases?.filter(a => a.id != alias.id)))}
                          >
                            <Button size="1" variant="soft">
                              Delete
                            </Button>
                          </GenericConfirmationDialog>
                        </Flex>
                      </Table.Cell>
                    </Table.Row>
                  ))}
                </Table.Body>
              </Table.Root>
              : <GhostMessage icon={<ListChecksIcon />} header="All caught up" message="There are no pending alias requests" />
            : <GhostMessage icon={<LoadingSpinner />} header="Loading" />
          }
        </Card>

        <Card>
          <Heading size="3" className="pb-2">Active aliases</Heading>

          {active
            ? active.length
              ? <Table.Root>
                <Table.Header>
                  <Table.Row>
                    <Table.ColumnHeaderCell justify='start'>User</Table.ColumnHeaderCell>
                    <Table.ColumnHeaderCell justify='start'>Alias</Table.ColumnHeaderCell>
                    <Table.ColumnHeaderCell justify='end'>Actions</Table.ColumnHeaderCell>
                  </Table.Row>
                </Table.Header>

                <Table.Body>
                  {active.map((alias) => (
                    <Table.Row key={alias.id}>
                      <Table.Cell justify='start'>{alias.address}</Table.Cell>
                      <Table.Cell justify='start'>
                        {alias.alias}
                        {alias.temporary && <Badge variant="soft" ml="3" color="gray">Temporary</Badge>}
                      </Table.Cell>
                      <Table.Cell justify='end'>
                        <Flex gap='3' justify="end">
                          <Dialog.Root>
                            <Dialog.Trigger>
                              <Button
                                size="1"
                                variant="soft"
                              >
                                Delete
                              </Button>
                            </Dialog.Trigger>
                            <Dialog.Content>
                              <Dialog.Title>Delete alias</Dialog.Title>
                              <Dialog.Description>Are you sure you want to delete <Code>{alias.alias}</Code>?</Dialog.Description>

                              <Flex gap="3" mt="4" justify="end">
                                <Dialog.Close>
                                  <Button variant="outline">Cancel</Button>
                                </Dialog.Close>
                                <Dialog.Close>
                                  
                                  <Button
                                    variant="soft"
                                    onClick={() => deleteAlias(alias.alias)
                                      .then(() => setAliases(aliases?.filter(a => a.id != alias.id)))}
                                  >
                                    Delete
                                  </Button>
                                </Dialog.Close>
                              </Flex>
                            </Dialog.Content>
                          </Dialog.Root>
                        </Flex>
                      </Table.Cell>
                    </Table.Row>
                  ))}
                </Table.Body>
              </Table.Root>
              : <GhostMessage icon={<Image src="/mindblown.png" alt="Mind blown" width="40" height="40" />} header="No aliases" message="Hmm, that's weird..." />
            : <GhostMessage icon={<LoadingSpinner />} header="Loading" />
          }
        </Card>
      </Flex>
    </>
  );
}