/*
 * 기본 버튼 — 48px 터치 타깃(design.md §1-3), radius 4(sm).
 * variant: primary(브랜드 블루) · ai(보라) · outline · success · danger · ghost.
 */
import React from 'react';
import {
  ActivityIndicator,
  Pressable,
  StyleSheet,
  Text,
  View,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import { colors, radius, touch, type } from '../theme';

type Variant = 'primary' | 'ai' | 'outline' | 'success' | 'danger' | 'ghost';

interface Props {
  label: string;
  onPress?: () => void;
  variant?: Variant;
  disabled?: boolean;
  loading?: boolean;
  style?: StyleProp<ViewStyle>;
  icon?: React.ReactNode;
}

const bg: Record<Variant, string> = {
  primary: colors.primary600,
  ai: colors.aiAccent,
  outline: 'transparent',
  success: colors.success,
  danger: colors.error,
  ghost: 'transparent',
};

const fg: Record<Variant, string> = {
  primary: colors.white,
  ai: colors.white,
  outline: colors.primary600,
  success: colors.white,
  danger: colors.white,
  ghost: colors.neutral700,
};

export function Button({
  label,
  onPress,
  variant = 'primary',
  disabled,
  loading,
  style,
  icon,
}: Props) {
  const isDisabled = disabled || loading;
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityState={{ disabled: !!isDisabled, busy: !!loading }}
      onPress={isDisabled ? undefined : onPress}
      style={({ pressed }) => [
        styles.base,
        {
          backgroundColor: bg[variant],
          borderColor: variant === 'outline' ? colors.primary600 : 'transparent',
          borderWidth: variant === 'outline' ? 1 : 0,
          opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1,
        },
        style,
      ]}
    >
      {loading ? (
        <ActivityIndicator color={fg[variant]} />
      ) : (
        <View style={styles.row}>
          {icon}
          <Text style={[styles.label, { color: fg[variant] }]}>{label}</Text>
        </View>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    minHeight: touch.min,
    borderRadius: radius.sm,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { fontSize: type.h3.fontSize, fontWeight: '600' },
});