import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { SduiBlock } from '@proulr/sdui-contract';
import { resolveDataRefString } from '../lib/resolve-data-ref';
import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';

function readStringProp(block: SduiBlock, key: string): string | undefined {
  const value = block.props[key];
  return typeof value === 'string' ? value : undefined;
}

export function SduiStoryRailBlock({ block }: SduiBlockRenderProps) {
  const hybrid = useSduiHybridRenderer();
  const surface = readStringProp(block, 'surface') === 'vibes' ? 'vibes' : 'discover';

  if (hybrid.renderStoryRail) {
    return <>{hybrid.renderStoryRail({ surface })}</>;
  }

  return (
    <View style={styles.placeholder}>
      <Text style={styles.placeholderText}>StoryRail ({surface})</Text>
    </View>
  );
}

export function SduiProfileCompletionBannerBlock({ block, data, onAction }: SduiBlockRenderProps) {
  const hybrid = useSduiHybridRenderer();
  const percentRef = readStringProp(block, 'percent_ref') ?? 'profile_completion_percent';
  const percent = Number(resolveDataRefString(data, percentRef) || '0');
  const dismissActionId = readStringProp(block, 'dismiss_action_id');
  const completeActionId = readStringProp(block, 'complete_action_id');

  if (hybrid.renderProfileCompletionBanner) {
    return (
      <>
        {hybrid.renderProfileCompletionBanner({
          percent,
          onDismiss: () => dismissActionId && onAction(dismissActionId),
          onComplete: () => completeActionId && onAction(completeActionId),
        })}
      </>
    );
  }

  if (percent <= 0) return null;

  return (
    <View style={styles.placeholder}>
      <Text style={styles.placeholderText}>Complete seu perfil ({percent}%)</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  placeholder: {
    padding: 12,
  },
  placeholderText: {
    color: '#A3A3A3',
    fontSize: 13,
  },
});