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

import {
  contactRequestTypeLabels,
  type ContactRequestInput,
} from "@/lib/contact-schema";
import { fontStack } from "./_styles";

type ContactRequestEmailProps = ContactRequestInput;

export function ContactRequestEmail({
  name,
  kitaName,
  email,
  requestType,
  message,
}: ContactRequestEmailProps) {
  const inquiryLabel = contactRequestTypeLabels[requestType];

  return (
    <Html>
      <Head />
      <Preview>
        Neue Kontaktanfrage von {name}
        {kitaName ? ` (${kitaName})` : ""}
      </Preview>
      <Body style={body}>
        <Container style={container}>
          <Heading style={heading}>Neue Kontaktanfrage</Heading>
          <Text style={intro}>
            Über die Kita-Planer Landingpage ist eine neue Anfrage eingegangen.
          </Text>

          <Section style={details}>
            <InfoRow label="Name" value={name} />
            <InfoRow label="Kita / Initiative" value={kitaName || "Nicht angegeben"} />
            <InfoRow label="E-Mail" value={email} />
            <InfoRow label="Anliegen" value={inquiryLabel} />
          </Section>

          <Section style={messageBox}>
            <Text style={label}>Nachricht</Text>
            <Text style={messageText}>{message}</Text>
          </Section>

          <Text style={footer}>
            Tipp: Direkt auf diese E-Mail antworten, um {name} unter {email} zu
            erreichen.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <Text style={row}>
      <strong>{label}:</strong> {value}
    </Text>
  );
}

const body = {
  margin: 0,
  backgroundColor: "#f8faf8",
  fontFamily: fontStack,
};

const container = {
  margin: "0 auto",
  padding: "32px 24px",
  maxWidth: "620px",
  fontFamily: fontStack,
};

const heading = {
  margin: "0 0 12px",
  color: "#0f172a",
  fontSize: "28px",
  lineHeight: "34px",
  fontFamily: fontStack,
};

const intro = {
  margin: "0 0 24px",
  color: "#475569",
  fontSize: "15px",
  lineHeight: "24px",
  fontFamily: fontStack,
};

const details = {
  border: "1px solid #d7e5dc",
  borderRadius: "10px",
  backgroundColor: "#ffffff",
  padding: "18px",
  fontFamily: fontStack,
};

const row = {
  margin: "0 0 10px",
  color: "#0f172a",
  fontSize: "15px",
  lineHeight: "22px",
  fontFamily: fontStack,
};

const messageBox = {
  marginTop: "18px",
  border: "1px solid #d7e5dc",
  borderRadius: "10px",
  backgroundColor: "#ffffff",
  padding: "18px",
  fontFamily: fontStack,
};

const label = {
  margin: "0 0 8px",
  color: "#64748b",
  fontSize: "12px",
  fontWeight: 700,
  letterSpacing: "0.04em",
  textTransform: "uppercase" as const,
  fontFamily: fontStack,
};

const messageText = {
  margin: 0,
  color: "#0f172a",
  fontSize: "15px",
  lineHeight: "24px",
  whiteSpace: "pre-wrap" as const,
  fontFamily: fontStack,
};

const footer = {
  margin: "22px 0 0",
  color: "#64748b",
  fontSize: "13px",
  lineHeight: "20px",
  fontFamily: fontStack,
};
