"use client"

import { useState, useEffect, use } from "react"
import { useRouter } from "next/navigation"
import { TramiteForm } from "@/components/tramite-form"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Loader2 } from "lucide-react"

export default function EditarTramitePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const router = useRouter()
  const [modalVersionado, setModalVersionado] = useState(false)
  const [datosFormulario, setDatosFormulario] = useState<any>(null)
  const [tipoVersion, setTipoVersion] = useState<"mayor" | "menor">("menor")
  const [nombreAutor, setNombreAutor] = useState("")
  const [tramite, setTramite] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [isSaving, setIsSaving] = useState(false)

  useEffect(() => {
    const fetchTramite = async () => {
      try {
        const token = localStorage.getItem("token")
        if (!token) throw new Error("No autenticado")

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

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

        const { data } = await response.json()

        // Map backend data to form interface
        const mappedTramite = {
          nombre: data.nombre,
          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", // Asumiendo que el backend devuelve el tipo
          jurisdiccionId: data.jurisdiccion_id,
          organismosMultiples: data.organismos.map((o: any) => o.id),
          // Fallback for single select if needed, though we use multiples now
          organismoId: data.organismos.length > 0 ? data.organismos[0].id : "",
          tipoRealizacion: data.tipo_realizacion || "virtual", // Ajustar según backend
          linkGuia: data.link_guia_oficial || "",
          estado: data.estado,
          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
          })),
        }

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

    fetchTramite()
  }, [id])

  const handleFormSubmit = (data: any) => {
    setDatosFormulario(data)
    setModalVersionado(true)
  }

  const handleGuardarConVersion = async () => {
    if (!datosFormulario || !nombreAutor.trim()) {
      alert("Por favor, complete todos los campos requeridos.")
      return
    }

    try {
      setIsSaving(true)
      const token = localStorage.getItem("token")
      if (!token) throw new Error("No autenticado")

      // 1. Handle Attachments Sync
      // A. Identify deleted attachments
      const currentAdjuntoIds = datosFormulario.adjuntos
        .filter((a: any) => !a.archivo) // Existing ones don't have 'archivo'
        .map((a: any) => a.id)

      const originalAdjuntoIds = tramite.adjuntos.map((a: any) => a.id)
      const deletedAdjuntoIds = originalAdjuntoIds.filter((id: string) => !currentAdjuntoIds.includes(id))

      // Delete removed attachments
      for (const adjId of deletedAdjuntoIds) {
        await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${id}/adjuntos/${adjId}`, {
          method: "DELETE",
          headers: { Authorization: `Bearer ${token}` },
        })
      }

      // B. Upload new attachments
      const newAttachments = datosFormulario.adjuntos.filter((a: any) => a.archivo)
      for (const adj of newAttachments) {
        const formData = new FormData()
        formData.append("file", adj.archivo)
        formData.append("titulo", adj.titulo)
        formData.append("tipo", adj.tipo)

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

      // C. Update existing attachments (if metadata changed)
      const existingAttachments = datosFormulario.adjuntos.filter((a: any) => !a.archivo)
      for (const adj of existingAttachments) {
        const original = tramite.adjuntos.find((a: any) => a.id === adj.id)
        if (original && (original.titulo !== adj.titulo || original.tipo !== adj.tipo)) {
          await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${id}/adjuntos/${adj.id}`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify({ titulo: adj.titulo, tipo: adj.tipo }),
          })
        }
      }

      // 2. Update Tramite Data
      const payload = {
        ...datosFormulario,
        organismos: datosFormulario.organismosMultiples,
        formas_juridicas:
          datosFormulario.formasJuridicasMultiples ||
          (datosFormulario.formaJuridicaId ? [datosFormulario.formaJuridicaId] : []),
        forma_juridica_id: datosFormulario.formaJuridicaId,
        jurisdiccion_id: datosFormulario.jurisdiccionId,
        link_guia_oficial: datosFormulario.linkGuia,
        fecha_realizacion: datosFormulario.fechaRealizacion,
        requiere_certificaciones_externas: datosFormulario.requiereCertificaciones,
        certificaciones_detalle: datosFormulario.certificacionesDetalle,
        paso_a_paso: datosFormulario.pasoAPaso,
        comentarios_internos: datosFormulario.comentariosInternos,
        donde_se_realiza: datosFormulario.tipoRealizacion,
        tipo_cambio: tipoVersion === "mayor" ? "renovación mayor" : "edición menor",
        autor: nombreAutor,
      }

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

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.message || "Error al actualizar el trámite")
      }

      setModalVersionado(false)
      router.push(`/tramite/${id}`) // Changed from window.location.reload()
    } catch (err) {
      console.error(err)
      alert("Error al guardar los cambios")
    } finally {
      setIsSaving(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>
    )
  }

  if (error || !tramite) {
    return (
      <div className="flex h-screen items-center justify-center text-destructive">
        {error || "No se encontró el trámite"}
      </div>
    )
  }

  return (
    <AppLayout>
      <TramiteForm onSubmit={handleFormSubmit} onCancel={handleCancelar} initialData={tramite} isEditMode={true} />

      {/* Modal de Versionado */}
      <Dialog open={modalVersionado} onOpenChange={setModalVersionado}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Información de la versión</DialogTitle>
            <DialogDescription>Complete la información sobre esta actualización del trámite</DialogDescription>
          </DialogHeader>

          <div className="space-y-6 py-4">
            {/* Tipo de versión */}
            <div className="space-y-3">
              <Label>¿Es una nueva versión mayor?</Label>
              <RadioGroup value={tipoVersion} onValueChange={(value) => setTipoVersion(value as "mayor" | "menor")}>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="menor" id="menor" />
                  <Label htmlFor="menor" className="font-normal cursor-pointer">
                    No - Versión menor (ej: 1.0 → 1.1)
                  </Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="mayor" id="mayor" />
                  <Label htmlFor="mayor" className="font-normal cursor-pointer">
                    Sí - Versión mayor (ej: 1.0 → 2.0)
                  </Label>
                </div>
              </RadioGroup>
              <p className="text-xs text-muted-foreground">
                {tipoVersion === "mayor"
                  ? "Use versión mayor para cambios significativos en el trámite"
                  : "Use versión menor para correcciones o actualizaciones pequeñas"}
              </p>
            </div>

            {/* Nombre del autor */}
            <div className="space-y-2">
              <Label htmlFor="autor">
                Nombre de quien modifica <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={() => setModalVersionado(false)} disabled={isSaving}>
              Cancelar
            </Button>
            <Button onClick={handleGuardarConVersion} disabled={!nombreAutor.trim() || isSaving}>
              {isSaving ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Guardando...
                </>
              ) : (
                "Guardar cambios"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </AppLayout>
  )
}