'use client';

import { createElement, useEffect, useMemo, useSyncExternalStore, type ComponentType } from 'react';
import {
  FunnelProvider,
  FunnelRuntimeConfigBoundary,
  PrimaryButton,
  isPreviewFrameRuntime,
  runtimePublicConfig,
  scheduleNextStepImagePreload,
  usePreviewDefinitionOverrideRevision,
  usePreviewStepLocalizedContent,
} from '@funnelsgrove/runtime';
import { FunnelEditorPanel, FunnelEditorPanelStyles } from './FunnelEditorPanel';
import { runtimeContent } from '@/steps/content/runtime.content';
import { getStepContentLocale } from '@/runtime/step-content-context';
import { funnelManifest } from '@/config/funnel.manifest';
import type { FunnelStepId } from '@/runtime/funnel-runtime';
import { useFunnelFlowController } from '@/runtime/use-funnel-flow-controller';

type FunnelFlowProps = {
  initialStepId?: FunnelStepId;
  lockToInitialStep?: boolean;
  isPreviewFrame?: boolean;
  isPreviewThumbnail?: boolean;
};

function RuntimeConfigLoading() {
  const content = usePreviewStepLocalizedContent('runtime', runtimeContent, getStepContentLocale({}));
  return (
    <section className="runtime-config-loading" role="status" aria-label={content.loadingLabel} aria-busy="true">
      <span className="runtime-config-loading__progress" />
    </section>
  );
}

function RuntimeConfigStatus() {
  const content = usePreviewStepLocalizedContent('runtime', runtimeContent, getStepContentLocale({}));
  return (
    <section className="runtime-config-status" role="alert" aria-live="polite">
      <div className="runtime-config-status__content">
        <h1>{content.unavailableTitle}</h1>
        <p>{content.unavailableDescription}</p>
        <button type="button" onClick={() => window.location.reload()}>
          {content.retryLabel}
        </button>
      </div>
    </section>
  );
}

export function FunnelFlow({
  initialStepId,
  lockToInitialStep,
  isPreviewFrame,
  isPreviewThumbnail,
}: FunnelFlowProps = {}) {
  const isPreviewRuntime = useMemo(() => {
    if (typeof isPreviewFrame === 'boolean') {
      return isPreviewFrame;
    }

    return isPreviewFrameRuntime();
  }, [isPreviewFrame]);
  const previewFrameMounted = useSyncExternalStore(
    () => () => undefined,
    () => isPreviewRuntime,
    () => false,
  );
  return (
    <FunnelRuntimeConfigBoundary
      funnelId={runtimePublicConfig.funnelId}
      funnelVersionId={runtimePublicConfig.funnelVersionId}
      loadingFallback={<RuntimeConfigLoading />}
      errorFallback={<RuntimeConfigStatus />}
    >
      <FunnelFlowRuntime
        initialStepId={initialStepId}
        lockToInitialStep={lockToInitialStep}
        previewFrameMounted={previewFrameMounted}
        isPreviewThumbnail={isPreviewThumbnail}
      />
    </FunnelRuntimeConfigBoundary>
  );
}

function FunnelFlowRuntime({
  initialStepId,
  lockToInitialStep,
  previewFrameMounted,
  isPreviewThumbnail,
}: FunnelFlowProps & {
  previewFrameMounted: boolean;
}) {
  const previewDefinitionRevision = usePreviewDefinitionOverrideRevision();
  const content = usePreviewStepLocalizedContent('runtime', runtimeContent, getStepContentLocale({}));
  const controller = useFunnelFlowController({
    initialStepId,
    lockToInitialStep,
  });

  useEffect(
    () => scheduleNextStepImagePreload(funnelManifest, controller.activeStepId),
    [controller.activeStepId],
  );

  if (!controller.activeStepComponent || !controller.activeStepMeta || !controller.renderedStepMeta) {
    return null;
  }

  const ActiveStep = controller.activeStepComponent as ComponentType<Record<string, never>>;

  return (
    <FunnelProvider value={controller.contextValue}>
      <section
        className="funnel-shell"
        suppressHydrationWarning
        data-preview-frame={previewFrameMounted ? 'true' : undefined}
        data-preview-thumbnail={isPreviewThumbnail ? 'true' : undefined}
        data-step-kind={controller.renderedStepMeta.kind}
      >
        <div className="funnel-content">
          <div
            className="step-stage"
            data-step-id={controller.activeStepId}
            data-render-step-id={controller.renderedStepId}
            data-figma-node-id={controller.renderedStepMeta.figmaNodeId}
            data-render-suspended={controller.renderSuspended ? 'true' : undefined}
          >
            {controller.renderSuspended ? (
              <div
                className="step-stage-suspended"
                aria-busy="true"
                aria-live="polite"
                style={{ minHeight: '100vh' }}
              />
            ) : (
              <div
                key={`${controller.activeStepId}:${controller.renderedStepId}:${previewDefinitionRevision}`}
                className="step-stage-transition"
              >
                {createElement(ActiveStep)}
              </div>
            )}
          </div>

          {controller.showShellContinue && !controller.renderSuspended ? (
            <footer className="action-bar" key={`action-bar-${controller.activeStepId}`}>
              <PrimaryButton
                onClick={controller.handleContinue}
                className={controller.buttonVariant === 'muted' ? 'is-muted' : undefined}
              >
                {controller.activeStepMeta.actionBar?.buttonText ? controller.buttonText : content.continueLabel}
              </PrimaryButton>
            </footer>
          ) : null}
        </div>

        <FunnelEditorPanel
          editorModeEnabled={controller.editorModeEnabled}
          editorPanelExpanded={controller.editorPanelExpanded}
          experimentAssignmentForEditor={controller.experimentAssignmentForEditor}
          funnelExperiments={controller.funnelExperiments}
          onSelectVariant={controller.setEditorVariantSelection}
          onToggleExpanded={() => {
            controller.setEditorPanelExpanded((currentValue) => !currentValue);
          }}
        />
      </section>

      <style>{FunnelEditorPanelStyles}</style>
    </FunnelProvider>
  );
}