"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Plus, X, Upload, FileText, Scale, BookOpen, Gavel, FolderOpen, AlertCircle, ArrowLeft } from "lucide-react"
import { RichTextEditor } from "@/components/rich-text-editor"
import { MarkdownEditor } from "./markdown-editor"
import { useCatalogos } from "@/hooks/use-catalogos"

// Tipos
type FormaJuridica = "SA" | "SRL" | "SAS" | "Monotributo" | "Responsable Inscripto"
type TipoJurisdiccion = "nacion" | "provincia" | "municipio"
type TipoRealizacion = "virtual" | "presencial" | "mixto"
type TipoAdjunto = "modelo" | "normativa" | "bibliografia" | "jurisprudencia" | "interno"
type Moneda = "ARS" | "USD" | "EUR"
type EstadoTramite = "En proceso" | "Completado" | "Cancelado"

interface Costo {
  id: string
  descripcion: string
  monto: string
  moneda: Moneda
  observacion: string
}

interface Adjunto {
  id: string
  tipo: TipoAdjunto
  titulo: string
  archivo?: File
}

interface FormData {
  fechaRealizacion: string | number | readonly string[] | undefined
  // Datos base
  nombre: string
  formaJuridicaId: number | ""
  tipoJurisdiccion: TipoJurisdiccion | ""
  jurisdiccionId: number | ""
  organismoId: number | ""
  tipoRealizacion: TipoRealizacion | ""
  linkGuia: string
  // Estado del trámite
  estado: EstadoTramite | ""
  // Contenido
  documentacion: string
  requiereCertificaciones: boolean
  certificacionesDetalle: string
  pasoAPaso: string
  // Costos
  costos: Costo[]
  // Comentarios
  comentariosInternos: string
  // Adjuntos
  // Adjuntos
  adjuntos: Adjunto[]
  // Formas Jurídicas múltiples
  formasJuridicasMultiples?: number[]
  // Organismos múltiples
  organismosMultiples?: number[]
  created_at?: string
  fechaAlta?: string
}

interface TramiteFormProps {
  onSubmit: (data: FormData) => void
  onCancel: () => void
  initialData?: Partial<FormData>
  isEditMode?: boolean
  isSubmitting?: boolean
}

const tiposAdjuntoLabels: Record<TipoAdjunto, { label: string; icon: typeof FileText }> = {
  modelo: { label: "Modelo", icon: FileText },
  normativa: { label: "Normativa", icon: Scale },
  bibliografia: { label: "Bibliografía", icon: BookOpen },
  jurisprudencia: { label: "Jurisprudencia", icon: Gavel },
  interno: { label: "Interno", icon: FolderOpen },
}

export function TramiteForm({
  onSubmit,
  onCancel,
  initialData,
  isEditMode = false,
  isSubmitting = false,
}: TramiteFormProps) {
  const { catalogos, isLoading } = useCatalogos()

  const [formasJuridicasSeleccionadas, setFormasJuridicasSeleccionadas] = useState<number[]>(
    initialData?.formasJuridicasMultiples
      ? initialData.formasJuridicasMultiples
      : initialData?.formaJuridicaId
        ? [initialData.formaJuridicaId as number]
        : [],
  )

  const [organismosSeleccionados, setOrganismosSeleccionados] = useState<number[]>(
    initialData?.organismosMultiples
      ? initialData.organismosMultiples
      : initialData?.organismoId
        ? [initialData.organismoId as number]
        : [],
  )

  const [formData, setFormData] = useState<FormData>({
    nombre: "",
    formaJuridicaId: "",
    tipoJurisdiccion: "",
    fechaRealizacion: "",
    jurisdiccionId: "",
    organismoId: "",
    tipoRealizacion: "",
    linkGuia: "",
    estado: initialData?.estado || "En proceso",
    documentacion: "",
    requiereCertificaciones: false,
    certificacionesDetalle: "",
    pasoAPaso: "",
    costos: [],
    comentariosInternos: "",
    adjuntos: [],
    fechaAlta: initialData?.created_at
      ? new Date(initialData.created_at).toISOString().split("T")[0]
      : new Date().toISOString().split("T")[0],
    ...initialData,
  })

  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isDragging, setIsDragging] = useState(false)

  // Validación simple
  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {}

    if (!formData.nombre.trim()) newErrors.nombre = "El nombre es requerido"

    // Validate formas juridicas (same logic for both create and edit modes)
    if (formasJuridicasSeleccionadas.length === 0) {
      newErrors.formaJuridica = "Debe seleccionar al menos una persona jurídica"
    }

    if (organismosSeleccionados.length === 0) {
      newErrors.organismo = "Debe seleccionar al menos un organismo"
    }

    if (!formData.tipoJurisdiccion) newErrors.tipoJurisdiccion = "La jurisdicción es requerida"

    if (
      (formData.tipoJurisdiccion === "provincia" || formData.tipoJurisdiccion === "municipio") &&
      !formData.jurisdiccionId
    ) {
      newErrors.jurisdiccionId = "El detalle de jurisdicción es requerido"
    }

    if (!formData.tipoRealizacion) newErrors.tipoRealizacion = "El tipo de realización es requerido"
    if (!formData.estado) newErrors.estado = "El estado es requerido"

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (validateForm()) {
      onSubmit({
        ...formData,
        formasJuridicasMultiples: formasJuridicasSeleccionadas,
        organismosMultiples: organismosSeleccionados,
        formaJuridicaId: isEditMode
          ? formData.formaJuridicaId
          : formasJuridicasSeleccionadas.length === 1
            ? formasJuridicasSeleccionadas[0]
            : "",
        organismoId: organismosSeleccionados.length === 1 ? organismosSeleccionados[0] : "",
        created_at: formData.fechaAlta,
      } as any)
    }
  }

  // Handlers para costos
  const agregarCosto = () => {
    const nuevoCosto: Costo = {
      id: Date.now().toString(),
      descripcion: "",
      monto: "",
      moneda: "ARS",
      observacion: "",
    }
    setFormData({ ...formData, costos: [...formData.costos, nuevoCosto] })
  }

  const actualizarCosto = (id: string, campo: keyof Costo, valor: string) => {
    setFormData({
      ...formData,
      costos: formData.costos.map((costo) => (costo.id === id ? { ...costo, [campo]: valor } : costo)),
    })
  }

  const eliminarCosto = (id: string) => {
    setFormData({
      ...formData,
      costos: formData.costos.filter((costo) => costo.id !== id),
    })
  }

  // Handlers para adjuntos
  const agregarAdjunto = (tipo: TipoAdjunto, titulo: string, archivo?: File) => {
    const nuevoAdjunto: Adjunto = {
      id: Date.now().toString(),
      tipo,
      titulo,
      archivo,
    }
    setFormData({ ...formData, adjuntos: [...formData.adjuntos, nuevoAdjunto] })
  }

  const eliminarAdjunto = (id: string) => {
    setFormData({
      ...formData,
      adjuntos: formData.adjuntos.filter((adjunto) => adjunto.id !== id),
    })
  }

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

  const handleDragLeave = () => {
    setIsDragging(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
    const files = Array.from(e.dataTransfer.files)
    files.forEach((file) => {
      agregarAdjunto("interno", file.name, file)
    })
  }

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    files.forEach((file) => {
      agregarAdjunto("interno", file.name, file)
    })
  }

  const toggleFormaJuridica = (id: number) => {
    setFormasJuridicasSeleccionadas((prev) => {
      if (prev.includes(id)) {
        return prev.filter((f) => f !== id)
      } else {
        return [...prev, id]
      }
    })
    setErrors({ ...errors, formaJuridica: "" })
  }

  const toggleOrganismo = (id: number) => {
    setOrganismosSeleccionados((prev) => {
      if (prev.includes(id)) {
        return prev.filter((o) => o !== id)
      } else {
        return [...prev, id]
      }
    })
    setErrors({ ...errors, organismo: "" })
  }

  const jurisdiccionesFiltradas = catalogos.jurisdicciones.filter((j) => j.tipo === formData.tipoJurisdiccion)

  if (isLoading) {
    return <div className="p-8 text-center">Cargando catálogos...</div>
  }

  return (
    <div className="min-h-screen bg-background p-6 lg:p-8">
      <div className="mx-auto max-w-5xl">
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Encabezado */}
          <div className="flex flex-col gap-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onCancel}
              className="mb-2 gap-2 text-muted-foreground hover:text-foreground self-start"
            >
              <ArrowLeft className="h-4 w-4" />
              {isEditMode ? "Volver" : "Volver al listado"}
            </Button>
            <h1 className="text-3xl font-semibold tracking-tight text-foreground">
              {initialData ? "Editar Trámite" : "Nuevo Trámite"}
            </h1>
            <p className="text-sm text-muted-foreground">Complete la información del trámite</p>
          </div>

          {/* Sección 1: Datos Base */}
          <Card>
            <CardHeader>
              <CardTitle>Datos Base</CardTitle>
              <CardDescription>Información general del trámite</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Nombre */}
              <div className="space-y-2">
                <Label htmlFor="nombre">
                  Nombre del Trámite <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="nombre"
                  placeholder="Ej: Inscripción AFIP"
                  value={formData.nombre}
                  onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                  className={errors.nombre ? "border-destructive" : ""}
                />
                {errors.nombre && (
                  <p className="flex items-center gap-1 text-sm text-destructive">
                    <AlertCircle className="h-3 w-3" />
                    {errors.nombre}
                  </p>
                )}
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="formaJuridica">
                    Personas Jurídicas <span className="text-destructive">*</span>
                  </Label>

                  {/* Checkboxes múltiples para ambos modos */}
                  <div
                    className={`rounded-lg border ${errors.formaJuridica ? "border-destructive" : "border-border"} p-4 space-y-3`}
                  >
                    {catalogos.formas_juridicas.map((fj) => (
                      <div key={fj.id} className="flex items-center space-x-2">
                        <Checkbox
                          id={`forma-${fj.id}`}
                          checked={formasJuridicasSeleccionadas.includes(fj.id)}
                          onCheckedChange={() => toggleFormaJuridica(fj.id)}
                        />
                        <label
                          htmlFor={`forma-${fj.id}`}
                          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
                        >
                          {fj.nombre}
                        </label>
                      </div>
                    ))}
                  </div>

                  {errors.formaJuridica && (
                    <p className="flex items-center gap-1 text-sm text-destructive">
                      <AlertCircle className="h-3 w-3" />
                      {errors.formaJuridica}
                    </p>
                  )}

                  {!isEditMode && formasJuridicasSeleccionadas.length > 0 && (
                    <div className="flex flex-wrap gap-2 mt-2">
                      {formasJuridicasSeleccionadas.map((id) => {
                        const fj = catalogos.formas_juridicas.find((f) => f.id === id)
                        return (
                          <Badge key={id} variant="secondary" className="gap-1">
                            {fj?.nombre}
                            <button
                              type="button"
                              onClick={() => toggleFormaJuridica(id)}
                              className="ml-1 hover:text-destructive"
                            >
                              <X className="h-3 w-3" />
                            </button>
                          </Badge>
                        )
                      })}
                    </div>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="organismo">
                    Organismos <span className="text-destructive">*</span>
                  </Label>

                  <div
                    className={`rounded-lg border ${errors.organismo ? "border-destructive" : "border-border"} p-4 space-y-3 max-h-[200px] overflow-y-auto`}
                  >
                    {catalogos.organismos.map((org) => (
                      <div key={org.id} className="flex items-center space-x-2">
                        <Checkbox
                          id={`organismo-${org.id}`}
                          checked={organismosSeleccionados.includes(org.id)}
                          onCheckedChange={() => toggleOrganismo(org.id)}
                        />
                        <label
                          htmlFor={`organismo-${org.id}`}
                          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
                        >
                          {org.nombre}
                        </label>
                      </div>
                    ))}
                  </div>

                  {errors.organismo && (
                    <p className="flex items-center gap-1 text-sm text-destructive">
                      <AlertCircle className="h-3 w-3" />
                      {errors.organismo}
                    </p>
                  )}

                  {organismosSeleccionados.length > 0 && (
                    <div className="flex flex-wrap gap-2 mt-2">
                      {organismosSeleccionados.map((id) => {
                        const org = catalogos.organismos.find((o) => o.id === id)
                        return (
                          <Badge key={id} variant="secondary" className="gap-1">
                            {org?.nombre}
                            <button
                              type="button"
                              onClick={() => toggleOrganismo(id)}
                              className="ml-1 hover:text-destructive"
                            >
                              <X className="h-3 w-3" />
                            </button>
                          </Badge>
                        )
                      })}
                    </div>
                  )}
                </div>
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                {/* Jurisdicción */}
                <div className="space-y-2">
                  <Label htmlFor="jurisdiccion">
                    Jurisdicción <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={formData.tipoJurisdiccion}
                    onValueChange={(value) => {
                      setFormData({
                        ...formData,
                        tipoJurisdiccion: value as TipoJurisdiccion,
                        jurisdiccionId: "",
                      })
                      setErrors({ ...errors, tipoJurisdiccion: "" })
                    }}
                  >
                    <SelectTrigger className={errors.tipoJurisdiccion ? "border-destructive" : ""}>
                      <SelectValue placeholder="Seleccionar..." />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="nacion">Nación</SelectItem>
                      <SelectItem value="provincia">Provincia</SelectItem>
                      <SelectItem value="municipio">Municipio</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.tipoJurisdiccion && (
                    <p className="flex items-center gap-1 text-sm text-destructive">
                      <AlertCircle className="h-3 w-3" />
                      {errors.tipoJurisdiccion}
                    </p>
                  )}
                </div>

                {/* Detalle Jurisdicción */}
                <div className="space-y-2">
                  <Label htmlFor="jurisdiccionDetalle">
                    Por{" "}
                    {formData.tipoJurisdiccion
                      ? formData.tipoJurisdiccion === "nacion"
                        ? "Nación"
                        : formData.tipoJurisdiccion === "provincia"
                          ? "Provincia"
                          : "Municipio"
                      : "Jurisdicción"}{" "}
                    <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={formData.jurisdiccionId.toString()}
                    onValueChange={(value) => {
                      setFormData({ ...formData, jurisdiccionId: Number(value) })
                      setErrors({ ...errors, jurisdiccionId: "" })
                    }}
                    disabled={!formData.tipoJurisdiccion}
                  >
                    <SelectTrigger className={errors.jurisdiccionId ? "border-destructive" : ""}>
                      <SelectValue placeholder="Seleccionar..." />
                    </SelectTrigger>
                    <SelectContent>
                      {jurisdiccionesFiltradas.map((j) => (
                        <SelectItem key={j.id} value={j.id.toString()}>
                          {j.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.jurisdiccionId && (
                    <p className="flex items-center gap-1 text-sm text-destructive">
                      <AlertCircle className="h-3 w-3" />
                      {errors.jurisdiccionId}
                    </p>
                  )}
                </div>
              </div>

              {/* Fecha de Realización y Fecha de Alta */}
              <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="fechaRealizacion">Fecha de Realización</Label>
                  <Input
                    id="fechaRealizacion"
                    type="date"
                    value={formData.fechaRealizacion}
                    onChange={(e) => setFormData({ ...formData, fechaRealizacion: e.target.value })}
                  />
                </div>

                {/* Fecha de Alta (Solo lectura en edición, editable en creación) */}
                <div className="space-y-2">
                  <Label htmlFor="fechaAlta">Fecha de Carga (Alta)</Label>
                  <Input
                    id="fechaAlta"
                    type="date"
                    value={formData.fechaAlta}
                    onChange={(e) => setFormData({ ...formData, fechaAlta: e.target.value })}
                    disabled={isEditMode} // Solo editable al crear
                  />
                  {isEditMode && (
                    <p className="text-xs text-muted-foreground">
                      La fecha de carga no se puede modificar una vez creada.
                    </p>
                  )}
                </div>
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                {/* Tipo de Realización */}
                <div className="space-y-2">
                  <Label htmlFor="tipoRealizacion">
                    ¿Dónde se realiza? <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={formData.tipoRealizacion}
                    onValueChange={(value) => {
                      setFormData({ ...formData, tipoRealizacion: value as TipoRealizacion })
                      setErrors({ ...errors, tipoRealizacion: "" })
                    }}
                  >
                    <SelectTrigger className={errors.tipoRealizacion ? "border-destructive" : ""}>
                      <SelectValue placeholder="Seleccionar..." />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="virtual">Virtual</SelectItem>
                      <SelectItem value="presencial">Presencial</SelectItem>
                      <SelectItem value="mixto">Mixto</SelectItem>
                    </SelectContent>
                  </Select>
                  {errors.tipoRealizacion && (
                    <p className="flex items-center gap-1 text-sm text-destructive">
                      <AlertCircle className="h-3 w-3" />
                      {errors.tipoRealizacion}
                    </p>
                  )}
                </div>

                {/* Link a Guía Oficial */}
                <div className="space-y-2">
                  <Label htmlFor="linkGuia">Link a Guía Oficial</Label>
                  <Input
                    id="linkGuia"
                    type="url"
                    placeholder="https://..."
                    value={formData.linkGuia}
                    onChange={(e) => setFormData({ ...formData, linkGuia: e.target.value })}
                  />
                </div>
              </div>

              {/* Estado */}
              <div className="space-y-2">
                <Label htmlFor="estado">
                  Estado <span className="text-destructive">*</span>
                </Label>
                <Select
                  value={formData.estado}
                  onValueChange={(value) => {
                    setFormData({ ...formData, estado: value as EstadoTramite })
                    setErrors({ ...errors, estado: "" })
                  }}
                >
                  <SelectTrigger className={errors.estado ? "border-destructive" : ""}>
                    <SelectValue placeholder="Seleccionar estado..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="En proceso">En proceso</SelectItem>
                    <SelectItem value="Completado">Completado</SelectItem>
                    <SelectItem value="Cancelado">Cancelado</SelectItem>
                  </SelectContent>
                </Select>
                {errors.estado && (
                  <p className="flex items-center gap-1 text-sm text-destructive">
                    <AlertCircle className="h-3 w-3" />
                    {errors.estado}
                  </p>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Sección 2: Contenido */}
          <Card>
            <CardHeader>
              <CardTitle>Contenido</CardTitle>
              <CardDescription>Detalles del procedimiento y requisitos</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Documentación/Requisitos - Ahora con Rich Text Editor */}
              <div className="space-y-2">
                <Label htmlFor="documentacion">Documentación / Requisitos</Label>
                <MarkdownEditor
                  id="documentacion"
                  value={formData.documentacion}
                  onChange={(value) => setFormData({ ...formData, documentacion: value })}
                  placeholder="Describa la documentación necesaria y requisitos..."
                  minHeight="200px"
                />
              </div>

              {/* Certificaciones Externas */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <Label htmlFor="requiereCertificaciones">¿Requiere certificaciones externas?</Label>
                  <Switch
                    id="requiereCertificaciones"
                    checked={formData.requiereCertificaciones}
                    onCheckedChange={(checked) =>
                      setFormData({
                        ...formData,
                        requiereCertificaciones: checked,
                        certificacionesDetalle: checked ? formData.certificacionesDetalle : "",
                      })
                    }
                  />
                </div>
                {formData.requiereCertificaciones && (
                  <Textarea
                    placeholder="Detalle las certificaciones externas requeridas..."
                    value={formData.certificacionesDetalle}
                    onChange={(e) => setFormData({ ...formData, certificacionesDetalle: e.target.value })}
                    rows={3}
                  />
                )}
              </div>

              {/* Paso a Paso */}
              <RichTextEditor
                label="Paso a Paso"
                value={formData.pasoAPaso}
                onChange={(value) => setFormData({ ...formData, pasoAPaso: value })}
                placeholder="Describa el procedimiento paso a paso. Puede pegar imágenes directamente..."
                rows={10}
              />
            </CardContent>
          </Card>

          {/* Sección 3: Costos */}
          <Card>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle>Costos</CardTitle>
                  <CardDescription>Detalle de costos asociados al trámite</CardDescription>
                </div>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={agregarCosto}
                  className="gap-2 bg-transparent"
                >
                  <Plus className="h-4 w-4" />
                  Agregar Costo
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              {formData.costos.length === 0 ? (
                <p className="text-center text-sm text-muted-foreground py-8">
                  No hay costos agregados. Haga clic en "Agregar Costo" para añadir uno.
                </p>
              ) : (
                <div className="space-y-4">
                  {formData.costos.map((costo, index) => (
                    <div key={costo.id} className="rounded-lg border border-border bg-card p-4 space-y-3">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-muted-foreground">Costo #{index + 1}</span>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => eliminarCosto(costo.id)}
                          className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                      <div className="grid gap-3 sm:grid-cols-2">
                        <div className="space-y-2 sm:col-span-2">
                          <Label>Descripción</Label>
                          <Input
                            placeholder="Ej: Tasa administrativa"
                            value={costo.descripcion}
                            onChange={(e) => actualizarCosto(costo.id, "descripcion", e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>Monto</Label>
                          <Input
                            type="number"
                            placeholder="0.00"
                            value={costo.monto}
                            onChange={(e) => actualizarCosto(costo.id, "monto", e.target.value)}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>Moneda</Label>
                          <Select
                            value={costo.moneda}
                            onValueChange={(value) => actualizarCosto(costo.id, "moneda", value)}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="ARS">ARS - Peso Argentino</SelectItem>
                              <SelectItem value="USD">USD - Dólar</SelectItem>
                              <SelectItem value="EUR">EUR - Euro</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-2 sm:col-span-2">
                          <Label>Observación</Label>
                          <Input
                            placeholder="Observaciones adicionales..."
                            value={costo.observacion}
                            onChange={(e) => actualizarCosto(costo.id, "observacion", e.target.value)}
                          />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

          {/* Sección 4: Comentarios Internos */}
          <Card>
            <CardHeader>
              <CardTitle>Comentarios Internos</CardTitle>
              <CardDescription>Notas y observaciones para uso interno</CardDescription>
            </CardHeader>
            <CardContent>
              <Textarea
                placeholder="Agregue comentarios internos, notas o recordatorios..."
                value={formData.comentariosInternos}
                onChange={(e) => setFormData({ ...formData, comentariosInternos: e.target.value })}
                rows={5}
              />
            </CardContent>
          </Card>

          {/* Sección 5: Adjuntos */}
          <Card>
            <CardHeader>
              <CardTitle>Adjuntos</CardTitle>
              <CardDescription>Documentos y archivos relacionados</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Zona de Drag & Drop */}
              <div
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
                className={`relative rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
                  isDragging
                    ? "border-primary bg-primary/5"
                    : "border-border bg-muted/30 hover:border-primary/50 hover:bg-muted/50"
                }`}
              >
                <input
                  type="file"
                  multiple
                  onChange={handleFileInput}
                  className="absolute inset-0 cursor-pointer opacity-0"
                  id="file-upload"
                />
                <div className="flex flex-col items-center gap-2">
                  <Upload className="h-10 w-10 text-muted-foreground" />
                  <div>
                    <p className="text-sm font-medium text-foreground">
                      Arrastre archivos aquí o haga clic para seleccionar
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">Soporta múltiples archivos de cualquier tipo</p>
                  </div>
                </div>
              </div>

              {/* Lista de Adjuntos */}
              {formData.adjuntos.length > 0 && (
                <div className="space-y-2">
                  <Label>Archivos adjuntos ({formData.adjuntos.length})</Label>
                  <div className="space-y-2">
                    {formData.adjuntos.map((adjunto) => {
                      const tipoInfo = tiposAdjuntoLabels[adjunto.tipo]
                      const Icon = tipoInfo.icon
                      return (
                        <div
                          key={adjunto.id}
                          className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
                        >
                          <div className="flex items-center gap-3 flex-1 min-w-0">
                            <Icon className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                            <div className="flex-1 min-w-0">
                              <p className="text-sm font-medium text-foreground truncate">{adjunto.titulo}</p>
                              <div className="flex items-center gap-2 mt-1">
                                <Badge variant="secondary" className="text-xs">
                                  {tipoInfo.label}
                                </Badge>
                                {adjunto.archivo && (
                                  <span className="text-xs text-muted-foreground">
                                    {(adjunto.archivo.size / 1024).toFixed(1)} KB
                                  </span>
                                )}
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Select
                              value={adjunto.tipo}
                              onValueChange={(value) => {
                                setFormData({
                                  ...formData,
                                  adjuntos: formData.adjuntos.map((a) =>
                                    a.id === adjunto.id ? { ...a, tipo: value as TipoAdjunto } : a,
                                  ),
                                })
                              }}
                            >
                              <SelectTrigger className="w-[140px] h-8">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="modelo">Modelo</SelectItem>
                                <SelectItem value="normativa">Normativa</SelectItem>
                                <SelectItem value="bibliografia">Bibliografía</SelectItem>
                                <SelectItem value="jurisprudencia">Jurisprudencia</SelectItem>
                                <SelectItem value="interno">Interno</SelectItem>
                              </SelectContent>
                            </Select>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={() => eliminarAdjunto(adjunto.id)}
                              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                            >
                              <X className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Botones de Acción */}
          <div className="flex items-center justify-end gap-3 pt-4">
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <span className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  Guardando...
                </>
              ) : isEditMode ? (
                "Modificar Trámite"
              ) : (
                "Guardar Trámite"
              )}
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}