import React, { useMemo, useState } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { applyStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
import { NamiSegmentPickerItem } from './NamiSegmentPickerItem';
import { FocusScope, useFocusEnabled } from '../../context/FocusContext';
import { usePaywallContext } from '../../context/PaywallContext';
import { resolveComponentSmartText, withOverrides } from '../../utils/rendering';

interface Props {
  component: any;
  scaleFactor: number;
  onClose?: () => void;
  parentDirection?: string;
}

export const NamiSegmentPicker: React.FC<Props> = ({
  component,
  scaleFactor,
  onClose,
  parentDirection,
}) => {
  const focusEnabled = useFocusEnabled();
  const ctx = usePaywallContext();

  // NAM-1213 CTV: track whether any segment item currently holds remote focus so the
  // whole container can apply its focused visual treatment (focusedFillColor etc.).
  const [isContainerFocused, setIsContainerFocused] = useState(false);

  const containerStyle = useMemo(() => {
    const base = applyStyles(component, scaleFactor, false, parentDirection);
    // Container focused treatment: apply focusedFillColor/focusedBorder* with fallback
    // to non-focused equivalents (per design doc §2 property-fallback contract).
    if (focusEnabled && isContainerFocused) {
      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
    }
    return base;
  }, [component, scaleFactor, parentDirection, focusEnabled, isContainerFocused]);

  const direction = component.direction ?? 'horizontal';
  const parentFormId = component.formId ?? component.id ?? '';
  const segments = (component.components ?? []).map((segment: any) => {
    const smartTextSku = segment?.smartTextSku ?? segment?.sku;
    const withConditions = segment?.conditionAttributes?.length
      ? withOverrides(ctx, segment, smartTextSku)
      : segment;
    return resolveComponentSmartText(withConditions, ctx);
  });
  const spacing = parseSize(component.spacing, scaleFactor) ?? 0;

  const inner = (
    <View style={containerStyle}>
      <ScrollView
        horizontal={direction !== 'vertical'}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={[
          styles.scrollContent,
          direction === 'vertical' ? styles.vertical : styles.horizontal,
        ]}
      >
        {segments.map((segment: any, i: number) => (
          <View
            key={segment.id ?? segment.value ?? i}
            style={i === 0 ? null : { marginLeft: direction === 'horizontal' ? spacing : 0, marginTop: direction === 'vertical' ? spacing : 0 }}
          >
            <NamiSegmentPickerItem
              component={segment}
              scaleFactor={scaleFactor}
              onClose={onClose}
              parentDirection={direction}
              parentFormId={parentFormId}
              parentOnTap={component.onTap}
            />
          </View>
        ))}
      </ScrollView>
    </View>
  );

  // On television form factors, wrap in a FocusScope so we can detect when any child
  // segment item gains remote focus and apply the container's focused visual state.
  if (focusEnabled) {
    return (
      <FocusScope onFocusWithinChange={setIsContainerFocused}>
        {inner}
      </FocusScope>
    );
  }

  return inner;
};

const styles = StyleSheet.create({
  scrollContent: {
    alignItems: 'stretch',
    flexGrow: 1,
  },
  horizontal: { flexDirection: 'row' },
  vertical: { flexDirection: 'column' },
});