import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { DialogClose } from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import {
  BaseKey,
  useGetIdentity,
  useUpdate,
  useUpdatePassword,
} from "@refinedev/core";
import { useState } from "react";
import { z } from "zod";
import { Field } from "~/components/forms";
import { GeneralLayout } from "~/components/general-layout";
import { AddIcon, CloudCheckIcon, CloudIcon, CloudUploadIcon, CrownIcon, TrashIcon } from "~/components/icons";
import { useUppy } from "~/components/lib/uppy";
import {
  ManagementCard,
  ManagementCardAvatar,
  ManagementCardContent,
  ManagementCardFooter,
  ManagementCardTitle,
} from "~/components/management-card";
import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog";
import { Input } from "~/components/ui/input";
import { UsageCard } from "~/components/usage-card";

import QRImg from "~/images/QR.png";

export default function MyAccount() {
  const { data: identity } = useGetIdentity<{ email: string }>();

  const [openModal, setModal] = useState({
    changeEmail: false,
    changePassword: false,
    setupTwoFactor: false,
    changeAvatar: false,
  });

  return (
    <GeneralLayout>
      <h1 className="text-lg font-bold mb-4">My Account</h1>
      <UsageCard
        label="Usage"
        currentUsage={2}
        monthlyUsage={10}
        icon={<CloudIcon className="text-ring" />}
        button={
          <Button variant="accent" className="gap-x-2 h-12">
            <AddIcon />
            Upgrade to Premium
          </Button>
        }
      />
      <h2 className="font-bold my-8">Account Management</h2>
      <div className="grid grid-cols-3 gap-x-8">
        <ManagementCard>
          <ManagementCardAvatar
            onClick={() => setModal({ ...openModal, changeAvatar: true })}
          />
        </ManagementCard>
        <ManagementCard>
          <ManagementCardTitle>Email Address</ManagementCardTitle>
          <ManagementCardContent className="text-ring font-semibold">
            {identity?.email}
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button
              className="h-12 gap-x-2"
              onClick={() => setModal({ ...openModal, changeEmail: true })}>
              <AddIcon />
              Change Email Address
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
        <ManagementCard>
          <ManagementCardTitle>Account Type</ManagementCardTitle>
          <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
            Lite Premium Account
            <CrownIcon />
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button className="h-12 gap-x-2">
              <AddIcon />
              Upgrade to Premium
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
      </div>
      <h2 className="font-bold my-8">Security</h2>
      <div className="grid grid-cols-3 gap-x-8">
        <ManagementCard>
          <ManagementCardTitle>Password</ManagementCardTitle>
          <ManagementCardContent>
            <PasswordDots className="mt-6" />
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button
              className="h-12 gap-x-2"
              onClick={() => setModal({ ...openModal, changePassword: true })}>
              <AddIcon />
              Change Password
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
        <ManagementCard>
          <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
          <ManagementCardContent>
            Improve security by enabling 2FA.
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button
              className="h-12 gap-x-2"
              onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
              <AddIcon />
              Enable Two-Factor Authorization
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
      </div>
      <h2 className="font-bold my-8">More</h2>
      <div className="grid grid-cols-3 gap-x-8">
        <ManagementCard variant="accent">
          <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
          <ManagementCardContent>
            Get 1 GB per friend invited for free (max 5 GB).
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button variant="accent" className="h-12 gap-x-2">
              <AddIcon />
              Send Invitation
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
        <ManagementCard>
          <ManagementCardTitle>Read our Resources</ManagementCardTitle>
          <ManagementCardContent>
            Navigate helpful articles or get assistance.
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button className="h-12 gap-x-2">
              <AddIcon />
              Open Support Centre
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
        <ManagementCard>
          <ManagementCardTitle>Delete Account</ManagementCardTitle>
          <ManagementCardContent>
            Once initiated, this action cannot be undone.
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button className="h-12 gap-x-2" variant="destructive">
              <AddIcon />
              Delete my Account
            </Button>
          </ManagementCardFooter>
        </ManagementCard>
      </div>
      {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
      <ChangeAvatarForm
        open={openModal.changeAvatar}
        setOpen={(value: boolean) =>
          setModal({ ...openModal, changeAvatar: value })
        }
      />
      <ChangeEmailForm
        open={openModal.changeEmail}
        setOpen={(value: boolean) =>
          setModal({ ...openModal, changeEmail: value })
        }
        currentValue={identity?.email || ""}
      />
      <ChangePasswordForm
        open={openModal.changePassword}
        setOpen={(value: boolean) =>
          setModal({ ...openModal, changePassword: value })
        }
      />
      <SetupTwoFactorDialog
        open={openModal.setupTwoFactor}
        setOpen={(value: boolean) =>
          setModal({ ...openModal, setupTwoFactor: value })
        }
      />
    </GeneralLayout>
  );
}

const ChangeEmailSchema = z
  .object({
    email: z.string().email(),
    password: z.string(),
    retypePassword: z.string(),
  })
  .superRefine((data, ctx) => {
    if (data.password !== data.retypePassword) {
      return ctx.addIssue({
        code: z.ZodIssueCode.custom,
        path: ["retypePassword"],
        message: "Passwords do not match",
      });
    }
    return true;
  });

const ChangeEmailForm = ({
  open,
  setOpen,
  currentValue,
}: {
  open: boolean;
  setOpen: (value: boolean) => void;
  currentValue: string;
}) => {
  const { data: identity } = useGetIdentity<{ id: BaseKey }>();
  const { mutate: updateEmail } = useUpdate();
  const [form, fields] = useForm({
    id: "login",
    constraint: getZodConstraint(ChangeEmailSchema),
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: ChangeEmailSchema });
    },
    shouldValidate: "onSubmit",
    onSubmit(e) {
      e.preventDefault();

      const data = Object.fromEntries(new FormData(e.currentTarget).entries());
      console.log(identity);
      updateEmail({
        resource: "users",
        id: identity?.id || "",
        values: {
          email: data.email.toString(),
        },
      });
    },
  });

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="p-8" forceMount>
        <DialogHeader>
          <DialogTitle className="mb-8">Change Email</DialogTitle>
          <div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
            {currentValue}
          </div>
          <form {...getFormProps(form)}>
            <Field
              className="mt-8"
              inputProps={{ name: fields.email.name }}
              labelProps={{ children: "New Email Address" }}
              errors={fields.email.errors}
            />
            <Field
              inputProps={{ name: fields.password.name, type: "password" }}
              labelProps={{ children: "Password" }}
              errors={fields.password.errors}
            />
            <Field
              inputProps={{
                name: fields.retypePassword.name,
                type: "password",
              }}
              labelProps={{ children: "Retype Password" }}
              errors={fields.retypePassword.errors}
            />
            <Button className="w-full h-14">Change Email Address</Button>
          </form>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

const ChangePasswordSchema = z
  .object({
    currentPassword: z.string().email(),
    newPassword: z.string(),
    retypePassword: z.string(),
  })
  .superRefine((data, ctx) => {
    if (data.newPassword !== data.retypePassword) {
      return ctx.addIssue({
        code: z.ZodIssueCode.custom,
        path: ["retypePassword"],
        message: "Passwords do not match",
      });
    }
    return true;
  });

const ChangePasswordForm = ({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: (value: boolean) => void;
}) => {
  const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
  const [form, fields] = useForm({
    id: "login",
    constraint: getZodConstraint(ChangeEmailSchema),
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: ChangePasswordSchema });
    },
    shouldValidate: "onSubmit",
    onSubmit(e) {
      e.preventDefault();

      const data = Object.fromEntries(new FormData(e.currentTarget).entries());

      updatePassword({
        password: data.newPassword.toString(),
      });
    },
  });

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="p-8">
        <DialogHeader>
          <DialogTitle className="mb-8">Change Password</DialogTitle>
          <form {...getFormProps(form)}>
            <Field
              inputProps={{
                name: fields.currentPassword.name,
                type: "password",
              }}
              labelProps={{ children: "Current Password" }}
              errors={fields.currentPassword.errors}
            />
            <Field
              inputProps={{ name: fields.newPassword.name, type: "password" }}
              labelProps={{ children: "New Password" }}
              errors={fields.newPassword.errors}
            />
            <Field
              inputProps={{
                name: fields.retypePassword.name,
                type: "password",
              }}
              labelProps={{ children: "Retype Password" }}
              errors={fields.retypePassword.errors}
            />
            <Button className="w-full h-14">Change Password</Button>
          </form>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

const SetupTwoFactorDialog = ({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: (value: boolean) => void;
}) => {
  const [continueModal, setContinue] = useState<boolean>(false);

  return (
    <Dialog
      open={open}
      onOpenChange={(value) => {
        setOpen(value);
        setContinue(false);
      }}>
      <DialogContent className="p-8">
        <DialogHeader>
          <DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
          <div className="flex flex-col gap-y-6">
            {continueModal ? (
              <>
                <p className="text-sm text-primary-2">
                  Enter the authentication code generated in your two-factor
                  application to confirm your setup.
                </p>
                <Input fullWidth className="text-center" />
                <Button className="w-full h-14">Confirm</Button>
              </>
            ) : (
              <>
                <div className="p-6 flex justify-center border bg-secondary-2">
                  <img src={QRImg} alt="QR" className="h-36 w-36" />
                </div>
                <p className="font-semibold">
                  Don’t have access to scan? Use this code instead.
                </p>
                <div className="p-4 border text-primary-2 text-center font-bold">
                  HHH7MFGAMPJ44OM44FGAMPJ44O232
                </div>
                <Button
                  className="w-full h-14"
                  onClick={() => setContinue(true)}>
                  Continue
                </Button>
              </>
            )}
          </div>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
};

const ChangeAvatarForm = ({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: (value: boolean) => void;
}) => {
  const {
    getRootProps,
    getInputProps,
    getFiles,
    upload,
    state,
    removeFile,
    cancelAll,
  } = useUppy({
    uploader: "tus",
    endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT,
  });

  console.log({ state, files: getFiles() });

  const isUploading = state === "uploading";
  const isCompleted = state === "completed";
  const hasStarted = state !== "idle" && state !== "initializing";

  return (
    <Dialog
      open={open}
      onOpenChange={(value) => {
        setOpen(value);
      }}>
      <DialogContent className="p-8">
        <DialogHeader className="mb-6">
          <DialogTitle>Edit Avatar</DialogTitle>
        </DialogHeader>
        {!hasStarted && !getFiles().length ? (
          <div
            {...getRootProps()}
            className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
            <input
              hidden
              aria-hidden
              name="uppyFiles[]"
              key={new Date().toISOString()}
              multiple
              {...getInputProps()}
            />
            <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
            <p>Drag & Drop Files or Browse</p>
          </div>
        ) : null}

          {(!hasStarted && getFiles().length > 0) && (
            <div className="border border-border rounded p-4 bg-primary-dark relative">
              <Button
                className="absolute top-4 right-4 rounded-full aspect-square bg-primary-dark hover:bg-primary p-2 text-sm"
                onClick={() => removeFile(getFiles()[0].id)}>
                <Cross2Icon />
              </Button>
              <img className="w-full h-48" src={URL.createObjectURL(getFiles()[0].data)} alt="New Avatar Preview" />
            </div>
          )}

        {hasStarted ? (
          <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
            <CloudCheckIcon className="w-32 h-32" />
            {isCompleted
              ? "Upload completed"
              : `0% completed`}
          </div>
        ) : null}

        {isUploading ? (
          <DialogClose asChild onClick={cancelAll}>
            <Button size={"lg"} className="mt-6">
              Cancel
            </Button>
          </DialogClose>
        ) : null}

        {isCompleted ? (
          <DialogClose asChild>
            <Button size={"lg"} className="mt-6">
              Close
            </Button>
          </DialogClose>
        ) : null}

        {!hasStarted && !isCompleted && !isUploading ? (
          <Button size={"lg"} className="mt-6" onClick={upload}>
            Upload
          </Button>
        ) : null}
      </DialogContent>
    </Dialog>
  );
};

const PasswordDots = ({ className }: { className?: string }) => {
  return (
    <svg
      aria-hidden="true"
      width="219"
      height="7"
      viewBox="0 0 219 7"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}>
      <circle cx="3.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="31.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="45.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="17.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="59.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="73.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="87.7771" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="101.777" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="131.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="117.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="145.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="159.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="173.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="187.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="201.5" cy="3.5" r="3.5" fill="currentColor" />
      <circle cx="215.5" cy="3.5" r="3.5" fill="currentColor" />
    </svg>
  );
};