import React from 'react';
import { View, Text, Pressable, ActivityIndicator, StyleSheet } from 'react-native';
import { useTheme } from '../theme/ThemeProvider';
import { textStyle, space, radius } from '../theme';
import { getDict } from '../lib/dictionary';

/** Loading. Centred, quiet, no skeleton — the fetch is usually fast. */
export function Loading() {
  const { palette } = useTheme();
  return (
    <View style={styles.center}>
      <ActivityIndicator color={palette.accent} />
    </View>
  );
}

export function ErrorState({ message, onRetry }: { message?: string; onRetry: () => void }) {
  const { palette, locale } = useTheme();
  const dict = getDict(locale);

  // Centred in both directions, so RTL needs no special handling here.
  return (
    <View style={styles.center}>
      <Text style={[textStyle('h1', locale), { color: palette.text, textAlign: 'center' }]}>
        {dict.errorTitle}
      </Text>
      {message ? (
        <Text
          style={[
            textStyle('bodySm', locale),
            { color: palette.text2, textAlign: 'center', marginTop: space.s2 },
          ]}
        >
          {message}
        </Text>
      ) : null}
      <Pressable
        onPress={onRetry}
        accessibilityRole="button"
        style={({ pressed }) => [
          styles.btn,
          { backgroundColor: palette.accent, opacity: pressed ? 0.85 : 1 },
        ]}
      >
        <Text style={[textStyle('card', locale), styles.btnText]}>{dict.retry}</Text>
      </Pressable>
    </View>
  );
}

/** An empty result that is not a failure. */
export function EmptyState({ title, body }: { title: string; body: string }) {
  const { palette, locale } = useTheme();

  return (
    <View
      style={[
        styles.empty,
        { backgroundColor: palette.surface, borderColor: palette.border },
      ]}
    >
      <Text style={[textStyle('h1', locale), { color: palette.text, textAlign: 'center' }]}>
        {title}
      </Text>
      <Text
        style={[
          textStyle('bodySm', locale),
          { color: palette.text2, textAlign: 'center', marginTop: space.s2 },
        ]}
      >
        {body}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: space.s6,
  },
  btn: {
    marginTop: space.s5,
    paddingVertical: space.s3,
    paddingHorizontal: space.s6,
    borderRadius: radius.chip,
  },
  btnText: {
    color: '#ffffff',
  },
  empty: {
    padding: space.s6,
    borderRadius: radius.card,
    borderWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
  },
});