"use client"

import { TramiteForm } from "@/components/tramite-form"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { AppLayout } from "@/components/app-layout"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Loader2 } from "lucide-react"

export default function NuevoTramitePage() {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [modalOpen, setModalOpen] = useState(false)
  const [nombreAutor, setNombreAutor] = useState("")
  const [formData, setFormData] = useState<any>(null)

  const handleFormSubmit = (data: any) => {
    setFormData(data)
    setModalOpen(true)
  }

  const handleConfirmarCreacion = async () => {
    if (isSubmitting || !formData || !nombreAutor.trim()) return
    setIsSubmitting(true)

    try {
      const token = localStorage.getItem("token")
      if (!token) {
        router.push("/login")
        return
      }

      console.log('[DEBUG] handleConfirmarCreacion called', { formasJuridicas: formData.formasJuridicasMultiples })

      const formasJuridicas = formData.formasJuridicasMultiples || [formData.formaJuridicaId]
      const organismos = formData.organismosMultiples || [formData.organismoId]

      // 1. Create Tramite (only ONE)
      const payload = {
        nombre: formData.nombre,
        forma_juridica_id: formasJuridicas[0], // Use first selected for backward compatibility
        formas_juridicas: formasJuridicas, // Send all selected formas juridicas
        organismos: organismos, // Send array of organism IDs
        jurisdiccion_id: formData.jurisdiccionId,
        tipo_realizacion: formData.tipoRealizacion, // virtual/presencial/mixto
        link_guia_oficial: formData.linkGuia,
        estado: formData.estado,
        documentacion: formData.documentacion,
        requiere_certificaciones_externas: formData.requiereCertificaciones,
        certificaciones_detalle: formData.certificacionesDetalle,
        paso_a_paso: formData.pasoAPaso,
        comentarios_internos: formData.comentariosInternos,
        costos: formData.costos,
        // Mapping frontend fields to backend expected fields if needed
        donde_se_realiza: formData.tipoRealizacion,
        autor: nombreAutor, // Add author field
      }

      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(payload),
      })

      if (!response.ok) {
        const errData = await response.json()
        console.error("Error creating tramite", errData)
        throw new Error("Error al crear trámite")
      }

      const { data: tramiteCreated } = await response.json()

      // 2. Upload Attachments
      if (formData.adjuntos && formData.adjuntos.length > 0) {
        for (const adj of formData.adjuntos) {
          if (!adj.archivo) continue

          const adjFormData = new FormData()
          adjFormData.append("file", adj.archivo)
          adjFormData.append("titulo", adj.titulo)
          adjFormData.append("tipo", adj.tipo)

          const adjResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${tramiteCreated.id}/adjuntos`, {
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Accept: "application/json",
            },
            body: adjFormData,
          })

          if (!adjResponse.ok) {
            const adjErr = await adjResponse.json()
            console.error(`Error uploading attachment ${adj.titulo}:`, adjErr)
            // Don't throw, just log so other attachments can proceed
          }
        }
      }

      setModalOpen(false)
      alert("Trámite creado exitosamente")
      router.push("/")

    } catch (error) {
      console.error(error)
      alert("Ocurrió un error al guardar los trámites. Revise la consola para más detalles.")
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleCancel = () => {
    console.log("[v0] Form cancelled")
    router.push("/")
  }

  return (
    <AppLayout userRole="edicion">
      <TramiteForm onSubmit={handleFormSubmit} onCancel={handleCancel} isSubmitting={isSubmitting} />

      {/* Modal de Confirmación de Creación */}
      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar Creación</DialogTitle>
            <DialogDescription>
              Por favor, ingrese su nombre para registrar quién creó este trámite.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="autor">
                Nombre del responsable <span className="text-destructive">*</span>
              </Label>
              <Input
                id="autor"
                placeholder="Ingrese su nombre completo"
                value={nombreAutor}
                onChange={(e) => setNombreAutor(e.target.value)}
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={isSubmitting}>
              Cancelar
            </Button>
            <Button onClick={handleConfirmarCreacion} disabled={!nombreAutor.trim() || isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Creando...
                </>
              ) : (
                "Crear Trámite"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AppLayout>
  )
}