import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
  Button,
  Link,
} from "@react-email/components";

interface UserInvitationEmailProps {
  email: string;
  role: string;
  inviteUrl: string;
}

export function UserInvitationEmail({
  email,
  role,
  inviteUrl,
}: UserInvitationEmailProps) {
  const roleDisplay =
    role === "admin"
      ? "Administrator"
      : role === "trainer"
        ? "Trainer"
        : "Client";

  return (
    <Html>
      <Head />
      <Preview>You've been invited to join FitAI as a {roleDisplay}</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>Welcome to FitAI! 🎉</Heading>
          <Text style={text}>
            You've been invited to join FitAI as a{" "}
            <strong>{roleDisplay}</strong>.
          </Text>
          <Text style={text}>
            Click the button below to accept your invitation and create your
            account:
          </Text>
          <Section style={buttonContainer}>
            <Button style={button} href={inviteUrl}>
              Accept Invitation
            </Button>
          </Section>
          <Text style={text}>
            Or copy and paste this URL into your browser:
          </Text>
          <Text style={link}>
            <Link href={inviteUrl}>{inviteUrl}</Link>
          </Text>
          <Text style={text}>
            This invitation was sent to {email}. If you didn't expect this
            email, you can safely ignore it.
          </Text>
          <Text style={footer}>The FitAI Team</Text>
        </Container>
      </Body>
    </Html>
  );
}

// Default export for email previews
export default UserInvitationEmail;

// Styles
const main = {
  backgroundColor: "#f6f9fc",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "20px 0 48px",
  marginBottom: "64px",
  maxWidth: "600px",
};

const h1 = {
  color: "#333",
  fontSize: "28px",
  fontWeight: "bold",
  margin: "40px 0 20px",
  padding: "0 40px",
};

const text = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "26px",
  padding: "0 40px",
  margin: "16px 0",
};

const buttonContainer = {
  padding: "27px 40px",
  textAlign: "center" as const,
};

const button = {
  backgroundColor: "#3b82f6",
  borderRadius: "5px",
  color: "#fff",
  fontSize: "16px",
  fontWeight: "bold",
  textDecoration: "none",
  textAlign: "center" as const,
  display: "inline-block",
  padding: "12px 32px",
};

const link = {
  color: "#3b82f6",
  fontSize: "14px",
  padding: "0 40px",
  wordBreak: "break-all" as const,
};

const footer = {
  color: "#333",
  fontSize: "16px",
  lineHeight: "26px",
  padding: "0 40px",
  marginTop: "32px",
};