"use client"

import { useEffect, useState, use } from "react"
import { useRouter } from "next/navigation"
import { TramiteForm } from "@/components/tramite-form"
import { AppLayout } from "@/components/app-layout"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertCircle, Loader2 } from "lucide-react"

export default function DuplicarTramitePage({ params }: { params: Promise<{ id: string }> }) {
  const router = useRouter()
  const { id } = use(params)
  const [isLoading, setIsLoading] = useState(true)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [tramiteData, setTramiteData] = useState<any>(null)

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

        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${id}`, {
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
          },
        })

        if (!response.ok) throw new Error("Error al cargar el trámite original")

        const { data } = await response.json()

        // Mapear datos para el formulario
        const mappedTramite = {
          nombre: `${data.nombre} (Copia)`,
          formaJuridicaId: data.formas_juridicas && data.formas_juridicas.length > 0
            ? data.formas_juridicas[0].id
            : data.forma_juridica_id,
          formasJuridicasMultiples: data.formas_juridicas && data.formas_juridicas.length > 0
            ? data.formas_juridicas.map((fj: any) => fj.id)
            : (data.forma_juridica_id ? [data.forma_juridica_id] : []),
          tipoJurisdiccion: data.jurisdiccion?.tipo || "nacion",
          jurisdiccionId: data.jurisdiccion_id,
          organismosMultiples: data.organismos.map((o: any) => o.id),
          organismoId: data.organismos.length > 0 ? data.organismos[0].id : "",
          tipoRealizacion: data.tipo_realizacion || "virtual",
          linkGuia: data.link_guia_oficial || "",
          estado: "En proceso", // Nuevo trámite siempre en proceso
          documentacion: data.documentacion || "",
          requiereCertificaciones: data.requiere_certificaciones_externas,
          certificacionesDetalle: data.certificaciones_detalle || "",
          pasoAPaso: data.paso_a_paso || "",
          costos: data.costos || [],
          comentariosInternos: data.comentarios_internos || "",
          adjuntos: (data.adjuntos || []).map((adj: any) => ({
            id: adj.id.toString(),
            tipo: ["modelo", "normativa", "bibliografia", "jurisprudencia", "interno"].includes(adj.tipo) ? adj.tipo : "interno",
            titulo: adj.titulo || "Sin título",
            archivo: undefined, // No tenemos el archivo File real, solo la referencia
          })),
        }

        setTramiteData(mappedTramite)
      } catch (error) {
        console.error(error)
        alert("No se pudo cargar la información del trámite original")
      } finally {
        setIsLoading(false)
      }
    }

    fetchTramite()
  }, [id, router])

  const handleFormSubmit = async (datosFormulario: any) => {
    setIsSubmitting(true)
    try {
      const token = localStorage.getItem("token")
      if (!token) throw new Error("No autenticado")

      // Primero, clonar el trámite usando el endpoint del backend
      // Esto copiará automáticamente los adjuntos existentes
      const cloneResponse = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${id}/clonar`, {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
      })

      if (!cloneResponse.ok) {
        throw new Error("Error al clonar el trámite")
      }

      const { data: tramiteClonado } = await cloneResponse.json()

      // Ahora actualizar el trámite clonado con los datos del formulario
      const formasJuridicas = datosFormulario.formasJuridicasMultiples || [datosFormulario.formaJuridicaId]
      const organismos = datosFormulario.organismosMultiples || [datosFormulario.organismoId]

      const payload = {
        nombre: datosFormulario.nombre,
        forma_juridica_id: formasJuridicas[0],
        formas_juridicas: formasJuridicas,
        organismos: organismos,
        jurisdiccion_id: datosFormulario.jurisdiccionId,
        link_guia_oficial: datosFormulario.linkGuia,
        requiere_certificaciones_externas: datosFormulario.requiereCertificaciones,
        certificaciones_detalle: datosFormulario.certificacionesDetalle,
        paso_a_paso: datosFormulario.pasoAPaso,
        comentarios_internos: datosFormulario.comentariosInternos,
        donde_se_realiza: datosFormulario.tipoRealizacion,
        costos: datosFormulario.costos,
        estado: datosFormulario.estado,
        documentacion: datosFormulario.documentacion,
        tipo_cambio: "edición menor",
        autor: "Usuario Actual",
      }

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

      if (!updateResponse.ok) {
        throw new Error("Error al actualizar el trámite duplicado")
      }

      // Subir adjuntos NUEVOS (que el usuario haya agregado durante la duplicación)
      const adjuntosNuevos = datosFormulario.adjuntos.filter((adj: any) => adj.archivo)
      if (adjuntosNuevos.length > 0) {
        for (const adj of adjuntosNuevos) {
          const formData = new FormData()
          formData.append("file", adj.archivo)
          formData.append("titulo", adj.titulo)
          formData.append("tipo", adj.tipo)

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

          if (!adjResponse.ok) {
            console.error(`Error uploading attachment ${adj.titulo}`)
          }
        }
      }

      router.push(`/tramite/${tramiteClonado.id}`)
    } catch (error: any) {
      console.error(error)
      alert(error.message || "No se pudo duplicar el trámite")
    } finally {
      setIsSubmitting(false)
    }
  }

  const handleCancelar = () => {
    router.push(`/tramite/${id}`)
  }

  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

  return (
    <AppLayout>
      <div className="space-y-6">
        <Card className="border-blue-500/20 bg-blue-500/5">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-blue-500">
              <AlertCircle className="h-5 w-5" />
              Duplicando trámite
            </CardTitle>
            <CardDescription>
              Estás creando un nuevo trámite basado en uno existente. Se ha copiado toda la información incluyendo los archivos adjuntos, excepto el historial de versiones.
            </CardDescription>
          </CardHeader>
        </Card>

        {tramiteData && (
          <TramiteForm
            onSubmit={handleFormSubmit}
            onCancel={handleCancelar}
            initialData={tramiteData}
            isSubmitting={isSubmitting}
          // No pasamos isEditMode porque queremos crear uno nuevo, pero con datos precargados
          />
        )}
      </div>
    </AppLayout>
  )
}