sistema-de-chamados/src/components/reports/backlog-report.tsx

"use client"

import { useMemo } from "react"
import { useQuery } from "convex/react"
import { IconInbox, IconAlertTriangle, IconFilter } from "@tabler/icons-react"
// @ts-expect-error Convex runtime API lacks TypeScript declarations
import { api } from "@/convex/_generated/api"
import type { Id } from "@/convex/_generated/dataModel"
import { useAuth } from "@/lib/auth-client"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { Badge } from "@/components/ui/badge"

const PRIORITY_LABELS: Record<string, string> = {
  LOW: "Baixa",
  MEDIUM: "Média",
  HIGH: "Alta",
  URGENT: "Crítica",
}

const STATUS_LABELS: Record<string, string> = {
  NEW: "Novo",
  OPEN: "Em andamento",
  PENDING: "Pendente",
  ON_HOLD: "Em espera",
  RESOLVED: "Resolvido",
  CLOSED: "Encerrado",
}

export function BacklogReport() {
  const { session, convexUserId } = useAuth()
  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
  const data = useQuery(
    api.reports.backlogOverview,
    convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
  )

  const mostCriticalPriority = useMemo(() => {
    if (!data) return null
    const entries = Object.entries(data.priorityCounts)
    if (entries.length === 0) return null
    return entries.reduce((prev, current) => (current[1] > prev[1] ? current : prev))
  }, [data])

  if (!data) {
    return (
      <div className="space-y-6">
        {Array.from({ length: 3 }).map((_, index) => (
          <Skeleton key={index} className="h-32 rounded-2xl" />
        ))}
      </div>
    )
  }

  return (
    <div className="space-y-8">
      <div className="grid gap-4 md:grid-cols-3">
        <Card className="border-slate-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
              <IconInbox className="size-4 text-neutral-500" /> Tickets em aberto
            </CardTitle>
            <CardDescription className="text-neutral-600">Backlog total em atendimento.</CardDescription>
          </CardHeader>
          <CardContent className="text-3xl font-semibold text-neutral-900">{data.totalOpen}</CardContent>
        </Card>
        <Card className="border-slate-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
              <IconAlertTriangle className="size-4 text-amber-500" /> Prioridade predominante
            </CardTitle>
            <CardDescription className="text-neutral-600">Volume por prioridade no backlog.</CardDescription>
          </CardHeader>
          <CardContent className="text-xl font-semibold text-neutral-900">
            {mostCriticalPriority ? (
              <span>
                {PRIORITY_LABELS[mostCriticalPriority[0]] ?? mostCriticalPriority[0]} ({mostCriticalPriority[1]})
              </span>
            ) : (
              "—"
            )}
          </CardContent>
        </Card>
        <Card className="border-slate-200">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
              <IconFilter className="size-4 text-neutral-500" /> Status acompanhados
            </CardTitle>
            <CardDescription className="text-neutral-600">Distribuição dos tickets por status.</CardDescription>
          </CardHeader>
          <CardContent className="text-xl font-semibold text-neutral-900">
            {Object.keys(data.statusCounts).length}
          </CardContent>
        </Card>
      </div>

      <Card className="border-slate-200">
        <CardHeader>
          <CardTitle className="text-lg font-semibold text-neutral-900">Status do backlog</CardTitle>
          <CardDescription className="text-neutral-600">
            Acompanhe a evolução dos tickets pelas fases do fluxo de atendimento.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {Object.entries(data.statusCounts).map(([status, total]) => (
              <div key={status} className="rounded-xl border border-slate-200 p-4">
                <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
                  {STATUS_LABELS[status] ?? status}
                </p>
                <p className="mt-2 text-2xl font-semibold text-neutral-900">{total}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card className="border-slate-200">
        <CardHeader>
          <CardTitle className="text-lg font-semibold text-neutral-900">Backlog por prioridade</CardTitle>
          <CardDescription className="text-neutral-600">
            Analise a pressão de atendimento conforme o nível de urgência.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Object.entries(data.priorityCounts).map(([priority, total]) => (
              <div key={priority} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
                <span className="text-sm font-medium text-neutral-800">
                  {PRIORITY_LABELS[priority] ?? priority}
                </span>
                <Badge variant="outline" className="rounded-full border-neutral-300 text-neutral-600">
                  {total} ticket{total === 1 ? "" : "s"}
                </Badge>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card className="border-slate-200">
        <CardHeader>
          <CardTitle className="text-lg font-semibold text-neutral-900">Filas com maior backlog</CardTitle>
          <CardDescription className="text-neutral-600">
            Identifique onde concentrar esforços de atendimento.
          </CardDescription>
        </CardHeader>
        <CardContent>
          {data.queueCounts.length === 0 ? (
            <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">
              Nenhuma fila com tickets abertos no momento.
            </p>
          ) : (
            <ul className="space-y-3">
              {data.queueCounts.map((queue) => (
                <li key={queue.id} className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3">
                  <div className="flex flex-col">
                    <span className="text-sm font-medium text-neutral-900">{queue.name}</span>
                  </div>
                  <Badge variant="outline" className="rounded-full border-neutral-300 text-neutral-600">
                    {queue.total} em aberto
                  </Badge>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  )
}