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 { TicketCard, type TicketCardData } from "./_components/ticket-card"
import { normalizeTextToParagraphs } from "./_components/utils"

export type AutomationEmailProps = {
  title: string
  message: string
  ticket: TicketCardData
  ctaLabel: string
  ctaUrl: string
  preview?: string
}

export default function AutomationEmail(props: AutomationEmailProps) {
  const paragraphs = normalizeTextToParagraphs(props.message)
  const preview = props.preview ?? `Atualização do chamado #${props.ticket.reference}`

  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>
      )}

      <TicketCard ticket={props.ticket} />

      <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>
  )
}

AutomationEmail.PreviewProps = {
  title: "Atualização do chamado #41025",
  message:
    "Olá Renan!\n\nSeu chamado teve uma atualização automática (automações do Raven). Clique abaixo para abrir o chamado e ver os detalhes.",
  ticket: {
    reference: 41025,
    subject: "Computador reiniciando sozinho",
    companyName: "Paulicon Contábil",
    status: "AWAITING_ATTENDANCE",
    priority: "URGENT",
    requesterName: "Renan",
    assigneeName: "Administrador",
  },
  ctaLabel: "Abrir chamado",
  ctaUrl: "https://tickets.esdrasrenan.com.br/portal/tickets/abc",
} satisfies AutomationEmailProps