"use client"

import { z } from "zod"
import { useState } from "react"
import { useMutation, useQuery } from "convex/react"
// @ts-ignore
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"

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

export function NewTicketDialog() {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { subject: "", summary: "", priority: "MEDIUM", channel: "MANUAL", queueName: null },
    mode: "onTouched",
  })
  const { userId } = useAuth()
  const queues = useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID }) ?? []
  const create = useMutation(api.tickets.create)
  const addComment = useMutation(api.tickets.addComment)
  const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])

  async function submit(values: z.infer<typeof schema>) {
    if (!userId) return
    setLoading(true)
    toast.loading("Criando ticket…", { id: "new-ticket" })
    try {
      const sel = queues.find((q: any) => q.name === values.queueName)
      const id = await create({
        tenantId: DEFAULT_TENANT_ID,
        subject: values.subject,
        summary: values.summary,
        priority: values.priority,
        channel: values.channel,
        queueId: sel?.id,
        requesterId: userId as any,
      })
      if (attachments.length > 0 || (values.summary && values.summary.trim().length > 0)) {
        await addComment({ ticketId: id as any, authorId: userId as any, visibility: "PUBLIC", body: values.summary || "", attachments })
      }
      toast.success("Ticket criado!", { id: "new-ticket" })
      setOpen(false)
      form.reset()
      setAttachments([])
      // Navegar para o ticket recém-criado
      window.location.href = `/tickets/${id}`
    } catch (err) {
      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">Novo ticket</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Novo ticket</DialogTitle>
          <DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
        </DialogHeader>
        <form className="space-y-4" onSubmit={form.handleSubmit(submit)}>
          <FieldSet>
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="subject">Assunto</FieldLabel>
                <Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
                <FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
              </Field>
              <Field>
                <FieldLabel htmlFor="summary">Resumo</FieldLabel>
                <textarea id="summary" className="w-full rounded-md border bg-background p-2 text-sm" rows={3} {...form.register("summary")} />
              </Field>
              <Field>
                <FieldLabel>Anexos</FieldLabel>
                <Dropzone onUploaded={(files) => setAttachments((prev) => [...prev, ...files])} />
                <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
              </Field>
              <div className="grid gap-3 sm:grid-cols-3">
                <Field>
                  <FieldLabel>Prioridade</FieldLabel>
                  <Select value={form.watch("priority")} onValueChange={(v) => form.setValue("priority", v as any)}>
                    <SelectTrigger><SelectValue placeholder="Prioridade" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="LOW">Baixa</SelectItem>
                      <SelectItem value="MEDIUM">Média</SelectItem>
                      <SelectItem value="HIGH">Alta</SelectItem>
                      <SelectItem value="URGENT">Urgente</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
                <Field>
                  <FieldLabel>Canal</FieldLabel>
                  <Select value={form.watch("channel")} onValueChange={(v) => form.setValue("channel", v as any)}>
                    <SelectTrigger><SelectValue placeholder="Canal" /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="EMAIL">E-mail</SelectItem>
                      <SelectItem value="WHATSAPP">WhatsApp</SelectItem>
                      <SelectItem value="CHAT">Chat</SelectItem>
                      <SelectItem value="PHONE">Telefone</SelectItem>
                      <SelectItem value="API">API</SelectItem>
                      <SelectItem value="MANUAL">Manual</SelectItem>
                    </SelectContent>
                  </Select>
                </Field>
              <Field>
                <FieldLabel>Fila</FieldLabel>
                {(() => {
                  const NONE = "NONE";
                  const current = form.watch("queueName") ?? NONE;
                  return (
                    <Select value={current} onValueChange={(v) => form.setValue("queueName", v === NONE ? null : v)}>
                      <SelectTrigger><SelectValue placeholder="Sem fila" /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value={NONE}>Sem fila</SelectItem>
                        {queues.map((q: any) => (
                          <SelectItem key={q.id} value={q.name}>{q.name}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )
                })()}
              </Field>
              </div>
            </FieldGroup>
          </FieldSet>
          <div className="flex justify-end">
            <Button type="submit" disabled={loading}>{loading ? (<><Spinner className="me-2" /> Criando…</>) : "Criar"}</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}