// app/components/Frontend/DynamicComponent.tsx
'use client';

import { memo, useMemo } from 'react';
import {
  PageComponent,
  ComponentType,
  ComponentPropsByType,
  ContainerComponentProps,
  migrateToColumns,
} from '@/lib/page-builder/types';
import { componentRegistry } from '@/lib/page-builder/component-registry';
import FrontendContainer from './Container';

// ── Helpers ───────────────────────────────────────────────────────────────────

function isContainer(comp: PageComponent): comp is PageComponent & { props: ContainerComponentProps } {
  return comp.type === 'Container';
}

function buildMaps(components: PageComponent[]) {
  const componentMap = new Map<string, PageComponent>();
  for (const comp of components) {
    componentMap.set(comp.id, comp);
  }
  return { componentMap };
}

// ── Recursive renderer ────────────────────────────────────────────────────────

const RenderComponent = memo(({
  component,
  componentMap,
}: {
  component: PageComponent;
  componentMap: Map<string, PageComponent>;
}) => {
  const RegistryComponent = componentRegistry[component.type]?.component;

  if (!RegistryComponent) {
    return (
      <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg my-4">
        <p className="text-yellow-800">Unknown component: {component.type}</p>
      </div>
    );
  }

  if (isContainer(component)) {
    // Resolve columns — handles new column model and legacy flat childComponentIds
    const columns = migrateToColumns(component.props);

    // One ReactNode per column slot
    const columnChildren = columns.map(col => {
      if (col.childIds.length === 0) return null;
      return (
        <>
          {col.childIds.map(id => {
            const child = componentMap.get(id);
            return child ? (
              <RenderComponent key={child.id} component={child} componentMap={componentMap} />
            ) : null;
          })}
        </>
      );
    });

    return <FrontendContainer props={component.props} columnChildren={columnChildren} />;
  }

  const Comp = RegistryComponent as React.ComponentType<ComponentPropsByType[ComponentType]>;
  return <Comp {...component.props} />;
});

RenderComponent.displayName = 'RenderComponent';

// ── Public component ──────────────────────────────────────────────────────────

interface DynamicComponentProps {
  component: PageComponent;
  allComponents: PageComponent[];
}

const DynamicComponent = memo(({ component, allComponents }: DynamicComponentProps) => {
  const { componentMap } = useMemo(() => buildMaps(allComponents), [allComponents]);
  return <RenderComponent component={component} componentMap={componentMap} />;
});

DynamicComponent.displayName = 'DynamicComponent';

export default DynamicComponent;