import { forwardRef } from 'react';
import {
  ActivityIndicator,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
  type TextInputProps,
} from 'react-native';

import { colors, radius, space, text } from '@/theme/tokens';

type FieldProps = TextInputProps & { label: string; error?: string };

export const Field = forwardRef<TextInput, FieldProps>(function Field(
  { label, error, style, ...props },
  ref,
) {
  return (
    <View style={s.field}>
      <Text style={s.label}>{label}</Text>
      <TextInput
        ref={ref}
        placeholderTextColor={colors.faint}
        style={[s.input, error ? s.inputError : null, style]}
        {...props}
      />
      {error ? <Text style={s.error}>{error}</Text> : null}
    </View>
  );
});

type ButtonProps = {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'ghost';
  busy?: boolean;
  disabled?: boolean;
};

export function Button({ title, onPress, variant = 'primary', busy, disabled }: ButtonProps) {
  const off = disabled || busy;
  return (
    <Pressable
      onPress={onPress}
      disabled={off}
      accessibilityRole="button"
      style={({ pressed }) => [
        s.btn,
        variant === 'primary' ? s.btnPrimary : s.btnGhost,
        pressed && !off ? s.btnPressed : null,
        off ? s.btnOff : null,
      ]}>
      {busy ? (
        <ActivityIndicator color={variant === 'primary' ? '#fff' : colors.txt} />
      ) : (
        <Text style={[s.btnText, variant === 'ghost' ? s.btnTextGhost : null]}>{title}</Text>
      )}
    </Pressable>
  );
}

/** Fehlermeldung aus einem fehlgeschlagenen Aufruf – nie stumm scheitern lassen. */
export function ErrorNote({ message }: { message: string }) {
  return (
    <View style={s.errBox}>
      <Text style={s.errText}>{message}</Text>
    </View>
  );
}

const s = StyleSheet.create({
  field: { gap: space.sm },
  label: { ...text.label, color: colors.mut },
  input: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radius.sm,
    paddingHorizontal: space.lg,
    paddingVertical: space.md,
    color: colors.txt,
    fontSize: 16,
  },
  inputError: { borderColor: colors.accent },
  error: { ...text.label, color: colors.accent },
  btn: {
    borderRadius: radius.pill,
    paddingVertical: space.lg,
    paddingHorizontal: space.xl,
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: 52,
  },
  btnPrimary: { backgroundColor: colors.accent },
  btnGhost: {
    backgroundColor: 'transparent',
    borderColor: colors.borderStrong,
    borderWidth: StyleSheet.hairlineWidth,
  },
  btnPressed: { opacity: 0.75 },
  btnOff: { opacity: 0.45 },
  btnText: { ...text.body, fontWeight: '600', color: '#fff', fontSize: 16 },
  btnTextGhost: { color: colors.txt },
  errBox: {
    backgroundColor: 'rgba(255,92,57,0.12)',
    borderColor: colors.accent,
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radius.sm,
    padding: space.lg,
  },
  errText: { ...text.body, color: colors.txt },
});
