"use client"

import { use, useEffect, useState } from "react"
import { TramitePrintView } from "@/components/tramite-print-view"
import { Loader2 } from "lucide-react"

interface TramiteData {
  nombre: string
  formaJuridica: string
  organismo: string
  jurisdiccion: string
  ultimaInteraccion: string
  createdAt: string
  documentacion: string
  requiereCertificaciones: boolean
  certificacionesDetalle: string
  pasoAPaso: string
  costos: Array<{
    descripcion: string
    monto: string
    moneda: string
    observacion: string
  }>
  comentariosInternos: string
  linkGuia: string
  dondeSeRealiza: string
}

interface Adjunto {
  titulo: string
  tipo: string
}

export default function TramiteImprimirPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const [tramite, setTramite] = useState<TramiteData | null>(null)
  const [adjuntos, setAdjuntos] = useState<Adjunto[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  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}`, {
          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 frontend interface
        const mappedTramite: TramiteData = {
          nombre: data.nombre,
          formaJuridica: data.forma_juridica?.nombre || "No especificada",
          organismo: data.organismo?.nombre || "No especificado",
          jurisdiccion: data.jurisdiccion?.nombre || "No especificada",
          ultimaInteraccion: data.updated_at,
          createdAt: data.created_at,
          documentacion: data.documentacion || "",
          requiereCertificaciones: data.requiere_certificaciones_externas,
          certificacionesDetalle: data.certificaciones_detalle || "",
          pasoAPaso: data.paso_a_paso || "",
          costos: data.costos || [],
          comentariosInternos: data.comentarios_internos || "",
          linkGuia: data.link_guia_oficial || "",
          dondeSeRealiza: data.donde_se_realiza || "",
        }

        const mappedAdjuntos: Adjunto[] = (data.adjuntos || []).map((adj: any) => ({
          titulo: adj.titulo,
          tipo: adj.tipo,
        }))

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

    fetchTramite()
  }, [id])

  const handlePrint = () => {
    console.log("[v0] Imprimiendo trámite:", 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 (
    <TramitePrintView
      tramite={tramite}
      adjuntos={adjuntos}
      cooperativaNombre="Cooperativa de Contadores Profesionales"
      onPrint={handlePrint}
    />
  )
}