import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Img,
  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 AccountVerificationProps {
  name: string;
  verification_link: string;
}

const Email = ({
  name,
  verification_link,
}: AccountVerificationProps): React.ReactNode => {
  const previewText = `VERIFY YOUR PERSONAL KARMA CLUB ACCOUNT`;
  const logoURL = `https://cdn.karmagroup.com/Karma-Group-Logo-png.png`;

  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]">
            <Section className="mt-[32px]">
              <Img
                src={logoURL}
                height="50"
                alt="Karma Logo"
                className="my-0 mx-auto"
              />
            </Section>
            <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
              Verify your Karma Club account
            </Heading>
            <Text className="text-black text-[14px] leading-[24px]">
              Dear Member,
            </Text>
            <Text className="text-black text-[14px] leading-[24px] mt-[32px]">
              We&apos;re excited to welcome you to the cutting edge Karma Subito App - your personal passport to the world of Karma! In order to securely activate your account, please take a moment to set a new password. Simply click the VERIFY ACCOUNT button below, fill in your details within the next seven days and you&apos;re all set!

            </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}
              >
                Verify Account
              </Button>
            </Section>
            <Text className="text-black text-[14px] leading-[24px] italic">
              This verification link will expire within 7 days.
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export async function sendAccountVerificationMail(
  mailProps: AccountVerificationProps,
  mailOption: MailOption,
): Promise<Mail.Options> {
  try {
    const html = await render(<Email {...mailProps} />);
    return {
      ...mailOption,
      subject: "VERIFY YOUR PERSONAL KARMA CLUB ACCOUNT",
      headers: {
        priority: "high",
      },
      html,
    };
  } catch (error) {
    const { message } = error as Error;
    throw new Error(message ?? "Failed to send account verification email");
  }
}
