import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { IconClock, IconUserCircle } from "@tabler/icons-react"

import type { TicketWithDetails } from "@/lib/schemas/ticket"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { TicketPriorityPill } from "@/components/tickets/priority-pill"
import { TicketStatusBadge } from "@/components/tickets/status-badge"

interface TicketHeaderProps {
  ticket: TicketWithDetails
}

export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
  return (
    <div className="space-y-4 rounded-xl border bg-card p-6 shadow-sm">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="space-y-2">
          <div className="flex items-center gap-3">
            <Badge variant="outline" className="rounded-full px-3 py-1 text-xs uppercase tracking-wide">
              #{ticket.reference}
            </Badge>
            <TicketPriorityPill priority={ticket.priority} />
            <TicketStatusBadge status={ticket.status} />
          </div>
          <h1 className="text-2xl font-semibold text-foreground">{ticket.subject}</h1>
          <p className="max-w-2xl text-sm text-muted-foreground">{ticket.summary}</p>
        </div>
      </div>
      <Separator />
      <div className="grid gap-4 text-sm text-muted-foreground sm:grid-cols-2 lg:grid-cols-3">
        <div className="flex items-center gap-2">
          <IconUserCircle className="size-4" />
          Solicitante:
          <span className="font-medium text-foreground">{ticket.requester.name}</span>
        </div>
        <div className="flex items-center gap-2">
          <IconUserCircle className="size-4" />
          Responsavel:
          <span className="font-medium text-foreground">
            {ticket.assignee?.name ?? "Aguardando atribuicao"}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <IconClock className="size-4" />
          Atualizado em:
          <span className="font-medium text-foreground">
            {format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <IconClock className="size-4" />
          Criado em:
          <span className="font-medium text-foreground">
            {format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
          </span>
        </div>
        {ticket.dueAt ? (
          <div className="flex items-center gap-2">
            <IconClock className="size-4" />
            SLA ate:
            <span className="font-medium text-foreground">
              {format(ticket.dueAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}
            </span>
          </div>
        ) : null}
        {ticket.slaPolicy ? (
          <div className="flex items-center gap-2">
            <IconClock className="size-4" />
            Politica:
            <span className="font-medium text-foreground">{ticket.slaPolicy.name}</span>
          </div>
        ) : null}
      </div>
    </div>
  )
}