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

export interface SettingsSheetProps {
  walletAddress: string;
  username?: string;
  avatarUrl?: string | null;
  memberSince?: string | null;
  appVersion?: string;
  onCopyAddress?: () => void;
  onSupport?: () => void;
  onLogout: () => void | Promise<void>;
  loggingOut?: boolean;
}

function truncateAddress(address: string, chars = 4): string {
  if (address.length <= chars * 2 + 3) return address;
  return `${address.slice(0, chars)}...${address.slice(-chars)}`;
}

export function SettingsSheet({
  walletAddress,
  username,
  avatarUrl,
  memberSince,
  appVersion,
  onCopyAddress,
  onSupport,
  onLogout,
  loggingOut = false,
}: SettingsSheetProps) {
  const t = useDubsTheme();

  return (
    <ScrollView
      style={[styles.container, { backgroundColor: t.background }]}
      contentContainerStyle={styles.content}
    >
      {/* Profile card */}
      <UserProfileCard
        walletAddress={walletAddress}
        username={username}
        avatarUrl={avatarUrl}
        memberSince={memberSince}
      />

      {/* Action rows */}
      <View style={[styles.actionsCard, { backgroundColor: t.surface, borderColor: t.border }]}>
        {onCopyAddress ? (
          <TouchableOpacity
            style={styles.actionRow}
            onPress={onCopyAddress}
            activeOpacity={0.7}
          >
            <View style={styles.actionRowLeft}>
              <Text style={[styles.actionLabel, { color: t.text }]}>Wallet Address</Text>
              <Text style={[styles.actionValue, { color: t.textMuted }]}>
                {truncateAddress(walletAddress)}
              </Text>
            </View>
            <Text style={[styles.copyLabel, { color: t.accent }]}>Copy</Text>
          </TouchableOpacity>
        ) : null}

        {onSupport ? (
          <>
            {onCopyAddress ? (
              <View style={[styles.separator, { backgroundColor: t.border }]} />
            ) : null}
            <TouchableOpacity
              style={styles.actionRow}
              onPress={onSupport}
              activeOpacity={0.7}
            >
              <Text style={[styles.actionLabel, { color: t.text }]}>Help & Support</Text>
              <Text style={[styles.chevron, { color: t.textMuted }]}>{'\u203A'}</Text>
            </TouchableOpacity>
          </>
        ) : null}
      </View>

      {/* Logout button */}
      <TouchableOpacity
        style={[styles.logoutButton, { borderColor: t.live }]}
        onPress={onLogout}
        disabled={loggingOut}
        activeOpacity={0.7}
      >
        {loggingOut ? (
          <ActivityIndicator color={t.live} size="small" />
        ) : (
          <Text style={[styles.logoutText, { color: t.live }]}>Log Out</Text>
        )}
      </TouchableOpacity>

      {/* App version */}
      {appVersion ? (
        <Text style={[styles.version, { color: t.textDim }]}>v{appVersion}</Text>
      ) : null}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 20,
    paddingTop: 24,
    gap: 20,
  },
  actionsCard: {
    borderRadius: 16,
    borderWidth: 1,
    overflow: 'hidden',
  },
  actionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  actionRowLeft: {
    flex: 1,
    gap: 2,
  },
  actionLabel: {
    fontSize: 15,
    fontWeight: '600',
  },
  actionValue: {
    fontSize: 13,
    fontFamily: 'monospace',
  },
  copyLabel: {
    fontSize: 14,
    fontWeight: '600',
  },
  chevron: {
    fontSize: 22,
    fontWeight: '300',
  },
  separator: {
    height: 1,
    marginHorizontal: 16,
  },
  logoutButton: {
    height: 52,
    borderRadius: 16,
    borderWidth: 1.5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoutText: {
    fontSize: 16,
    fontWeight: '700',
  },
  version: {
    fontSize: 12,
    textAlign: 'center',
  },
});