"use client"

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

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
    comentarios_internos?: string
  }
}

export default function CompararVersionesPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: tramiteId } = use(params)
  const router = useRouter()
  const searchParams = useSearchParams()
  const v1Id = searchParams.get("v1")
  const v2Id = searchParams.get("v2")

  const [version1, setVersion1] = useState<VersionData | null>(null)
  const [version2, setVersion2] = useState<VersionData | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchVersions = async () => {
      if (!v1Id || !v2Id) {
        setError("Se requieren dos versiones para comparar")
        setIsLoading(false)
        return
      }

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

        const [res1, res2] = await Promise.all([
          fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${tramiteId}/versiones/${v1Id}`, {
            headers: {
              Authorization: `Bearer ${token}`,
              Accept: "application/json",
            },
          }),
          fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${tramiteId}/versiones/${v2Id}`, {
            headers: {
              Authorization: `Bearer ${token}`,
              Accept: "application/json",
            },
          }),
        ])

        if (!res1.ok || !res2.ok) throw new Error("Error al cargar las versiones")

        const { data: data1 } = await res1.json()
        const { data: data2 } = await res2.json()

        setVersion1(data1)
        setVersion2(data2)
      } catch (err) {
        console.error(err)
        setError("No se pudieron cargar las versiones para comparar")
      } finally {
        setIsLoading(false)
      }
    }

    fetchVersions()
  }, [tramiteId, v1Id, v2Id])

  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 || !version1 || !version2) {
    return (
      <AppLayout>
        <div className="min-h-screen bg-background p-6 lg:p-8">
          <div className="mx-auto max-w-7xl">
            <Alert className="bg-red-500/10 text-red-600 border-red-500/20">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{error || "No se encontraron las versiones"}</AlertDescription>
            </Alert>
            <Button onClick={() => router.push(`/tramite/${tramiteId}`)} className="mt-4">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Volver al trámite
            </Button>
          </div>
        </div>
      </AppLayout>
    )
  }

  const getDifference = (val1: any, val2: any): boolean => {
    if (typeof val1 === "object" && typeof val2 === "object") {
      return JSON.stringify(val1) !== JSON.stringify(val2)
    }
    return val1 !== val2
  }

  return (
    <AppLayout>
      <div className="min-h-screen bg-background p-6 lg:p-8">
        <div className="mx-auto max-w-7xl space-y-6">
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.push(`/tramite/${tramiteId}`)}
                className="mb-4 gap-2 text-muted-foreground hover:text-foreground"
              >
                <ArrowLeft className="h-4 w-4" />
                Volver al trámite
              </Button>
              <h1 className="text-3xl font-semibold tracking-tight text-foreground">
                Comparación de Versiones
              </h1>
              <p className="mt-1 text-sm text-muted-foreground">
                Diferencias entre versión {version1.version_nro} y versión {version2.version_nro}
              </p>
            </div>
          </div>

          {/* Comparison Grid */}
          <div className="grid gap-6 md:grid-cols-2">
            {/* Version 1 */}
            <Card>
              <CardHeader className="bg-blue-500/10">
                <div className="flex items-center justify-between">
                  <CardTitle>Versión {version1.version_nro}</CardTitle>
                  <Badge className="bg-blue-500/20 text-blue-600 border-blue-500/30">
                    {version1.tipo_cambio}
                  </Badge>
                </div>
                <CardDescription className="flex items-center gap-4 text-xs">
                  <span className="flex items-center gap-1">
                    <Calendar className="h-3 w-3" />
                    {new Date(version1.created_at).toLocaleDateString("es-AR")}
                  </span>
                  <span className="flex items-center gap-1">
                    <User className="h-3 w-3" />
                    {version1.autor || "Sistema"}
                  </span>
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4 pt-6">
                <CompareField
                  label="Nombre"
                  value={version1.payload.nombre}
                  isDifferent={getDifference(version1.payload.nombre, version2.payload.nombre)}
                />
                <CompareField
                  label="Estado"
                  value={version1.payload.estado}
                  isDifferent={getDifference(version1.payload.estado, version2.payload.estado)}
                />
                {version1.payload.formas_juridicas && (
                  <CompareField
                    label="Formas Jurídicas"
                    value={version1.payload.formas_juridicas.map((fj) => fj.nombre).join(", ")}
                    isDifferent={getDifference(version1.payload.formas_juridicas, version2.payload.formas_juridicas)}
                  />
                )}
                {version1.payload.organismos && (
                  <CompareField
                    label="Organismos"
                    value={version1.payload.organismos.map((org) => org.nombre).join(", ")}
                    isDifferent={getDifference(version1.payload.organismos, version2.payload.organismos)}
                  />
                )}
                {version1.payload.jurisdiccion && (
                  <CompareField
                    label="Jurisdicción"
                    value={version1.payload.jurisdiccion.nombre}
                    isDifferent={getDifference(version1.payload.jurisdiccion, version2.payload.jurisdiccion)}
                  />
                )}
                {version1.payload.donde_se_realiza && (
                  <CompareField
                    label="Dónde se realiza"
                    value={version1.payload.donde_se_realiza}
                    isDifferent={getDifference(version1.payload.donde_se_realiza, version2.payload.donde_se_realiza)}
                  />
                )}
                {version1.payload.link_guia_oficial && (
                  <CompareField
                    label="Guía Oficial"
                    value={version1.payload.link_guia_oficial}
                    isDifferent={getDifference(version1.payload.link_guia_oficial, version2.payload.link_guia_oficial)}
                  />
                )}
              </CardContent>
            </Card>

            {/* Version 2 */}
            <Card>
              <CardHeader className="bg-green-500/10">
                <div className="flex items-center justify-between">
                  <CardTitle>Versión {version2.version_nro}</CardTitle>
                  <Badge className="bg-green-500/20 text-green-600 border-green-500/30">
                    {version2.tipo_cambio}
                  </Badge>
                </div>
                <CardDescription className="flex items-center gap-4 text-xs">
                  <span className="flex items-center gap-1">
                    <Calendar className="h-3 w-3" />
                    {new Date(version2.created_at).toLocaleDateString("es-AR")}
                  </span>
                  <span className="flex items-center gap-1">
                    <User className="h-3 w-3" />
                    {version2.autor || "Sistema"}
                  </span>
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4 pt-6">
                <CompareField
                  label="Nombre"
                  value={version2.payload.nombre}
                  isDifferent={getDifference(version1.payload.nombre, version2.payload.nombre)}
                />
                <CompareField
                  label="Estado"
                  value={version2.payload.estado}
                  isDifferent={getDifference(version1.payload.estado, version2.payload.estado)}
                />
                {version2.payload.formas_juridicas && (
                  <CompareField
                    label="Formas Jurídicas"
                    value={version2.payload.formas_juridicas.map((fj) => fj.nombre).join(", ")}
                    isDifferent={getDifference(version1.payload.formas_juridicas, version2.payload.formas_juridicas)}
                  />
                )}
                {version2.payload.organismos && (
                  <CompareField
                    label="Organismos"
                    value={version2.payload.organismos.map((org) => org.nombre).join(", ")}
                    isDifferent={getDifference(version1.payload.organismos, version2.payload.organismos)}
                  />
                )}
                {version2.payload.jurisdiccion && (
                  <CompareField
                    label="Jurisdicción"
                    value={version2.payload.jurisdiccion.nombre}
                    isDifferent={getDifference(version1.payload.jurisdiccion, version2.payload.jurisdiccion)}
                  />
                )}
                {version2.payload.donde_se_realiza && (
                  <CompareField
                    label="Dónde se realiza"
                    value={version2.payload.donde_se_realiza}
                    isDifferent={getDifference(version1.payload.donde_se_realiza, version2.payload.donde_se_realiza)}
                  />
                )}
                {version2.payload.link_guia_oficial && (
                  <CompareField
                    label="Guía Oficial"
                    value={version2.payload.link_guia_oficial}
                    isDifferent={getDifference(version1.payload.link_guia_oficial, version2.payload.link_guia_oficial)}
                  />
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}

function CompareField({ label, value, isDifferent }: { label: string; value: string; isDifferent: boolean }) {
  return (
    <div className={`rounded-lg p-3 ${isDifferent ? "bg-yellow-500/10 border border-yellow-500/20" : ""}`}>
      <label className="text-xs font-medium text-muted-foreground">{label}</label>
      <p className="mt-1 text-sm text-foreground">{value || "N/A"}</p>
      {isDifferent && <Badge variant="outline" className="mt-2 text-xs bg-yellow-500/20 text-yellow-700 border-yellow-500/30">Modificado</Badge>}
    </div>
  )
}