"use client"

import { format } from "date-fns"
import { formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"
import Link from "next/link"
import { Tag } from "lucide-react"

import type { Ticket } from "@/lib/schemas/ticket"
import { useAuth } from "@/lib/auth-client"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { getTicketStatusBadgeClass, getTicketStatusLabel } from "@/lib/ticket-status-style"

const priorityLabel: Record<Ticket["priority"], string> = {
  LOW: "Baixa",
  MEDIUM: "Média",
  HIGH: "Alta",
  URGENT: "Urgente",
}

const priorityTone: Record<Ticket["priority"], string> = {
  LOW: "bg-slate-100 text-slate-600",
  MEDIUM: "bg-sky-100 text-sky-700",
  HIGH: "bg-amber-100 text-amber-700",
  URGENT: "bg-rose-100 text-rose-700",
}

interface PortalTicketCardProps {
  ticket: Ticket
}

export function PortalTicketCard({ ticket }: PortalTicketCardProps) {
  const { isCustomer } = useAuth()
  const updatedAgo = formatDistanceToNow(ticket.updatedAt, {
    addSuffix: true,
    locale: ptBR,
  })

  return (
    <Link href={`/portal/tickets/${ticket.id}`} className="block">
      <Card className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
        <CardHeader className="flex flex-row items-start justify-between gap-3 px-5 pb-3 pt-5">
          <div>
            <div className="flex items-center gap-2 text-sm text-neutral-500">
              <span className="font-semibold text-neutral-900">#{ticket.reference}</span>
              <span>&middot;</span>
              <span>{format(ticket.createdAt, "dd/MM/yyyy")}</span>
            </div>
            <h3 className="mt-1 text-lg font-semibold text-neutral-900">{ticket.subject}</h3>
          </div>
          <div className="flex flex-col items-end gap-2 text-right">
            <Badge className={cn("rounded-full px-3 py-1 text-xs font-semibold", getTicketStatusBadgeClass(ticket.status))}>
              {getTicketStatusLabel(ticket.status)}
            </Badge>
            {!isCustomer ? (
              <Badge className={cn("rounded-full px-3 py-1 text-xs font-semibold", priorityTone[ticket.priority])}>
                {priorityLabel[ticket.priority]}
              </Badge>
            ) : null}
          </div>
        </CardHeader>
        <CardContent className="flex flex-wrap items-center justify-between gap-4 border-t border-slate-100 px-5 py-4 text-sm text-neutral-600">
          {!isCustomer ? (
            <div className="flex flex-col gap-1">
              <span className="text-xs uppercase tracking-wide text-neutral-500">Fila</span>
              <span className="font-medium text-neutral-800">{ticket.queue ?? "Sem fila"}</span>
            </div>
          ) : null}
          <div className="flex flex-col gap-1">
            <span className="text-xs uppercase tracking-wide text-neutral-500">Status</span>
            <span className="font-medium text-neutral-800">{getTicketStatusLabel(ticket.status)}</span>
          </div>
          {ticket.assignee ? (
            <div className="flex flex-col gap-1">
              <span className="text-xs uppercase tracking-wide text-neutral-500">Responsável</span>
              <span className="font-medium text-neutral-800">{ticket.assignee.name}</span>
            </div>
          ) : null}
          <div className="flex flex-col gap-1">
            <span className="text-xs uppercase tracking-wide text-neutral-500">Última atualização</span>
            <span className="font-medium text-neutral-800">{updatedAgo}</span>
          </div>
          <div className="flex flex-col gap-1">
            <span className="text-xs uppercase tracking-wide text-neutral-500">Categoria</span>
            <span className="flex items-center gap-2 font-medium text-neutral-800">
              <Tag className="size-4 text-neutral-500" />
              {ticket.category?.name ?? "Não classificada"}
            </span>
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}
