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

export interface UploadPostcardConfirmationProps {
  email: string;
}

const Email = ({ email }: UploadPostcardConfirmationProps): React.ReactNode => {
  const previewText = `Thank you for sharing the postcard`;
  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">
              Welcome to Karma Community
            </Heading>
            <Text className="text-black text-[14px] leading-[24px]">
              Thank you for sharing the postcard. Karma will verify it soon.
            </Text>
            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
            <Text className="text-[#666666] text-[12px] leading-[24px]">
              This confirmation was sent to{" "}
              <span className="text-black">{email}</span>.
            </Text>
            <Text className="text-[#666666] text-[12px] leading-[24px] text-center">
              © 2025 Karma Group. All rights reserved.
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export async function sendUploadPostcardSubmissionMail(
  mailProps: UploadPostcardConfirmationProps,
  mailOption: MailOption,
) {
  try {
    const html = await render(<Email {...mailProps} />);
    return {
      ...mailOption,
      subject: "Successfully submitted the postcard for review.",
      headers: {
        priority: "high",
      },
      html,
    };
  } catch (error) {
    const { message } = error as Error;
    throw new Error(
      message ?? "Failed to send upload postcard submission email",
    );
  }
}
