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

export interface ConnectWalletScreenProps {
  /** Called when the user taps Connect Wallet */
  onConnect: () => void | Promise<void>;
  /** Show a loading spinner on the button while connecting */
  connecting?: boolean;
  /** Error message to display (e.g. "User rejected the request") */
  error?: string | null;
  /** App name shown in the header. Defaults to "Dubs" */
  appName?: string;
  /** Override accent color (e.g. from developer UI config) */
  accentColor?: string;
  /** URL to app icon — renders as Image instead of the default letter circle */
  appIcon?: string;
  /** Override subtitle text below app name */
  tagline?: string;
}

export function ConnectWalletScreen({
  onConnect,
  connecting = false,
  error = null,
  appName = 'Dubs',
  accentColor,
  appIcon,
  tagline,
}: ConnectWalletScreenProps) {
  const t = useDubsTheme();
  const accent = accentColor || t.accent;

  return (
    <View style={[styles.container, { backgroundColor: t.background }]}>
      <View style={styles.content}>
        {/* Branding */}
        <View style={styles.brandingSection}>
          {appIcon ? (
            <Image
              source={{ uri: appIcon }}
              style={styles.logoImage}
            />
          ) : (
            <View style={[styles.logoCircle, { backgroundColor: accent }]}>
              <Text style={styles.logoText}>
                {appName.charAt(0).toUpperCase()}
              </Text>
            </View>
          )}
          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
          <Text style={[styles.subtitle, { color: t.textMuted }]}>
            {tagline || 'Connect your Solana wallet to get started'}
          </Text>
        </View>

        {/* Action */}
        <View style={styles.actionSection}>
          {error ? (
            <View
              style={[
                styles.errorBox,
                { backgroundColor: t.errorBg, borderColor: t.errorBorder },
              ]}
            >
              <Text style={[styles.errorText, { color: t.errorText }]}>{error}</Text>
            </View>
          ) : null}

          <TouchableOpacity
            style={[styles.connectButton, { backgroundColor: accent }]}
            onPress={onConnect}
            disabled={connecting}
            activeOpacity={0.8}
          >
            {connecting ? (
              <ActivityIndicator color="#FFFFFF" size="small" />
            ) : (
              <Text style={styles.connectButtonText}>Connect Wallet</Text>
            )}
          </TouchableOpacity>

          <Text style={[styles.hint, { color: t.textDim }]}>
            Phantom, Solflare, or any Solana wallet
          </Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  content: {
    flex: 1,
    justifyContent: 'space-between',
    paddingHorizontal: 32,
    paddingTop: 120,
    paddingBottom: 80,
  },
  brandingSection: {
    alignItems: 'center',
    gap: 12,
  },
  logoCircle: {
    width: 80,
    height: 80,
    borderRadius: 40,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
  logoImage: {
    width: 80,
    height: 80,
    borderRadius: 16,
    marginBottom: 8,
  },
  logoText: {
    fontSize: 36,
    fontWeight: '800',
    color: '#FFFFFF',
  },
  appName: {
    fontSize: 32,
    fontWeight: '800',
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 22,
  },
  actionSection: {
    gap: 16,
  },
  errorBox: {
    borderWidth: 1,
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  errorText: {
    fontSize: 14,
    textAlign: 'center',
  },
  connectButton: {
    height: 56,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  connectButtonText: {
    color: '#FFFFFF',
    fontSize: 18,
    fontWeight: '700',
  },
  hint: {
    fontSize: 13,
    textAlign: 'center',
  },
});