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 { MailOption } from "./types";

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

const Email = ({
  name,
  verification_link,
}: ResetPasswordProps): React.ReactNode => {
  const previewText = `Karma Club Admin password reset.`;
  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">
              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 admin 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 {
    console.log(`[EmailTemplate] Starting React render for ${mailProps.name}`);
    const html = await render(<Email {...mailProps} />);
    console.log(`[EmailTemplate] Render successful. Size: ${html.length} characters.`);
    return {
      ...mailOption,
      subject: "Karma Club Admin password reset",
      headers: {
        priority: "high",
      },
      html,
    };
  } catch (error) {
    console.error(`[EmailTemplate] RENDER FAILED:`, error);
    const { message } = error as Error;
    throw new Error(message ?? "Failed to send account verification email");
  }
}
