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 ContactConfirmationEmailProps = ContactRequestInput;

export function ContactConfirmationEmail({
  name,
  kitaName,
  requestType,
  message,
}: ContactConfirmationEmailProps) {
  const inquiryLabel = contactRequestTypeLabels[requestType];
  const firstName = name.split(" ")[0] || name;

  return (
    <Html>
      <Head />
      <Preview>
        Wir haben deine Anfrage bei Kita-Planer erhalten.
      </Preview>
      <Body style={body}>
        <Container style={container}>
          <Heading style={heading}>Danke, {firstName}!</Heading>
          <Text style={intro}>
            Wir haben deine Anfrage erhalten und melden uns in der Regel
            innerhalb von ein bis zwei Werktagen mit einem konkreten Vorschlag
            bei dir.
          </Text>

          <Section style={summaryBox}>
            <Text style={label}>Zusammenfassung deiner Anfrage</Text>
            <InfoRow label="Anliegen" value={inquiryLabel} />
            {kitaName ? <InfoRow label="Kita / Initiative" value={kitaName} /> : null}
            <Text style={messageLabel}>Deine Nachricht</Text>
            <Text style={messageText}>{message}</Text>
          </Section>

          <Text style={footer}>
            Falls du etwas ergänzen möchtest, antworte einfach auf diese
            E-Mail. Bis bald — das Kita-Planer Team.
          </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 summaryBox = {
  border: "1px solid #d7e5dc",
  borderRadius: "10px",
  backgroundColor: "#ffffff",
  padding: "18px",
  fontFamily: fontStack,
};

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

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

const messageLabel = {
  margin: "14px 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,
};
