import { useMemo, useState } from 'react';
import { ModalAsignarPersona, MODAL_ASIGNAR_PERSONA_DEFAULT_VALUES } from '../ModalAsignarPersona/ModalAsignarPersona';
import { MODAL_ASIGNAR_PERSONA_DEFAULT_EMPRESA_OPTIONS, MODAL_ASIGNAR_PERSONA_DEFAULT_PERSONA_OPTIONS } from '../ModalAsignarPersona/modalAsignarPersonaDefaults';
import { ModalDetalleUnidad } from '../ModalDetalleUnidad/ModalDetalleUnidad';
import {
  ModalUnidadOrganizativa,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS,
  MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES,
} from '../ModalUnidadOrganizativa/ModalUnidadOrganizativa';
import { Organigrama } from './Organigrama';
import { ORGANIGRAMA_DEFAULT_TREE } from './organigramaDefaults';

function removeNodeById(node, targetId) {
  if (!node) return null;
  if (node.id === targetId) return null;
  return {
    ...node,
    children: (node.children ?? [])
      .map((child) => removeNodeById(child, targetId))
      .filter(Boolean),
  };
}

function flattenUnitOptions(node, acc = []) {
  if (!node) return acc;
  acc.push({ value: node.id, label: node.nombre });
  (node.children ?? []).forEach((child) => flattenUnitOptions(child, acc));
  return acc;
}

function mapUnitMiembros(unit) {
  const list = [];
  if (unit?.responsable?.nombre) {
    list.push({
      id: `${unit.id}-responsable`,
      nombre: unit.responsable.nombre,
      avatarSrc: unit.responsable.avatarSrc,
      esResponsable: true,
    });
  }
  (unit?.miembros ?? []).forEach((miembro, index) => {
    list.push({
      id: miembro.id ?? `${unit.id}-miembro-${index}`,
      nombre: miembro.nombre ?? `Miembro ${index + 1}`,
      avatarSrc: miembro.avatarSrc,
      rol: miembro.rol ?? 'Colaborador',
    });
  });
  return list;
}

const EMPTY_UNIDAD_VALUES = { ...MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_VALUES };
const EMPTY_ASIGNAR_VALUES = { ...MODAL_ASIGNAR_PERSONA_DEFAULT_VALUES };

/**
 * Demo interactiva para Storybook: conecta organigrama con modales de operaciones.
 */
export const OrganigramaOperacionesDemo = ({
  tree = ORGANIGRAMA_DEFAULT_TREE,
  height = 720,
  defaultZoom,
  zoom,
  onZoomChange,
}) => {
  const [treeData, setTreeData] = useState(tree);
  const [selectedUnit, setSelectedUnit] = useState(null);
  const [modalUnidadOpen, setModalUnidadOpen] = useState(false);
  const [modalUnidadMode, setModalUnidadMode] = useState('create');
  const [modalAsignarOpen, setModalAsignarOpen] = useState(false);
  const [modalDetalleOpen, setModalDetalleOpen] = useState(false);
  const [formUnidad, setFormUnidad] = useState(EMPTY_UNIDAD_VALUES);
  const [formAsignar, setFormAsignar] = useState(EMPTY_ASIGNAR_VALUES);

  const unidadOptions = useMemo(() => flattenUnitOptions(treeData), [treeData]);
  const nodoPadreOptions = useMemo(
    () => [{ value: '', label: 'Sin nodo padre (raíz)' }, ...unidadOptions],
    [unidadOptions],
  );

  const openCreateSubunit = (unit) => {
    setSelectedUnit(unit);
    setModalUnidadMode('create');
    setFormUnidad({
      ...EMPTY_UNIDAD_VALUES,
      empresaId: 'empresa-1',
      nodoPadreId: unit?.id ?? '',
      nombre: '',
      responsableId: '',
      descripcion: '',
    });
    setModalUnidadOpen(true);
  };

  const openEditUnit = (unit) => {
    setSelectedUnit(unit);
    setModalUnidadMode('edit');
    setFormUnidad({
      nombre: unit?.nombre ?? '',
      empresaId: 'empresa-1',
      nodoPadreId: '',
      responsableId: '',
      descripcion: unit?.descripcion ?? '',
    });
    setModalUnidadOpen(true);
    setModalDetalleOpen(false);
  };

  const openAssignPerson = (unit) => {
    setSelectedUnit(unit);
    setFormAsignar({
      ...EMPTY_ASIGNAR_VALUES,
      empresaId: 'empresa-1',
      unidadId: unit?.id ?? '',
      personaId: '',
      rol: '',
    });
    setModalAsignarOpen(true);
    setModalDetalleOpen(false);
  };

  const openDetalle = (unit) => {
    setSelectedUnit(unit);
    setModalDetalleOpen(true);
  };

  const deleteUnit = (unit) => {
    if (!unit?.id) return;
    setTreeData((prev) => {
      if (!prev || prev.id === unit.id) return prev;
      return removeNodeById(prev, unit.id) ?? prev;
    });
    setModalDetalleOpen(false);
    setSelectedUnit((current) => (current?.id === unit.id ? null : current));
    // eslint-disable-next-line no-console
    console.log('[Organigrama] eliminar unidad', unit);
  };

  const miembrosDetalle = mapUnitMiembros(selectedUnit);

  return (
    <>
      <Organigrama
        tree={treeData}
        height={height}
        defaultZoom={defaultZoom}
        zoom={zoom}
        onZoomChange={onZoomChange}
        onCreateSubunit={openCreateSubunit}
        onEditUnit={openEditUnit}
        onAssignPerson={openAssignPerson}
        onDeleteUnit={deleteUnit}
        onUnitClick={openDetalle}
        onAssignMembersClick={openAssignPerson}
      />

      <ModalUnidadOrganizativa
        isOpen={modalUnidadOpen}
        onClose={() => setModalUnidadOpen(false)}
        title={modalUnidadMode === 'edit' ? 'Editar unidad organizativa' : 'Nueva unidad organizativa'}
        submitButtonLabel={modalUnidadMode === 'edit' ? 'Guardar cambios' : 'Crear unidad'}
        values={formUnidad}
        onFieldChange={(field, value) => setFormUnidad((prev) => ({ ...prev, [field]: value }))}
        onSubmit={(payload) => {
          // eslint-disable-next-line no-console
          console.log(`[Organigrama] ${modalUnidadMode === 'edit' ? 'editar' : 'crear'} unidad`, {
            padre: selectedUnit,
            payload,
          });
          setModalUnidadOpen(false);
        }}
        empresaOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_EMPRESA_OPTIONS}
        nodoPadreOptions={nodoPadreOptions}
        responsableOptions={MODAL_UNIDAD_ORGANIZATIVA_DEFAULT_RESPONSABLE_OPTIONS}
      />

      <ModalAsignarPersona
        isOpen={modalAsignarOpen}
        onClose={() => setModalAsignarOpen(false)}
        values={formAsignar}
        onFieldChange={(field, value) => setFormAsignar((prev) => ({ ...prev, [field]: value }))}
        onSubmit={(payload) => {
          // eslint-disable-next-line no-console
          console.log('[Organigrama] asignar persona', { unidad: selectedUnit, payload });
          setModalAsignarOpen(false);
        }}
        empresaOptions={MODAL_ASIGNAR_PERSONA_DEFAULT_EMPRESA_OPTIONS}
        personaOptions={MODAL_ASIGNAR_PERSONA_DEFAULT_PERSONA_OPTIONS}
        unidadOptions={[{ value: '', label: 'Selecciona una unidad' }, ...unidadOptions]}
      />

      <ModalDetalleUnidad
        isOpen={modalDetalleOpen}
        onClose={() => setModalDetalleOpen(false)}
        unidad={selectedUnit}
        responsable={selectedUnit?.responsable}
        miembros={miembrosDetalle}
        detalle={{
          nodoPadreNombre: '—',
          descripcion: selectedUnit?.descripcion ?? 'Sin descripción',
        }}
        onDelete={deleteUnit}
        onAssignPerson={openAssignPerson}
        onEditUnit={openEditUnit}
      />
    </>
  );
};

export default OrganigramaOperacionesDemo;
