import * as React from "react"
import { Button } from "@react-email/button"
import { Heading } from "@react-email/heading"
import { Hr } from "@react-email/hr"
import { Section } from "@react-email/section"
import { Text } from "@react-email/text"

import { RavenEmailLayout } from "./_components/layout"
import { EMAIL_COLORS } from "./_components/tokens"
import { normalizeTextToParagraphs } from "./_components/utils"

export type SimpleNotificationEmailProps = {
  title: string
  message: string
  ctaLabel: string
  ctaUrl: string
  preview?: string
}

export default function SimpleNotificationEmail(props: SimpleNotificationEmailProps) {
  const paragraphs = normalizeTextToParagraphs(props.message)
  const preview = props.preview ?? props.message.slice(0, 90)

  return (
    <RavenEmailLayout title={props.title} preview={preview}>
      <Heading style={{ margin: "10px 0 6px 0", fontSize: "20px", lineHeight: "1.3", color: EMAIL_COLORS.textPrimary }}>
        {props.title}
      </Heading>

      {paragraphs.length > 0 ? (
        paragraphs.map((p, idx) => (
          <Text key={idx} style={{ margin: "0 0 12px 0", fontSize: "14px", lineHeight: "1.65", color: EMAIL_COLORS.textSecondary }}>
            {p}
          </Text>
        ))
      ) : (
        <Text style={{ margin: "0 0 12px 0", fontSize: "14px", lineHeight: "1.65", color: EMAIL_COLORS.textSecondary }}>
          {props.message}
        </Text>
      )}

      <Section style={{ marginTop: "18px" }}>
        <Button
          href={props.ctaUrl}
          style={{
            display: "inline-block",
            backgroundColor: EMAIL_COLORS.primary,
            color: EMAIL_COLORS.primaryForeground,
            textDecoration: "none",
            borderRadius: "12px",
            padding: "12px 18px",
            fontWeight: 800,
            fontSize: "14px",
            border: `1px solid ${EMAIL_COLORS.primaryDark}`,
          }}
        >
          {props.ctaLabel}
        </Button>
      </Section>

      <Hr style={{ borderColor: EMAIL_COLORS.border, margin: "18px 0" }} />

      <Text style={{ margin: 0, fontSize: "12px", color: EMAIL_COLORS.textMuted }}>
        Se o botão não funcionar, copie e cole esta URL no navegador:
        <br />
        <a href={props.ctaUrl} style={{ color: EMAIL_COLORS.primaryDark, textDecoration: "none" }}>
          {props.ctaUrl}
        </a>
      </Text>
    </RavenEmailLayout>
  )
}

SimpleNotificationEmail.PreviewProps = {
  title: "Nova atualização no seu chamado #41025",
  message: "Um novo comentário foi adicionado ao chamado. Clique abaixo para visualizar e responder pelo portal.",
  ctaLabel: "Abrir e responder",
  ctaUrl: "https://tickets.esdrasrenan.com.br/portal/tickets/abc",
} satisfies SimpleNotificationEmailProps