import * as React from "react"
import { Button, Heading, Hr, Section, Text } from "@react-email/components"

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

export type SlaWarningEmailProps = {
  ticketNumber: string
  ticketTitle: string
  timeRemaining: string
  ticketUrl: string
}

export default function SlaWarningEmail(props: SlaWarningEmailProps) {
  const { ticketNumber, ticketTitle, timeRemaining, ticketUrl } = props

  return (
    <RavenEmailLayout title="Alerta de SLA" preview={`Chamado #${ticketNumber} esta proximo de estourar o SLA`}>
      <Section style={{ textAlign: "center", margin: "24px 0" }}>
        <div
          style={{
            display: "inline-block",
            width: "64px",
            height: "64px",
            backgroundColor: "#fef3c7",
            borderRadius: "50%",
            lineHeight: "64px",
            fontSize: "28px",
            border: "1px solid #f59e0b",
          }}
        >
          &#9888;
        </div>
      </Section>

      <Heading style={{ margin: "0 0 12px 0", fontSize: "26px", fontWeight: 700, color: EMAIL_COLORS.textPrimary, textAlign: "center" }}>
        Alerta de SLA
      </Heading>

      <Text style={{ margin: "0 0 24px 0", fontSize: "15px", lineHeight: "1.7", color: EMAIL_COLORS.textSecondary, textAlign: "center" }}>
        O chamado abaixo esta proximo de estourar o tempo de atendimento acordado.
      </Text>

      <Section
        style={{
          backgroundColor: "#fffbeb",
          borderRadius: "12px",
          border: "1px solid #fcd34d",
          margin: "24px 0",
        }}
      >
        <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
          <tbody>
            <tr>
              <td style={{ padding: "16px 20px", borderBottom: "1px solid #fde68a" }}>
                <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
                  <tbody>
                    <tr>
                      <td style={{ color: "#92400e", fontSize: "13px", fontWeight: 500, width: "120px" }}>
                        Chamado
                      </td>
                      <td style={{ color: "#78350f", fontSize: "14px", fontWeight: 600 }}>
                        #{ticketNumber}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td style={{ padding: "16px 20px", borderBottom: "1px solid #fde68a" }}>
                <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
                  <tbody>
                    <tr>
                      <td style={{ color: "#92400e", fontSize: "13px", fontWeight: 500, width: "120px" }}>
                        Titulo
                      </td>
                      <td style={{ color: "#78350f", fontSize: "14px" }}>
                        {ticketTitle}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td style={{ padding: "16px 20px" }}>
                <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
                  <tbody>
                    <tr>
                      <td style={{ color: "#92400e", fontSize: "13px", fontWeight: 500, width: "120px" }}>
                        Tempo restante
                      </td>
                      <td style={{ color: "#dc2626", fontSize: "14px", fontWeight: 700 }}>
                        {timeRemaining}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </Section>

      <Section style={{ textAlign: "center", margin: "32px 0" }}>
        <Button
          href={ticketUrl}
          style={{
            display: "inline-block",
            backgroundColor: EMAIL_COLORS.primary,
            color: EMAIL_COLORS.primaryForeground,
            textDecoration: "none",
            borderRadius: "12px",
            padding: "14px 24px",
            fontWeight: 800,
            fontSize: "14px",
            border: `1px solid ${EMAIL_COLORS.primaryDark}`,
          }}
        >
          Ver chamado
        </Button>
      </Section>

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

      <Text style={{ margin: 0, fontSize: "12px", color: EMAIL_COLORS.textMuted, textAlign: "center" }}>
        Acesse o sistema para mais detalhes e acompanhe o status do chamado.
      </Text>
    </RavenEmailLayout>
  )
}

SlaWarningEmail.PreviewProps = {
  ticketNumber: "41025",
  ticketTitle: "Computador nao liga apos atualizacao",
  timeRemaining: "45 minutos",
  ticketUrl: "https://raven.rever.com.br/tickets/abc123",
} satisfies SlaWarningEmailProps