"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ArrowLeft,
  Printer,
  Plus,
  Minus,
  Calendar,
  DollarSign,
  FileText,
  AlertCircle,
  ExternalLink,
  MessageSquare,
} from "lucide-react"

// Tipos
interface TramiteVersion {
  id: string
  versionNro: string
  nombre: string
  formaJuridica: string
  organismo: string
  jurisdiccion: string
  fechaRealizacion: 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
  adjuntos: Array<{
    id: string
    tipo: string
    titulo: string
  }>
}

interface VersionOption {
  id: string
  versionNro: string
  fecha: string
}

interface CompararVersionesProps {
  versionActual: TramiteVersion
  versionesDisponibles: VersionOption[]
  versionComparar?: TramiteVersion
  onVersionChange?: (versionId: string) => void
  onVolver?: () => void
  onImprimir?: () => void
}

// Datos de ejemplo
const versionActualEjemplo: TramiteVersion = {
  id: "v3",
  versionNro: "3.0",
  nombre: "Inscripción AFIP - Responsable Inscripto",
  formaJuridica: "SRL",
  organismo: "AFIP",
  jurisdiccion: "Nación",
  fechaRealizacion: "2024-01-10",
  documentacion: `**Documentación requerida:**

- DNI del representante legal
- Estatuto social actualizado
- Constancia de inscripción en IGJ
- Comprobante de domicilio fiscal
- Formulario 460/F completo
- Certificado de habilitación municipal

**Requisitos adicionales:**
- Clave fiscal nivel 3 o superior
- Domicilio fiscal habilitado`,
  requiereCertificaciones: true,
  certificacionesDetalle: "Certificación de firma por escribano público para el representante legal",
  pasoAPaso: `**Procedimiento paso a paso:**

1. Ingresar a [AFIP con Clave Fiscal](https://auth.afip.gob.ar)
2. Seleccionar "Sistema Registral" → "Registro Tributario"
3. Completar Formulario 460/F con los datos de la sociedad
4. Adjuntar documentación digitalizada
5. Enviar solicitud y aguardar número de trámite
6. Descargar constancia de inicio de trámite
7. Aguardar resolución (5-10 días hábiles)
8. Descargar constancia de inscripción definitiva
9. Verificar datos en el sistema`,
  costos: [
    {
      descripcion: "Tasa administrativa AFIP",
      monto: "15000",
      moneda: "ARS",
      observacion: "Pago único al momento de inscripción",
    },
    {
      descripcion: "Certificación escribano",
      monto: "25000",
      moneda: "ARS",
      observacion: "Varía según escribanía",
    },
    {
      descripcion: "Tasa municipal",
      monto: "8000",
      moneda: "ARS",
      observacion: "Solo para CABA",
    },
  ],
  comentariosInternos:
    "Recordar que el trámite puede demorar más en época de vencimientos. Verificar siempre que el domicilio fiscal esté habilitado antes de iniciar. Actualizado con nuevos requisitos 2024.",
  linkGuia: "https://www.afip.gob.ar/genericos/guiavirtual/inscripcion_2024.asp",
  dondeSeRealiza: "Virtual",
  adjuntos: [
    { id: "1", tipo: "Modelo", titulo: "Formulario 460F - Modelo completo.pdf" },
    { id: "2", tipo: "Normativa", titulo: "RG AFIP 4120 - Inscripción RI.pdf" },
    { id: "3", tipo: "Interno", titulo: "Checklist interno - Inscripción AFIP.xlsx" },
    { id: "4", tipo: "Normativa", titulo: "RG AFIP 5250 - Actualización 2024.pdf" },
  ],
}

const versionAnteriorEjemplo: TramiteVersion = {
  id: "v2",
  versionNro: "2.0",
  nombre: "Inscripción AFIP - Responsable Inscripto",
  formaJuridica: "SRL",
  organismo: "AFIP",
  jurisdiccion: "Nación",
  fechaRealizacion: "2023-11-10",
  documentacion: `**Documentación requerida:**

- DNI del representante legal
- Estatuto social actualizado
- Constancia de inscripción en IGJ
- Comprobante de domicilio fiscal
- Formulario 460/F completo

**Requisitos adicionales:**
- Clave fiscal nivel 3 o superior
- Domicilio fiscal habilitado`,
  requiereCertificaciones: true,
  certificacionesDetalle: "Certificación de firma por escribano público para el representante legal",
  pasoAPaso: `**Procedimiento paso a paso:**

1. Ingresar a [AFIP con Clave Fiscal](https://auth.afip.gob.ar)
2. Seleccionar "Sistema Registral" → "Registro Tributario"
3. Completar Formulario 460/F con los datos de la sociedad
4. Adjuntar documentación digitalizada
5. Enviar solicitud y aguardar número de trámite
6. Descargar constancia de inicio de trámite
7. Aguardar resolución (5-10 días hábiles)
8. Descargar constancia de inscripción definitiva`,
  costos: [
    {
      descripcion: "Tasa administrativa AFIP",
      monto: "12000",
      moneda: "ARS",
      observacion: "Pago único al momento de inscripción",
    },
    {
      descripcion: "Certificación escribano",
      monto: "20000",
      moneda: "ARS",
      observacion: "Varía según escribanía",
    },
  ],
  comentariosInternos:
    "Recordar que el trámite puede demorar más en época de vencimientos. Verificar siempre que el domicilio fiscal esté habilitado antes de iniciar.",
  linkGuia: "https://www.afip.gob.ar/genericos/guiavirtual/",
  dondeSeRealiza: "Virtual",
  adjuntos: [
    { id: "1", tipo: "Modelo", titulo: "Formulario 460F - Modelo completo.pdf" },
    { id: "2", tipo: "Normativa", titulo: "RG AFIP 4120 - Inscripción RI.pdf" },
    { id: "3", tipo: "Interno", titulo: "Checklist interno - Inscripción AFIP.xlsx" },
  ],
}

const versionesDisponiblesEjemplo: VersionOption[] = [
  { id: "v2", versionNro: "2.0", fecha: "2023-11-10" },
  { id: "v1", versionNro: "1.0", fecha: "2023-06-15" },
]

// Función para detectar diferencias en texto
function detectarDiferenciasTexto(textoAnterior: string, textoActual: string) {
  const lineasAnteriores = textoAnterior.split("\n")
  const lineasActuales = textoActual.split("\n")

  const resultado = {
    anterior: [] as Array<{ texto: string; tipo: "igual" | "eliminado" | "modificado" }>,
    actual: [] as Array<{ texto: string; tipo: "igual" | "agregado" | "modificado" }>,
  }

  const maxLineas = Math.max(lineasAnteriores.length, lineasActuales.length)

  for (let i = 0; i < maxLineas; i++) {
    const lineaAnterior = lineasAnteriores[i] || ""
    const lineaActual = lineasActuales[i] || ""

    if (lineaAnterior === lineaActual) {
      resultado.anterior.push({ texto: lineaAnterior, tipo: "igual" })
      resultado.actual.push({ texto: lineaActual, tipo: "igual" })
    } else if (!lineaActual && lineaAnterior) {
      resultado.anterior.push({ texto: lineaAnterior, tipo: "eliminado" })
    } else if (!lineaAnterior && lineaActual) {
      resultado.actual.push({ texto: lineaActual, tipo: "agregado" })
    } else {
      resultado.anterior.push({ texto: lineaAnterior, tipo: "modificado" })
      resultado.actual.push({ texto: lineaActual, tipo: "modificado" })
    }
  }

  return resultado
}

// Componente para mostrar texto con diferencias
function TextoDiferencias({
  lineas,
}: {
  lineas: Array<{ texto: string; tipo: "igual" | "eliminado" | "agregado" | "modificado" }>
}) {
  return (
    <div className="space-y-0.5">
      {lineas.map((linea, index) => (
        <div
          key={index}
          className={`px-3 py-1 ${
            linea.tipo === "eliminado"
              ? "bg-red-500/10 text-red-600 dark:text-red-400"
              : linea.tipo === "agregado"
                ? "bg-green-500/10 text-green-600 dark:text-green-400"
                : linea.tipo === "modificado"
                  ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
                  : "text-foreground"
          }`}
        >
          <div className="flex items-start gap-2">
            {linea.tipo === "eliminado" && <Minus className="mt-0.5 h-4 w-4 flex-shrink-0" />}
            {linea.tipo === "agregado" && <Plus className="mt-0.5 h-4 w-4 flex-shrink-0" />}
            <span className="whitespace-pre-wrap break-words font-mono text-sm">{linea.texto || " "}</span>
          </div>
        </div>
      ))}
    </div>
  )
}

export function CompararVersiones({
  versionActual = versionActualEjemplo,
  versionesDisponibles = versionesDisponiblesEjemplo,
  versionComparar = versionAnteriorEjemplo,
  onVersionChange,
  onVolver,
  onImprimir,
}: CompararVersionesProps) {
  const [versionSeleccionada, setVersionSeleccionada] = useState(versionComparar.id)

  const handleVersionChange = (versionId: string) => {
    setVersionSeleccionada(versionId)
    console.log("[v0] Cambiando versión a comparar:", versionId)
    if (onVersionChange) {
      onVersionChange(versionId)
    }
  }

  const handleVolver = () => {
    console.log("[v0] Volviendo al trámite")
    if (onVolver) {
      onVolver()
    }
  }

  const handleImprimir = () => {
    console.log("[v0] Imprimiendo comparación")
    if (onImprimir) {
      onImprimir()
    }
    window.print()
  }

  // Detectar diferencias
  const difDocumentacion = detectarDiferenciasTexto(versionComparar.documentacion, versionActual.documentacion)
  const difPasoAPaso = detectarDiferenciasTexto(versionComparar.pasoAPaso, versionActual.pasoAPaso)
  const difComentarios = detectarDiferenciasTexto(
    versionComparar.comentariosInternos,
    versionActual.comentariosInternos,
  )

  // Detectar diferencias en costos
  const costosAnteriores = versionComparar.costos.map((c) => c.descripcion)
  const costosActuales = versionActual.costos.map((c) => c.descripcion)
  const costosEliminados = versionComparar.costos.filter((c) => !costosActuales.includes(c.descripcion))
  const costosAgregados = versionActual.costos.filter((c) => !costosAnteriores.includes(c.descripcion))
  const costosComunes = versionActual.costos.filter((c) => costosAnteriores.includes(c.descripcion))

  // Detectar diferencias en adjuntos
  const adjuntosAnteriores = versionComparar.adjuntos.map((a) => a.titulo)
  const adjuntosActuales = versionActual.adjuntos.map((a) => a.titulo)
  const adjuntosEliminados = versionComparar.adjuntos.filter((a) => !adjuntosActuales.includes(a.titulo))
  const adjuntosAgregados = versionActual.adjuntos.filter((a) => !adjuntosAnteriores.includes(a.titulo))
  const adjuntosComunes = versionActual.adjuntos.filter((a) => adjuntosAnteriores.includes(a.titulo))

  return (
    <div className="min-h-screen bg-background">
      {/* Header con barra de selección */}
      <div className="border-b border-border bg-card print:border-0">
        <div className="mx-auto max-w-[1800px] px-6 py-6 lg:px-8">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex-1">
              <h1 className="text-2xl font-semibold tracking-tight text-foreground">Comparación de Versiones</h1>
              <p className="mt-1 text-sm text-muted-foreground">{versionActual.nombre}</p>
            </div>

            <div className="flex items-center gap-3 print:hidden">
              <div className="flex items-center gap-2">
                <Label htmlFor="version-select" className="text-sm text-muted-foreground">
                  Comparar con:
                </Label>
                <Select value={versionSeleccionada} onValueChange={handleVersionChange}>
                  <SelectTrigger id="version-select" className="w-[180px]">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {versionesDisponibles.map((version) => (
                      <SelectItem key={version.id} value={version.id}>
                        Versión {version.versionNro} ({new Date(version.fecha).toLocaleDateString("es-AR")})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <Button variant="outline" onClick={handleImprimir} className="gap-2 bg-transparent">
                <Printer className="h-4 w-4" />
                Imprimir
              </Button>

              <Button variant="outline" onClick={handleVolver} className="gap-2 bg-transparent">
                <ArrowLeft className="h-4 w-4" />
                Volver al trámite
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Contenido comparativo */}
      <div className="mx-auto max-w-[1800px] px-6 py-8 lg:px-8">
        {/* Headers de columnas */}
        <div className="mb-6 grid grid-cols-2 gap-6">
          <div className="rounded-lg border border-border bg-card p-4">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold text-foreground">Versión {versionComparar.versionNro}</h2>
                <p className="text-sm text-muted-foreground">Versión anterior</p>
              </div>
              <Badge variant="secondary" className="gap-1">
                <Calendar className="h-3 w-3" />
                {new Date(versionComparar.fechaRealizacion).toLocaleDateString("es-AR")}
              </Badge>
            </div>
          </div>

          <div className="rounded-lg border border-primary/50 bg-primary/5 p-4">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold text-foreground">Versión {versionActual.versionNro}</h2>
                <p className="text-sm text-muted-foreground">Versión actual</p>
              </div>
              <Badge variant="default" className="gap-1">
                <Calendar className="h-3 w-3" />
                {new Date(versionActual.fechaRealizacion).toLocaleDateString("es-AR")}
              </Badge>
            </div>
          </div>
        </div>

        <div className="space-y-8">
          {/* Información General */}
          <div className="grid grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Información General</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div>
                  <Label className="text-xs text-muted-foreground">Dónde se realiza</Label>
                  <p className="mt-1 text-sm text-foreground">{versionComparar.dondeSeRealiza}</p>
                </div>
                <div>
                  <Label className="text-xs text-muted-foreground">Guía Oficial</Label>
                  <a
                    href={versionComparar.linkGuia}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-1 flex items-center gap-1 text-sm text-primary hover:underline"
                  >
                    {versionComparar.linkGuia}
                    <ExternalLink className="h-3 w-3" />
                  </a>
                </div>
                {versionComparar.requiereCertificaciones && (
                  <div>
                    <Label className="flex items-center gap-1 text-xs text-muted-foreground">
                      <AlertCircle className="h-3 w-3" />
                      Certificaciones Externas
                    </Label>
                    <p className="mt-1 text-sm text-foreground">{versionComparar.certificacionesDetalle}</p>
                  </div>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">Información General</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div>
                  <Label className="text-xs text-muted-foreground">Dónde se realiza</Label>
                  <p
                    className={`mt-1 text-sm ${
                      versionComparar.dondeSeRealiza !== versionActual.dondeSeRealiza
                        ? "font-medium text-green-600 dark:text-green-400"
                        : "text-foreground"
                    }`}
                  >
                    {versionActual.dondeSeRealiza}
                  </p>
                </div>
                <div>
                  <Label className="text-xs text-muted-foreground">Guía Oficial</Label>
                  <a
                    href={versionActual.linkGuia}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`mt-1 flex items-center gap-1 text-sm hover:underline ${
                      versionComparar.linkGuia !== versionActual.linkGuia
                        ? "font-medium text-green-600 dark:text-green-400"
                        : "text-primary"
                    }`}
                  >
                    {versionActual.linkGuia}
                    <ExternalLink className="h-3 w-3" />
                  </a>
                </div>
                {versionActual.requiereCertificaciones && (
                  <div>
                    <Label className="flex items-center gap-1 text-xs text-muted-foreground">
                      <AlertCircle className="h-3 w-3" />
                      Certificaciones Externas
                    </Label>
                    <p
                      className={`mt-1 text-sm ${
                        versionComparar.certificacionesDetalle !== versionActual.certificacionesDetalle
                          ? "font-medium text-green-600 dark:text-green-400"
                          : "text-foreground"
                      }`}
                    >
                      {versionActual.certificacionesDetalle}
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Documentación y Requisitos */}
          <div className="grid grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <FileText className="h-4 w-4" />
                  Documentación y Requisitos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-border bg-muted/30">
                  <TextoDiferencias lineas={difDocumentacion.anterior} />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <FileText className="h-4 w-4" />
                  Documentación y Requisitos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-border bg-muted/30">
                  <TextoDiferencias lineas={difDocumentacion.actual} />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Paso a Paso */}
          <div className="grid grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Paso a Paso</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-border bg-muted/30">
                  <TextoDiferencias lineas={difPasoAPaso.anterior} />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">Paso a Paso</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-border bg-muted/30">
                  <TextoDiferencias lineas={difPasoAPaso.actual} />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Costos */}
          <div className="grid grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <DollarSign className="h-4 w-4" />
                  Costos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {/* Costos eliminados */}
                  {costosEliminados.map((costo, index) => (
                    <div key={`eliminado-${index}`} className="rounded-lg border border-red-500/20 bg-red-500/10 p-3">
                      <div className="flex items-start gap-2">
                        <Minus className="mt-0.5 h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" />
                        <div className="flex-1">
                          <p className="text-sm font-medium text-red-600 dark:text-red-400">{costo.descripcion}</p>
                          <div className="mt-1 flex items-center justify-between">
                            <p className="text-sm text-red-600/80 dark:text-red-400/80">
                              {costo.moneda} ${Number(costo.monto).toLocaleString("es-AR")}
                            </p>
                          </div>
                          {costo.observacion && (
                            <p className="mt-1 text-xs text-red-600/70 dark:text-red-400/70">{costo.observacion}</p>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}

                  {/* Costos comunes */}
                  {costosComunes.map((costoActual, index) => {
                    const costoAnterior = versionComparar.costos.find((c) => c.descripcion === costoActual.descripcion)
                    const montosCambiaron = costoAnterior && costoAnterior.monto !== costoActual.monto

                    return (
                      <div
                        key={`comun-${index}`}
                        className={`rounded-lg border p-3 ${
                          montosCambiaron ? "border-amber-500/20 bg-amber-500/10" : "border-border bg-muted/30"
                        }`}
                      >
                        <div className="flex-1">
                          <p className="text-sm font-medium text-foreground">{costoAnterior?.descripcion}</p>
                          <div className="mt-1 flex items-center justify-between">
                            <p
                              className={`text-sm ${
                                montosCambiaron ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"
                              }`}
                            >
                              {costoAnterior?.moneda} ${Number(costoAnterior?.monto).toLocaleString("es-AR")}
                            </p>
                          </div>
                          {costoAnterior?.observacion && (
                            <p className="mt-1 text-xs text-muted-foreground">{costoAnterior.observacion}</p>
                          )}
                        </div>
                      </div>
                    )
                  })}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <DollarSign className="h-4 w-4" />
                  Costos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {/* Costos comunes */}
                  {costosComunes.map((costoActual, index) => {
                    const costoAnterior = versionComparar.costos.find((c) => c.descripcion === costoActual.descripcion)
                    const montosCambiaron = costoAnterior && costoAnterior.monto !== costoActual.monto

                    return (
                      <div
                        key={`comun-${index}`}
                        className={`rounded-lg border p-3 ${
                          montosCambiaron ? "border-amber-500/20 bg-amber-500/10" : "border-border bg-muted/30"
                        }`}
                      >
                        <div className="flex-1">
                          <p className="text-sm font-medium text-foreground">{costoActual.descripcion}</p>
                          <div className="mt-1 flex items-center justify-between">
                            <p
                              className={`text-sm ${
                                montosCambiaron ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground"
                              }`}
                            >
                              {costoActual.moneda} ${Number(costoActual.monto).toLocaleString("es-AR")}
                            </p>
                          </div>
                          {costoActual.observacion && (
                            <p className="mt-1 text-xs text-muted-foreground">{costoActual.observacion}</p>
                          )}
                        </div>
                      </div>
                    )
                  })}

                  {/* Costos agregados */}
                  {costosAgregados.map((costo, index) => (
                    <div
                      key={`agregado-${index}`}
                      className="rounded-lg border border-green-500/20 bg-green-500/10 p-3"
                    >
                      <div className="flex items-start gap-2">
                        <Plus className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-600 dark:text-green-400" />
                        <div className="flex-1">
                          <p className="text-sm font-medium text-green-600 dark:text-green-400">{costo.descripcion}</p>
                          <div className="mt-1 flex items-center justify-between">
                            <p className="text-sm text-green-600/80 dark:text-green-400/80">
                              {costo.moneda} ${Number(costo.monto).toLocaleString("es-AR")}
                            </p>
                          </div>
                          {costo.observacion && (
                            <p className="mt-1 text-xs text-green-600/70 dark:text-green-400/70">{costo.observacion}</p>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Adjuntos */}
          <div className="grid grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <FileText className="h-4 w-4" />
                  Adjuntos ({versionComparar.adjuntos.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {/* Adjuntos eliminados */}
                  {adjuntosEliminados.map((adjunto) => (
                    <div
                      key={adjunto.id}
                      className="flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 p-3"
                    >
                      <Minus className="h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400" />
                      <div className="flex-1 min-w-0">
                        <p className="truncate text-sm font-medium text-red-600 dark:text-red-400">{adjunto.titulo}</p>
                        <Badge variant="secondary" className="mt-1 text-xs">
                          {adjunto.tipo}
                        </Badge>
                      </div>
                    </div>
                  ))}

                  {/* Adjuntos comunes */}
                  {adjuntosComunes.map((adjunto) => (
                    <div
                      key={adjunto.id}
                      className="flex items-center gap-2 rounded-lg border border-border bg-muted/30 p-3"
                    >
                      <div className="flex-1 min-w-0">
                        <p className="truncate text-sm font-medium text-foreground">{adjunto.titulo}</p>
                        <Badge variant="secondary" className="mt-1 text-xs">
                          {adjunto.tipo}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <FileText className="h-4 w-4" />
                  Adjuntos ({versionActual.adjuntos.length})
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {/* Adjuntos comunes */}
                  {adjuntosComunes.map((adjunto) => (
                    <div
                      key={adjunto.id}
                      className="flex items-center gap-2 rounded-lg border border-border bg-muted/30 p-3"
                    >
                      <div className="flex-1 min-w-0">
                        <p className="truncate text-sm font-medium text-foreground">{adjunto.titulo}</p>
                        <Badge variant="secondary" className="mt-1 text-xs">
                          {adjunto.tipo}
                        </Badge>
                      </div>
                    </div>
                  ))}

                  {/* Adjuntos agregados */}
                  {adjuntosAgregados.map((adjunto) => (
                    <div
                      key={adjunto.id}
                      className="flex items-center gap-2 rounded-lg border border-green-500/20 bg-green-500/10 p-3"
                    >
                      <Plus className="h-4 w-4 flex-shrink-0 text-green-600 dark:text-green-400" />
                      <div className="flex-1 min-w-0">
                        <p className="truncate text-sm font-medium text-green-600 dark:text-green-400">
                          {adjunto.titulo}
                        </p>
                        <Badge variant="secondary" className="mt-1 text-xs">
                          {adjunto.tipo}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Comentarios Internos */}
          <div className="grid grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <MessageSquare className="h-4 w-4" />
                  Comentarios Internos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-border bg-muted/30">
                  <TextoDiferencias lineas={difComentarios.anterior} />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-base">
                  <MessageSquare className="h-4 w-4" />
                  Comentarios Internos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="rounded-lg border border-border bg-muted/30">
                  <TextoDiferencias lineas={difComentarios.actual} />
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}