import React from 'react';
import {
  Box,
  Text,
  Button,
  TextButton,
  Badge,
  Tooltip,
} from '@wix/design-system';
import { SetupWidgetStep } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { SetupStepIcon } from './SetupStepIcon';
import { st, classes } from './SetupWidget.st.css.js';

export interface SetupStepCardProps {
  step: SetupWidgetStep;
  /** The recommended next step — soft blue surface + primary CTA. */
  isPrimary: boolean;
  /** Inline content is shown below the header. */
  expanded: boolean;
  onActivate: () => void;
  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
}

/**
 * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
 * focused card gets a soft blue surface, an "In progress" badge sits under the
 * title, completed cards strike the title and drop the CTA. Story-only
 * experiment knobs (peach shell / colored bullet / hero art / full-screen
 * modal) are intentionally omitted — those are consumer/page concerns.
 */
export const SetupStepCard = ({
  step,
  isPrimary,
  expanded,
  onActivate,
  renderStepContent,
}: SetupStepCardProps) => {
  const { translate: t } = useWixPatternsContainer();

  const isInProgress = step.status === 'in-progress';
  const isCompleted = step.status === 'completed';
  const isDisabled = step.status === 'disabled';
  const isInline = step.expansionMode === 'inline';
  const isInlineExpanded = expanded && isInline;

  // The whole card toggles inline steps; navigate steps act via the CTA.
  const clickable = isInline && !isCompleted && !isDisabled;

  return (
    <div
      data-hook={`setup-step-${step.id}`}
      className={st(classes.card, { primary: isPrimary, clickable })}
      onClick={clickable ? onActivate : undefined}
      role={clickable ? 'button' : undefined}
      tabIndex={clickable ? 0 : undefined}
      onKeyDown={
        clickable
          ? (event: React.KeyboardEvent) => {
              if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                onActivate();
              }
            }
          : undefined
      }
    >
      <Box direction="vertical" gap="SP2" padding="SP4">
        <Box gap="SP2" verticalAlign="top">
          <SetupStepIcon status={step.status} />
          <Box direction="vertical" gap="SP1">
            <Text
              dataHook={`setup-step-title-${step.id}`}
              size="small"
              weight={isPrimary ? 'bold' : 'thin'}
              skin={isDisabled ? 'disabled' : 'standard'}
              secondary={isCompleted}
            >
              {isCompleted ? <del>{step.title}</del> : step.title}
            </Text>
            {isInProgress && (
              <Box>
                <Badge size="tiny" skin="urgent" type="transparent">
                  {t('cairo.setupWidget.step.inProgress')}
                </Badge>
              </Box>
            )}
          </Box>
        </Box>

        {!isCompleted && step.description && (
          <Text size="small" secondary>
            {step.description}
          </Text>
        )}

        {isInlineExpanded && (
          <Box dataHook={`setup-step-content-${step.id}`} direction="vertical">
            {/* Stop clicks/keys inside the consumer widget from bubbling to
                the card's toggle handler — otherwise interacting with the
                content (e.g. an input) would collapse the card. */}
            <div
              onClick={(event) => event.stopPropagation()}
              onKeyDown={(event) => event.stopPropagation()}
            >
              {renderStepContent?.(step)}
            </div>
          </Box>
        )}

        {!isCompleted &&
          !isInlineExpanded &&
          step.ctaLabel &&
          (() => {
            const ctaButton = (
              <Button
                dataHook={`setup-step-cta-${step.id}`}
                fullWidth
                size="medium"
                priority={isPrimary ? 'primary' : 'secondary'}
                disabled={isDisabled}
                onClick={(event: React.MouseEvent) => {
                  event.stopPropagation();
                  onActivate();
                }}
              >
                {step.ctaLabel}
              </Button>
            );

            // Disabled steps explain why the CTA is disabled (G5).
            return isDisabled ? (
              <Tooltip
                dataHook={`setup-step-disabled-tooltip-${step.id}`}
                content={
                  step.disabledTooltip ??
                  // Translation-key id stays `lockedTooltip` until the
                  // Translation Center key is renamed (TC follow-up to T2).
                  t('cairo.setupWidget.step.lockedTooltip')
                }
              >
                <Box>{ctaButton}</Box>
              </Tooltip>
            ) : (
              ctaButton
            );
          })()}

        {isCompleted && step.completedCtaLabel && !isDisabled && (
          <Box>
            <TextButton
              dataHook={`setup-step-cta-${step.id}`}
              size="small"
              onClick={(event: React.MouseEvent) => {
                event.stopPropagation();
                onActivate();
              }}
            >
              {step.completedCtaLabel}
            </TextButton>
          </Box>
        )}
      </Box>
    </div>
  );
};
