"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Upload,
  FileText,
  Scale,
  BookOpen,
  Gavel,
  FolderOpen,
  Download,
  Eye,
  X,
  Edit2,
  Filter,
  Grid3x3,
  List,
} from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

// Tipos
export type TipoAdjunto = "modelo" | "normativa" | "bibliografia" | "jurisprudencia" | "interno"

export interface Adjunto {
  id: string
  tipo: TipoAdjunto
  titulo: string
  archivo?: File
  url?: string
  tamanio: number // en bytes
  fecha: string // ISO date string
}

interface AdjuntosManagerProps {
  adjuntos: Adjunto[]
  onUpload: (tipo: TipoAdjunto, titulo: string, archivo: File) => void
  onDelete: (id: string) => void
  onRename: (id: string, nuevoTitulo: string) => void
  onFilterByTipo: (tipo: TipoAdjunto | "todos") => void
  readOnly?: boolean
}

const tiposAdjuntoConfig: Record<
  TipoAdjunto,
  { label: string; icon: typeof FileText; color: string; bgColor: string }
> = {
  modelo: {
    label: "Modelo",
    icon: FileText,
    color: "text-blue-500",
    bgColor: "bg-blue-500/10",
  },
  normativa: {
    label: "Normativa",
    icon: Scale,
    color: "text-purple-500",
    bgColor: "bg-purple-500/10",
  },
  bibliografia: {
    label: "Bibliografía",
    icon: BookOpen,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
  },
  jurisprudencia: {
    label: "Jurisprudencia",
    icon: Gavel,
    color: "text-amber-500",
    bgColor: "bg-amber-500/10",
  },
  interno: {
    label: "Interno",
    icon: FolderOpen,
    color: "text-slate-500",
    bgColor: "bg-slate-500/10",
  },
}

export function AdjuntosManager({
  adjuntos,
  onUpload,
  onDelete,
  onRename,
  onFilterByTipo,
  readOnly = false,
}: AdjuntosManagerProps) {
  const [isDragging, setIsDragging] = useState(false)
  const [nuevoTipo, setNuevoTipo] = useState<TipoAdjunto>("interno")
  const [nuevoTitulo, setNuevoTitulo] = useState("")
  const [filtroTipo, setFiltroTipo] = useState<TipoAdjunto | "todos">("todos")
  const [vistaActual, setVistaActual] = useState<"grid" | "list">("grid")
  const [editandoId, setEditandoId] = useState<string | null>(null)
  const [tituloEditado, setTituloEditado] = useState("")

  // Filtrar adjuntos
  const adjuntosFiltrados = filtroTipo === "todos" ? adjuntos : adjuntos.filter((a) => a.tipo === filtroTipo)

  // Handlers de drag & drop
  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) => {
      const titulo = nuevoTitulo || file.name
      onUpload(nuevoTipo, titulo, file)
    })
    setNuevoTitulo("")
  }

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || [])
    files.forEach((file) => {
      const titulo = nuevoTitulo || file.name
      onUpload(nuevoTipo, titulo, file)
    })
    setNuevoTitulo("")
  }

  // Handler de filtro
  const handleFiltroChange = (tipo: TipoAdjunto | "todos") => {
    setFiltroTipo(tipo)
    onFilterByTipo(tipo)
  }

  // Handler de renombrar
  const iniciarEdicion = (adjunto: Adjunto) => {
    setEditandoId(adjunto.id)
    setTituloEditado(adjunto.titulo)
  }

  const confirmarEdicion = () => {
    if (editandoId && tituloEditado.trim()) {
      onRename(editandoId, tituloEditado.trim())
      setEditandoId(null)
      setTituloEditado("")
    }
  }

  const cancelarEdicion = () => {
    setEditandoId(null)
    setTituloEditado("")
  }

  // Formatear tamaño de archivo
  const formatearTamanio = (bytes: number): string => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

  // Formatear fecha
  const formatearFecha = (fecha: string): string => {
    return new Date(fecha).toLocaleDateString("es-AR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    })
  }

  // Handler de descarga
  const handleDescargar = (adjunto: Adjunto) => {
    console.log("[v0] Descargar adjunto:", adjunto.id)
    // Implementación real de descarga
    if (adjunto.archivo) {
      const url = URL.createObjectURL(adjunto.archivo)
      const a = document.createElement("a")
      a.href = url
      a.download = adjunto.titulo
      a.click()
      URL.revokeObjectURL(url)
    } else if (adjunto.url) {
      window.open(adjunto.url, "_blank")
    }
  }

  // Handler de ver
  const handleVer = (adjunto: Adjunto) => {
    console.log("[v0] Ver adjunto:", adjunto.id)
    // Implementación real de vista previa
    if (adjunto.archivo) {
      const url = URL.createObjectURL(adjunto.archivo)
      window.open(url, "_blank")
    } else if (adjunto.url) {
      window.open(adjunto.url, "_blank")
    }
  }

  return (
    <div className="space-y-4">
      {/* Zona de Upload (solo si no es readOnly) */}
      {!readOnly && (
        <Card>
          <CardContent className="pt-6">
            <div className="space-y-4">
              {/* Controles de tipo y título */}
              <div className="grid gap-3 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="tipo-adjunto">Tipo de Archivo</Label>
                  <Select value={nuevoTipo} onValueChange={(value) => setNuevoTipo(value as TipoAdjunto)}>
                    <SelectTrigger id="tipo-adjunto">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {Object.entries(tiposAdjuntoConfig).map(([tipo, config]) => (
                        <SelectItem key={tipo} value={tipo}>
                          <div className="flex items-center gap-2">
                            <config.icon className={`h-4 w-4 ${config.color}`} />
                            {config.label}
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="titulo-adjunto">Título (opcional)</Label>
                  <Input
                    id="titulo-adjunto"
                    placeholder="Nombre del archivo..."
                    value={nuevoTitulo}
                    onChange={(e) => setNuevoTitulo(e.target.value)}
                  />
                </div>
              </div>

              {/* 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-manager"
                />
                <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">
                      Se subirán como tipo: {tiposAdjuntoConfig[nuevoTipo].label}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Barra de controles */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <Filter className="h-4 w-4 text-muted-foreground" />
          <Label className="text-sm font-medium">Filtrar por tipo:</Label>
          <Select value={filtroTipo} onValueChange={handleFiltroChange}>
            <SelectTrigger className="w-[160px] h-9">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos</SelectItem>
              {Object.entries(tiposAdjuntoConfig).map(([tipo, config]) => (
                <SelectItem key={tipo} value={tipo}>
                  {config.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center gap-1">
          <Button
            variant={vistaActual === "grid" ? "secondary" : "ghost"}
            size="sm"
            onClick={() => setVistaActual("grid")}
            className="h-9 w-9 p-0"
          >
            <Grid3x3 className="h-4 w-4" />
          </Button>
          <Button
            variant={vistaActual === "list" ? "secondary" : "ghost"}
            size="sm"
            onClick={() => setVistaActual("list")}
            className="h-9 w-9 p-0"
          >
            <List className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Lista/Grid de Adjuntos */}
      {adjuntosFiltrados.length === 0 ? (
        <Card>
          <CardContent className="py-12">
            <div className="text-center">
              <FolderOpen className="h-12 w-12 text-muted-foreground mx-auto mb-3" />
              <p className="text-sm text-muted-foreground">
                {filtroTipo === "todos"
                  ? "No hay adjuntos"
                  : `No hay adjuntos de tipo ${tiposAdjuntoConfig[filtroTipo as TipoAdjunto]?.label}`}
              </p>
            </div>
          </CardContent>
        </Card>
      ) : vistaActual === "grid" ? (
        // Vista Grid
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {adjuntosFiltrados.map((adjunto) => {
            const config = tiposAdjuntoConfig[adjunto.tipo]
            const Icon = config.icon
            return (
              <Card key={adjunto.id} className="overflow-hidden hover:shadow-md transition-shadow">
                <CardContent className="p-4">
                  <div className="space-y-3">
                    {/* Ícono y tipo */}
                    <div className={`rounded-lg p-4 ${config.bgColor} flex items-center justify-center`}>
                      <Icon className={`h-8 w-8 ${config.color}`} />
                    </div>

                    {/* Información */}
                    <div className="space-y-2">
                      <div className="flex items-start justify-between gap-2">
                        <h4 className="text-sm font-medium text-foreground line-clamp-2 flex-1">{adjunto.titulo}</h4>
                        {!readOnly && (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => iniciarEdicion(adjunto)}
                            className="h-7 w-7 p-0 flex-shrink-0"
                          >
                            <Edit2 className="h-3 w-3" />
                          </Button>
                        )}
                      </div>

                      <div className="flex items-center gap-2">
                        <Badge variant="secondary" className="text-xs">
                          {config.label}
                        </Badge>
                      </div>

                      <div className="flex items-center justify-between text-xs text-muted-foreground">
                        <span>{formatearTamanio(adjunto.tamanio)}</span>
                        <span>{formatearFecha(adjunto.fecha)}</span>
                      </div>
                    </div>

                    {/* Acciones */}
                    <div className="flex items-center gap-2 pt-2 border-t border-border">
                      <Button variant="outline" size="sm" onClick={() => handleVer(adjunto)} className="flex-1 gap-2">
                        <Eye className="h-3 w-3" />
                        Ver
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDescargar(adjunto)}
                        className="flex-1 gap-2"
                      >
                        <Download className="h-3 w-3" />
                        Descargar
                      </Button>
                      {!readOnly && (
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => onDelete(adjunto.id)}
                          className="h-9 w-9 p-0 text-destructive hover:text-destructive"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      ) : (
        // Vista Lista
        <Card>
          <CardContent className="p-0">
            <div className="divide-y divide-border">
              {adjuntosFiltrados.map((adjunto) => {
                const config = tiposAdjuntoConfig[adjunto.tipo]
                const Icon = config.icon
                return (
                  <div key={adjunto.id} className="p-4 hover:bg-muted/30 transition-colors">
                    <div className="flex items-center gap-4">
                      {/* Ícono */}
                      <div className={`rounded-lg p-3 ${config.bgColor} flex-shrink-0`}>
                        <Icon className={`h-5 w-5 ${config.color}`} />
                      </div>

                      {/* Información */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <h4 className="text-sm font-medium text-foreground truncate">{adjunto.titulo}</h4>
                          {!readOnly && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => iniciarEdicion(adjunto)}
                              className="h-6 w-6 p-0 flex-shrink-0"
                            >
                              <Edit2 className="h-3 w-3" />
                            </Button>
                          )}
                        </div>
                        <div className="flex items-center gap-3 text-xs text-muted-foreground">
                          <Badge variant="secondary" className="text-xs">
                            {config.label}
                          </Badge>
                          <span>{formatearTamanio(adjunto.tamanio)}</span>
                          <span>{formatearFecha(adjunto.fecha)}</span>
                        </div>
                      </div>

                      {/* Acciones */}
                      <div className="flex items-center gap-2 flex-shrink-0">
                        <Button variant="outline" size="sm" onClick={() => handleVer(adjunto)} className="gap-2">
                          <Eye className="h-3 w-3" />
                          Ver
                        </Button>
                        <Button variant="outline" size="sm" onClick={() => handleDescargar(adjunto)} className="gap-2">
                          <Download className="h-3 w-3" />
                          Descargar
                        </Button>
                        {!readOnly && (
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => onDelete(adjunto.id)}
                            className="h-9 w-9 p-0 text-destructive hover:text-destructive"
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        )}
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Modal de Edición de Título */}
      <Dialog open={editandoId !== null} onOpenChange={(open) => !open && cancelarEdicion()}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Renombrar Archivo</DialogTitle>
            <DialogDescription>Ingrese el nuevo título para el archivo</DialogDescription>
          </DialogHeader>
          <div className="space-y-2 py-4">
            <Label htmlFor="titulo-editado">Título</Label>
            <Input
              id="titulo-editado"
              value={tituloEditado}
              onChange={(e) => setTituloEditado(e.target.value)}
              placeholder="Nuevo título..."
              onKeyDown={(e) => {
                if (e.key === "Enter") confirmarEdicion()
                if (e.key === "Escape") cancelarEdicion()
              }}
            />
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={cancelarEdicion}>
              Cancelar
            </Button>
            <Button onClick={confirmarEdicion} disabled={!tituloEditado.trim()}>
              Guardar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}