"use client"

import { useMemo, useState } from "react"
import { useRouter } from "next/navigation"
import { useMutation, useQuery } from "convex/react"
import { toast } from "sonner"
import type { Id } from "@/convex/_generated/dataModel"
import type { TicketPriority, TicketQueueSummary } from "@/lib/schemas/ticket"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { useAuth } from "@/lib/auth-client"
// @ts-expect-error Convex runtime API lacks TypeScript declarations
import { api } from "@/convex/_generated/api"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RichTextEditor } from "@/components/ui/rich-text-editor"
import { Spinner } from "@/components/ui/spinner"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import {
  PriorityIcon,
  priorityBadgeClass,
  priorityItemClass,
  priorityStyles,
  priorityTriggerClass,
} from "@/components/tickets/priority-select"
import { CategorySelectFields } from "@/components/tickets/category-select"

export default function NewTicketPage() {
  const router = useRouter()
  const { convexUserId } = useAuth()
  const queueArgs = convexUserId
    ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
    : "skip"
  const queuesRaw = useQuery(
    convexUserId ? 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 [subject, setSubject] = useState("")
  const [summary, setSummary] = useState("")
  const [priority, setPriority] = useState<TicketPriority>("MEDIUM")
  const [channel, setChannel] = useState("MANUAL")
  const [queueName, setQueueName] = useState<string | null>(null)
  const [description, setDescription] = useState("")
  const [loading, setLoading] = useState(false)
  const [subjectError, setSubjectError] = useState<string | null>(null)
  const [categoryId, setCategoryId] = useState<string | null>(null)
  const [subcategoryId, setSubcategoryId] = useState<string | null>(null)
  const [categoryError, setCategoryError] = useState<string | null>(null)
  const [subcategoryError, setSubcategoryError] = useState<string | null>(null)

  const queueOptions = useMemo(() => queues.map((q) => q.name), [queues])

  async function submit(event: React.FormEvent) {
    event.preventDefault()
    if (!convexUserId || loading) return

    const trimmedSubject = subject.trim()
    if (trimmedSubject.length < 3) {
      setSubjectError("Informe um assunto com pelo menos 3 caracteres.")
      return
    }
    setSubjectError(null)

    if (!categoryId) {
      setCategoryError("Selecione uma categoria.")
      return
    }
    if (!subcategoryId) {
      setSubcategoryError("Selecione uma categoria secundária.")
      return
    }

    setLoading(true)
    toast.loading("Criando ticket...", { id: "create-ticket" })
    try {
      const selQueue = queues.find((q) => q.name === queueName)
      const queueId = selQueue ? (selQueue.id as Id<"queues">) : undefined
      const id = await create({
        actorId: convexUserId as Id<"users">,
        tenantId: DEFAULT_TENANT_ID,
        subject: trimmedSubject,
        summary: summary.trim() || undefined,
        priority,
        channel,
        queueId,
        requesterId: convexUserId as Id<"users">,
        categoryId: categoryId as Id<"ticketCategories">,
        subcategoryId: subcategoryId as Id<"ticketSubcategories">,
      })
      const plainDescription = description.replace(/<[^>]*>/g, "").trim()
      if (plainDescription.length > 0) {
        await addComment({
          ticketId: id as Id<"tickets">,
          authorId: convexUserId as Id<"users">,
          visibility: "PUBLIC",
          body: description,
          attachments: [],
        })
      }
      toast.success("Ticket criado!", { id: "create-ticket" })
      router.replace(`/tickets/${id}`)
    } catch (error) {
      console.error(error)
      toast.error("Não foi possível criar o ticket.", { id: "create-ticket" })
    } finally {
      setLoading(false)
    }
  }

  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"

  return (
    <div className="mx-auto max-w-3xl px-6 py-8">
      <Card className="rounded-2xl border border-slate-200 shadow-sm">
        <CardHeader className="space-y-2">
          <CardTitle className="text-2xl font-semibold text-neutral-900">Novo ticket</CardTitle>
          <CardDescription className="text-sm text-neutral-600">Preencha as informações básicas para abrir um chamado.</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={submit} className="space-y-6">
            <div className="space-y-2">
              <label className="text-sm font-medium text-neutral-700" htmlFor="subject">
                Assunto
              </label>
              <Input
                id="subject"
                value={subject}
                onChange={(event) => {
                  setSubject(event.target.value)
                  if (subjectError) setSubjectError(null)
                }}
                placeholder="Ex.: Erro 500 no portal"
                aria-invalid={subjectError ? "true" : undefined}
              />
              {subjectError ? <p className="text-xs font-medium text-red-500">{subjectError}</p> : null}
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium text-neutral-700" htmlFor="summary">
                Resumo
              </label>
              <textarea
                id="summary"
                className="min-h-[96px] w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-neutral-800 shadow-sm outline-none transition-colors focus-visible:border-[#00d6eb] focus-visible:ring-[3px] focus-visible:ring-[#00e8ff]/20"
                value={summary}
                onChange={(event) => setSummary(event.target.value)}
              />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium text-neutral-700">Descrição</label>
              <RichTextEditor value={description} onChange={setDescription} placeholder="Detalhe o problema, passos para reproduzir, links, etc." />
            </div>
            <div className="space-y-2">
              <CategorySelectFields
                tenantId={DEFAULT_TENANT_ID}
                categoryId={categoryId}
                subcategoryId={subcategoryId}
                onCategoryChange={(value) => {
                  setCategoryId(value)
                  setCategoryError(null)
                }}
                onSubcategoryChange={(value) => {
                  setSubcategoryId(value)
                  setSubcategoryError(null)
                }}
              />
              {categoryError || subcategoryError ? (
                <div className="text-xs font-medium text-red-500">
                  {categoryError ? <div>{categoryError}</div> : null}
                  {subcategoryError ? <div>{subcategoryError}</div> : null}
                </div>
              ) : null}
            </div>
            <div className="grid gap-4 sm:grid-cols-3">
              <div className="space-y-2">
                <span className="text-sm font-medium text-neutral-700">Prioridade</span>
                <Select value={priority} onValueChange={(value) => setPriority(value as TicketPriority)}>
                  <SelectTrigger className={cn(priorityTriggerClass, "w-full justify-between") }>
                    <SelectValue>
                      <Badge className={cn(priorityBadgeClass, priorityStyles[priority]?.badgeClass)}>
                        <PriorityIcon value={priority} />
                        {priorityStyles[priority]?.label ?? priority}
                      </Badge>
                    </SelectValue>
                  </SelectTrigger>
                  <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                    {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
                      <SelectItem key={option} value={option} className={priorityItemClass}>
                        <span className="inline-flex items-center gap-2">
                          <PriorityIcon value={option} />
                          {priorityStyles[option].label}
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <span className="text-sm font-medium text-neutral-700">Canal</span>
                <Select value={channel} onValueChange={setChannel}>
                  <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>
              </div>
              <div className="space-y-2">
                <span className="text-sm font-medium text-neutral-700">Fila</span>
                <Select value={queueName ?? "NONE"} onValueChange={(value) => setQueueName(value === "NONE" ? null : value)}>
                  <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>
                    {queueOptions.map((name) => (
                      <SelectItem key={name} value={name} className={selectItemClass}>
                        {name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="flex justify-end">
              <Button
                type="submit"
                className="min-w-[120px] 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={loading}
              >
                {loading ? (
                  <>
                    <Spinner className="me-2" />
                    Criando...
                  </>
                ) : (
                  "Criar"
                )}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}