"use client"

import { useState, useEffect, use } from "react"
import { useRouter } from "next/navigation"
import { AppLayout } from "@/components/app-layout"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Calendar, User, Loader2, FileText } from "lucide-react"

interface VersionData {
    id: number
    tramite_id: number
    version_nro: string
    tipo_cambio: string
    autor: string
    created_at: string
    payload: {
        id: number
        nombre: string
        estado: string
        formas_juridicas?: Array<{ id: number; nombre: string }>
        organismos?: Array<{ id: number; nombre: string }>
        jurisdiccion?: { id: number; nombre: string; tipo: string }
        documentacion?: string
        paso_a_paso?: string
        costos?: Array<{ descripcion: string; monto: string; moneda: string }>
        requiere_certificaciones_externas?: boolean
        certificaciones_detalle?: string
        link_guia_oficial?: string
        donde_se_realiza?: string
        fecha_realizacion?: string
        comentarios_internos?: string
    }
}

const tipoCambioColors: Record<string, string> = {
    "confirmación": "bg-green-500/10 text-green-500 border-green-500/20",
    "edición menor": "bg-blue-500/10 text-blue-500 border-blue-500/20",
    "renovación mayor": "bg-orange-500/10 text-orange-500 border-orange-500/20",
    "creación": "bg-purple-500/10 text-purple-500 border-purple-500/20",
}

export default function VersionViewPage({
    params,
}: {
    params: Promise<{ id: string; versionId: string }>
}) {
    const { id: tramiteId, versionId } = use(params)
    const router = useRouter()
    const [version, setVersion] = useState<VersionData | null>(null)
    const [isLoading, setIsLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)

    useEffect(() => {
        const fetchVersion = 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/${tramiteId}/versiones/${versionId}`,
                    {
                        cache: "no-store",
                        headers: {
                            Authorization: `Bearer ${token}`,
                            Accept: "application/json",
                        },
                    }
                )

                if (!response.ok) throw new Error("Error al cargar la versión")

                const { data } = await response.json()
                setVersion(data)
            } catch (err) {
                console.error(err)
                setError("No se pudo cargar la versión del trámite")
            } finally {
                setIsLoading(false)
            }
        }

        fetchVersion()
    }, [tramiteId, versionId])

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

    if (error || !version) {
        return (
            <AppLayout>
                <div className="flex h-screen items-center justify-center text-destructive">
                    {error || "No se encontró la versión"}
                </div>
            </AppLayout>
        )
    }

    const payload = version.payload

    return (
        <AppLayout>
            <div className="min-h-screen bg-background">
                {/* Header */}
                <div className="border-b border-border bg-card">
                    <div className="mx-auto max-w-7xl px-6 py-6 lg:px-8">
                        <Button
                            variant="ghost"
                            size="sm"
                            asChild
                            className="mb-4 gap-2 text-muted-foreground hover:text-foreground"
                        >
                            <a href={`/tramite/${tramiteId}`}>
                                <ArrowLeft className="h-4 w-4" />
                                Volver al trámite
                            </a>
                        </Button>

                        <div className="space-y-4">
                            <div className="flex items-center gap-3">
                                <FileText className="h-8 w-8 text-muted-foreground" />
                                <div>
                                    <h1 className="text-3xl font-semibold tracking-tight text-foreground">
                                        Versión {version.version_nro}
                                    </h1>
                                    <p className="text-sm text-muted-foreground">Vista histórica del trámite</p>
                                </div>
                            </div>

                            <div className="flex flex-wrap items-center gap-3">
                                <Badge className={tipoCambioColors[version.tipo_cambio] || "bg-gray-100"}>
                                    {version.tipo_cambio}
                                </Badge>
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Calendar className="h-4 w-4" />
                                    {new Date(version.created_at).toLocaleDateString("es-AR", {
                                        year: "numeric",
                                        month: "long",
                                        day: "numeric",
                                        hour: "2-digit",
                                        minute: "2-digit",
                                    })}
                                </div>
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <User className="h-4 w-4" />
                                    {version.autor || "Sistema"}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Content */}
                <div className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
                    <div className="space-y-6">
                        {/* Basic Info */}
                        <Card>
                            <CardHeader>
                                <CardTitle>Información General</CardTitle>
                                <CardDescription>Datos del trámite en esta versión</CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div>
                                    <label className="text-sm font-medium text-muted-foreground">Nombre</label>
                                    <p className="mt-1 text-foreground">{payload.nombre}</p>
                                </div>

                                <div className="grid gap-4 sm:grid-cols-2">
                                    <div>
                                        <label className="text-sm font-medium text-muted-foreground">Estado</label>
                                        <p className="mt-1 text-foreground">{payload.estado}</p>
                                    </div>
                                    <div>
                                        <label className="text-sm font-medium text-muted-foreground">
                                            Dónde se realiza
                                        </label>
                                        <p className="mt-1 text-foreground">{payload.donde_se_realiza || "N/A"}</p>
                                    </div>
                                </div>

                                {payload.formas_juridicas && payload.formas_juridicas.length > 0 && (
                                    <div>
                                        <label className="text-sm font-medium text-muted-foreground">
                                            Formas Jurídicas
                                        </label>
                                        <p className="mt-1 text-foreground">
                                            {payload.formas_juridicas.map((fj) => fj.nombre).join(", ")}
                                        </p>
                                    </div>
                                )}

                                {payload.organismos && payload.organismos.length > 0 && (
                                    <div>
                                        <label className="text-sm font-medium text-muted-foreground">Organismos</label>
                                        <p className="mt-1 text-foreground">
                                            {payload.organismos.map((org) => org.nombre).join(", ")}
                                        </p>
                                    </div>
                                )}

                                {payload.jurisdiccion && (
                                    <div>
                                        <label className="text-sm font-medium text-muted-foreground">Jurisdicción</label>
                                        <p className="mt-1 text-foreground">{payload.jurisdiccion.nombre}</p>
                                    </div>
                                )}

                                {payload.link_guia_oficial && (
                                    <div>
                                        <label className="text-sm font-medium text-muted-foreground">
                                            Guía Oficial
                                        </label>
                                        <a
                                            href={payload.link_guia_oficial}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="mt-1 block text-primary hover:underline"
                                        >
                                            {payload.link_guia_oficial}
                                        </a>
                                    </div>
                                )}
                            </CardContent>
                        </Card>

                        {/* Documentation */}
                        {payload.documentacion && (
                            <Card>
                                <CardHeader>
                                    <CardTitle>Documentación / Requisitos</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <div
                                        className="prose prose-sm max-w-none dark:prose-invert"
                                        dangerouslySetInnerHTML={{ __html: payload.documentacion }}
                                    />
                                </CardContent>
                            </Card>
                        )}

                        {/* Step by Step */}
                        {payload.paso_a_paso && (
                            <Card>
                                <CardHeader>
                                    <CardTitle>Paso a Paso</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <div
                                        className="prose prose-sm max-w-none dark:prose-invert"
                                        dangerouslySetInnerHTML={{ __html: payload.paso_a_paso }}
                                    />
                                </CardContent>
                            </Card>
                        )}

                        {/* Certifications */}
                        {payload.requiere_certificaciones_externas && payload.certificaciones_detalle && (
                            <Card>
                                <CardHeader>
                                    <CardTitle>Certificaciones Externas</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <p className="text-sm text-foreground">{payload.certificaciones_detalle}</p>
                                </CardContent>
                            </Card>
                        )}

                        {/* Costs */}
                        {payload.costos && payload.costos.length > 0 && (
                            <Card>
                                <CardHeader>
                                    <CardTitle>Costos</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <div className="space-y-3">
                                        {payload.costos.map((costo, index) => (
                                            <div key={index} className="rounded-lg border border-border p-3">
                                                <div className="flex items-center justify-between">
                                                    <span className="font-medium">{costo.descripcion}</span>
                                                    <span className="text-lg font-semibold">
                                                        {costo.moneda} {costo.monto}
                                                    </span>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        {/* Internal Comments */}
                        {payload.comentarios_internos && (
                            <Card>
                                <CardHeader>
                                    <CardTitle>Comentarios Internos</CardTitle>
                                </CardHeader>
                                <CardContent>
                                    <p className="text-sm text-muted-foreground">{payload.comentarios_internos}</p>
                                </CardContent>
                            </Card>
                        )}
                    </div>
                </div>
            </div>
        </AppLayout>
    )
}