/**
 * Modal para editar valores complejos en DocumentTable
 * Soporta objetos, arrays y texto largo
 */

"use client";

import { FC, useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { LuX, LuTrash2 } from "react-icons/lu";

interface DetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  value: unknown;
  columnName: string;
  onSave?: (newValue: unknown) => void;
}

const DetailModal: FC<DetailModalProps> = ({
  isOpen,
  onClose,
  value,
  columnName,
  onSave,
}) => {
  const [editableData, setEditableData] = useState<unknown>(null);

  useEffect(() => {
    if (isOpen) {
      setEditableData(JSON.parse(JSON.stringify(value ?? "")));
    }
  }, [isOpen, value]);

  if (!isOpen) return null;

  const handleSave = () => {
    onSave?.(editableData);
    onClose();
  };

  const handleItemChange = (index: number, key: string, newValue: string) => {
    setEditableData((prev: unknown) => {
      if (!Array.isArray(prev)) return prev;
      const newArray = [...prev];
      if (typeof newArray[index] === "object" && newArray[index] !== null) {
        newArray[index] = { ...(newArray[index] as object), [key]: newValue };
      }
      return newArray;
    });
  };

  const handleRemoveItem = (index: number) => {
    setEditableData((prev: unknown) => {
      if (!Array.isArray(prev)) return prev;
      return prev.filter((_, i) => i !== index);
    });
  };

  const renderEditableForm = () => {
    // Caso 1: Array de objetos
    if (
      Array.isArray(editableData) &&
      editableData.length > 0 &&
      typeof editableData[0] === "object"
    ) {
      return (
        <div className="space-y-4">
          {editableData.map((item, index) => (
            <div
              key={index}
              className="bg-white p-4 rounded-lg border border-gray-200 relative"
            >
              <div className="space-y-3">
                {Object.entries(item).map(([key, val]) => (
                  <div key={key}>
                    <label className="block text-xs font-medium text-gray-500 mb-1 capitalize">
                      {key.replace(/_/g, " ")}
                    </label>
                    <input
                      type="text"
                      value={String(val)}
                      onChange={(e) =>
                        handleItemChange(index, key, e.target.value)
                      }
                      className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                ))}
              </div>
              <button
                onClick={() => handleRemoveItem(index)}
                className="absolute top-2 right-2 p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-full"
                title="Eliminar este elemento"
              >
                <LuTrash2 size={16} />
              </button>
            </div>
          ))}
        </div>
      );
    }

    // Caso 2: Objeto simple
    if (
      typeof editableData === "object" &&
      editableData !== null &&
      !Array.isArray(editableData)
    ) {
      return (
        <div className="space-y-4">
          {Object.entries(editableData).map(([key, val]) => (
            <div key={key}>
              <label className="block text-sm font-medium text-gray-500 mb-1 capitalize">
                {key.replace(/_/g, " ")}
              </label>
              <input
                type="text"
                value={String(val)}
                onChange={(e) =>
                  setEditableData((prev: unknown) => {
                    if (
                      typeof prev !== "object" ||
                      prev === null ||
                      Array.isArray(prev)
                    )
                      return prev;
                    return {
                      ...prev,
                      [key]: e.target.value,
                    };
                  })
                }
                className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
              />
            </div>
          ))}
        </div>
      );
    }

    // Caso 3: Texto largo (textarea)
    return (
      <textarea
        value={String(editableData ?? "")}
        onChange={(e) => setEditableData(e.target.value)}
        className="w-full h-full min-h-[300px] p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 resize-none font-sans"
      />
    );
  };

  // El diálogo se invoca desde una celda <td>. Se monta en body para que la
  // estructura de la tabla no recorte ni reorganice el overlay.
  return createPortal(
    <div
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
      role="dialog"
      aria-modal="true"
      aria-label={`Editar ${columnName}`}
    >
      <div className="bg-gray-50 rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] flex flex-col">
        <div className="flex items-center justify-between p-6 border-b border-gray-200 bg-white rounded-t-xl">
          <h3 className="text-lg font-bold text-gray-900">
            Editar {columnName}
          </h3>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-lg"
          >
            <LuX className="h-5 w-5 text-gray-500" />
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-6">{renderEditableForm()}</div>
        <div className="p-4 bg-white border-t border-gray-200 flex gap-3 rounded-b-xl">
          <button
            onClick={onClose}
            className="flex-1 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 font-medium"
          >
            Cancelar
          </button>
          <button
            onClick={handleSave}
            className="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 font-medium"
          >
            Guardar Cambios
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default DetailModal;