'use client';

import React, { useState, use } from 'react';
import Link from 'next/link';
import { INITIAL_OBRAS, INITIAL_REUNIONES, INITIAL_USUARIOS } from '@/lib/data/mockData';
import { ReunionObra, AcuerdoReunion } from '@/types';
import { 
  Calendar, Plus, Search, ArrowLeft, CheckCircle2, FileText, 
  Users, Paperclip, Clock, MapPin, CheckSquare, Square, Download, Upload
} from 'lucide-react';

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

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

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

  const [reuniones, setReuniones] = useState<ReunionObra[]>(
    INITIAL_REUNIONES.filter(r => r.obraId === obraId)
  );

  const [reunionDetalle, setReunionDetalle] = useState<ReunionObra | null>(reuniones[0] || null);
  const [modalNuevaReunion, setModalNuevaReunion] = useState(false);

  // Form Nueva Reunión
  const [titulo, setTitulo] = useState('');
  const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
  const [hora, setHora] = useState('10:00 AM');
  const [lugar, setLugar] = useState('Sala de Obra / Presencial');
  const [tipo, setTipo] = useState<ReunionObra['tipo']>('coordinacion');
  const [agenda, setAgenda] = useState('');
  const [resumenTexto, setResumenTexto] = useState('');

  const handleCrearReunion = (e: React.FormEvent) => {
    e.preventDefault();
    const nuevaReunion: ReunionObra = {
      id: `reu-${Date.now()}`,
      obraId,
      titulo,
      fecha,
      hora,
      lugar,
      tipo,
      agenda,
      asistentes: INITIAL_USUARIOS.filter(u => u.obraId === obraId).map(u => ({
        usuarioId: u.id,
        nombre: u.nombre,
        rol: u.rol,
        asistio: true
      })),
      invitadosExternos: [
        { nombre: 'Contratista Eléctrico', cargo: 'Jefe de Instalaciones' }
      ],
      resumenTexto,
      actaArchivoUrl: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
      tipoArchivoActa: 'docx',
      acuerdos: [],
      creadoPor: 'user-admin',
      fechaCreacion: new Date().toISOString().split('T')[0]
    };

    setReuniones([nuevaReunion, ...reuniones]);
    setReunionDetalle(nuevaReunion);
    setModalNuevaReunion(false);
    setTitulo('');
    setAgenda('');
  };

  const toggleAcuerdo = (reunionId: string, acuerdoId: string) => {
    setReuniones(reuniones.map(r => {
      if (r.id === reunionId) {
        const acuerdosActualizados = r.acuerdos.map(a => 
          a.id === acuerdoId ? { ...a, completado: !a.completado } : a
        );
        const rActualizada = { ...r, acuerdos: acuerdosActualizados };
        if (reunionDetalle?.id === reunionId) setReunionDetalle(rActualizada);
        return rActualizada;
      }
      return r;
    }));
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col justify-between selection:bg-emerald-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">Reuniones de Obra y Actas</h1>
              <span className="text-xs text-slate-400 block">{obra.nombre} — Acuerdos y Asistencia</span>
            </div>
          </div>

          <button
            onClick={() => setModalNuevaReunion(true)}
            className="bg-emerald-600 hover:bg-emerald-500 text-white text-xs px-3.5 py-2 rounded-xl font-bold flex items-center space-x-1.5 shadow-md transition-all"
          >
            <Plus className="w-4 h-4" />
            <span>Agendar Nueva Reunión</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">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Listado Cronológico de Reuniones */}
          <div className="space-y-4">
            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Historial de Reuniones</h3>
            {reuniones.map((r) => (
              <div
                key={r.id}
                onClick={() => setReunionDetalle(r)}
                className={`glass-card p-5 rounded-2xl border transition-all cursor-pointer ${
                  reunionDetalle?.id === r.id ? 'border-emerald-500 bg-slate-900' : 'border-slate-800 hover:border-slate-700'
                }`}
              >
                <div className="flex items-center justify-between text-xs mb-2">
                  <span className="px-2 py-0.5 rounded bg-emerald-950 text-emerald-400 font-bold uppercase text-[10px] border border-emerald-800">
                    {r.tipo}
                  </span>
                  <span className="text-slate-400 font-mono text-[11px]">{r.fecha} • {r.hora}</span>
                </div>

                <h4 className="text-base font-bold text-white mb-2">{r.titulo}</h4>

                <div className="flex items-center space-x-4 text-xs text-slate-400">
                  <span className="flex items-center space-x-1">
                    <Users className="w-3.5 h-3.5 text-sky-400" />
                    <span>{r.asistentes.length} asistentes</span>
                  </span>
                  <span className="flex items-center space-x-1">
                    <CheckSquare className="w-3.5 h-3.5 text-amber-400" />
                    <span>{r.acuerdos.length} acuerdos</span>
                  </span>
                </div>
              </div>
            ))}
          </div>

          {/* Detalle Completo de Acta y Acuerdos */}
          <div className="glass-panel lg:col-span-2 p-6 rounded-2xl border border-slate-800 h-fit">
            {reunionDetalle ? (
              <div className="space-y-6 text-xs">
                {/* Cabecera de la Reunión */}
                <div className="pb-4 border-b border-slate-800 flex justify-between items-start">
                  <div>
                    <span className="px-2 py-0.5 rounded bg-emerald-950 text-emerald-400 font-bold uppercase text-[10px] border border-emerald-800 inline-block mb-1">
                      {reunionDetalle.tipo}
                    </span>
                    <h2 className="text-xl font-bold text-white">{reunionDetalle.titulo}</h2>
                    <div className="flex items-center space-x-4 text-slate-400 text-xs mt-1">
                      <span className="flex items-center space-x-1">
                        <Calendar className="w-3.5 h-3.5 text-emerald-400" />
                        <span>{reunionDetalle.fecha} ({reunionDetalle.hora})</span>
                      </span>
                      <span className="flex items-center space-x-1">
                        <MapPin className="w-3.5 h-3.5 text-sky-400" />
                        <span>{reunionDetalle.lugar}</span>
                      </span>
                    </div>
                  </div>

                  {reunionDetalle.actaArchivoUrl && (
                    <a
                      href={reunionDetalle.actaArchivoUrl}
                      target="_blank"
                      rel="noreferrer"
                      className="px-3 py-2 bg-emerald-950 hover:bg-emerald-900 text-emerald-300 rounded-xl font-bold border border-emerald-800 flex items-center space-x-1.5 transition-colors"
                    >
                      <Download className="w-4 h-4" />
                      <span>Descargar Acta ({reunionDetalle.tipoArchivoActa?.toUpperCase()})</span>
                    </a>
                  )}
                </div>

                {/* Agenda y Resumen */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="p-4 bg-slate-900/80 rounded-xl border border-slate-800">
                    <h4 className="font-bold text-white mb-2 flex items-center space-x-1.5">
                      <FileText className="w-4 h-4 text-sky-400" />
                      <span>Agenda de la Reunión</span>
                    </h4>
                    <p className="text-slate-300 whitespace-pre-line leading-relaxed">{reunionDetalle.agenda}</p>
                  </div>

                  <div className="p-4 bg-slate-900/80 rounded-xl border border-slate-800">
                    <h4 className="font-bold text-white mb-2 flex items-center space-x-1.5">
                      <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                      <span>Resumen de Acuerdos Principales</span>
                    </h4>
                    <p className="text-slate-300 leading-relaxed">{reunionDetalle.resumenTexto || 'Sin resumen registrado.'}</p>
                  </div>
                </div>

                {/* Asistencia de Usuarios e Invitados Externos */}
                <div>
                  <h4 className="font-bold text-white mb-3 flex items-center space-x-1.5">
                    <Users className="w-4 h-4 text-sky-400" />
                    <span>Control de Asistencia ({reunionDetalle.asistentes.length + reunionDetalle.invitadosExternos.length} personas)</span>
                  </h4>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {reunionDetalle.asistentes.map((a, idx) => (
                      <div key={idx} className="p-2.5 bg-slate-900 rounded-xl border border-slate-800/80 flex items-center justify-between">
                        <div>
                          <span className="font-semibold text-white block">{a.nombre}</span>
                          <span className="text-[10px] text-slate-400 uppercase font-mono">{a.rol}</span>
                        </div>
                        <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${a.asistio ? 'bg-emerald-950 text-emerald-300' : 'bg-red-950 text-red-300'}`}>
                          {a.asistio ? 'Asistió' : 'Ausente'}
                        </span>
                      </div>
                    ))}

                    {reunionDetalle.invitadosExternos.map((ext, idx) => (
                      <div key={idx} className="p-2.5 bg-slate-900/60 rounded-xl border border-slate-800/60 flex items-center justify-between">
                        <div>
                          <span className="font-semibold text-slate-300 block">{ext.nombre} (Invitado)</span>
                          <span className="text-[10px] text-slate-500">{ext.cargo}</span>
                        </div>
                        <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-slate-800 text-slate-400">
                          Sin Cuenta
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Lista de Acuerdos y Compromisos */}
                <div>
                  <h4 className="font-bold text-white mb-3 flex items-center space-x-1.5">
                    <CheckSquare className="w-4 h-4 text-amber-400" />
                    <span>Acuerdos y Compromisos Asignados</span>
                  </h4>

                  <div className="space-y-2">
                    {reunionDetalle.acuerdos.map((acuerdo) => (
                      <div
                        key={acuerdo.id}
                        onClick={() => toggleAcuerdo(reunionDetalle.id, acuerdo.id)}
                        className={`p-3.5 rounded-xl border transition-all cursor-pointer flex items-start space-x-3 ${
                          acuerdo.completado ? 'bg-slate-900/40 border-slate-800/50 opacity-60' : 'bg-slate-900 border-slate-800'
                        }`}
                      >
                        <button className="mt-0.5 text-amber-400">
                          {acuerdo.completado ? <CheckSquare className="w-4 h-4 text-emerald-400" /> : <Square className="w-4 h-4 text-slate-600" />}
                        </button>
                        <div className="flex-1">
                          <span className={`text-xs text-white block font-medium ${acuerdo.completado ? 'line-through text-slate-400' : ''}`}>
                            {acuerdo.descripcion}
                          </span>
                          <div className="flex items-center space-x-3 text-[10px] text-slate-400 mt-1">
                            <span>Responsable: <strong className="text-slate-300">{acuerdo.responsableNombre}</strong></span>
                            <span>Compromiso: <strong className="text-amber-400">{acuerdo.fechaCompromiso}</strong></span>
                            {acuerdo.rfiVinculadoId && (
                              <span className="text-sky-400 font-mono font-bold">VINCULADO A RFI</span>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ) : (
              <div className="text-center py-12 text-slate-500 text-xs">
                Selecciona una reunión para revisar el acta.
              </div>
            )}
          </div>
        </div>
      </main>

      {/* Modal Agendar Nueva Reunión */}
      {modalNuevaReunion && (
        <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">Agendar Reunión de Obra</h3>
            <p className="text-slate-400 text-xs mb-4">Se notificará por correo a todos los asistentes seleccionados.</p>

            <form onSubmit={handleCrearReunion} className="space-y-3 text-xs">
              <div>
                <label className="block text-slate-300 mb-1">Título de la Reunión</label>
                <input
                  type="text"
                  required
                  placeholder="ej. Reunión de Coordinación Estructural N° 19"
                  value={titulo}
                  onChange={(e) => setTitulo(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-slate-300 mb-1">Fecha</label>
                  <input
                    type="date"
                    required
                    value={fecha}
                    onChange={(e) => setFecha(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">Hora</label>
                  <input
                    type="text"
                    required
                    value={hora}
                    onChange={(e) => setHora(e.target.value)}
                    className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white"
                  />
                </div>
              </div>

              <div>
                <label className="block text-slate-300 mb-1">Tabla de Temas (Agenda)</label>
                <textarea
                  rows={2}
                  placeholder="1. Revisión de hormigonados..."
                  value={agenda}
                  onChange={(e) => setAgenda(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-emerald-400 mb-1" />
                <span className="text-[11px] text-slate-400 block">Subir Acta (.docx o Fotos firmadas)</span>
              </div>

              <div className="flex space-x-3 pt-3">
                <button
                  type="button"
                  onClick={() => setModalNuevaReunion(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 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl font-semibold"
                >
                  Agendar y Notificar
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}