// PLAN_STEP_PLACEHOLDER_ID:subscription-started
'use client';

import {
  SubscriptionHandoffScreen,
  usePreviewStepLocalizedContent,
  useFunnel,
  type FunnelStepMeta,
} from '@funnelsgrove/runtime';
import { getStepContentLocale } from '@/runtime/step-content-context';
import {
  returningSubscriberContent,
  subscriptionStartedContent,
  type SubscriptionStartedLocaleContent,
} from '@/steps/content/subscription-started.content';

export const stepSubscriptionStartedId = 'subscription-started';

export const stepSubscriptionStarted: FunnelStepMeta = {
  id: stepSubscriptionStartedId,
  name: 'subscription-started',
  type: 'purchase_completed',
  kind: 'subscription-handoff',
  figmaNodeId: 'final-step-deep-link',
  title: 'Subscription Started',
  description: 'Post-checkout and returning-subscriber app handoff step.',
  actionBar: {
    hidden: true,
  },
};

export function StepSubscriptionStarted() {
  const { attributes, isReturningSubscriber } = useFunnel();
  const content = usePreviewStepLocalizedContent<SubscriptionStartedLocaleContent>(
    stepSubscriptionStartedId,
    isReturningSubscriber ? returningSubscriberContent : subscriptionStartedContent,
    getStepContentLocale(attributes),
  );

  return (
    <SubscriptionHandoffScreen
      stepId={stepSubscriptionStartedId}
      completionMode='funnel'
      content={content}
      nodeId='final-step-deep-link'
    />
  );
}