sistema-de-chamados/web/src/components/tickets/ticket-comments.tsx

"use client"

import { useMemo, useState } from "react"
import { formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"
import { IconLock, IconMessage } from "@tabler/icons-react"
import { Download, ImageIcon, FileIcon } from "lucide-react"
import { useAction, useMutation } from "convex/react"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { api } from "@/convex/_generated/api"
import { useAuth } from "@/lib/auth-client"
import type { TicketWithDetails } from "@/lib/schemas/ticket"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { Dropzone } from "@/components/ui/dropzone"
import { Dialog, DialogContent } from "@/components/ui/dialog"

interface TicketCommentsProps {
  ticket: TicketWithDetails
}

export function TicketComments({ ticket }: TicketCommentsProps) {
  const { userId } = useAuth()
  const addComment = useMutation(api.tickets.addComment)
  const generateUploadUrl = useAction(api.files.generateUploadUrl)
  const [body, setBody] = useState("")
  const [attachmentsToSend, setAttachmentsToSend] = useState<Array<{ storageId: string; name: string; size?: number; type?: string; previewUrl?: string }>>([])
  const [preview, setPreview] = useState<string | null>(null)
  const [pending, setPending] = useState<Pick<TicketWithDetails["comments"][number], "id"|"author"|"visibility"|"body"|"attachments"|"createdAt"|"updatedAt">[]>([])

  const commentsAll = useMemo(() => {
    return [...pending, ...ticket.comments]
  }, [pending, ticket.comments])

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!userId) return
    const attachments = attachmentsToSend
    const now = new Date()
    const optimistic = {
      id: `temp-${now.getTime()}`,
      author: ticket.requester, // placeholder; poderia buscar o próprio usuário se necessário
      visibility: "PUBLIC" as const,
      body,
      attachments: attachments.map((a) => ({ id: a.storageId, name: a.name, url: a.previewUrl } as any)),
      createdAt: now,
      updatedAt: now,
    }
    setPending((p) => [optimistic, ...p])
    setBody("")
    setAttachmentsToSend([])
    toast.loading("Enviando comentário…", { id: "comment" })
    try {
      await addComment({ ticketId: ticket.id as any, authorId: userId as any, visibility: "PUBLIC", body: optimistic.body, attachments })
      setPending([])
      toast.success("Comentário enviado!", { id: "comment" })
    } catch (err) {
      setPending([])
      toast.error("Falha ao enviar comentário.", { id: "comment" })
    }
  }

  return (
    <Card className="rounded-xl border bg-card shadow-sm">
      <CardHeader className="px-4">
        <CardTitle className="flex items-center gap-2 text-lg font-semibold">
          <IconMessage className="size-5" /> Conversa
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6 px-4 pb-6">
        {commentsAll.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            Ainda sem comentarios. Que tal registrar o proximo passo?
          </p>
        ) : (
          commentsAll.map((comment) => {
            const initials = comment.author.name
              .split(" ")
              .slice(0, 2)
              .map((part) => part[0]?.toUpperCase())
              .join("")
            return (
              <div key={comment.id} className="flex gap-3">
                <Avatar className="size-9">
                  <AvatarImage src={comment.author.avatarUrl} alt={comment.author.name} />
                  <AvatarFallback>{initials}</AvatarFallback>
                </Avatar>
                <div className="flex flex-col gap-2">
                  <div className="flex flex-wrap items-center gap-2 text-sm">
                    <span className="font-medium text-foreground">{comment.author.name}</span>
                    {comment.visibility === "INTERNAL" ? (
                      <Badge variant="outline" className="gap-1">
                        <IconLock className="size-3" /> Interno
                      </Badge>
                    ) : null}
                    <span className="text-xs text-muted-foreground">
                      {formatDistanceToNow(comment.createdAt, { addSuffix: true, locale: ptBR })}
                    </span>
                  </div>
                  <div className="rounded-lg border border-dashed bg-card px-3 py-2 text-sm leading-relaxed text-muted-foreground break-words whitespace-pre-wrap">
                    {comment.body}
                  </div>
          {comment.attachments?.length ? (
            <div className="grid max-w-xl grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-3">
              {comment.attachments.map((a) => {
                const att = a as any
                const isImg = (att?.url ?? "").match(/\.(png|jpe?g|gif|webp|svg)$/i)
                if (isImg && att.url) {
                  return (
                    <button
                      key={att.id}
                      type="button"
                      onClick={() => setPreview(att.url)}
                      className="group overflow-hidden rounded-lg border bg-card p-0.5 hover:shadow"
                    >
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img src={att.url} alt={att.name} className="h-24 w-24 rounded-md object-cover" />
                      <div className="mt-1 line-clamp-1 w-24 text-ellipsis text-center text-[11px] text-muted-foreground">
                        {att.name}
                      </div>
                    </button>
                  )
                }
                return (
                  <a key={att.id} href={att.url} download={att.name} target="_blank" className="flex items-center gap-2 rounded-md border px-2 py-1 text-xs hover:bg-muted">
                    <FileIcon className="size-3.5" /> {att.name}
                    {att.url ? <Download className="size-3.5" /> : null}
                  </a>
                )
              })}
            </div>
          ) : null}
                </div>
              </div>
            )
          })
        )}
        <form onSubmit={handleSubmit} className="mt-4 space-y-3">
          <textarea
            className="w-full rounded-md border bg-background p-3 text-sm"
            placeholder="Escreva um comentario..."
            rows={3}
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
          <Dropzone onUploaded={(files) => setAttachmentsToSend((prev) => [...prev, ...files])} />
          <div className="flex items-center justify-end">
            <Button type="submit" size="sm">Enviar</Button>
          </div>
        </form>
        <Dialog open={!!preview} onOpenChange={(o) => !o && setPreview(null)}>
          <DialogContent className="max-w-3xl p-0">
            {preview ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={preview} alt="Preview" className="h-auto w-full rounded-xl" />
            ) : null}
          </DialogContent>
        </Dialog>
      </CardContent>
    </Card>
  )
}