"use client";

import { changeOwnPassword } from "@/lib/actions";
import { ToastContext } from "@/lib/providers/ToastProvider";
import { Box, Button, Callout, Card, Dialog, Flex, Heading, IconButton, Link, Popover, Text, TextField, Tooltip } from "@radix-ui/themes";
import { AlertCircleIcon, InfoIcon, LockIcon, UserIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useContext, useState } from "react";

export default function OwnCredentialsCard() {
  const session = useSession().data;
  const [newPassword, setNewPassword] = useState("");
  const validPassword = newPassword.length >= 8;
  const toast = useContext(ToastContext);

  return (
    <Card className="h-fit">
      <Heading size="3">Credentials</Heading>
      <Text weight="light" size="2">These are the details you can use to authenticate via SMTP and IMAP.</Text>

      <Flex direction="column" gap="3" className="pt-2">
        <TextField.Root>
          <TextField.Slot>
            <UserIcon height="16" width="16" />
          </TextField.Slot>
          <TextField.Input disabled value={session?.user?.email ?? 'n/a'} />
          <TextField.Slot>
            <Popover.Root>
              <Popover.Trigger>
                <IconButton asChild size="1" variant="ghost">
                  <InfoIcon height="16" width="16" />
                </IconButton>
              </Popover.Trigger>
              <Popover.Content className="w-96">
                <Text>
                  Your username uniquely identifies your account and therefore cannot be changed. If you need a different email address, you can request an alias instead.
                </Text>
              </Popover.Content>
            </Popover.Root>
          </TextField.Slot>
        </TextField.Root>

        <Flex direction="row" gap="3">
          <TextField.Root className="flex-1">
            <TextField.Slot>
              <LockIcon height="16" width="16" />
            </TextField.Slot>
            <TextField.Input disabled value={"\u25CF".repeat(10)} />
          </TextField.Root>

          <Dialog.Root>
            <Dialog.Trigger>
              <Button variant="outline">
                Change
              </Button>
            </Dialog.Trigger>

            <Dialog.Content>
              <Dialog.Title>Update password</Dialog.Title>

              <Box pb="4">
                <Callout.Root>
                  <Callout.Icon>
                    <AlertCircleIcon />
                  </Callout.Icon>
                  <Callout.Text>You will be logged out of every configured mail client!</Callout.Text>
                </Callout.Root>
              </Box>

              <TextField.Root>
                <TextField.Slot>
                  <LockIcon height="16" width="16" />
                </TextField.Slot>
                <TextField.Input
                  type="password"
                  placeholder="New password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.currentTarget.value)}
                />
              </TextField.Root>

              <Flex gap="3" mt="4" justify="end">
                <Dialog.Close>
                  <Button variant="outline" onClick={() => setNewPassword("")}>Cancel</Button>
                </Dialog.Close>
                <Dialog.Close>
                  {validPassword
                    ? (
                      <Button
                        variant="soft"
                        onClick={async () => {
                          setNewPassword("");

                          try {
                            await changeOwnPassword(newPassword);
                            toast({
                              title: "Password changed",
                              variant: 'success',
                            });
                          } catch (e) {
                            console.error(e);
                            toast({
                              title: "Password change failed",
                              description: `${e}`,
                              variant: 'error',
                            });
                          }
                        }}
                      >Update</Button>
                    )
                    : (
                      <Tooltip content="The password must have a minimum length of 8 characters">
                        <Button variant="soft" disabled>Update</Button>
                      </Tooltip>
                    )
                  }
                </Dialog.Close>
              </Flex>
            </Dialog.Content>
          </Dialog.Root>
        </Flex>
      </Flex>
    </Card>
  );
}