import { useState } from 'react';
import { View, Text, TouchableOpacity<% if (styling !== 'nativewind') { %>, StyleSheet<% } %> } from 'react-native';
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import * as Linking from 'expo-linking';
import * as Clipboard from 'expo-clipboard';
<% if (styling !== 'nativewind') { %>
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
  card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
  title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 20 },
  inputCard: { marginTop: 16, borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 16, backgroundColor: '#171717' },
  cardTitle: { fontSize: 14, fontWeight: '500', color: '#fafafa' },
  cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
  button: { marginTop: 12, backgroundColor: '#fafafa', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
  buttonText: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
  buttonSecondary: { marginTop: 12, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#262626', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
  buttonTextSecondary: { color: '#fafafa', fontSize: 14, fontWeight: '500' },
  info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8 },
  infoText: { fontSize: 12, color: '#a3a3a3' },
  back: { marginTop: 16 },
  backText: { fontSize: 13, color: '#737373' },
  copied: { marginLeft: 8, color: '#4ade80', fontSize: 12 },
});
<% } %>
interface Props {
  onBack: () => void;
}

export function Recovery({ onBack }: Props) {
  const { wallet } = useWallet();
  const [copied, setCopied] = useState(false);
  const portalUrl = process.env.EXPO_PUBLIC_LAZORKIT_PORTAL_URL || 'https://portal.lazor.sh';

  const handleAddDevice = () => {
    const url = wallet?.smartWallet 
      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=add-device`
      : portalUrl;
    Linking.openURL(url);
  };

  const handleManageDevices = () => {
    const url = wallet?.smartWallet 
      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=manage-devices`
      : portalUrl;
    Linking.openURL(url);
  };

  const copyAddress = async () => {
    if (wallet?.smartWallet) {
      await Clipboard.setStringAsync(wallet.smartWallet);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
<% if (styling === 'nativewind') { %>
    <View className="flex-1 bg-white p-6 pt-16">
      <View className="bg-neutral-900 rounded-2xl p-5">
        <Text className="text-lg font-semibold text-white">Recovery & Backup</Text>
        <Text className="mt-2 text-sm text-neutral-500 leading-5">
          Add backup passkeys from other devices to ensure you never lose access.
        </Text>
        <View className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
          <Text className="text-sm font-medium text-white">Add Backup Device</Text>
          <Text className="mt-1 text-xs text-neutral-500">Register a passkey from another phone, tablet, or computer.</Text>
          <TouchableOpacity onPress={handleAddDevice} className="mt-3 bg-white py-3 rounded-lg items-center">
            <Text className="text-black text-sm font-medium">Add Device</Text>
          </TouchableOpacity>
        </View>
        <View className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
          <Text className="text-sm font-medium text-white">Manage Devices</Text>
          <Text className="mt-1 text-xs text-neutral-500">View and remove registered passkeys.</Text>
          <TouchableOpacity onPress={handleManageDevices} className="mt-3 border border-neutral-700 py-3 rounded-lg items-center">
            <Text className="text-white text-sm font-medium">View Devices</Text>
          </TouchableOpacity>
        </View>
        <View className="mt-4 p-3 bg-neutral-800 rounded-lg">
          <TouchableOpacity onPress={copyAddress} className="flex-row items-center">
            <Text className="text-xs text-neutral-400">
              <Text className="font-semibold">Wallet: </Text>
              <Text className="font-mono">{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
            </Text>
            {copied && <Text className="ml-2 text-xs text-green-400">Copied!</Text>}
          </TouchableOpacity>
        </View>
        <TouchableOpacity onPress={onBack} className="mt-4">
          <Text className="text-sm text-neutral-500">← Back</Text>
        </TouchableOpacity>
      </View>
    </View>
<% } else { %>
    <View style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.title}>Recovery & Backup</Text>
        <Text style={styles.subtitle}>
          Add backup passkeys from other devices to ensure you never lose access.
        </Text>
        <View style={styles.inputCard}>
          <Text style={styles.cardTitle}>Add Backup Device</Text>
          <Text style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</Text>
          <TouchableOpacity onPress={handleAddDevice} style={styles.button}>
            <Text style={styles.buttonText}>Add Device</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.inputCard}>
          <Text style={styles.cardTitle}>Manage Devices</Text>
          <Text style={styles.cardDesc}>View and remove registered passkeys.</Text>
          <TouchableOpacity onPress={handleManageDevices} style={styles.buttonSecondary}>
            <Text style={styles.buttonTextSecondary}>View Devices</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.info}>
          <TouchableOpacity onPress={copyAddress}>
            <Text style={styles.infoText}>
              <Text style={{ fontWeight: '600' }}>Wallet: </Text>
              <Text style={{ fontFamily: 'monospace' }}>{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
              {copied && <Text style={styles.copied}> Copied!</Text>}
            </Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity onPress={onBack} style={styles.back}>
          <Text style={styles.backText}>← Back</Text>
        </TouchableOpacity>
      </View>
    </View>
<% } %>
  );
}