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

import { baseBodyStyle, colors, fontStack } from "./_styles";

type InviteEmailProps = {
  parentName: string;
  kitaName: string;
  inviteLink: string;
};

export function InviteEmail({
  parentName,
  kitaName,
  inviteLink,
}: InviteEmailProps) {
  return (
    <Html lang="de">
      <Head />
      <Preview>Aktiviere deinen Kita-Planer Account für {kitaName}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          <Section style={styles.header}>
            <Text style={styles.brand}>Kita-Planer</Text>
            <Heading style={styles.heading}>Willkommen bei {kitaName}</Heading>
            <Text style={styles.lead}>
              Hallo {parentName}, dein Eltern-Account wurde vorbereitet.
            </Text>
          </Section>

          <Section style={styles.card}>
            <Text style={styles.text}>
              Über den folgenden Link kannst du dein Passwort setzen und deinen
              Account aktivieren. Danach hast du Zugriff auf die Kita-Planung,
              Termine und deine Familiendaten.
            </Text>

            <Button href={inviteLink} style={styles.button}>
              Account aktivieren
            </Button>

            <Text style={styles.fallbackText}>
              Falls der Button nicht funktioniert, kopiere diesen Link in deinen
              Browser:
            </Text>
            <Text style={styles.linkText}>{inviteLink}</Text>
          </Section>

          <Hr style={styles.hr} />
          <Text style={styles.footer}>
            Diese Einladung wurde von deiner Kita erstellt. Wenn du sie nicht
            erwartet hast, kannst du diese E-Mail ignorieren.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const styles = {
  body: baseBodyStyle,
  container: {
    width: "100%",
    maxWidth: "600px",
    margin: "0 auto",
    padding: "32px 20px",
    fontFamily: fontStack,
  },
  header: {
    padding: "28px 28px 20px",
    backgroundColor: colors.brandGreen,
    borderRadius: "8px 8px 0 0",
    fontFamily: fontStack,
  },
  brand: {
    margin: "0 0 28px",
    color: colors.eyebrow,
    fontSize: "13px",
    fontWeight: 700,
    letterSpacing: "0.08em",
    textTransform: "uppercase" as const,
    fontFamily: fontStack,
  },
  heading: {
    margin: "0 0 12px",
    color: colors.textHeader,
    fontSize: "30px",
    lineHeight: "1.18",
    fontWeight: 800,
    fontFamily: fontStack,
  },
  lead: {
    margin: 0,
    color: colors.lead,
    fontSize: "16px",
    lineHeight: "1.55",
    fontFamily: fontStack,
  },
  card: {
    padding: "28px",
    backgroundColor: colors.cardBg,
    borderRadius: "0 0 8px 8px",
    border: `1px solid ${colors.border}`,
    borderTop: "0",
    fontFamily: fontStack,
  },
  text: {
    margin: "0 0 24px",
    color: colors.textBody,
    fontSize: "16px",
    lineHeight: "1.65",
    fontFamily: fontStack,
  },
  button: {
    display: "inline-block",
    padding: "14px 22px",
    backgroundColor: colors.brandGreen,
    color: "#ffffff",
    borderRadius: "6px",
    fontSize: "15px",
    fontWeight: 700,
    textDecoration: "none",
    fontFamily: fontStack,
  },
  fallbackText: {
    margin: "28px 0 8px",
    color: colors.textMuted,
    fontSize: "13px",
    lineHeight: "1.5",
    fontFamily: fontStack,
  },
  linkText: {
    margin: 0,
    color: colors.link,
    fontSize: "13px",
    lineHeight: "1.5",
    wordBreak: "break-all" as const,
    fontFamily: fontStack,
  },
  hr: {
    margin: "24px 0",
    borderColor: colors.hr,
  },
  footer: {
    margin: 0,
    color: colors.textFaint,
    fontSize: "12px",
    lineHeight: "1.5",
    textAlign: "center" as const,
    fontFamily: fontStack,
  },
};
