import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Section,
  Tailwind,
  Text,
  render,
} from "@react-email/components";
import type Mail from "nodemailer/lib/mailer";
import React from "react";
import type { MailOption } from "../types";

export interface ResetPasswordProps {
  name: string;
  verification_link: string;
}

const Email = ({
  name,
  verification_link,
}: ResetPasswordProps): React.ReactNode => {
  const previewText = `Karma Club password reset.`;

  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans px-2">
          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
            <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
              Confirmation to reset the password.
            </Heading>
            <Text className="text-black text-[14px] leading-[24px]">
              Hey there,
            </Text>
            <Text className="text-black text-[14px] leading-[24px]">
              It appears that you may have forgotten your current password and
              are currently unable to access your Karma account. If you wish to
              reset your password, please confirm your request by clicking the
              &quot;Reset Password&quot; button below.
            </Text>
            <Text className="text-black text-[14px] leading-[24px]">
              If you need any assistance, please do not hesitate to contact us.
            </Text>
            <Section className="text-center mt-[32px] mb-[32px]">
              <Button
                className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
                href={verification_link}
              >
                Reset my password
              </Button>
            </Section>
            <Text className="text-black text-[14px] leading-[24px]">
              This verification link will expire within 7 days.
            </Text>
            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
            <Text className="text-[#666666] text-[12px] leading-[24px]">
              This mail was sent from{" "}
              <span className="text-black">Karma Group</span>. If you were not
              expecting this email, you can ignore this email. If you are
              concerned about your account&apos;s safety, please get in touch
              with us.
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export async function sendResetPasswordMail(
  mailProps: ResetPasswordProps,
  mailOption: MailOption,
): Promise<Mail.Options> {
  try {
    const html = await render(<Email {...mailProps} />);
    return {
      ...mailOption,
      subject: "Karma account password reset",
      headers: {
        priority: "high",
      },
      html,
    };
  } catch (error) {
    const { message } = error as Error;
    throw new Error(message ?? "Failed to send account verification email");
  }
}
