import React, { type ReactNode } from 'react';
import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';

/** Desligado por padrão. Ative com EXPO_PUBLIC_SDUI_LAYOUT_DEBUG=true no .env */
export const SDUI_LAYOUT_DEBUG =
  typeof __DEV__ !== 'undefined' &&
  __DEV__ &&
  process.env.EXPO_PUBLIC_SDUI_LAYOUT_DEBUG === 'true';

export type SduiLayoutDebugLayer = 'renderer' | 'block' | 'column' | 'scroll' | 'native';

const LAYER_STYLES: Record<
  SduiLayoutDebugLayer,
  { borderColor: string; backgroundColor: string; label: string }
> = {
  renderer: {
    borderColor: '#34C759',
    backgroundColor: 'rgba(52,199,89,0.10)',
    label: 'SduiScreenRenderer',
  },
  block: {
    borderColor: '#007AFF',
    backgroundColor: 'rgba(0,122,255,0.08)',
    label: 'block root',
  },
  column: {
    borderColor: '#5856D6',
    backgroundColor: 'rgba(88,86,214,0.08)',
    label: 'Column',
  },
  scroll: {
    borderColor: '#32ADE6',
    backgroundColor: 'rgba(50,173,230,0.08)',
    label: 'Scroll',
  },
  native: {
    borderColor: '#AF52DE',
    backgroundColor: 'rgba(175,82,222,0.10)',
    label: 'NativeBlockShell',
  },
};

export function sduiDebugViewStyle(layer: SduiLayoutDebugLayer): ViewStyle {
  if (!SDUI_LAYOUT_DEBUG) return {};
  const layerStyle = LAYER_STYLES[layer];
  return {
    borderWidth: 2,
    borderColor: layerStyle.borderColor,
    backgroundColor: layerStyle.backgroundColor,
  };
}

export function SduiLayoutDebugLabel({
  layer,
  extra,
}: {
  layer: SduiLayoutDebugLayer;
  extra?: string;
}) {
  if (!SDUI_LAYOUT_DEBUG) return null;
  const layerStyle = LAYER_STYLES[layer];
  return (
    <View style={styles.labelHost} pointerEvents="none">
      <Text style={styles.labelText}>
        {layerStyle.label}
        {extra ? ` · ${extra}` : ''}
      </Text>
    </View>
  );
}

export function SduiLayoutDebugFrame({
  layer,
  extra,
  style,
  pointerEvents,
  children,
}: {
  layer: SduiLayoutDebugLayer;
  extra?: string;
  style?: StyleProp<ViewStyle>;
  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
  children: ReactNode;
}) {
  return (
    <View style={[sduiDebugViewStyle(layer), style]} pointerEvents={pointerEvents}>
      <SduiLayoutDebugLabel layer={layer} extra={extra} />
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  labelHost: {
    position: 'absolute',
    top: 2,
    left: 2,
    zIndex: 9999,
    backgroundColor: 'rgba(0,0,0,0.82)',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  labelText: {
    color: '#FFFFFF',
    fontSize: 10,
    fontWeight: '700',
  },
});