"use client"

import { useMemo, useState } from "react"
import { useRouter } from "next/navigation"
import { useMutation } from "convex/react"
import { toast } from "sonner"
import { api } from "@/convex/_generated/api"
import type { Id } from "@/convex/_generated/dataModel"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import type { TicketPriority } from "@/lib/schemas/ticket"
import { sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
import { useAuth } from "@/lib/auth-client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { CategorySelectFields } from "@/components/tickets/category-select"

const priorityLabel: Record<TicketPriority, string> = {
  LOW: "Baixa",
  MEDIUM: "Média",
  HIGH: "Alta",
  URGENT: "Urgente",
}

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>`
}

export function PortalTicketForm() {
  const router = useRouter()
  const { convexUserId, session } = useAuth()
  const createTicket = useMutation(api.tickets.create)
  const addComment = useMutation(api.tickets.addComment)

  const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID

  const [subject, setSubject] = useState("")
  const [summary, setSummary] = useState("")
  const [description, setDescription] = useState("")
  const [priority, setPriority] = useState<TicketPriority>("MEDIUM")
  const [categoryId, setCategoryId] = useState<string | null>(null)
  const [subcategoryId, setSubcategoryId] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const isFormValid = useMemo(() => {
    return Boolean(subject.trim() && description.trim() && categoryId && subcategoryId)
  }, [subject, description, categoryId, subcategoryId])

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault()
    if (!convexUserId || !isFormValid || isSubmitting) return

    const trimmedSubject = subject.trim()
    const trimmedSummary = summary.trim()
    const trimmedDescription = description.trim()

    setIsSubmitting(true)
    toast.loading("Abrindo chamado...", { id: "portal-new-ticket" })
    try {
      const id = await createTicket({
        actorId: convexUserId as Id<"users">,
        tenantId,
        subject: trimmedSubject,
        summary: trimmedSummary || undefined,
        priority,
        channel: "MANUAL",
        queueId: undefined,
        requesterId: convexUserId as Id<"users">,
        categoryId: categoryId as Id<"ticketCategories">,
        subcategoryId: subcategoryId as Id<"ticketSubcategories">,
      })

      if (trimmedDescription.length > 0) {
        const htmlBody = sanitizeEditorHtml(toHtml(trimmedDescription))
        await addComment({
          ticketId: id as Id<"tickets">,
          authorId: convexUserId as Id<"users">,
          visibility: "PUBLIC",
          body: htmlBody,
          attachments: [],
        })
      }

      toast.success("Chamado criado com sucesso!", { id: "portal-new-ticket" })
      router.replace(`/portal/tickets/${id}`)
    } catch (error) {
      console.error(error)
      toast.error("Não foi possível abrir o chamado.", { id: "portal-new-ticket" })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
      <CardHeader className="px-5 py-5">
        <CardTitle className="text-xl font-semibold text-neutral-900">Abrir novo chamado</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6 px-5 pb-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-3">
            <div className="space-y-1">
              <label htmlFor="subject" className="flex items-center gap-1 text-sm font-medium text-neutral-800">
                Assunto <span className="text-red-500">*</span>
              </label>
              <Input
                id="subject"
                value={subject}
                onChange={(event) => setSubject(event.target.value)}
                placeholder="Ex.: Problema de acesso ao sistema"
                required
              />
            </div>
            <div className="space-y-1">
              <label htmlFor="summary" className="text-sm font-medium text-neutral-800">
                Resumo (opcional)
              </label>
              <Input
                id="summary"
                value={summary}
                onChange={(event) => setSummary(event.target.value)}
                placeholder="Descreva rapidamente o que está acontecendo"
              />
            </div>
            <div className="space-y-1">
              <label htmlFor="description" className="flex items-center gap-1 text-sm font-medium text-neutral-800">
                Detalhes <span className="text-red-500">*</span>
              </label>
              <Textarea
                id="description"
                value={description}
                onChange={(event) => setDescription(event.target.value)}
                placeholder="Compartilhe passos para reproduzir, mensagens de erro ou informações adicionais."
                required
                className="min-h-[140px] resize-y rounded-xl border border-slate-200 px-4 py-3 text-sm text-neutral-800 shadow-sm focus-visible:border-neutral-900 focus-visible:ring-neutral-900/20"
              />
            </div>
          </div>

          <div className="space-y-4">
            <div className="space-y-1">
              <span className="text-sm font-medium text-neutral-800">Prioridade</span>
              <Select value={priority} onValueChange={(value) => setPriority(value as TicketPriority)}>
                <SelectTrigger className="h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-left text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-neutral-900">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
                  {(Object.keys(priorityLabel) as TicketPriority[]).map((option) => (
                    <SelectItem key={option} value={option} className="text-sm">
                      {priorityLabel[option]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <CategorySelectFields
              tenantId={tenantId}
              categoryId={categoryId}
              subcategoryId={subcategoryId}
              onCategoryChange={setCategoryId}
              onSubcategoryChange={setSubcategoryId}
              layout="stacked"
              categoryLabel="Categoria *"
              subcategoryLabel="Subcategoria *"
              secondaryEmptyLabel="Selecione uma categoria"
            />
          </div>

          <div className="flex justify-end gap-3">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/portal/tickets")}
            >
              Cancelar
            </Button>
            <Button
              type="submit"
              disabled={!isFormValid || isSubmitting}
              className="rounded-full bg-neutral-900 px-6 text-sm font-semibold text-white hover:bg-neutral-900/90"
            >
              Registrar chamado
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
