'use client';

import React, { useState, use } from 'react';
import Link from 'next/link';
import { INITIAL_OBRAS, INITIAL_PLANOS } from '@/lib/data/mockData';
import { DocumentoPlano } from '@/types';
import { 
  Building2, FileText, Download, History, Plus, Search, 
  Filter, CheckCircle2, ArrowLeft, Eye, Upload, Layers
} from 'lucide-react';

interface PageProps {
  params: Promise<{ obraId: string }>;
}

export default function DocumentosObraPage({ params }: PageProps) {
  const resolvedParams = use(params);
  const obraId = resolvedParams.obraId;

  const obra = INITIAL_OBRAS.find(o => o.id === obraId) || INITIAL_OBRAS[0];

  const [planos, setPlanos] = useState<DocumentoPlano[]>(
    INITIAL_PLANOS.filter(p => p.obraId === obraId)
  );

  const [filtroTipo, setFiltroTipo] = useState<string>('todos');
  const [busqueda, setBusqueda] = useState('');
  const [modalSubirPlano, setModalSubirPlano] = useState(false);
  const [planoSeleccionadoHistorial, setPlanoSeleccionadoHistorial] = useState<DocumentoPlano | null>(null);

  // Form Subir Plano
  const [codigo, setCodigo] = useState('');
  const [nombre, setNombre] = useState('');
  const [tipo, setTipo] = useState<DocumentoPlano['tipo']>('arquitectura');
  const [version, setVersion] = useState('v1.0');
  const [notaCambio, setNotaCambio] = useState('');

  const planosFiltrados = planos.filter(p => {
    const coincideTipo = filtroTipo === 'todos' || p.tipo === filtroTipo;
    const coincideTexto = p.nombre.toLowerCase().includes(busqueda.toLowerCase()) || 
                          p.codigo.toLowerCase().includes(busqueda.toLowerCase());
    return coincideTipo && coincideTexto;
  });

  const handleSubirPlano = (e: React.FormEvent) => {
    e.preventDefault();
    const nuevoPlano: DocumentoPlano = {
      id: `doc-${Date.now()}`,
      obraId,
      codigo,
      nombre,
      tipo,
      versionActual: version,
      autor: 'Arq. Roberto Morales',
      fechaSubida: new Date().toISOString().split('T')[0],
      archivoUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
      historialVersiones: [
        {
          version,
          fecha: new Date().toISOString().split('T')[0],
          autor: 'Arq. Roberto Morales',
          notaCambio: notaCambio || 'Nueva versión cargada',
          archivoUrl: '#'
        }
      ]
    };

    setPlanos([nuevoPlano, ...planos]);
    setModalSubirPlano(false);
    setCodigo('');
    setNombre('');
    setNotaCambio('');
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col justify-between selection:bg-sky-500 selection:text-white">
      {/* Header Bar */}
      <header className="border-b border-slate-800 bg-slate-900 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <Link href={`/obra/${obraId}/dashboard`} className="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg">
              <ArrowLeft className="w-4 h-4" />
            </Link>
            <div>
              <h1 className="font-bold text-white text-base">Repositorio de Planos y Documentos</h1>
              <span className="text-xs text-slate-400 block">{obra.nombre} — Control de Versiones</span>
            </div>
          </div>

          <button
            onClick={() => setModalSubirPlano(true)}
            className="btn-primary text-xs px-3.5 py-2 rounded-xl font-bold flex items-center space-x-1.5 shadow-md"
          >
            <Upload className="w-4 h-4" />
            <span>Subir Nueva Versión de Plano</span>
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full space-y-6">
        {/* Filtros y Buscador */}
        <div className="flex flex-col sm:flex-row justify-between items-center gap-4 bg-slate-900/60 p-4 rounded-2xl border border-slate-800">
          <div className="relative w-full sm:w-80">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
            <input
              type="text"
              placeholder="Buscar por código (ej. ARQ-101) o nombre..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
              className="w-full pl-9 pr-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-xs text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
            />
          </div>

          {/* Selector de Especialidad */}
          <div className="flex items-center space-x-1 overflow-x-auto w-full sm:w-auto text-xs">
            {['todos', 'arquitectura', 'calculo', 'sanitario', 'electrico'].map((t) => (
              <button
                key={t}
                onClick={() => setFiltroTipo(t)}
                className={`px-3 py-1.5 rounded-lg capitalize font-medium transition-all ${
                  filtroTipo === t ? 'bg-sky-600 text-white font-bold' : 'text-slate-400 hover:text-white hover:bg-slate-800'
                }`}
              >
                {t}
              </button>
            ))}
          </div>
        </div>

        {/* Tabla de Documentos y Planos */}
        <div className="glass-panel rounded-2xl border border-slate-800 overflow-hidden shadow-2xl">
          <div className="p-4 bg-slate-900/80 border-b border-slate-800 flex items-center justify-between">
            <h3 className="text-sm font-bold text-white flex items-center space-x-2">
              <FileText className="w-4 h-4 text-blue-400" />
              <span>Planos de Especialidades ({planosFiltrados.length})</span>
            </h3>
            <span className="text-xs text-slate-400">Todos los planos cuentan con sello digital de vigencia</span>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse text-xs">
              <thead>
                <tr className="border-b border-slate-800 bg-slate-950/60 text-slate-400 font-medium">
                  <th className="p-3.5">Código</th>
                  <th className="p-3.5">Nombre del Plano</th>
                  <th className="p-3.5">Especialidad</th>
                  <th className="p-3.5">Versión Vigente</th>
                  <th className="p-3.5">Autor / Emisión</th>
                  <th className="p-3.5 text-right">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/60 text-slate-300">
                {planosFiltrados.map((plano) => (
                  <tr key={plano.id} className="hover:bg-slate-900/50 transition-colors">
                    <td className="p-3.5 font-mono font-bold text-sky-400">
                      {plano.codigo}
                    </td>
                    <td className="p-3.5 font-semibold text-white">
                      {plano.nombre}
                    </td>
                    <td className="p-3.5">
                      <span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-slate-800 text-slate-300 border border-slate-700">
                        {plano.tipo}
                      </span>
                    </td>
                    <td className="p-3.5">
                      <span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-emerald-950 text-emerald-300 border border-emerald-700/50">
                        {plano.versionActual}
                      </span>
                    </td>
                    <td className="p-3.5 text-slate-400">
                      <div>{plano.autor}</div>
                      <div className="text-[10px] text-slate-500">{plano.fechaSubida}</div>
                    </td>
                    <td className="p-3.5 text-right space-x-2">
                      <button
                        onClick={() => setPlanoSeleccionadoHistorial(plano)}
                        className="px-2.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-[11px] font-medium inline-flex items-center space-x-1 border border-slate-700"
                        title="Ver historial de versiones y notas de cambio"
                      >
                        <History className="w-3.5 h-3.5 text-amber-400" />
                        <span>Historial ({plano.historialVersiones.length})</span>
                      </button>

                      <a
                        href={plano.archivoUrl}
                        target="_blank"
                        rel="noreferrer"
                        className="px-2.5 py-1 bg-sky-950 hover:bg-sky-900 text-sky-300 rounded-lg text-[11px] font-medium inline-flex items-center space-x-1 border border-sky-800"
                      >
                        <Download className="w-3.5 h-3.5" />
                        <span>Descargar PDF</span>
                      </a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </main>

      {/* Modal Historial de Versiones */}
      {planoSeleccionadoHistorial && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="glass-panel max-w-lg w-full p-6 rounded-2xl border border-slate-800 shadow-2xl">
            <div className="flex justify-between items-start mb-4">
              <div>
                <span className="text-xs font-mono font-bold text-sky-400">{planoSeleccionadoHistorial.codigo}</span>
                <h3 className="text-base font-bold text-white">{planoSeleccionadoHistorial.nombre}</h3>
              </div>
              <button onClick={() => setPlanoSeleccionadoHistorial(null)} className="text-slate-400 hover:text-white text-sm">✕</button>
            </div>

            <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Trazabilidad de Versiones Anteriores:</h4>
            <div className="space-y-3 max-h-60 overflow-y-auto pr-1">
              {planoSeleccionadoHistorial.historialVersiones.map((v, idx) => (
                <div key={idx} className="p-3 bg-slate-900 rounded-xl border border-slate-800 text-xs">
                  <div className="flex justify-between font-bold text-white mb-1">
                    <span className="text-emerald-400 font-mono">Versión {v.version}</span>
                    <span className="text-slate-500 text-[10px]">{v.fecha}</span>
                  </div>
                  <p className="text-slate-300 text-[11px] mb-1">{v.notaCambio}</p>
                  <span className="text-[10px] text-slate-500">Por: {v.autor}</span>
                </div>
              ))}
            </div>

            <button
              onClick={() => setPlanoSeleccionadoHistorial(null)}
              className="w-full mt-5 py-2.5 bg-slate-800 text-slate-200 font-semibold rounded-xl text-xs"
            >
              Cerrar Historial
            </button>
          </div>
        </div>
      )}

      {/* Modal Subir Plano */}
      {modalSubirPlano && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="glass-panel max-w-md w-full p-6 rounded-2xl border border-slate-800 shadow-2xl">
            <h3 className="text-lg font-bold text-white mb-1">Subir / Actualizar Plano</h3>
            <p className="text-slate-400 text-xs mb-4">Ingresa el código oficial y la nota de modificación.</p>

            <form onSubmit={handleSubirPlano} className="space-y-3 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-slate-300 mb-1">Código Plano</label>
                  <input
                    type="text"
                    required
                    placeholder="ej. ARQ-102"
                    value={codigo}
                    onChange={(e) => setCodigo(e.target.value)}
                    className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white font-mono"
                  />
                </div>
                <div>
                  <label className="block text-slate-300 mb-1">Versión</label>
                  <input
                    type="text"
                    required
                    placeholder="ej. v1.1"
                    value={version}
                    onChange={(e) => setVersion(e.target.value)}
                    className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white font-mono"
                  />
                </div>
              </div>

              <div>
                <label className="block text-slate-300 mb-1">Nombre Descriptivo</label>
                <input
                  type="text"
                  required
                  placeholder="ej. Planta de Cubiertas y Bajadas de Agua"
                  value={nombre}
                  onChange={(e) => setNombre(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white"
                />
              </div>

              <div>
                <label className="block text-slate-300 mb-1">Especialidad</label>
                <select
                  value={tipo}
                  onChange={(e) => setTipo(e.target.value as any)}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white"
                >
                  <option value="arquitectura">Arquitectura</option>
                  <option value="calculo">Cálculo Estructural</option>
                  <option value="sanitario">Sanitario</option>
                  <option value="electrico">Eléctrico</option>
                  <option value="climatizacion">Climatización</option>
                </select>
              </div>

              <div>
                <label className="block text-slate-300 mb-1">Nota del Cambio / Modificación</label>
                <textarea
                  rows={2}
                  placeholder="Resumen de los cambios en esta versión..."
                  value={notaCambio}
                  onChange={(e) => setNotaCambio(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white"
                />
              </div>

              <div className="p-3 border border-dashed border-slate-700 rounded-xl text-center bg-slate-900/50">
                <Upload className="w-5 h-5 mx-auto text-sky-400 mb-1" />
                <span className="text-[11px] text-slate-400 block">Arrastra o selecciona el archivo PDF / DWG</span>
              </div>

              <div className="flex space-x-3 pt-2">
                <button
                  type="button"
                  onClick={() => setModalSubirPlano(false)}
                  className="w-1/2 py-2.5 bg-slate-800 text-slate-300 rounded-xl font-semibold"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  className="w-1/2 py-2.5 btn-primary rounded-xl font-semibold"
                >
                  Guardar Versión
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}