import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
import { AppIcon } from './app-icon';
import { AppLoadingSpinner } from './AppLoadingSpinner';

export function ComposeScreenHeader({
  title,
  actionLabel = 'Publicar',
  canAction,
  loading,
  onClose,
  onAction,
}: {
  title?: string;
  actionLabel?: string;
  canAction: boolean;
  loading?: boolean;
  onClose: () => void;
  onAction: () => void;
}) {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.header, { paddingTop: insets.top + spacing.xs }]}>
      <Pressable
        onPress={onClose}
        hitSlop={10}
        accessibilityRole="button"
        accessibilityLabel="Fechar"
        style={styles.closeBtn}
      >
        <AppIcon name="close" color={m3Colors.onSurface} size={18} />
      </Pressable>

      {title ? (
        <Text style={styles.title} numberOfLines={1}>
          {title}
        </Text>
      ) : (
        <View style={styles.titleSpacer} />
      )}

      <Pressable
        onPress={onAction}
        disabled={!canAction || loading}
        accessibilityRole="button"
        accessibilityLabel={actionLabel}
        style={({ pressed }) => [
          styles.publishPill,
          canAction && styles.publishPillActive,
          (!canAction || loading) && styles.publishPillDisabled,
          pressed && canAction && { opacity: 0.88 },
        ]}
      >
        {loading ? (
          <AppLoadingSpinner color={m3Colors.onPrimary} />
        ) : (
          <Text style={[styles.publishLabel, canAction && styles.publishLabelActive]}>{actionLabel}</Text>
        )}
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: spacing.md,
    paddingBottom: spacing.sm,
    gap: spacing.sm,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: m3Colors.outlineVariant,
    backgroundColor: m3Colors.surface,
  },
  closeBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    flex: 1,
    color: m3Colors.onSurface,
    ...m3Type.titleSmall,
    textAlign: 'center',
  },
  titleSpacer: {
    flex: 1,
  },
  publishPill: {
    minWidth: 88,
    height: 36,
    borderRadius: m3Shape.cornerFull,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: spacing.md,
    backgroundColor: m3Colors.surfaceContainerHigh,
  },
  publishPillActive: {
    backgroundColor: m3Colors.primary,
  },
  publishPillDisabled: {
    opacity: 0.45,
  },
  publishLabel: {
    color: m3Colors.onSurfaceVariant,
    fontFamily: fonts.semibold,
    fontSize: 14,
  },
  publishLabelActive: {
    color: m3Colors.onPrimary,
  },
});