"use client"

import { useEffect, useMemo, useRef, useState } from "react"
import Link from "next/link"
import { formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"
import { useQuery } from "convex/react"
import { api } from "@/convex/_generated/api"
import type { Id } from "@/convex/_generated/dataModel"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { mapTicketsFromServerList } from "@/lib/mappers/ticket"
import type { Ticket } from "@/lib/schemas/ticket"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { TicketPriorityPill } from "@/components/tickets/priority-pill"
import { TicketStatusBadge } from "@/components/tickets/status-badge"
import { useAuth } from "@/lib/auth-client"
import { cn } from "@/lib/utils"

function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
  const queueLabel = ticket.queue ?? "Sem fila"
  const requesterName = ticket.requester.name ?? ticket.requester.email ?? "Solicitante"
  const categoryBadges = [ticket.category?.name, ticket.subcategory?.name].filter((value): value is string => Boolean(value))
  const badgeClass =
    "rounded-lg border border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 transition-colors"

  return (
    <Link
      href={`/tickets/${ticket.id}`}
      className={cn(
        "group relative block rounded-2xl border border-slate-200 bg-white/70 px-6 py-5 transition-all duration-300 hover:border-slate-300 hover:bg-white",
        entering ? "recent-ticket-enter" : ""
      )}
    >
      <div className="absolute right-6 top-5 flex flex-col items-end gap-2 sm:flex-row sm:items-center">
        <TicketStatusBadge status={ticket.status} className="h-8 px-3.5 text-sm" />
        <TicketPriorityPill priority={ticket.priority} className="h-8 px-3.5 text-sm" />
      </div>
      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
        <div className="min-w-0 space-y-3">
          <div className="flex items-start gap-3 pr-28 text-sm font-medium text-neutral-500 sm:pr-32">
            <div className="flex flex-wrap items-center gap-2">
              <span className="text-xl font-bold text-neutral-900">#{ticket.reference}</span>
              <span className="truncate text-neutral-500">{queueLabel}</span>
            </div>
          </div>
          <div className="space-y-1.5 pr-12 sm:pr-20">
            <span className="line-clamp-1 text-[20px] font-semibold text-neutral-900 transition-colors group-hover:text-neutral-700">
              {ticket.subject}
            </span>
            <p className="line-clamp-2 text-base text-neutral-600">{ticket.summary ?? "Sem descrição informada."}</p>
          </div>
          <div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600">
            <span className="font-semibold text-neutral-700">{requesterName}</span>
            <span className="text-neutral-400">•</span>
            <span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
          </div>
          <div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600">
            {categoryBadges.length > 0 ? (
              categoryBadges.map((label) => (
                <span key={label} className={badgeClass}>
                  {label}
                </span>
              ))
            ) : (
              <span className={badgeClass}>Sem categoria</span>
            )}
          </div>
        </div>
      </div>
    </Link>
  )
}

export function RecentTicketsPanel() {
  const { convexUserId } = useAuth()
  const ticketsArgs = convexUserId
    ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users">, limit: 12 }
    : undefined
  const ticketsResult = useQuery(convexUserId ? api.tickets.list : "skip", ticketsArgs)
  const [enteringId, setEnteringId] = useState<string | null>(null)
  const previousIdsRef = useRef<string[]>([])

  const tickets = useMemo(() => {
    if (!Array.isArray(ticketsResult)) return []
    const all = mapTicketsFromServerList(ticketsResult as unknown[]).filter((t) => t.status !== "RESOLVED")
    // Unassigned first (no assignee), oldest first among unassigned; then the rest by updatedAt desc
    const unassigned = all
      .filter((t) => !t.assignee)
      .sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime())
    const assigned = all
      .filter((t) => !!t.assignee)
      .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())
    return [...unassigned, ...assigned].slice(0, 6)
  }, [ticketsResult])

  useEffect(() => {
    if (!Array.isArray(ticketsResult)) {
      previousIdsRef.current = []
      return
    }
    const ids = tickets.map((ticket) => ticket.id)
    const previous = previousIdsRef.current
    if (!ids.length) {
      previousIdsRef.current = ids
      return
    }
    if (!previous.length) {
      previousIdsRef.current = ids
      return
    }
    const topId = ids[0]
    if (!previous.includes(topId)) {
      setEnteringId(topId)
    }
    previousIdsRef.current = ids
  }, [tickets, ticketsResult])

  useEffect(() => {
    if (!enteringId) return
    const timer = window.setTimeout(() => setEnteringId(null), 600)
    return () => window.clearTimeout(timer)
  }, [enteringId])

  if (convexUserId && !Array.isArray(ticketsResult)) {
    return (
      <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
        <CardHeader className="pb-2">
          <CardTitle className="text-lg font-semibold text-neutral-900">Últimos chamados</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {Array.from({ length: 4 }).map((_, index) => (
            <div key={index} className="rounded-xl border border-slate-100 bg-slate-50/60 p-4">
              <Skeleton className="mb-2 h-4 w-48" />
              <Skeleton className="h-3 w-64" />
            </div>
          ))}
        </CardContent>
      </Card>
    )
  }

  return (
    <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
      <CardHeader className="flex flex-row items-center justify-between pb-4">
        <CardTitle className="text-lg font-semibold text-neutral-900">Últimos chamados</CardTitle>
        <Link
          href="/tickets"
          className="text-sm font-semibold text-[#006879] underline-offset-4 transition-colors hover:text-[#004d5a] hover:underline"
        >
          Ver todos
        </Link>
      </CardHeader>
      <CardContent className="space-y-3">
        {tickets.length === 0 ? (
          <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/80 p-6 text-center text-sm text-neutral-600">
            Nenhum ticket recente encontrado.
          </div>
        ) : (
          tickets.map((ticket) => (
            <TicketRow key={ticket.id} ticket={ticket} entering={ticket.id === enteringId} />
          ))
        )}
      </CardContent>
    </Card>
  )
}