import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { IconAlertTriangle, IconClockHour4, IconTags } from "@tabler/icons-react"

import type { TicketWithDetails } from "@/lib/schemas/ticket"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"

interface TicketDetailsPanelProps {
  ticket: TicketWithDetails
}

const queueBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-neutral-700"
const tagBadgeClass = "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-neutral-700"
const iconAccentClass = "size-3 text-neutral-700"

export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
  const isAvulso = Boolean(ticket.company?.isAvulso)
  const companyLabel = ticket.company?.name ?? (isAvulso ? "Cliente avulso" : "Sem empresa vinculada")

  return (
    <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
      <CardHeader className="px-4 pb-3">
        <CardTitle className="text-lg font-semibold text-neutral-900">Detalhes</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-5 px-4 pb-6 text-sm text-neutral-700">
        <div className="space-y-1 break-words">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Fila</p>
          <Badge className={queueBadgeClass}>{ticket.queue ?? "Sem fila"}</Badge>
        </div>
        <Separator className="bg-slate-200" />
        <div className="space-y-1 break-words">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Empresa</p>
          <Badge className={queueBadgeClass}>{companyLabel}</Badge>
        </div>
        <Separator className="bg-slate-200" />
        <div className="space-y-2 break-words">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">SLA</p>
          {ticket.slaPolicy ? (
            <div className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-sm">
              <span className="text-sm font-semibold text-neutral-900">{ticket.slaPolicy.name}</span>
              <div className="flex flex-col gap-1 text-xs text-neutral-600">
                {ticket.slaPolicy.targetMinutesToFirstResponse ? (
                  <span>Resposta inicial: {ticket.slaPolicy.targetMinutesToFirstResponse} min</span>
                ) : null}
                {ticket.slaPolicy.targetMinutesToResolution ? (
                  <span>Resolução: {ticket.slaPolicy.targetMinutesToResolution} min</span>
                ) : null}
              </div>
            </div>
          ) : (
            <span className="text-neutral-600">Sem política atribuída.</span>
          )}
        </div>
        <Separator className="bg-slate-200" />
        <div className="space-y-2">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Métricas</p>
          {ticket.metrics ? (
            <div className="flex flex-col gap-2 text-xs text-neutral-700">
              <span className="flex items-center gap-2">
                <IconClockHour4 className={iconAccentClass} /> Tempo aguardando: {ticket.metrics.timeWaitingMinutes ?? "-"} min
              </span>
              <span className="flex items-center gap-2">
                <IconAlertTriangle className={iconAccentClass} /> Tempo aberto: {ticket.metrics.timeOpenedMinutes ?? "-"} min
              </span>
            </div>
          ) : (
            <span className="text-neutral-600">Sem dados de SLA ainda.</span>
          )}
        </div>
        <Separator className="bg-slate-200" />
        <div className="space-y-2 break-words">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Tags</p>
          <div className="flex flex-wrap gap-2">
            {ticket.tags?.length ? (
              ticket.tags.map((tag) => (
                <Badge key={tag} className={tagBadgeClass}>
                  <IconTags className={iconAccentClass} /> {tag}
                </Badge>
              ))
            ) : (
              <span className="text-neutral-600">Sem tags.</span>
            )}
          </div>
        </div>
        <Separator className="bg-slate-200" />
        <div className="space-y-1">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Histórico</p>
          <div className="flex flex-col gap-1 text-xs text-neutral-600">
            <span>Criado: {format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
            <span>Atualizado: {format(ticket.updatedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
            {ticket.resolvedAt ? (
              <span>Resolvido: {format(ticket.resolvedAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
            ) : null}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
