import React from 'react';
import {
  TouchableOpacity,
  Text,
  ActivityIndicator,
  StyleSheet,
  View,
} from 'react-native';
import { useAuth } from '../hooks/useAuth';
import { useDubsTheme } from './theme';

export interface ConnectWalletButtonProps {
  /** Button label. Defaults to "Connect Wallet" */
  label?: string;
  /** Override accent/background color */
  accentColor?: string;
  /** Override text color. Defaults to #000 */
  textColor?: string;
  /** Override border radius */
  borderRadius?: number;
  /** Override padding vertical */
  paddingVertical?: number;
  /** Override font size */
  fontSize?: number;
  /** Full width. Defaults to true */
  fullWidth?: boolean;
  /** Called after authenticate() is triggered (not after it completes) */
  onPress?: () => void;
}

/**
 * ConnectWalletButton
 *
 * A minimal, customisable button that fires useAuth().authenticate().
 * Use this when you want to own the connect-wallet screen UI (e.g. inside
 * your own onboarding) but still hand off the wallet picker, signing, and
 * registration flow to the SDK.
 *
 * The SDK will handle everything after this tap:
 *   wallet picker → sign message → (registration/avatar if new user) → authenticated
 *
 * Example:
 *   <ConnectWalletButton
 *     label="Let's go"
 *     accentColor="#22C55E"
 *     textColor="#000"
 *   />
 */
export function ConnectWalletButton({
  label = 'Connect Wallet',
  accentColor,
  textColor = '#000000',
  borderRadius = 16,
  paddingVertical = 16,
  fontSize = 17,
  fullWidth = true,
  onPress,
}: ConnectWalletButtonProps) {
  const t = useDubsTheme();
  const { authenticate, status } = useAuth();

  const connecting = status === 'authenticating' || status === 'signing' || status === 'verifying';
  const accent = accentColor || t.accent;

  const handlePress = () => {
    onPress?.();
    authenticate();
  };

  return (
    <TouchableOpacity
      onPress={handlePress}
      disabled={connecting}
      activeOpacity={0.85}
      style={[
        styles.btn,
        {
          backgroundColor: accent,
          borderRadius,
          paddingVertical,
          width: fullWidth ? '100%' : undefined,
          opacity: connecting ? 0.8 : 1,
        },
      ]}
    >
      {connecting ? (
        <ActivityIndicator color={textColor} size="small" />
      ) : (
        <Text style={[styles.label, { color: textColor, fontSize }]}>
          {label}
        </Text>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  label: {
    fontWeight: '800',
    letterSpacing: -0.2,
  },
});