"use client"

import { z } from "zod"
import { useEffect, useMemo, useRef, useState } from "react"
import { format, parseISO } from "date-fns"
import { ptBR } from "date-fns/locale"
import type { Doc, Id } from "@/convex/_generated/dataModel"
import type { TicketPriority, TicketQueueSummary } from "@/lib/schemas/ticket"
import { useMutation, useQuery } from "convex/react"
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 "@/lib/zod-resolver"
import { toast } from "sonner"
import { Spinner } from "@/components/ui/spinner"
import { Dropzone } from "@/components/ui/dropzone"
import { RichTextEditor, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
import { PriorityIcon } from "@/components/tickets/priority-select"
import { CategorySelectFields } from "@/components/tickets/category-select"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { useDefaultQueues } from "@/hooks/use-default-queues"
import { useLocalTimeZone } from "@/hooks/use-local-time-zone"
import { cn } from "@/lib/utils"
import { priorityStyles } from "@/lib/ticket-priority-style"
import { normalizeCustomFieldInputs } from "@/lib/ticket-form-helpers"
import type { TicketFormDefinition, TicketFormFieldDefinition } from "@/lib/ticket-form-types"
import { Calendar as CalendarIcon, ListChecks, Plus, Trash2 } from "lucide-react"
import { TimePicker } from "@/components/ui/time-picker"
import { VISIT_KEYWORDS } from "@/lib/ticket-matchers"
import { Checkbox } from "@/components/ui/checkbox"

type TriggerVariant = "button" | "card"

type CustomerOption = {
  id: string
  name: string
  email: string
  role: string
  companyId: string | null
  companyName: string | null
  companyIsAvulso: boolean
  avatarUrl: string | null
}

type ChecklistDraftItem = {
  id: string
  text: string
  required: boolean
}

type ChecklistTemplateOption = {
  id: Id<"ticketChecklistTemplates">
  name: string
  company: { id: Id<"companies">; name: string } | null
  items: Array<{ id: string; text: string; required: boolean }>
}

function getInitials(name: string | null | undefined, fallback: string): string {
  const normalizedName = (name ?? "").trim()
  if (normalizedName.length > 0) {
    const parts = normalizedName.split(/\s+/).slice(0, 2)
    const initials = parts.map((part) => part.charAt(0).toUpperCase()).join("")
    if (initials.length > 0) {
      return initials
    }
  }
  const normalizedFallback = (fallback ?? "").trim()
  return normalizedFallback.length > 0 ? normalizedFallback.charAt(0).toUpperCase() : "?"
}

function toHtml(text: string) {
  const escaped = text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;")
  return `<p>${escaped.replace(/\n/g, "<br />")}</p>`
}

type RequesterPreviewProps = {
  customer: CustomerOption | null
  company: { id: string; name: string; isAvulso?: boolean } | null
}

function RequesterPreview({ customer, company }: RequesterPreviewProps) {
  if (!customer) {
    return (
      <div className="mb-3 rounded-xl border border-dashed border-border/80 bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
        Selecione um solicitante para visualizar os detalhes aqui.
      </div>
    )
  }

  const initials = getInitials(customer.name, customer.email)
  const companyLabel = customer.companyName ?? company?.name ?? "Sem empresa"

  return (
    <div className="mb-3 flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 shadow-sm">
      <div className="flex items-center gap-3">
        <Avatar className="size-9 border border-border/60 bg-white text-sm font-semibold uppercase">
          <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
        <div className="min-w-0 space-y-0.5">
          <p className="truncate font-semibold text-foreground">{customer.name || customer.email}</p>
          <p className="truncate text-xs text-muted-foreground">{customer.email}</p>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <Badge variant="outline" className="rounded-full border-slate-200 px-2.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
          {companyLabel}
        </Badge>
      </div>
    </div>
  )
}

const NO_COMPANY_VALUE = "__no_company__"

const schema = z.object({
  subject: z.string().default(""),
  description: z.string().default(""),
  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(),
  visitDate: z.string().nullable().optional(),
  visitTime: z.string().nullable().optional(),
  assigneeId: z.string().nullable().optional(),
  companyId: z.string().optional(),
  requesterId: z.string().min(1, "Selecione um solicitante"),
  categoryId: z.string().min(1, "Selecione uma categoria"),
  subcategoryId: z.string().min(1, "Selecione uma categoria secundária"),
})

export function NewTicketDialog({
  triggerClassName,
  triggerVariant = "button",
}: {
  triggerClassName?: string
  triggerVariant?: TriggerVariant
} = {}) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const calendarTimeZone = useLocalTimeZone()
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      subject: "",
      description: "",
      priority: "MEDIUM",
      channel: "MANUAL",
      queueName: null,
      visitDate: null,
      visitTime: null,
      assigneeId: null,
      companyId: NO_COMPANY_VALUE,
      requesterId: "",
      categoryId: "",
      subcategoryId: "",
    },
    mode: "onTouched",
  })
  const { convexUserId, isStaff, role, session, machineContext } = useAuth()
  const sessionUser = session?.user ?? null
  const queuesEnabled = Boolean(isStaff && convexUserId)
  useDefaultQueues(DEFAULT_TENANT_ID)
  const queuesRemote = useQuery(
    api.queues.summary,
    queuesEnabled ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> } : "skip"
  )
  const queues = useMemo(
    () => (Array.isArray(queuesRemote) ? (queuesRemote as TicketQueueSummary[]) : []),
    [queuesRemote]
  )
  const create = useMutation(api.tickets.create)
  const addComment = useMutation(api.tickets.addComment)
  const staffRaw = useQuery(api.users.listAgents, { tenantId: DEFAULT_TENANT_ID }) as Doc<"users">[] | undefined
  const staff = useMemo(
    () => (staffRaw ?? []).sort((a, b) => a.name.localeCompare(b.name, "pt-BR")),
    [staffRaw]
  )

  const directoryQueryEnabled = queuesEnabled && Boolean(convexUserId)
  const companiesRemote = useQuery(
    api.companies.list,
    directoryQueryEnabled ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> } : "skip"
  )
  const companies = useMemo(
    () =>
      (Array.isArray(companiesRemote) ? companiesRemote : []).map((company) => ({
        id: String(company.id),
        name: company.name,
        slug: company.slug ?? null,
      })),
    [companiesRemote]
  )

  const ensureTicketFormDefaultsMutation = useMutation(api.tickets.ensureTicketFormDefaults)
  const hasEnsuredFormsRef = useRef(false)

  useEffect(() => {
    if (!convexUserId || hasEnsuredFormsRef.current) return
    hasEnsuredFormsRef.current = true
    ensureTicketFormDefaultsMutation({
      tenantId: DEFAULT_TENANT_ID,
      actorId: convexUserId as Id<"users">,
    }).catch((error) => {
      console.error("Falha ao preparar formulários personalizados", error)
      hasEnsuredFormsRef.current = false
    })
  }, [convexUserId, ensureTicketFormDefaultsMutation])

  const companyValue = form.watch("companyId") ?? NO_COMPANY_VALUE

  const formsRemote = useQuery(
    api.tickets.listTicketForms,
    convexUserId
      ? {
          tenantId: DEFAULT_TENANT_ID,
          viewerId: convexUserId as Id<"users">,
          companyId: companyValue !== NO_COMPANY_VALUE ? (companyValue as Id<"companies">) : undefined,
        }
      : "skip"
  ) as TicketFormDefinition[] | undefined

  const checklistTemplates = useQuery(
    api.checklistTemplates.listActive,
    convexUserId
      ? {
          tenantId: DEFAULT_TENANT_ID,
          viewerId: convexUserId as Id<"users">,
          companyId: companyValue !== NO_COMPANY_VALUE ? (companyValue as Id<"companies">) : undefined,
        }
      : "skip"
  ) as ChecklistTemplateOption[] | undefined

  const forms = useMemo<TicketFormDefinition[]>(() => {
    const fallback: TicketFormDefinition = {
      key: "default",
      label: "Chamado",
      description: "Formulário básico para abertura de chamados gerais.",
      fields: [],
    }
    if (!formsRemote || formsRemote.length === 0) {
      return [fallback]
    }
    const hasDefault = formsRemote.some((form) => form.key === fallback.key)
    if (hasDefault) {
      return formsRemote
    }
    return [fallback, ...formsRemote]
  }, [formsRemote])

  const [selectedFormKey, setSelectedFormKey] = useState<string>("default")
  const [customFieldValues, setCustomFieldValues] = useState<Record<string, unknown>>({})
  const [openCalendarField, setOpenCalendarField] = useState<string | null>(null)
  const [visitDatePickerOpen, setVisitDatePickerOpen] = useState(false)
  const [manualChecklist, setManualChecklist] = useState<ChecklistDraftItem[]>([])
  const [appliedChecklistTemplateIds, setAppliedChecklistTemplateIds] = useState<string[]>([])
  const [checklistTemplateToApply, setChecklistTemplateToApply] = useState<string>("")
  const [checklistItemText, setChecklistItemText] = useState("")
  const [checklistItemRequired, setChecklistItemRequired] = useState(true)

  const appliedChecklistTemplates = useMemo(() => {
    const selected = new Set(appliedChecklistTemplateIds.map(String))
    return (checklistTemplates ?? []).filter((tpl) => selected.has(String(tpl.id)))
  }, [appliedChecklistTemplateIds, checklistTemplates])

  const checklistTemplatePreviewItems = useMemo(
    () =>
      appliedChecklistTemplates.flatMap((tpl) =>
        (tpl.items ?? []).map((item) => ({
          key: `${String(tpl.id)}:${item.id}`,
          text: item.text,
          required: item.required,
          templateName: tpl.name,
        }))
      ),
    [appliedChecklistTemplates]
  )

  const selectedForm = useMemo(() => forms.find((formDef) => formDef.key === selectedFormKey) ?? forms[0], [forms, selectedFormKey])

  const handleFormSelection = (key: string) => {
    setSelectedFormKey(key)
    setCustomFieldValues({})
  }

  const handleCustomFieldChange = (field: TicketFormFieldDefinition, value: unknown) => {
    setCustomFieldValues((prev) => ({
      ...prev,
      [field.id]: value,
    }))
  }

  const customersRemote = useQuery(
    api.users.listCustomers,
    directoryQueryEnabled ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> } : "skip"
  )
  const rawCustomers = useMemo(
    () => (Array.isArray(customersRemote) ? (customersRemote as CustomerOption[]) : []),
    [customersRemote]
  )
  const viewerCustomer = useMemo<CustomerOption | null>(() => {
    if (!convexUserId || !sessionUser) return null
    return {
      id: convexUserId,
      name: sessionUser.name ?? sessionUser.email,
      email: sessionUser.email,
      role: sessionUser.role ?? "customer",
      companyId: machineContext?.companyId ?? null,
      companyName: null,
      companyIsAvulso: false,
      avatarUrl: sessionUser.avatarUrl,
    }
  }, [convexUserId, sessionUser, machineContext?.companyId])
  const customers = useMemo(() => {
    if (!viewerCustomer) return rawCustomers
    const exists = rawCustomers.some((customer) => customer.id === viewerCustomer.id)
    return exists ? rawCustomers : [...rawCustomers, viewerCustomer]
  }, [rawCustomers, viewerCustomer])
  const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])
  const [customersInitialized, setCustomersInitialized] = useState(false)
  const attachmentsTotalBytes = useMemo(
    () => attachments.reduce((acc, item) => acc + (item.size ?? 0), 0),
    [attachments]
  )
  const priorityValue = form.watch("priority") as TicketPriority
  const queueValue = form.watch("queueName") ?? "NONE"
  const visitDateValue = form.watch("visitDate") ?? null
  const visitTimeValue = form.watch("visitTime") ?? null
  const assigneeValue = form.watch("assigneeId") ?? null
  const assigneeSelectValue = assigneeValue ?? "NONE"
  const requesterValue = form.watch("requesterId") ?? ""
  const categoryIdValue = form.watch("categoryId")
  const subcategoryIdValue = form.watch("subcategoryId")
  const isSubmitted = form.formState.isSubmitted

  const normalizedQueueName =
    typeof queueValue === "string" && queueValue !== "NONE" ? queueValue.toLowerCase() : ""
  const isVisitQueue = useMemo(
    () => VISIT_KEYWORDS.some((keyword) => normalizedQueueName.includes(keyword)),
    [normalizedQueueName]
  )
  const visitDate = useMemo(() => {
    if (!visitDateValue) return null
    const timeSegment =
      typeof visitTimeValue === "string" && visitTimeValue.length > 0 ? visitTimeValue : "00:00"
    const normalizedTime = timeSegment.length === 5 ? `${timeSegment}:00` : timeSegment
    try {
      return parseISO(`${visitDateValue}T${normalizedTime}`)
    } catch {
      return null
    }
  }, [visitDateValue, visitTimeValue])

  useEffect(() => {
    if (isVisitQueue) return
    form.setValue("visitDate", null, { shouldDirty: false, shouldTouch: false })
    form.setValue("visitTime", null, { shouldDirty: false, shouldTouch: false })
  }, [form, isVisitQueue])

  const companyOptions = useMemo(() => {
    const map = new Map<string, { id: string; name: string; isAvulso?: boolean; keywords: string[] }>()
    companies.forEach((company) => {
      const trimmedName = company.name.trim()
      const slugFallback = company.slug?.trim()
      const label =
        trimmedName.length > 0 ? trimmedName : slugFallback && slugFallback.length > 0 ? slugFallback : `Empresa ${company.id.slice(0, 8)}`
      map.set(company.id, {
        id: company.id,
        name: label,
        isAvulso: false,
        keywords: company.slug ? [company.slug] : [],
      })
    })
    customers.forEach((customer) => {
      if (customer.companyId && !map.has(customer.companyId)) {
        const trimmedName = customer.companyName?.trim() ?? ""
        const label =
          trimmedName.length > 0 ? trimmedName : `Empresa ${customer.companyId.slice(0, 8)}`
        map.set(customer.companyId, {
          id: customer.companyId,
          name: label,
          isAvulso: customer.companyIsAvulso,
          keywords: [],
        })
      }
    })
    const base: Array<{ id: string; name: string; isAvulso?: boolean; keywords: string[] }> = [
      { id: NO_COMPANY_VALUE, name: "Sem empresa", keywords: ["sem empresa", "nenhuma"], isAvulso: false },
    ]
    const sorted = Array.from(map.values())
      .sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
    return [...base, ...sorted]
  }, [companies, customers])

  const filteredCustomers = useMemo(() => {
    if (companyValue === NO_COMPANY_VALUE) {
      return customers.filter((customer) => !customer.companyId)
    }
    return customers.filter((customer) => customer.companyId === companyValue)
  }, [companyValue, customers])

  const companyOptionMap = useMemo(
    () => new Map(companyOptions.map((option) => [option.id, option])),
    [companyOptions],
  )

  const companyComboboxOptions = useMemo<SearchableComboboxOption[]>(
    () =>
      companyOptions.map((option) => ({
        value: option.id,
        label: option.name,
        description: option.isAvulso ? "Empresa avulsa" : undefined,
        keywords: option.keywords,
      })),
    [companyOptions],
  )

  const selectedCompanyOption = useMemo(
    () => companyOptionMap.get(companyValue) ?? null,
    [companyOptionMap, companyValue],
  )

  const requesterById = useMemo(
    () => new Map(customers.map((customer) => [customer.id, customer])),
    [customers],
  )

  const selectedRequester = requesterById.get(requesterValue) ?? null

  const requesterComboboxOptions = useMemo<SearchableComboboxOption[]>(
    () =>
      filteredCustomers.map((customer) => ({
        value: customer.id,
        label: customer.name && customer.name.trim().length > 0 ? customer.name : customer.email,
        description: customer.email,
        keywords: [
          customer.email.toLowerCase(),
          customer.companyName?.toLowerCase?.() ?? "",
          customer.name?.toLowerCase?.() ?? "",
        ].filter(Boolean),
      })),
    [filteredCustomers],
  )

  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"
  const [assigneeInitialized, setAssigneeInitialized] = useState(false)
  const allowTicketMentions = useMemo(() => {
    const normalized = (role ?? "").toLowerCase()
    return normalized === "admin" || normalized === "agent" || normalized === "collaborator"
  }, [role])

  useEffect(() => {
    if (!open) {
      setCustomersInitialized(false)
      setManualChecklist([])
      setAppliedChecklistTemplateIds([])
      setChecklistTemplateToApply("")
      setChecklistItemText("")
      setChecklistItemRequired(true)
      form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
      form.setValue("requesterId", "", { shouldDirty: false, shouldTouch: false })
      return
    }
    if (customersInitialized) return
    if (!customers.length) return
    let initialRequester = form.getValues("requesterId")
    if (!initialRequester || !customers.some((customer) => customer.id === initialRequester)) {
      if (convexUserId && customers.some((customer) => customer.id === convexUserId)) {
        initialRequester = convexUserId
      } else {
        initialRequester = customers[0].id
      }
    }
    const selected = customers.find((customer) => customer.id === initialRequester) ?? null
    form.setValue("requesterId", initialRequester ?? "", { shouldDirty: false, shouldTouch: false })
    if (selected?.companyId) {
      form.setValue("companyId", selected.companyId, { shouldDirty: false, shouldTouch: false })
    } else {
      form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
    }
    setCustomersInitialized(true)
  }, [open, customersInitialized, customers, convexUserId, form])

  useEffect(() => {
    if (!open || !customersInitialized) return
    const options = filteredCustomers
    if (options.length === 0) {
      if (requesterValue !== "") {
        form.setValue("requesterId", "", {
          shouldDirty: true,
          shouldTouch: true,
          shouldValidate: form.formState.isSubmitted,
        })
      }
      return
    }
    if (!options.some((customer) => customer.id === requesterValue)) {
      form.setValue("requesterId", options[0].id, {
        shouldDirty: true,
        shouldTouch: true,
        shouldValidate: form.formState.isSubmitted,
      })
    }
  }, [open, customersInitialized, filteredCustomers, requesterValue, form])

  useEffect(() => {
    if (requesterValue && form.formState.errors.requesterId) {
      form.clearErrors("requesterId")
    }
  }, [requesterValue, form])


  useEffect(() => {
    if (!open) {
      setAssigneeInitialized(false)
      setOpenCalendarField(null)
      setVisitDatePickerOpen(false)
      return
    }
    if (assigneeInitialized) return
    if (!convexUserId) return
    form.setValue("assigneeId", convexUserId, { shouldDirty: false, shouldTouch: false })
    setAssigneeInitialized(true)
  }, [open, assigneeInitialized, convexUserId, form])

  // Default queue to "Chamados" if available when opening
  useEffect(() => {
    if (!open) return
    const current = form.getValues("queueName")
    if (current) return
    const hasChamados = queues.some((q) => q.name === "Chamados")
    if (hasChamados) {
      form.setValue("queueName", "Chamados", { shouldDirty: false, shouldTouch: false })
    }
  }, [open, queues, form])

  const handleCategoryChange = (value: string) => {
    const previous = form.getValues("categoryId") ?? ""
    const next = value ?? ""
    form.setValue("categoryId", next, {
      shouldDirty: previous !== next && previous !== "",
      shouldTouch: true,
      shouldValidate: isSubmitted,
    })
    if (!isSubmitted) {
      form.clearErrors("categoryId")
    }
  }

  const handleSubcategoryChange = (value: string) => {
    const previous = form.getValues("subcategoryId") ?? ""
    const next = value ?? ""
    form.setValue("subcategoryId", next, {
      shouldDirty: previous !== next && previous !== "",
      shouldTouch: true,
      shouldValidate: isSubmitted,
    })
    if (!isSubmitted) {
      form.clearErrors("subcategoryId")
    }
  }

  const handleApplyChecklistTemplate = () => {
    const templateId = checklistTemplateToApply.trim()
    if (!templateId) return
    setAppliedChecklistTemplateIds((prev) => {
      if (prev.includes(templateId)) return prev
      return [...prev, templateId]
    })
    setChecklistTemplateToApply("")
  }

  const handleAddChecklistItem = () => {
    const text = checklistItemText.trim()
    if (!text) {
      toast.error("Informe o texto do item do checklist.", { id: "new-ticket" })
      return
    }
    if (text.length > 240) {
      toast.error("Item do checklist muito longo (máx. 240 caracteres).", { id: "new-ticket" })
      return
    }
    setManualChecklist((prev) => [...prev, { id: crypto.randomUUID(), text, required: checklistItemRequired }])
    setChecklistItemText("")
    setChecklistItemRequired(true)
  }

  async function submit(values: z.infer<typeof schema>) {
    if (!convexUserId) return

    const subjectTrimmed = (values.subject ?? "").trim()
    if (subjectTrimmed.length < 3) {
      form.setError("subject", { type: "min", message: "Informe um assunto com pelo menos 3 caracteres." })
      return
    }

    const sanitizedDescription = sanitizeEditorHtml(values.description ?? "")
    const plainDescription = sanitizedDescription.replace(/<[^>]*>/g, "").trim()
    if (plainDescription.length === 0) {
      form.setError("description", { type: "custom", message: "Descreva o contexto do chamado." })
      setLoading(false)
      return
    }

    const currentQueueName = values.queueName ?? ""
    const isVisitQueueOnSubmit =
      typeof currentQueueName === "string" &&
      VISIT_KEYWORDS.some((keyword) => currentQueueName.toLowerCase().includes(keyword))
    if (isVisitQueueOnSubmit) {
      if (!values.visitDate) {
        form.setError("visitDate", { type: "custom", message: "Informe a data da visita para chamados desta fila." })
        return
      }
      if (!values.visitTime) {
        form.setError("visitTime", { type: "custom", message: "Informe o horário da visita para chamados desta fila." })
        return
      }
    }

    let customFieldsPayload: Array<{ fieldId: Id<"ticketFields">; value: unknown }> = []
    if (selectedForm?.fields?.length) {
      const normalized = normalizeCustomFieldInputs(selectedForm.fields, customFieldValues)
      if (!normalized.ok) {
        toast.error(normalized.message, { id: "new-ticket" })
        setLoading(false)
        return
      }
      customFieldsPayload = normalized.payload
    }
    const checklistPayload = manualChecklist.map((item) => ({
      text: item.text.trim(),
      required: item.required,
    }))
    const invalidChecklist = checklistPayload.find((item) => item.text.length === 0 || item.text.length > 240)
    if (invalidChecklist) {
      toast.error("Revise os itens do checklist (texto obrigatório e até 240 caracteres).", { id: "new-ticket" })
      return
    }
    const checklistTemplateIds = appliedChecklistTemplateIds.map((id) => id as Id<"ticketChecklistTemplates">)

    setLoading(true)
    toast.loading("Criando ticket…", { id: "new-ticket" })
    try {
      const sel = queues.find((q) => q.name === values.queueName)
      const selectedAssignee = form.getValues("assigneeId") ?? null
      const requesterToSend = values.requesterId as Id<"users">
      let visitDateTimestamp: number | undefined
      if (isVisitQueueOnSubmit && values.visitDate && values.visitTime) {
        try {
          const timeSegment = values.visitTime.length === 5 ? `${values.visitTime}:00` : values.visitTime
          const parsed = parseISO(`${values.visitDate}T${timeSegment}`)
          visitDateTimestamp = parsed.getTime()
        } catch {
          visitDateTimestamp = undefined
        }
      }
      const id = await create({
        actorId: convexUserId as Id<"users">,
        tenantId: DEFAULT_TENANT_ID,
        subject: subjectTrimmed,
        priority: values.priority,
        channel: values.channel,
        queueId: sel?.id as Id<"queues"> | undefined,
        requesterId: requesterToSend,
        assigneeId: selectedAssignee ? (selectedAssignee as Id<"users">) : undefined,
        categoryId: values.categoryId as Id<"ticketCategories">,
        subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
        formTemplate: selectedFormKey !== "default" ? selectedFormKey : undefined,
        checklist: checklistPayload.length > 0 ? checklistPayload : undefined,
        checklistTemplateIds: checklistTemplateIds.length > 0 ? checklistTemplateIds : undefined,
        customFields: customFieldsPayload.length > 0 ? customFieldsPayload : undefined,
        visitDate: visitDateTimestamp,
      })
      const summaryFallback = subjectTrimmed
      const bodyHtml = plainDescription.length > 0 ? sanitizedDescription : toHtml(summaryFallback)
      const MAX_COMMENT_CHARS = 20000
      const plainForLimit = (plainDescription.length > 0 ? plainDescription : summaryFallback).trim()
      if (plainForLimit.length > MAX_COMMENT_CHARS) {
        toast.error(`Descrição muito longa (máx. ${MAX_COMMENT_CHARS} caracteres)`, { id: "new-ticket" })
        setLoading(false)
        return
      }
      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: convexUserId as Id<"users">, visibility: "INTERNAL", body: bodyHtml, attachments: typedAttachments })
      }
      toast.success("Ticket criado!", { id: "new-ticket" })
      setOpen(false)
      form.reset({
        subject: "",
        description: "",
        priority: "MEDIUM",
        channel: "MANUAL",
        queueName: null,
        assigneeId: convexUserId ?? null,
        categoryId: "",
        subcategoryId: "",
        visitDate: null,
        visitTime: null,
      })
      form.clearErrors()
      setSelectedFormKey("default")
      setCustomFieldValues({})
      setAssigneeInitialized(false)
      setAttachments([])
      setManualChecklist([])
      setAppliedChecklistTemplateIds([])
      setChecklistTemplateToApply("")
      setChecklistItemText("")
      setChecklistItemRequired(true)
      // 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)
    }
  }

  const cardTrigger = (
    <button
      type="button"
      className={cn(
        "rounded-2xl border border-slate-900 bg-neutral-950 px-4 py-4 text-left text-white shadow-lg shadow-black/30 transition hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40",
        "flex h-28 min-w-[220px] flex-1 flex-col justify-between",
        triggerClassName
      )}
    >
      <span className="text-xs font-semibold uppercase tracking-wide text-white/60">Atalho</span>
      <div className="space-y-1">
        <p className="text-lg font-semibold leading-tight">Novo ticket</p>
        <p className="text-xs text-white/70">Abrir chamado manualmente</p>
      </div>
    </button>
  )

  const buttonTrigger = (
    <Button
      size="sm"
      className={cn(
        "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",
        triggerClassName
      )}
    >
      Novo ticket
    </Button>
  )

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {triggerVariant === "card"
          ? cardTrigger
          : buttonTrigger}
      </DialogTrigger>
      <DialogContent className="max-w-4xl gap-0 overflow-hidden rounded-3xl border border-slate-200 bg-white p-0 shadow-2xl lg:max-w-5xl">
        <div className="max-h-[88vh] overflow-y-auto">
          <div className="space-y-5 px-6 pt-7 pb-12 sm:px-8 md:px-10">
            <form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
              <div className="border-b border-slate-200 pb-5">
                <DialogHeader className="gap-1.5 p-0">
                  <DialogTitle className="text-xl font-semibold text-neutral-900">Novo ticket</DialogTitle>
                  <DialogDescription className="text-sm text-neutral-600">
                    Preencha as informações básicas para abrir um chamado.
                  </DialogDescription>
                </DialogHeader>
              </div>
              {forms.length > 1 ? (
                <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
                  <p className="text-sm font-semibold text-neutral-800">Tipo de solicitação</p>
                  <div className="mt-2 flex flex-wrap gap-2">
                    {forms.map((formDef) => (
                      <Button
                        key={formDef.key}
                        type="button"
                        variant={selectedFormKey === formDef.key ? "default" : "outline"}
                        size="sm"
                        onClick={() => handleFormSelection(formDef.key)}
                      >
                        {formDef.label}
                      </Button>
                    ))}
                  </div>
                  {selectedForm?.description ? (
                    <p className="mt-2 text-xs text-neutral-500">{selectedForm.description}</p>
                  ) : null}
                </div>
              ) : null}

              <FieldSet>
                <FieldGroup className="lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
                  <div className="space-y-4">
                    <Field>
                      <FieldLabel htmlFor="subject" className="flex items-center gap-1">
                        Assunto <span className="text-destructive">*</span>
                      </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 className="flex items-center gap-1">
                        Descrição <span className="text-destructive">*</span>
                      </FieldLabel>
                      <RichTextEditor
                        value={form.watch("description") || ""}
                        onChange={(html) =>
                          form.setValue("description", html, {
                            shouldDirty: true,
                            shouldTouch: true,
                            shouldValidate: form.formState.isSubmitted,
                          })
                        }
                        placeholder="Detalhe o problema, passos para reproduzir, links, etc."
                        ticketMention={{ enabled: allowTicketMentions }}
                      />
                      <FieldError
                        errors={
                          form.formState.errors.description
                            ? [{ message: form.formState.errors.description.message }]
                            : []
                        }
                      />
                    </Field>
                    <Field>
                      <FieldLabel>Anexos</FieldLabel>
                      <Dropzone
                        onUploaded={(files) => setAttachments((prev) => [...prev, ...files])}
                        className="space-y-1.5 [&>div:first-child]:rounded-2xl [&>div:first-child]:p-4 [&>div:first-child]:pb-5 [&>div:first-child]:shadow-sm"
                        currentFileCount={attachments.length}
                        currentTotalBytes={attachmentsTotalBytes}
                      />
                      <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
                    </Field>
                  </div>
                  <div className="space-y-4">
                    <Field>
                      <FieldLabel>Empresa</FieldLabel>
                      <SearchableCombobox
                        value={companyValue}
                        onValueChange={(nextValue) => {
                          const normalizedValue = nextValue ?? NO_COMPANY_VALUE
                          const nextCustomers =
                            normalizedValue === NO_COMPANY_VALUE
                              ? customers.filter((customer) => !customer.companyId)
                              : customers.filter((customer) => customer.companyId === normalizedValue)
                          form.setValue("companyId", normalizedValue, {
                            shouldDirty: normalizedValue !== companyValue,
                            shouldTouch: true,
                          })
                          if (nextCustomers.length === 0) {
                            form.setValue("requesterId", "", {
                              shouldDirty: true,
                              shouldTouch: true,
                              shouldValidate: form.formState.isSubmitted,
                            })
                          } else if (!nextCustomers.some((customer) => customer.id === requesterValue)) {
                            const fallbackRequester = nextCustomers[0]
                            form.setValue("requesterId", fallbackRequester.id, {
                              shouldDirty: true,
                              shouldTouch: true,
                              shouldValidate: form.formState.isSubmitted,
                            })
                          }
                        }}
                        options={companyComboboxOptions}
                        placeholder="Selecionar empresa"
                        renderValue={(option) =>
                          option ? (
                            <span className="truncate">{option.label}</span>
                          ) : (
                            <span className="text-muted-foreground">Selecionar empresa</span>
                          )
                        }
                        renderOption={(option) => {
                          const meta = companyOptionMap.get(option.value)
                          return (
                            <div className="flex items-center justify-between gap-3">
                              <div className="flex flex-col">
                                <span className="font-medium text-foreground">{option.label}</span>
                                {meta?.keywords?.length ? (
                                  <span className="text-xs text-muted-foreground">{meta.keywords[0]}</span>
                                ) : null}
                              </div>
                              {meta?.isAvulso ? (
                                <Badge variant="outline" className="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide">
                                  Avulsa
                                </Badge>
                              ) : null}
                            </div>
                          )
                        }}
                      />
                    </Field>
                    <Field>
                      <FieldLabel className="flex items-center gap-1">
                        Solicitante <span className="text-destructive">*</span>
                      </FieldLabel>
                      <SearchableCombobox
                        value={requesterValue || null}
                        onValueChange={(nextValue) => {
                          if (nextValue === null) {
                            form.setValue("requesterId", "", {
                              shouldDirty: true,
                              shouldTouch: true,
                              shouldValidate: form.formState.isSubmitted,
                            })
                            return
                          }
                          if (nextValue !== requesterValue) {
                            form.setValue("requesterId", nextValue, {
                              shouldDirty: true,
                              shouldTouch: true,
                              shouldValidate: form.formState.isSubmitted,
                            })
                          }
                          const selection = requesterById.get(nextValue)
                          if (selection) {
                            const nextCompanyId = selection.companyId ?? NO_COMPANY_VALUE
                            if (nextCompanyId !== companyValue) {
                              form.setValue("companyId", nextCompanyId, {
                                shouldDirty: true,
                                shouldTouch: true,
                              })
                            }
                          }
                        }}
                        options={requesterComboboxOptions}
                        placeholder={filteredCustomers.length === 0 ? "Nenhum usuário disponível" : "Selecionar solicitante"}
                        searchPlaceholder="Buscar por nome ou e-mail..."
                        disabled={filteredCustomers.length === 0}
                        renderValue={(option) => {
                          if (!option) return <span className="text-muted-foreground">Selecionar solicitante</span>
                          return (
                            <div className="flex w-full flex-wrap items-start gap-2">
                              <div className="flex min-w-0 flex-1 flex-col">
                                <span className="truncate font-medium text-foreground">{option.label}</span>
                                {option.description ? (
                                  <span className="truncate text-xs text-muted-foreground">{option.description}</span>
                                ) : null}
                              </div>
                              {selectedCompanyOption && selectedCompanyOption.id !== NO_COMPANY_VALUE ? (
                                <Badge
                                  variant="outline"
                                  className="hidden min-w-0 max-w-full truncate rounded-full px-2.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground sm:ml-auto sm:inline-flex sm:max-w-[45%]"
                                >
                                  {selectedCompanyOption.name}
                                </Badge>
                              ) : null}
                            </div>
                          )
                        }}
                        renderOption={(option) => {
                          const record = requesterById.get(option.value)
                          const initials = getInitials(record?.name, record?.email ?? option.label)
                          return (
                            <div className="flex items-center gap-3">
                              <Avatar className="size-8 border border-border/60">
                                <AvatarFallback className="text-xs font-semibold uppercase">{initials}</AvatarFallback>
                              </Avatar>
                              <div className="min-w-0 flex-1">
                                <p className="truncate font-medium text-foreground">{option.label}</p>
                                <p className="truncate text-xs text-muted-foreground">{record?.email ?? option.description}</p>
                              </div>
                              {record?.companyName ? (
                                <Badge variant="outline" className="hidden rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide md:inline-flex">
                                  {record.companyName}
                                </Badge>
                              ) : null}
                            </div>
                          )
                        }}
                      />
                      {filteredCustomers.length === 0 ? (
                        <FieldError className="mt-1">Nenhum colaborador disponível para a empresa selecionada.</FieldError>
                      ) : null}
                      <FieldError
                        errors={
                          form.formState.errors.requesterId
                            ? [{ message: form.formState.errors.requesterId.message }]
                            : []
                        }
                      />
                    </Field>

                    <Field>
                      <CategorySelectFields
                        tenantId={DEFAULT_TENANT_ID}
                        categoryId={categoryIdValue || null}
                        subcategoryId={subcategoryIdValue || null}
                        onCategoryChange={handleCategoryChange}
                        onSubcategoryChange={handleSubcategoryChange}
                        categoryRequired
                        subcategoryRequired
                        layout="stacked"
                      />
                      {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-2 xl:grid-cols-1 xl:gap-4">
                      <Field>
                        <FieldLabel>Prioridade</FieldLabel>
                        <Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
                          <SelectTrigger className={selectTriggerClass}>
                            <SelectValue placeholder="Escolha a prioridade" />
                          </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={selectItemClass}>
                                <span className="inline-flex items-center gap-2">
                                  <PriorityIcon value={option} />
                                  {priorityStyles[option].label}
                                </span>
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </Field>
                      {/* Canal removido da UI: padrão MANUAL será enviado */}
                      <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>
                      {isVisitQueue ? (
                        <Field>
                          <FieldLabel className="flex items-center gap-1">
                            Data e horário da visita <span className="text-destructive">*</span>
                          </FieldLabel>
                          <div className="space-y-2">
                            <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_140px]">
                              <Popover open={visitDatePickerOpen} onOpenChange={setVisitDatePickerOpen}>
                                <PopoverTrigger asChild>
                                  <button
                                    type="button"
                                    className={cn(
                                      "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-left text-sm text-neutral-800 shadow-sm hover:bg-slate-50",
                                      !visitDate && "text-muted-foreground"
                                    )}
                                  >
                                    {visitDate
                                      ? format(visitDate, "dd/MM/yyyy", { locale: ptBR })
                                      : "Selecione a data"}
                                    <CalendarIcon className="ml-2 size-4 text-neutral-500" />
                                  </button>
                                </PopoverTrigger>
                                <PopoverContent className="w-auto p-0" align="start">
                                  <Calendar
                                    mode="single"
                                    selected={visitDate ?? undefined}
                                    onSelect={(date) => {
                                      if (!date) {
                                        form.setValue("visitDate", null, {
                                          shouldDirty: true,
                                          shouldTouch: true,
                                          shouldValidate: form.formState.isSubmitted,
                                        })
                                        form.setValue("visitTime", null, {
                                          shouldDirty: true,
                                          shouldTouch: true,
                                          shouldValidate: form.formState.isSubmitted,
                                        })
                                        return
                                      }
                                      const iso = date.toISOString().slice(0, 10)
                                      form.setValue("visitDate", iso, {
                                        shouldDirty: true,
                                        shouldTouch: true,
                                        shouldValidate: form.formState.isSubmitted,
                                      })
                                      setVisitDatePickerOpen(false)
                                    }}
                                    initialFocus
                                  />
                                </PopoverContent>
                              </Popover>
                              <div className="flex flex-col gap-1">
                                <TimePicker
                                  value={typeof visitTimeValue === "string" ? visitTimeValue : ""}
                                  onChange={(value) =>
                                    form.setValue("visitTime", value || null, {
                                      shouldDirty: true,
                                      shouldTouch: true,
                                      shouldValidate: form.formState.isSubmitted,
                                    })
                                  }
                                  stepMinutes={5}
                                  className="h-8 rounded-full border border-slate-300 bg-white text-sm font-medium text-neutral-800 shadow-sm"
                                />
                                <FieldError
                                  errors={
                                    form.formState.errors.visitTime
                                      ? [{ message: form.formState.errors.visitTime.message as string }]
                                      : []
                                  }
                                />
                              </div>
                            </div>
                            <FieldError
                              errors={
                                form.formState.errors.visitDate
                                  ? [{ message: form.formState.errors.visitDate.message as string }]
                                  : []
                              }
                            />
                          </div>
                        </Field>
                      ) : null}
                      <Field>
                        <FieldLabel>Responsável</FieldLabel>
                        <Select
                          value={assigneeSelectValue}
                          onValueChange={(value) =>
                            form.setValue("assigneeId", value === "NONE" ? null : value, {
                              shouldDirty: value !== assigneeValue,
                              shouldTouch: true,
                            })
                          }
                        >
                          <SelectTrigger className={selectTriggerClass}>
                            <SelectValue placeholder={staff.length === 0 ? "Carregando..." : "Selecione o responsável"} />
                          </SelectTrigger>
                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                            <SelectItem value="NONE" className={selectItemClass}>
                              Sem responsável
                            </SelectItem>
                            {staff.map((member) => (
                              <SelectItem key={member._id} value={member._id} className={selectItemClass}>
                                {member.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </Field>
                    </div>
                  </div>

                {selectedForm.fields.length > 0 ? (
                  <div className="grid gap-4 rounded-xl border border-slate-200 bg-white px-4 py-4 sm:grid-cols-2 lg:col-span-2">
                    <p className="text-sm font-semibold text-neutral-800 sm:col-span-2">Informações adicionais</p>
                    {selectedForm.fields.map((field) => {
                      const value = customFieldValues[field.id]
                      const fieldId = `custom-field-${field.id}`
                      const isRequiredStar = field.required && field.key !== "colaborador_patrimonio"
                      const labelSuffix = isRequiredStar ? <span className="text-destructive">*</span> : null
                      const helpText = field.description ? (
                        <p className="text-xs text-neutral-500">{field.description}</p>
                      ) : null
                      const shouldUseTextarea = field.key.includes("observacao") || field.key.includes("permissao")
                      const spanClass = shouldUseTextarea || field.type === "boolean" ? "sm:col-span-2" : ""

                      if (field.type === "boolean") {
                        return (
                          <div
                            key={field.id}
                            className={cn(
                              "flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2",
                              spanClass,
                              "sm:col-span-2"
                            )}
                          >
                            <input
                              id={fieldId}
                              type="checkbox"
                              className="size-4 rounded border border-slate-300 text-[#00d6eb] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00d6eb]/40"
                              checked={Boolean(value)}
                              onChange={(event) => handleCustomFieldChange(field, event.target.checked)}
                            />
                            <div className="flex flex-col">
                              <label htmlFor={fieldId} className="text-sm font-medium text-neutral-800">
                                {field.label} {labelSuffix}
                              </label>
                              {helpText}
                            </div>
                          </div>
                        )
                      }

                      if (field.type === "select") {
                        return (
                          <Field key={field.id} className={spanClass}>
                            <FieldLabel className="flex items-center gap-1">
                              {field.label} {labelSuffix}
                            </FieldLabel>
                            <Select
                              value={typeof value === "string" ? value : ""}
                              onValueChange={(selected) => handleCustomFieldChange(field, selected)}
                            >
                              <SelectTrigger className={selectTriggerClass}>
                                <SelectValue placeholder="Selecione" />
                              </SelectTrigger>
                              <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                                {field.options.map((option) => (
                                  <SelectItem key={option.value} value={option.value} className={selectItemClass}>
                                    {option.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                            {helpText}
                          </Field>
                        )
                      }

                      if (field.type === "number") {
                        return (
                          <Field key={field.id} className={spanClass}>
                            <FieldLabel className="flex items-center gap-1">
                              {field.label} {labelSuffix}
                            </FieldLabel>
                            <Input
                              id={fieldId}
                              type="number"
                              inputMode="decimal"
                              value={typeof value === "number" || typeof value === "string" ? String(value) : ""}
                              onChange={(event) => handleCustomFieldChange(field, event.target.value)}
                            />
                            {helpText}
                          </Field>
                        )
                      }

                      if (field.type === "date") {
                        const parsedDate =
                          typeof value === "string" && value ? parseISO(value) : undefined
                        const isValidDate = Boolean(parsedDate && !Number.isNaN(parsedDate.getTime()))
                        return (
                          <Field key={field.id} className={spanClass}>
                            <FieldLabel className="flex items-center gap-1">
                              {field.label} {labelSuffix}
                            </FieldLabel>
                            <Popover
                              open={openCalendarField === field.id}
                              onOpenChange={(open) => setOpenCalendarField(open ? field.id : null)}
                            >
                              <PopoverTrigger asChild>
                                <Button
                                  type="button"
                                  variant="outline"
                                  className={cn(
                                    "w-full justify-between gap-2 text-left font-normal",
                                    !isValidDate && "text-muted-foreground"
                                  )}
                                >
                                  <span>
                                    {isValidDate
                                      ? format(parsedDate as Date, "dd/MM/yyyy", { locale: ptBR })
                                      : "Selecionar data"}
                                  </span>
                                  <CalendarIcon className="size-4 text-muted-foreground" aria-hidden="true" />
                                </Button>
                              </PopoverTrigger>
                              <PopoverContent className="w-auto p-0" align="start">
                                <Calendar
                                  mode="single"
                                  selected={isValidDate ? (parsedDate as Date) : undefined}
                                  onSelect={(selected) => {
                                    handleCustomFieldChange(
                                      field,
                                      selected ? format(selected, "yyyy-MM-dd") : ""
                                    )
                                    setOpenCalendarField(null)
                                  }}
                                  initialFocus
                                  captionLayout="dropdown"
                                  startMonth={new Date(1900, 0)}
                                  endMonth={new Date(new Date().getFullYear() + 5, 11)}
                                  locale={ptBR}
                                  timeZone={calendarTimeZone}
                                />
                              </PopoverContent>
                            </Popover>
                            {helpText}
                          </Field>
                        )
                      }

                      if (shouldUseTextarea) {
                        return (
                          <Field key={field.id} className={cn("flex-col", spanClass, "sm:col-span-2")}>
                            <FieldLabel className="flex items-center gap-1">
                              {field.label} {labelSuffix}
                            </FieldLabel>
                            <textarea
                              id={fieldId}
                              className="min-h-[90px] rounded-lg border border-slate-300 px-3 py-2 text-sm text-neutral-800 shadow-sm focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-900/10"
                              value={typeof value === "string" ? value : ""}
                              onChange={(event) => handleCustomFieldChange(field, event.target.value)}
                            />
                            {helpText}
                          </Field>
                        )
                      }

                      return (
                        <Field key={field.id} className={spanClass}>
                          <FieldLabel className="flex items-center gap-1">
                            {field.label} {labelSuffix}
                          </FieldLabel>
                          <Input
                            id={fieldId}
                            value={typeof value === "string" ? value : ""}
                            onChange={(event) => handleCustomFieldChange(field, event.target.value)}
                          />
                          {helpText}
                        </Field>
                      )
                    })}
                  </div>
                ) : null}
                </FieldGroup>

                <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                      <p className="flex items-center gap-2 text-sm font-semibold text-neutral-900">
                        <ListChecks className="size-4 text-neutral-700" />
                        Checklist (opcional)
                      </p>
                      <p className="mt-1 text-xs text-neutral-500">
                        Itens obrigatórios bloqueiam o encerramento do ticket até serem concluídos.
                      </p>
                    </div>

                    {(checklistTemplates ?? []).length > 0 ? (
                      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                        <Select value={checklistTemplateToApply} onValueChange={setChecklistTemplateToApply}>
                          <SelectTrigger className="h-9 w-full sm:w-64">
                            <SelectValue placeholder="Aplicar template..." />
                          </SelectTrigger>
                          <SelectContent className="rounded-xl">
                            {(checklistTemplates ?? []).map((tpl) => (
                              <SelectItem key={tpl.id} value={String(tpl.id)}>
                                {tpl.name}
                                {tpl.company ? ` — ${tpl.company.name}` : ""}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <Button
                          type="button"
                          variant="outline"
                          className="h-9"
                          onClick={handleApplyChecklistTemplate}
                          disabled={
                            !checklistTemplateToApply.trim() ||
                            appliedChecklistTemplateIds.includes(checklistTemplateToApply.trim())
                          }
                        >
                          Aplicar
                        </Button>
                      </div>
                    ) : null}
                  </div>

                  {appliedChecklistTemplates.length > 0 ? (
                    <div className="mt-3 flex flex-wrap gap-2">
                      {appliedChecklistTemplates.map((tpl) => (
                        <Badge key={tpl.id} variant="secondary" className="flex items-center gap-2 rounded-full">
                          <span className="truncate">{tpl.name}</span>
                          <button
                            type="button"
                            className="text-xs text-neutral-600 hover:text-neutral-900"
                            onClick={() =>
                              setAppliedChecklistTemplateIds((prev) => prev.filter((id) => id !== String(tpl.id)))
                            }
                          >
                            ×
                          </button>
                        </Badge>
                      ))}
                    </div>
                  ) : null}

                  {checklistTemplatePreviewItems.length > 0 || manualChecklist.length > 0 ? (
                    <div className="mt-4 space-y-2">
                      {checklistTemplatePreviewItems.map((item) => (
                        <div
                          key={item.key}
                          className="flex items-start justify-between gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2"
                        >
                          <div className="min-w-0">
                            <p className="truncate text-sm text-neutral-800" title={item.text}>
                              {item.text}
                            </p>
                            <div className="mt-1 flex flex-wrap items-center gap-2">
                              <Badge variant={item.required ? "secondary" : "outline"} className="rounded-full text-[11px]">
                                {item.required ? "Obrigatório" : "Opcional"}
                              </Badge>
                              <Badge variant="outline" className="rounded-full text-[11px]">
                                Template: {item.templateName}
                              </Badge>
                            </div>
                          </div>
                        </div>
                      ))}

                      {manualChecklist.map((item) => (
                        <div
                          key={item.id}
                          className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 sm:flex-row sm:items-center"
                        >
                          <Input
                            value={item.text}
                            onChange={(e) =>
                              setManualChecklist((prev) =>
                                prev.map((row) => (row.id === item.id ? { ...row, text: e.target.value } : row))
                              )
                            }
                            placeholder="Item do checklist..."
                            className="h-9 flex-1"
                          />
                          <label className="flex items-center gap-2 text-sm text-neutral-700">
                            <Checkbox
                              checked={item.required}
                              onCheckedChange={(checked) =>
                                setManualChecklist((prev) =>
                                  prev.map((row) =>
                                    row.id === item.id ? { ...row, required: Boolean(checked) } : row
                                  )
                                )
                              }
                            />
                            Obrigatório
                          </label>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-9 w-9 text-slate-500 hover:bg-red-50 hover:text-red-700"
                            onClick={() => setManualChecklist((prev) => prev.filter((row) => row.id !== item.id))}
                          >
                            <Trash2 className="size-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="mt-3 rounded-xl border border-dashed border-slate-200 p-4 text-sm text-neutral-600">
                      Adicione itens ou aplique um template para criar um checklist neste ticket.
                    </div>
                  )}

                  <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center">
                    <Input
                      value={checklistItemText}
                      onChange={(e) => setChecklistItemText(e.target.value)}
                      placeholder="Adicionar item do checklist..."
                      className="h-9 flex-1"
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          e.preventDefault()
                          handleAddChecklistItem()
                        }
                      }}
                    />
                    <label className="flex items-center gap-2 text-sm text-neutral-700">
                      <Checkbox
                        checked={checklistItemRequired}
                        onCheckedChange={(checked) => setChecklistItemRequired(Boolean(checked))}
                      />
                      Obrigatório
                    </label>
                    <Button type="button" onClick={handleAddChecklistItem} size="sm" className="ml-2 gap-2">
                      <Plus className="size-4" />
                      Adicionar
                    </Button>
                  </div>
                </div>
              </FieldSet>

              <div className="flex justify-end border-t border-slate-200 pt-5">
                <Button
                  type="submit"
                  disabled={loading}
                  className="inline-flex min-w-[140px] items-center justify-center gap-2 rounded-lg border border-black bg-black px-6 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>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}