import type { ReactNode } from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
import { AppLoadingSpinner } from './AppLoadingSpinner';
import { StoryBackGlyph } from './story-glyphs';

export type StoryEditorTool = {
  id: string;
  label: string;
  icon: ReactNode;
};

export function StoryEditorChrome({
  children,
  tools,
  caption,
  onChangeCaption,
  onBack,
  onToolPress,
  onPublish,
  publishing,
  publishLabel = 'Compartilhar',
  footerLeft,
  accessory,
  showCaption = true,
  mediaBackgroundColor,
}: {
  children: ReactNode;
  tools: StoryEditorTool[];
  caption: string;
  onChangeCaption: (value: string) => void;
  onBack: () => void;
  onToolPress: (toolId: string) => void;
  onPublish: () => void;
  publishing?: boolean;
  publishLabel?: string;
  footerLeft?: ReactNode;
  accessory?: ReactNode;
  showCaption?: boolean;
  mediaBackgroundColor?: string;
}) {
  const insets = useSafeAreaInsets();

  return (
    <KeyboardAvoidingView
      style={[
        styles.root,
        mediaBackgroundColor ? { backgroundColor: mediaBackgroundColor } : null,
      ]}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <View
        style={[
          styles.mediaLayer,
          { backgroundColor: mediaBackgroundColor ?? m3Colors.surface },
        ]}
      >
        {children}
      </View>

      <View style={[styles.topBar, { paddingTop: insets.top + spacing.xs }]}>
        <Pressable
          onPress={onBack}
          accessibilityRole="button"
          accessibilityLabel="Voltar"
          style={styles.topBtn}
        >
          <StoryBackGlyph />
        </Pressable>
      </View>

      <View style={[styles.bottomChrome, { paddingBottom: insets.bottom + spacing.sm }]}>
        <View style={styles.toolRow}>
          {tools.map((tool) => (
            <Pressable
              key={tool.id}
              onPress={() => onToolPress(tool.id)}
              accessibilityRole="button"
              accessibilityLabel={tool.label}
              style={styles.toolItem}
            >
              <View style={styles.toolIcon}>{tool.icon}</View>
              <Text style={styles.toolLabel}>{tool.label}</Text>
            </Pressable>
          ))}
        </View>

        {accessory}

        {showCaption ? (
          <TextInput
            value={caption}
            onChangeText={onChangeCaption}
            placeholder="Adicione uma legenda..."
            placeholderTextColor={m3Colors.onSurfaceVariant}
            style={styles.captionInput}
            multiline
            maxLength={220}
          />
        ) : null}

        <View style={styles.footerRow}>
          {footerLeft ?? <View style={styles.footerSpacer} />}
          <Pressable
            onPress={onPublish}
            disabled={publishing}
            accessibilityRole="button"
            accessibilityLabel={publishLabel}
            style={({ pressed }) => [
              styles.publishBtn,
              publishing && styles.publishBtnDisabled,
              pressed && !publishing && { opacity: 0.9 },
            ]}
          >
            {publishing ? (
              <AppLoadingSpinner color={m3Colors.onPrimary} />
            ) : (
              <Text style={styles.publishLabel}>{publishLabel}</Text>
            )}
          </Pressable>
        </View>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: m3Colors.surface,
  },
  mediaLayer: {
    ...StyleSheet.absoluteFill,
  },
  topBar: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    paddingHorizontal: spacing.md,
    zIndex: 2,
  },
  topBtn: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: m3Colors.scrim,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bottomChrome: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: spacing.md,
    paddingTop: spacing.md,
    backgroundColor: m3Colors.scrim,
    gap: spacing.sm,
    zIndex: 2,
  },
  toolRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: spacing.xs,
  },
  toolItem: {
    flex: 1,
    alignItems: 'center',
    gap: spacing.xs,
  },
  toolIcon: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: m3Colors.surfaceContainerHigh,
    alignItems: 'center',
    justifyContent: 'center',
  },
  toolLabel: {
    color: m3Colors.onPrimary,
    fontFamily: fonts.medium,
    fontSize: 11,
    textAlign: 'center',
  },
  captionInput: {
    color: m3Colors.onPrimary,
    fontFamily: fonts.regular,
    fontSize: 15,
    minHeight: 40,
    maxHeight: 72,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm,
    borderRadius: m3Shape.cornerFull,
    backgroundColor: m3Colors.surfaceContainerHigh,
  },
  footerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
  },
  footerSpacer: {
    flex: 1,
  },
  publishBtn: {
    minWidth: 132,
    height: 44,
    borderRadius: m3Shape.cornerFull,
    backgroundColor: m3Colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: spacing.lg,
  },
  publishBtnDisabled: {
    opacity: 0.6,
  },
  publishLabel: {
    color: m3Colors.onPrimary,
    fontFamily: fonts.bold,
    fontSize: 15,
  },
});