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

import { RavenEmailLayout } from "./_components/layout"
import { TicketCard, type TicketCardProps } from "./_components/ticket-card"
import { EMAIL_COLORS } from "./_components/tokens"

export type TicketResolvedEmailProps = TicketCardProps & {
  ticketUrl: string
  ratingUrl?: string | null
  resolution?: string | null
}

export default function TicketResolvedEmail(props: TicketResolvedEmailProps) {
  const { ticketUrl, ratingUrl, resolution, ...ticketProps } = props

  return (
    <RavenEmailLayout title="Chamado resolvido" preview={`Chamado #${ticketProps.ticketNumber} foi resolvido`}>
      <Section style={{ textAlign: "center", margin: "24px 0" }}>
        <div
          style={{
            display: "inline-block",
            width: "64px",
            height: "64px",
            backgroundColor: "#ecfdf5",
            borderRadius: "50%",
            lineHeight: "64px",
            fontSize: "28px",
            border: "1px solid #10b981",
          }}
        >
          &#127881;
        </div>
      </Section>

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

      <Text style={{ margin: "0 0 24px 0", fontSize: "15px", lineHeight: "1.7", color: EMAIL_COLORS.textSecondary, textAlign: "center" }}>
        Seu chamado foi marcado como resolvido. Confira os detalhes abaixo.
      </Text>

      <TicketCard {...ticketProps} status="RESOLVED" />

      {resolution ? (
        <Section
          style={{
            backgroundColor: "#f8fafc",
            borderRadius: "12px",
            border: `1px solid ${EMAIL_COLORS.border}`,
            margin: "24px 0",
            padding: "16px 20px",
          }}
        >
          <Text style={{ margin: "0 0 8px 0", fontSize: "13px", fontWeight: 600, color: EMAIL_COLORS.textMuted }}>
            Resolucao
          </Text>
          <Text style={{ margin: 0, fontSize: "14px", lineHeight: "1.6", color: EMAIL_COLORS.textPrimary }}>
            {resolution}
          </Text>
        </Section>
      ) : null}

      <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 detalhes
        </Button>
        {ratingUrl ? (
          <Button
            href={ratingUrl}
            style={{
              display: "inline-block",
              backgroundColor: "#0f172a",
              color: "#f8fafc",
              textDecoration: "none",
              borderRadius: "12px",
              padding: "14px 24px",
              fontWeight: 800,
              fontSize: "14px",
              marginLeft: "12px",
            }}
          >
            Avaliar atendimento
          </Button>
        ) : null}
      </Section>

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

      <Text style={{ margin: 0, fontSize: "12px", color: EMAIL_COLORS.textMuted, textAlign: "center" }}>
        Sua opiniao e importante! Avalie o atendimento para nos ajudar a melhorar.
      </Text>
    </RavenEmailLayout>
  )
}

TicketResolvedEmail.PreviewProps = {
  ticketNumber: "41025",
  ticketTitle: "Computador nao liga apos atualizacao",
  status: "RESOLVED",
  priority: "HIGH",
  category: "Hardware",
  subcategory: "Desktop",
  ticketUrl: "https://raven.rever.com.br/tickets/abc123",
  ratingUrl: "https://raven.rever.com.br/rate/abc123",
  resolution: "Problema resolvido apos atualizacao do driver da placa de video e reinicializacao do sistema.",
} satisfies TicketResolvedEmailProps