"use client"

import { z } from "zod"
import { useEffect, useMemo, useState } from "react"
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 "@hookform/resolvers/zod"
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, priorityStyles } 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 { useDefaultQueues } from "@/hooks/use-default-queues"
import { cn } from "@/lib/utils"

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

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() : "?"
}

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 AUTO_COMPANY_VALUE = "__auto__"

const schema = z.object({
  subject: z.string().default(""),
  summary: z.string().optional(),
  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(),
  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 }: { triggerClassName?: string } = {}) {
  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,
      assigneeId: null,
      companyId: AUTO_COMPANY_VALUE,
      requesterId: "",
      categoryId: "",
      subcategoryId: "",
    },
    mode: "onTouched",
  })
  const { convexUserId, isStaff, role } = useAuth()
  const queuesEnabled = Boolean(isStaff && convexUserId)
  const queueArgs = queuesEnabled
    ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
    : "skip"

  useDefaultQueues(DEFAULT_TENANT_ID)
  const queuesRaw = useQuery(
    queuesEnabled ? api.queues.summary : "skip",
    queueArgs
  ) as TicketQueueSummary[] | undefined
  const queues = useMemo(() => queuesRaw ?? [], [queuesRaw])
  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 companiesRaw = useQuery(
    directoryQueryEnabled ? api.companies.list : "skip",
    directoryQueryEnabled
      ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
      : "skip"
  ) as Array<{ id: string; name: string; slug?: string | null }> | undefined
  const companies = useMemo(
    () =>
      (companiesRaw ?? []).map((company) => ({
        id: String(company.id),
        name: company.name,
        slug: company.slug ?? null,
      })),
    [companiesRaw]
  )

  const customersRaw = useQuery(
    directoryQueryEnabled ? api.users.listCustomers : "skip",
    directoryQueryEnabled
      ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
      : "skip"
  ) as CustomerOption[] | undefined
  const customers = useMemo(() => customersRaw ?? [], [customersRaw])
  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 channelValue = form.watch("channel")
  const queueValue = form.watch("queueName") ?? "NONE"
  const assigneeValue = form.watch("assigneeId") ?? null
  const assigneeSelectValue = assigneeValue ?? "NONE"
  const companyValue = form.watch("companyId") ?? AUTO_COMPANY_VALUE
  const requesterValue = form.watch("requesterId") ?? ""
  const categoryIdValue = form.watch("categoryId")
  const subcategoryIdValue = form.watch("subcategoryId")
  const isSubmitted = form.formState.isSubmitted
  const companyOptions = useMemo(() => {
    const map = new Map<string, { id: string; name: string; isAvulso?: boolean; keywords: string[] }>()
    companies.forEach((company) => {
      map.set(company.id, {
        id: company.id,
        name: company.name.trim().length > 0 ? company.name : "Empresa sem nome",
        isAvulso: false,
        keywords: company.slug ? [company.slug] : [],
      })
    })
    customers.forEach((customer) => {
      if (customer.companyId && !map.has(customer.companyId)) {
        map.set(customer.companyId, {
          id: customer.companyId,
          name: customer.companyName && customer.companyName.trim().length > 0 ? customer.companyName : "Empresa sem nome",
          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 === AUTO_COMPANY_VALUE) return customers
    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(() => {
    if (companyValue === AUTO_COMPANY_VALUE) return null
    const key = companyValue === NO_COMPANY_VALUE ? NO_COMPANY_VALUE : companyValue
    return companyOptionMap.get(key) ?? 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)
      form.setValue("companyId", AUTO_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", selected ? NO_COMPANY_VALUE : AUTO_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)
      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")
    }
  }

  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." })
      return
    }

    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">
      const id = await create({
        actorId: convexUserId as Id<"users">,
        tenantId: DEFAULT_TENANT_ID,
        subject: subjectTrimmed,
        summary: values.summary?.trim() || undefined,
        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">,
      })
      const summaryFallback = values.summary?.trim() ?? ""
      const bodyHtml = plainDescription.length > 0 ? sanitizedDescription : 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: "",
        summary: "",
        description: "",
        priority: "MEDIUM",
        channel: "MANUAL",
        queueName: null,
        assigneeId: convexUserId ?? null,
        categoryId: "",
        subcategoryId: "",
      })
      form.clearErrors()
      setAssigneeInitialized(false)
      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={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>
      </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 py-7 sm:px-8 md:px-10">
            <form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
              <div className="flex flex-col gap-4 border-b border-slate-200 pb-5 md:flex-row md:items-start md:justify-between">
                <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 className="flex justify-end md:min-w-[140px]">
                  <Button
                    type="submit"
                    disabled={loading}
                    className="inline-flex items-center gap-2 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>
              </div>
              <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 htmlFor="summary">Resumo</FieldLabel>
                      <textarea
                        id="summary"
                        className="min-h-[96px] w-full resize-none overflow-hidden rounded-lg border border-slate-300 bg-background p-3 text-sm shadow-sm focus-visible:border-[#00d6eb] focus-visible:outline-none"
                        maxLength={600}
                        {...form.register("summary")}
                        placeholder="Explique em poucas linhas o contexto do chamado."
                        onInput={(e) => {
                          const el = e.currentTarget
                          el.style.height = 'auto'
                          el.style.height = `${el.scrollHeight}px`
                        }}
                      />
                    </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 === AUTO_COMPANY_VALUE ? null : companyValue}
                        onValueChange={(nextValue) => {
                          const normalizedValue = nextValue ?? AUTO_COMPANY_VALUE
                          const nextCustomers =
                            normalizedValue === AUTO_COMPANY_VALUE
                              ? customers
                              : 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"
                        allowClear
                        clearLabel="Qualquer 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>
                      <RequesterPreview customer={selectedRequester} company={selectedCompanyOption} />
                      <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) =>
                          option ? (
                            <div className="flex 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>
                          ) : (
                            <span className="text-muted-foreground">Selecionar solicitante</span>
                          )
                        }
                        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}
                        categoryLabel="Categoria primária *"
                        subcategoryLabel="Categoria secundária *"
                        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>
                      <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>
                      <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>
                </FieldGroup>
              </FieldSet>
            </form>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
