/**
 * Componente de celda editable para DocumentTable
 * Maneja valores simples y complejos (objetos/arrays)
 */

"use client";

import { useState, useEffect, useTransition, FC } from "react";
import { CellContext } from "@tanstack/react-table";
import { Documento } from "@/types/document";
import { LuList, LuPackage, LuFileText } from "react-icons/lu";
import DetailModal from "./DetailModal";
import {
  formatComplexValue,
  isComplexValue,
  isLongText,
  getPreview,
} from "./utils";

interface EditableCellProps {
  row: { index: number; original: Documento };
  column: { id: string };
  table: {
    options: {
      meta?: {
        updateData: (rowIndex: number, columnId: string, value: string) => void;
      };
    };
  };
  getValue: () => unknown;
}

const EditableCell: FC<EditableCellProps> = ({
  getValue,
  row,
  column,
  table,
}) => {
  const initialValue = getValue();
  const [value, setValue] = useState(formatComplexValue(initialValue));
  const [isPending, startTransition] = useTransition();
  const [showModal, setShowModal] = useState(false);

  const isComplexOrLong =
    isComplexValue(initialValue) || isLongText(initialValue);

  const onBlur = () => {
    const formattedInitial = formatComplexValue(initialValue);
    if (formattedInitial !== value) {
      startTransition(() => {
        table.options.meta?.updateData(row.index, column.id, value);
      });
    }
  };

  const handleSaveFromModal = (newValue: unknown) => {
    const stringValue = isComplexValue(newValue)
      ? JSON.stringify(newValue)
      : String(newValue);
    setValue(stringValue);
    startTransition(() => {
      table.options.meta?.updateData(row.index, column.id, stringValue);
    });
  };

  useEffect(() => {
    setValue(formatComplexValue(initialValue));
  }, [initialValue]);

  // Renderizado para valores complejos o largos - muestra botón con modal
  if (isComplexOrLong) {
    const isArray = Array.isArray(initialValue);
    const preview = getPreview(initialValue);

    return (
      <>
        <button
          onClick={() => setShowModal(true)}
          className="group flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-gray-50 to-gray-100 hover:from-gray-100 hover:to-gray-200 border border-gray-200 rounded-lg transition-all duration-200 w-full text-left"
        >
          {isComplexValue(initialValue) ? (
            isArray ? (
              <LuList className="h-4 w-4 text-blue-600" />
            ) : (
              <LuPackage className="h-4 w-4 text-blue-600" />
            )
          ) : (
            <LuFileText className="h-4 w-4 text-green-600" />
          )}
          <span className="text-sm font-medium text-gray-700 truncate flex-1">
            {isLongText(initialValue)
              ? String(initialValue).substring(0, 40) + "..."
              : preview}
          </span>
          <span className="text-xs text-gray-500 group-hover:text-gray-700 ml-auto flex-shrink-0">
            Editar →
          </span>
        </button>
        <DetailModal
          isOpen={showModal}
          onClose={() => setShowModal(false)}
          value={initialValue}
          columnName={column.id}
          onSave={handleSaveFromModal}
        />
      </>
    );
  }

  // Renderizado para valores simples - input directo
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={onBlur}
      disabled={isPending}
      className="w-full bg-transparent px-2 py-1 focus:bg-blue-50 focus:ring-2 focus:ring-blue-400 rounded-md outline-none transition-colors"
    />
  );
};

export default EditableCell;