import React from 'react';
import { Text, View } from 'react-native';
import type { SduiBlock } from '@proulr/sdui-contract';
import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
import { SduiLayoutDebugFrame } from '../sdui-layout-debug';
import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';

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

function NativeBlockShell({
  block,
  data,
  onAction,
  rendererKey,
  fallbackLabel,
}: SduiBlockRenderProps & {
  rendererKey:
    | 'renderChatThread'
    | 'renderSocialPostFeed'
    | 'renderThoughtFeed'
    | 'renderProfileView'
    | 'renderProfileSelf'
    | 'renderProfileSetup'
    | 'renderProfileOnboarding'
    | 'renderProfileReport'
    | 'renderAlbumGrid'
    | 'renderAlbumDetail'
    | 'renderNewPostComposer'
    | 'renderNewStoryComposer'
    | 'renderStoryViewersPanel'
    | 'renderPostComments'
    | 'renderSocialProfile'
    | 'renderSettingsHome'
    | 'renderSettingsPage'
    | 'renderChatGroupCreate'
    | 'renderChatGroupInfo'
    | 'renderChatGroupAddMembers'
    | 'renderChatGroupInvite'
    | 'renderDiscoverBrowseLocation'
    | 'renderRightNowFeed'
    | 'renderRightNowCompose';
  fallbackLabel: string;
}) {
  const hybrid = useSduiHybridRenderer();
  const renderer = hybrid[rendererKey];
  if (typeof renderer === 'function') {
    return (
      <SduiLayoutDebugFrame layer="native" extra={block.type} style={{ flex: 1, minHeight: 0 }}>
        {renderer({
          block,
          data,
          onAction,
          dataRef: readStringProp(block, 'data_ref'),
          conversationIdRef: readStringProp(block, 'conversation_id_ref'),
          peerIdRef: readStringProp(block, 'peer_id_ref'),
          peerNameRef: readStringProp(block, 'peer_name_ref'),
          handleRef: readStringProp(block, 'handle_ref'),
          postIdRef: readStringProp(block, 'post_id_ref'),
          albumIdRef: readStringProp(block, 'album_id_ref'),
          profileIdRef: readStringProp(block, 'profile_id_ref'),
        })}
      </SduiLayoutDebugFrame>
    );
  }

  return (
    <View style={{ padding: 16 }}>
      <Text>{fallbackLabel}</Text>
    </View>
  );
}

export function SduiChatThreadBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderChatThread" fallbackLabel="Conversa" />;
}

export function SduiSocialPostFeedBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderSocialPostFeed" fallbackLabel="Feed" />;
}

export function SduiThoughtFeedBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderThoughtFeed" fallbackLabel="Vibes" />;
}

export function SduiProfileViewBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderProfileView" fallbackLabel="Perfil" />;
}

export function SduiProfileSelfBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderProfileSelf" fallbackLabel="Meu perfil" />;
}

export function SduiProfileSetupBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderProfileSetup" fallbackLabel="Editar perfil" />;
}

export function SduiProfileOnboardingBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderProfileOnboarding" fallbackLabel="Onboarding" />;
}

export function SduiProfileReportBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderProfileReport" fallbackLabel="Denunciar" />;
}

export function SduiAlbumGridBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderAlbumGrid" fallbackLabel="Álbuns" />;
}

export function SduiAlbumDetailBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderAlbumDetail" fallbackLabel="Álbum" />;
}

export function SduiNewPostComposerBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderNewPostComposer" fallbackLabel="Nova publicação" />;
}

export function SduiNewStoryComposerBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderNewStoryComposer" fallbackLabel="Novo story" />;
}

export function SduiStoryViewersPanelBlock(props: SduiBlockRenderProps) {
  return (
    <NativeBlockShell {...props} rendererKey="renderStoryViewersPanel" fallbackLabel="Story viewers" />
  );
}

export function SduiPostCommentsBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderPostComments" fallbackLabel="Comentários" />;
}

export function SduiSocialProfileBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderSocialProfile" fallbackLabel="Perfil social" />;
}

export function SduiSettingsHomeBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderSettingsHome" fallbackLabel="Configurações" />;
}

export function SduiSettingsPageBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderSettingsPage" fallbackLabel="Configurações" />;
}

export function SduiChatGroupCreateBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderChatGroupCreate" fallbackLabel="Novo grupo" />;
}

export function SduiChatGroupInfoBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderChatGroupInfo" fallbackLabel="Grupo" />;
}

export function SduiChatGroupAddMembersBlock(props: SduiBlockRenderProps) {
  return (
    <NativeBlockShell
      {...props}
      rendererKey="renderChatGroupAddMembers"
      fallbackLabel="Adicionar membros"
    />
  );
}

export function SduiChatGroupInviteBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderChatGroupInvite" fallbackLabel="Convite" />;
}

export function SduiDiscoverBrowseLocationBlock(props: SduiBlockRenderProps) {
  return (
    <NativeBlockShell
      {...props}
      rendererKey="renderDiscoverBrowseLocation"
      fallbackLabel="Caçar"
    />
  );
}

export function SduiRightNowFeedBlock(props: SduiBlockRenderProps) {
  return <NativeBlockShell {...props} rendererKey="renderRightNowFeed" fallbackLabel="Right Now feed" />;
}

export function SduiRightNowComposeBlock(props: SduiBlockRenderProps) {
  return (
    <NativeBlockShell {...props} rendererKey="renderRightNowCompose" fallbackLabel="Right Now compose" />
  );
}