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

"use client"

import { z } from "zod"
import { useMemo, useState } from "react"
import type { Id } from "@/convex/_generated/dataModel"
import type { TicketPriority, TicketQueueSummary } from "@/lib/schemas/ticket"
import { useMutation, useQuery } from "convex/react"
// @ts-expect-error Convex runtime API lacks TypeScript definitions
import { api } from "@/convex/_generated/api"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { useAuth } from "@/lib/auth-client"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { FieldSet, FieldGroup, Field, FieldLabel, FieldError } from "@/components/ui/field"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { toast } from "sonner"
import { Spinner } from "@/components/ui/spinner"
import { Dropzone } from "@/components/ui/dropzone"
import { RichTextEditor } from "@/components/ui/rich-text-editor"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import {
  PriorityIcon,
  priorityBadgeClass,
  priorityItemClass,
  priorityStyles,
  priorityTriggerClass,
} from "@/components/tickets/priority-select"
import { CategorySelectFields } from "@/components/tickets/category-select"

const schema = z.object({
  subject: z.string().min(3, "Informe um assunto"),
  summary: z.string().optional(),
  description: z.string().optional(),
  priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
  channel: z.enum(["EMAIL", "WHATSAPP", "CHAT", "PHONE", "API", "MANUAL"]).default("MANUAL"),
  queueName: z.string().nullable().optional(),
  categoryId: z.string().min(1, "Selecione uma categoria"),
  subcategoryId: z.string().min(1, "Selecione uma categoria secundária"),
})

export function NewTicketDialog() {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      subject: "",
      summary: "",
      description: "",
      priority: "MEDIUM",
      channel: "MANUAL",
      queueName: null,
      categoryId: "",
      subcategoryId: "",
    },
    mode: "onTouched",
  })
  const { userId } = useAuth()
  const queuesRaw = useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID }) as TicketQueueSummary[] | undefined
  const queues = useMemo(() => queuesRaw ?? [], [queuesRaw])
  const create = useMutation(api.tickets.create)
  const addComment = useMutation(api.tickets.addComment)
  const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])
  const priorityValue = form.watch("priority") as TicketPriority
  const channelValue = form.watch("channel")
  const queueValue = form.watch("queueName") ?? "NONE"
  const categoryIdValue = form.watch("categoryId")
  const subcategoryIdValue = form.watch("subcategoryId")
  const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
  const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"

  async function submit(values: z.infer<typeof schema>) {
    if (!userId) return
    const subjectTrimmed = (values.subject ?? "").trim()
    if (subjectTrimmed.length < 3) {
      form.setError("subject", { type: "min", message: "Informe um assunto" })
      return
    }
    setLoading(true)
    toast.loading("Criando ticket…", { id: "new-ticket" })
    try {
      const sel = queues.find((q) => q.name === values.queueName)
      const id = await create({
        tenantId: DEFAULT_TENANT_ID,
        subject: subjectTrimmed,
        summary: values.summary,
        priority: values.priority,
        channel: values.channel,
        queueId: sel?.id as Id<"queues"> | undefined,
        requesterId: userId as Id<"users">,
        categoryId: values.categoryId as Id<"ticketCategories">,
        subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
      })
      const hasDescription = (values.description ?? "").replace(/<[^>]*>/g, "").trim().length > 0
      const bodyHtml = hasDescription ? (values.description as string) : (values.summary || "")
      if (attachments.length > 0 || bodyHtml.trim().length > 0) {
        const typedAttachments = attachments.map((a) => ({
          storageId: a.storageId as unknown as Id<"_storage">,
          name: a.name,
          size: a.size,
          type: a.type,
        }))
        await addComment({ ticketId: id as Id<"tickets">, authorId: userId as Id<"users">, visibility: "PUBLIC", body: bodyHtml, attachments: typedAttachments })
      }
      toast.success("Ticket criado!", { id: "new-ticket" })
      setOpen(false)
      form.reset()
      setAttachments([])
      // Navegar para o ticket recém-criado
      window.location.href = `/tickets/${id}`
    } catch {
      toast.error("Não foi possível criar o ticket.", { id: "new-ticket" })
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          size="sm"
          className="rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
        >
          Novo ticket
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Novo ticket</DialogTitle>
          <DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
        </DialogHeader>
        <form className="space-y-4" onSubmit={form.handleSubmit(submit)}>
          <FieldSet>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="subject">Assunto</FieldLabel>
                <Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
                <FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
              </Field>
              <Field>
                <FieldLabel htmlFor="summary">Resumo</FieldLabel>
                <textarea id="summary" className="w-full rounded-md border bg-background p-2 text-sm" rows={3} {...form.register("summary")} />
              </Field>
              <Field>
                <FieldLabel>Descrição</FieldLabel>
                <RichTextEditor
                  value={form.watch("description") || ""}
                  onChange={(html) => form.setValue("description", html)}
                  placeholder="Detalhe o problema, passos para reproduzir, links, etc."
                />
              </Field>
              <Field>
                <FieldLabel>Anexos</FieldLabel>
                <Dropzone onUploaded={(files) => setAttachments((prev) => [...prev, ...files])} />
                <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
              </Field>
              <Field>
                <CategorySelectFields
                  tenantId={DEFAULT_TENANT_ID}
                  categoryId={categoryIdValue || null}
                  subcategoryId={subcategoryIdValue || null}
                  onCategoryChange={(value) => {
                    form.setValue("categoryId", value, { shouldDirty: true, shouldValidate: true })
                  }}
                  onSubcategoryChange={(value) => {
                    form.setValue("subcategoryId", value, { shouldDirty: true, shouldValidate: true })
                  }}
                />
                {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
                  <FieldError className="mt-1 space-y-0.5">
                    <>
                      {form.formState.errors.categoryId?.message ? <div>{form.formState.errors.categoryId?.message}</div> : null}
                      {form.formState.errors.subcategoryId?.message ? <div>{form.formState.errors.subcategoryId?.message}</div> : null}
                    </>
                  </FieldError>
                ) : null}
              </Field>
              <div className="grid gap-3 sm:grid-cols-3">
                <Field>
                  <FieldLabel>Prioridade</FieldLabel>
                  <Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
                    <SelectTrigger className={cn(priorityTriggerClass, "w-full justify-between")}>
                      <SelectValue>
                        <Badge className={cn(priorityBadgeClass, priorityStyles[priorityValue]?.badgeClass)}>
                          <PriorityIcon value={priorityValue} />
                          {priorityStyles[priorityValue]?.label ?? priorityValue}
                        </Badge>
                      </SelectValue>
                    </SelectTrigger>
                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                      {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
                        <SelectItem key={option} value={option} className={priorityItemClass}>
                          <span className="inline-flex items-center gap-2">
                            <PriorityIcon value={option} />
                            {priorityStyles[option].label}
                          </span>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel>Canal</FieldLabel>
                  <Select value={channelValue} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
                    <SelectTrigger className={selectTriggerClass}>
                      <SelectValue placeholder="Canal" />
                    </SelectTrigger>
                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                      <SelectItem value="EMAIL" className={selectItemClass}>
                        E-mail
                      </SelectItem>
                      <SelectItem value="WHATSAPP" className={selectItemClass}>
                        WhatsApp
                      </SelectItem>
                      <SelectItem value="CHAT" className={selectItemClass}>
                        Chat
                      </SelectItem>
                      <SelectItem value="PHONE" className={selectItemClass}>
                        Telefone
                      </SelectItem>
                      <SelectItem value="API" className={selectItemClass}>
                        API
                      </SelectItem>
                      <SelectItem value="MANUAL" className={selectItemClass}>
                        Manual
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel>Fila</FieldLabel>
                  <Select value={queueValue} onValueChange={(v) => form.setValue("queueName", v === "NONE" ? null : v)}>
                    <SelectTrigger className={selectTriggerClass}>
                      <SelectValue placeholder="Sem fila" />
                    </SelectTrigger>
                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                      <SelectItem value="NONE" className={selectItemClass}>
                        Sem fila
                      </SelectItem>
                      {queues.map((q) => (
                        <SelectItem key={q.id} value={q.name} className={selectItemClass}>
                          {q.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </Field>
              </div>
            </FieldGroup>
          </FieldSet>
          <div className="flex justify-end">
            <Button
              type="submit"
              disabled={loading}
              className="rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30 disabled:opacity-60"
            >
              {loading ? (
                <>
                  <Spinner className="me-2" /> Criando…
                </>
              ) : (
                "Criar"
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}