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

import { fontStack } from "./_styles";

type AlertEmailProps = {
  date: string;
  childName: string;
  confirmLink: string;
};

export function AlertEmail({
  date,
  childName,
  confirmLink,
}: AlertEmailProps) {
  return (
    <Html lang="de">
      <Head />
      <Preview>Dringender Notdienst-Alarm für {date}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          <Section style={styles.alertBar}>
            <Text style={styles.kicker}>Dringend</Text>
            <Heading style={styles.heading}>Notdienst heute bestätigen</Heading>
            <Text style={styles.lead}>
              Eine Fachkraft ist ausgefallen. Für {childName} ist ein
              Notdienst-Einsatz am {date} hinterlegt.
            </Text>
          </Section>

          <Section style={styles.card}>
            <Text style={styles.text}>
              Bitte bestätige schnell, ob du den Notdienst übernehmen kannst,
              damit die Kita den Tag verlässlich planen kann.
            </Text>

            <Button href={confirmLink} style={styles.button}>
              Notdienst bestätigen
            </Button>

            <Section style={styles.detailBox}>
              <Text style={styles.detailLabel}>Einsatzdatum</Text>
              <Text style={styles.detailValue}>{date}</Text>
              <Text style={styles.detailLabel}>Kind</Text>
              <Text style={styles.detailValue}>{childName}</Text>
            </Section>

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

          <Hr style={styles.hr} />
          <Text style={styles.footer}>
            Diese Nachricht wurde automatisch vom Kita-Planer versendet.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const styles = {
  body: {
    margin: 0,
    backgroundColor: "#fff7ed",
    fontFamily: fontStack,
    color: "#30170f",
  },
  container: {
    width: "100%",
    maxWidth: "600px",
    margin: "0 auto",
    padding: "32px 20px",
  },
  alertBar: {
    padding: "26px 28px",
    backgroundColor: "#9f1239",
    borderRadius: "8px 8px 0 0",
  },
  kicker: {
    display: "inline-block",
    margin: "0 0 18px",
    padding: "6px 10px",
    backgroundColor: "#fed7aa",
    color: "#7f1d1d",
    borderRadius: "999px",
    fontSize: "12px",
    fontWeight: 800,
    letterSpacing: "0.08em",
    textTransform: "uppercase" as const,
  },
  heading: {
    margin: "0 0 12px",
    color: "#ffffff",
    fontSize: "30px",
    lineHeight: "1.16",
    fontWeight: 850,
    fontFamily: fontStack,
  },
  lead: {
    margin: 0,
    color: "#ffe4e6",
    fontSize: "16px",
    lineHeight: "1.55",
    fontFamily: fontStack,
  },
  card: {
    padding: "28px",
    backgroundColor: "#ffffff",
    border: "1px solid #fed7aa",
    borderTop: "0",
    borderRadius: "0 0 8px 8px",
  },
  text: {
    margin: "0 0 22px",
    color: "#44251a",
    fontSize: "16px",
    lineHeight: "1.65",
    fontFamily: fontStack,
  },
  button: {
    display: "inline-block",
    padding: "14px 22px",
    backgroundColor: "#ea580c",
    color: "#ffffff",
    borderRadius: "6px",
    fontSize: "15px",
    fontWeight: 800,
    textDecoration: "none",
    fontFamily: fontStack,
  },
  detailBox: {
    margin: "28px 0 0",
    padding: "18px",
    backgroundColor: "#fff7ed",
    border: "1px solid #fdba74",
    borderRadius: "6px",
  },
  detailLabel: {
    margin: "0 0 4px",
    color: "#9a3412",
    fontSize: "12px",
    fontWeight: 800,
    letterSpacing: "0.06em",
    textTransform: "uppercase" as const,
  },
  detailValue: {
    margin: "0 0 14px",
    color: "#30170f",
    fontSize: "16px",
    fontWeight: 700,
  },
  fallbackText: {
    margin: "26px 0 8px",
    color: "#7c5a4b",
    fontSize: "13px",
    lineHeight: "1.5",
  },
  linkText: {
    margin: 0,
    color: "#be123c",
    fontSize: "13px",
    lineHeight: "1.5",
    wordBreak: "break-all" as const,
  },
  hr: {
    margin: "24px 0",
    borderColor: "#fed7aa",
  },
  footer: {
    margin: 0,
    color: "#8b6f63",
    fontSize: "12px",
    lineHeight: "1.5",
    textAlign: "center" as const,
    fontFamily: fontStack,
  },
};
