import * as React from "react";
import { User } from "@repo/db";
import { Html, render } from "@react-email/components";
import { EmailFooter } from "./EmailFooter";

const styles = `
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
  }

  a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: inherit !important;
  }

  #MessageViewBody a {
    color: inherit;
    text-decoration: none;
  }

  p {
    line-height: inherit;
  }

  .desktop_hide,
  .desktop_hide table {
    mso-hide: all;
    display: none;
    max-height: 0px;
    overflow: hidden;
  }

  .image_block img + div {
    display: none;
  }

  sup,
  sub {
    font-size: 75%;
    line-height: 0;
  }

  .menu_block.desktop_hide .menu-links span {
    mso-hide: all;
  }

  @media (max-width: 700px) {
    .desktop_hide table.icons-inner {
      display: inline-block !important;
    }

    .icons-inner {
      text-align: center;
    }

    .icons-inner td {
      margin: 0 auto;
    }
  }
`;

const Template = ({ user, code }: { user: User; code: string }) => (
	<Html lang="de">
		<meta content="text/html; charset=utf-8" httpEquiv="Content-Type" />
		<meta content="width=device-width, initial-scale=1.0" name="viewport" />
		<link
			href="https://fonts.googleapis.com/css?family=Montserrat"
			rel="stylesheet"
			type="text/css"
		/>
		<style>{styles}</style>
		<body style={{ backgroundColor: "#FFFFFF", margin: 0, padding: 0 }}>
			<table width="100%">
				<tbody>
					<tr>
						<td>
							<table align="center" width="680" style={{ margin: "0 auto", color: "#000000" }}>
								<tbody>
									<tr>
										<td style={{ textAlign: "center", paddingTop: "30px" }}>
											<img
												src={`${process.env.NEXT_PUBLIC_HUB_URL}/mail/var_logo.png`}
												alt="Logo"
												width="80"
												style={{ display: "block", margin: "0 auto" }}
											/>
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "24px",
												color: "#011936",
												padding: "20px 0",
											}}
										>
											<strong>Bestätigung deiner E-Mail-Adresse</strong>
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "30px",
												color: "#011936",
											}}
										>
											Hallo {user.firstname},
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "18px",
												color: "#011936",
												padding: "20px",
											}}
										>
											Klicke auf den folgenden Link, um deinen Account zu bestätigen:
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: "center", padding: "10px 0" }}>
											<a
												href={`${process.env.NEXT_PUBLIC_HUB_URL}/settings/email-verification?code=${code}`}
												style={{
													display: "inline-block",
													backgroundColor: "#011936",
													color: "#fff",
													padding: "12px 32px",
													borderRadius: "8px",
													textDecoration: "none",
													fontSize: "18px",
													fontWeight: "bold",
												}}
											>
												E-Mail bestätigen
											</a>
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "16px",
												color: "#011936",
												padding: "10px 0",
											}}
										>
											Oder gehe zu{" "}
											<p
												style={{
													display: "inline",
													fontWeight: "bold",
													margin: 0,
												}}
											>
												<strong>
													{process.env.NEXT_PUBLIC_HUB_URL}/settings/email-verification
												</strong>
											</p>
											<br />
											und gib dort deinen Code ein.
										</td>
									</tr>

									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "18px",
												color: "#011936",
												padding: "20px",
											}}
										>
											Deinen Code lautet: <strong>{code}</strong>
										</td>
									</tr>
									<tr>
										<EmailFooter />
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</tbody>
			</table>
		</body>
	</Html>
);

export function renderVerificationCode({ user, code }: { user: User; code: string }) {
	return render(<Template user={user} code={code} />);
}
