import * as React from "react"
import { Section } from "@react-email/section"
import { Text } from "@react-email/text"

import { EMAIL_COLORS } from "./tokens"
import { formatPriority, formatStatus } from "./utils"

export type TicketCardData = {
  reference: number
  subject: string
  companyName?: string | null
  status?: string | null
  priority?: string | null
  requesterName?: string | null
  assigneeName?: string | null
}

function badge(label: string, bg: string, color: string) {
  return (
    <span
      style={{
        display: "inline-block",
        padding: "4px 12px",
        borderRadius: "999px",
        fontSize: "12px",
        fontWeight: 700,
        backgroundColor: bg,
        color,
        whiteSpace: "nowrap",
      }}
    >
      {label}
    </span>
  )
}

function statusBadge(status: string) {
  const normalized = status.trim().toUpperCase()
  const map: Record<string, { bg: string; color: string; label: string }> = {
    PENDING: { bg: EMAIL_COLORS.statusPendingBg, color: EMAIL_COLORS.statusPending, label: "Pendente" },
    AWAITING_ATTENDANCE: { bg: EMAIL_COLORS.statusProgressBg, color: EMAIL_COLORS.statusProgress, label: "Em andamento" },
    PAUSED: { bg: EMAIL_COLORS.statusPausedBg, color: EMAIL_COLORS.statusPaused, label: "Pausado" },
    RESOLVED: { bg: EMAIL_COLORS.statusResolvedBg, color: EMAIL_COLORS.statusResolved, label: "Resolvido" },
  }
  const entry = map[normalized] ?? {
    bg: EMAIL_COLORS.statusPendingBg,
    color: EMAIL_COLORS.statusPending,
    label: formatStatus(status),
  }
  return badge(entry.label, entry.bg, entry.color)
}

function priorityBadge(priority: string) {
  const normalized = priority.trim().toUpperCase()
  const map: Record<string, { bg: string; color: string; label: string }> = {
    LOW: { bg: EMAIL_COLORS.priorityLowBg, color: EMAIL_COLORS.priorityLow, label: "Baixa" },
    MEDIUM: { bg: EMAIL_COLORS.priorityMediumBg, color: EMAIL_COLORS.priorityMedium, label: "Média" },
    HIGH: { bg: EMAIL_COLORS.priorityHighBg, color: EMAIL_COLORS.priorityHigh, label: "Alta" },
    URGENT: { bg: EMAIL_COLORS.priorityUrgentBg, color: EMAIL_COLORS.priorityUrgent, label: "Urgente" },
  }
  const entry = map[normalized] ?? {
    bg: EMAIL_COLORS.priorityMediumBg,
    color: EMAIL_COLORS.priorityMedium,
    label: formatPriority(priority),
  }
  return badge(entry.label, entry.bg, entry.color)
}

function Row({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <tr>
      <td style={{ padding: "6px 10px 6px 0", color: EMAIL_COLORS.textMuted, fontSize: "12px", verticalAlign: "top" }}>
        {label}
      </td>
      <td style={{ padding: "6px 0", color: EMAIL_COLORS.textPrimary, fontSize: "14px" }}>{value}</td>
    </tr>
  )
}

export function TicketCard({ ticket }: { ticket: TicketCardData }) {
  return (
    <Section
      style={{
        backgroundColor: EMAIL_COLORS.background,
        borderRadius: "12px",
        padding: "16px",
        marginTop: "18px",
      }}
    >
      <table cellPadding="0" cellSpacing="0" role="presentation" style={{ width: "100%" }}>
        <tbody>
          <Row label="Chamado" value={<Text style={{ margin: 0, fontWeight: 800 }}>#{ticket.reference}</Text>} />
          <Row label="Assunto" value={ticket.subject} />
          {ticket.companyName ? <Row label="Empresa" value={ticket.companyName} /> : null}
          {ticket.status ? <Row label="Status" value={statusBadge(ticket.status)} /> : null}
          {ticket.priority ? <Row label="Prioridade" value={priorityBadge(ticket.priority)} /> : null}
          {ticket.requesterName ? <Row label="Solicitante" value={ticket.requesterName} /> : null}
          {ticket.assigneeName ? <Row label="Responsável" value={ticket.assigneeName} /> : null}
        </tbody>
      </table>
    </Section>
  )
}