'use client';

import React, { useState, use } from 'react';
import Link from 'next/link';
import { INITIAL_OBRAS, INITIAL_RDIS } from '@/lib/data/mockData';
import { RDI, RolType } from '@/types';
import { 
  HelpCircle, Plus, Search, Filter, ArrowLeft, CheckCircle2, 
  Clock, AlertTriangle, MessageSquare, Send, Check
} from 'lucide-react';

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

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

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

  const [rdis, setRdis] = useState<RDI[]>(
    INITIAL_RDIS.filter(r => r.obraId === obraId)
  );

  const [filtroEstado, setFiltroEstado] = useState<string>('todos');
  const [rdiSeleccionado, setRdiSeleccionado] = useState<RDI | null>(null);
  const [modalNuevoRDI, setModalNuevoRDI] = useState(false);
  const [textoRespuesta, setTextoRespuesta] = useState('');

  // Form Nuevo RDI
  const [asunto, setAsunto] = useState('');
  const [descripcion, setDescripcion] = useState('');
  const [paraRol, setParaRol] = useState<RolType>('arquitecto_admin');
  const [prioridad, setPrioridad] = useState<RDI['prioridad']>('alta');

  const rdisFiltrados = rdis.filter(r => 
    filtroEstado === 'todos' || r.estado === filtroEstado
  );

  const handleCrearRDI = (e: React.FormEvent) => {
    e.preventDefault();
    const count = rdis.length + 1;
    const nuevoRDI: RDI = {
      id: `rdi-${Date.now()}`,
      codigo: `RDI-0${count < 10 ? '0' + count : count}`,
      obraId,
      asunto,
      descripcion,
      deUsuarioId: 'user-const-1',
      deUsuarioNombre: 'Ing. Carlos Fuentes',
      deRol: 'constructor',
      paraRol,
      estado: 'pendiente',
      prioridad,
      fechaCreacion: new Date().toISOString().split('T')[0],
      fechaLimite: '2026-08-05'
    };

    setRdis([nuevoRDI, ...rdis]);
    setModalNuevoRDI(false);
    setAsunto('');
    setDescripcion('');
  };

  const handleResponderRDI = (e: React.FormEvent) => {
    e.preventDefault();
    if (!rdiSeleccionado || !textoRespuesta) return;

    const rdiActualizado: RDI = {
      ...rdiSeleccionado,
      estado: 'respondido',
      respuesta: {
        texto: textoRespuesta,
        respondidoPor: 'Arq. Oscar Silva (Arquitecto)',
        fechaRespuesta: new Date().toISOString().split('T')[0]
      }
    };

    setRdis(rdis.map(r => r.id === rdiSeleccionado.id ? rdiActualizado : r));
    setRdiSeleccionado(rdiActualizado);
    setTextoRespuesta('');
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col justify-between selection:bg-amber-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">Requerimientos de Información (RDIs)</h1>
              <span className="text-xs text-slate-400 block">{obra.nombre} — Trazabilidad Técnica</span>
            </div>
          </div>

          <button
            onClick={() => setModalNuevoRDI(true)}
            className="btn-primary text-xs px-3.5 py-2 rounded-xl font-bold flex items-center space-x-1.5 shadow-md"
          >
            <Plus className="w-4 h-4" />
            <span>Crear Requerimiento (RDI)</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 por Estado */}
        <div className="flex justify-between items-center bg-slate-900/60 p-4 rounded-2xl border border-slate-800">
          <div className="flex items-center space-x-2 text-xs">
            <span className="text-slate-400 font-medium">Filtrar Estado:</span>
            {['todos', 'pendiente', 'respondido', 'cerrado'].map((e) => (
              <button
                key={e}
                onClick={() => setFiltroEstado(e)}
                className={`px-3 py-1.5 rounded-lg capitalize font-medium transition-all ${
                  filtroEstado === e ? 'bg-amber-500 text-slate-950 font-bold' : 'text-slate-400 hover:text-white'
                }`}
              >
                {e}
              </button>
            ))}
          </div>
        </div>

        {/* Listado de RDIs */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-4">
            {rdisFiltrados.map((rdi) => (
              <div
                key={rdi.id}
                onClick={() => setRdiSeleccionado(rdi)}
                className={`glass-card p-5 rounded-2xl border transition-all cursor-pointer ${
                  rdiSeleccionado?.id === rdi.id ? 'border-amber-500 bg-slate-900' : 'border-slate-800 hover:border-slate-700'
                }`}
              >
                <div className="flex items-start justify-between mb-2">
                  <div className="flex items-center space-x-2">
                    <span className="text-xs font-mono font-bold text-amber-400 bg-amber-950/80 px-2 py-0.5 rounded border border-amber-800">
                      {rdi.codigo}
                    </span>
                    <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${
                      rdi.prioridad === 'alta' ? 'bg-red-950 text-red-300 border border-red-800' : 'bg-slate-800 text-slate-300'
                    }`}>
                      {rdi.prioridad.toUpperCase()}
                    </span>
                  </div>

                  <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${
                    rdi.estado === 'pendiente' ? 'bg-amber-950 text-amber-300 border border-amber-700/60' : 'bg-emerald-950 text-emerald-300'
                  }`}>
                    {rdi.estado}
                  </span>
                </div>

                <h3 className="text-base font-bold text-white mb-1.5">{rdi.asunto}</h3>
                <p className="text-slate-300 text-xs line-clamp-2 mb-3">{rdi.descripcion}</p>

                <div className="flex items-center justify-between text-[11px] text-slate-400 pt-3 border-t border-slate-800/80">
                  <div>De: <span className="text-slate-300 font-medium">{rdi.deUsuarioNombre}</span> ({rdi.deRol})</div>
                  <div>Dirigido a: <span className="text-amber-400 font-medium">{rdi.paraRol.toUpperCase()}</span></div>
                  <div>Límite: {rdi.fechaLimite}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Panel Detalle y Respuesta del RDI */}
          <div className="glass-panel p-6 rounded-2xl border border-slate-800 h-fit sticky top-24">
            {rdiSeleccionado ? (
              <div className="space-y-4 text-xs">
                <div className="flex justify-between items-start pb-3 border-b border-slate-800">
                  <div>
                    <span className="text-xs font-mono font-bold text-amber-400">{rdiSeleccionado.codigo}</span>
                    <h3 className="text-base font-bold text-white mt-1">{rdiSeleccionado.asunto}</h3>
                  </div>
                  <span className="px-2 py-0.5 bg-slate-800 text-slate-300 rounded font-semibold uppercase">
                    {rdiSeleccionado.estado}
                  </span>
                </div>

                <div>
                  <h4 className="text-slate-400 font-medium mb-1">Descripción del Requerimiento:</h4>
                  <p className="text-slate-200 p-3 bg-slate-900 rounded-xl border border-slate-800 leading-relaxed">
                    {rdiSeleccionado.descripcion}
                  </p>
                </div>

                {rdiSeleccionado.respuesta ? (
                  <div className="p-4 bg-emerald-950/40 border border-emerald-800/60 rounded-xl space-y-2">
                    <div className="flex items-center space-x-1.5 text-emerald-400 font-bold">
                      <CheckCircle2 className="w-4 h-4" />
                      <span>Respuesta Oficial del Arquitecto (Arq. Oscar Silva):</span>
                    </div>
                    <p className="text-slate-200 leading-relaxed">{rdiSeleccionado.respuesta.texto}</p>
                    <div className="text-[10px] text-slate-400 pt-1 border-t border-emerald-900/50">
                      Por: {rdiSeleccionado.respuesta.respondidoPor} • {rdiSeleccionado.respuesta.fechaRespuesta}
                    </div>
                  </div>
                ) : (
                  <form onSubmit={handleResponderRDI} className="space-y-3 pt-2">
                    <h4 className="text-amber-400 font-bold flex items-center space-x-1">
                      <MessageSquare className="w-4 h-4" />
                      <span>Responder este Requerimiento (RDI)</span>
                    </h4>
                    <textarea
                      required
                      rows={3}
                      placeholder="Escribe la aclaración técnica o instrucción oficial de Arquitectura..."
                      value={textoRespuesta}
                      onChange={(e) => setTextoRespuesta(e.target.value)}
                      className="w-full p-3 bg-slate-900 border border-slate-800 rounded-xl text-white text-xs focus:outline-none focus:ring-2 focus:ring-amber-500"
                    />
                    <button
                      type="submit"
                      className="w-full bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold py-2.5 rounded-xl text-xs flex items-center justify-center space-x-2"
                    >
                      <Send className="w-3.5 h-3.5" />
                      <span>Enviar Respuesta Oficial (Arq. Oscar Silva)</span>
                    </button>
                  </form>
                )}
              </div>
            ) : (
              <div className="text-center py-10 text-slate-500 text-xs">
                Selecciona un RDI del listado para ver sus detalles o responder.
              </div>
            )}
          </div>
        </div>
      </main>

      {/* Modal Nuevo RDI */}
      {modalNuevoRDI && (
        <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">Nuevo Requerimiento de Información (RDI)</h3>
            <p className="text-slate-400 text-xs mb-4">Formula un requerimiento de información técnico oficial para la obra.</p>

            <form onSubmit={handleCrearRDI} className="space-y-3 text-xs">
              <div>
                <label className="block text-slate-300 mb-1">Asunto / Título Resumido</label>
                <input
                  type="text"
                  required
                  placeholder="ej. Incompatibilidad de trazado eléctrico en shaft"
                  value={asunto}
                  onChange={(e) => setAsunto(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">Descripción Detallada del Requerimiento</label>
                <textarea
                  required
                  rows={3}
                  placeholder="Explica el requerimiento o aclaración en terreno..."
                  value={descripcion}
                  onChange={(e) => setDescripcion(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">Dirigido a Rol</label>
                  <select
                    value={paraRol}
                    onChange={(e) => setParaRol(e.target.value as RolType)}
                    className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white"
                  >
                    <option value="arquitecto_admin">Arquitecto (Arq. Oscar Silva)</option>
                    <option value="ito">ITO Inspector</option>
                    <option value="constructor">Constructor</option>
                  </select>
                </div>

                <div>
                  <label className="block text-slate-300 mb-1">Prioridad</label>
                  <select
                    value={prioridad}
                    onChange={(e) => setPrioridad(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="baja">Baja</option>
                    <option value="media">Media</option>
                    <option value="alta">Alta</option>
                    <option value="critica">Crítica</option>
                  </select>
                </div>
              </div>

              <div className="flex space-x-3 pt-3">
                <button
                  type="button"
                  onClick={() => setModalNuevoRDI(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"
                >
                  Crear RDI
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}