/**
 * Account Created confirmation screen — dark minimalist.
 * Показывает адрес + x25519, кнопки copy и export (share) key.json.
 */
import React, { useState } from 'react';
import { View, Text, ScrollView, Alert, Pressable, Share } from 'react-native';
import { router } from 'expo-router';
import * as Clipboard from 'expo-clipboard';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useStore } from '@/lib/store';

import { Header } from '@/components/Header';

export default function AccountCreatedScreen() {
  const insets  = useSafeAreaInsets();
  const keyFile = useStore(s => s.keyFile);
  const [copied, setCopied] = useState<string | null>(null);

  if (!keyFile) {
    router.replace('/');
    return null;
  }

  async function copy(value: string, label: string) {
    await Clipboard.setStringAsync(value);
    setCopied(label);
    setTimeout(() => setCopied(null), 1800);
  }

  async function exportKey() {
    try {
      const json = JSON.stringify(keyFile, null, 2);
      // Используем плоский Share API — без записи во временный файл.
      // Получатель (mail, notes, etc.) получит текст целиком; юзер сам
      // сохраняет как .json если нужно.
      await Share.share({
        message: json,
        title:   'DChain key file',
      });
    } catch (e: any) {
      Alert.alert('Export failed', e?.message ?? 'Unknown error');
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
      <Header title="Account created" />
      <ScrollView contentContainerStyle={{ padding: 14, paddingBottom: 40 }}>
        {/* Success badge */}
        <View style={{ alignItems: 'center', marginTop: 10, marginBottom: 18 }}>
          <View
            style={{
              width: 64, height: 64, borderRadius: 32,
              backgroundColor: 'rgba(59,165,93,0.15)',
              alignItems: 'center', justifyContent: 'center',
              marginBottom: 10,
            }}
          >
            <Ionicons name="checkmark" size={32} color="#3ba55d" />
          </View>
          <Text style={{ color: '#ffffff', fontSize: 20, fontWeight: '800' }}>
            Welcome aboard
          </Text>
          <Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 6, textAlign: 'center' }}>
            Keys have been generated and stored securely.
          </Text>
        </View>

        {/* Address */}
        <KeyCard
          title="Your address (Ed25519)"
          value={keyFile.pub_key}
          copied={copied === 'address'}
          onCopy={() => copy(keyFile.pub_key, 'address')}
        />

        {/* X25519 */}
        <View style={{ height: 10 }} />
        <KeyCard
          title="Encryption key (X25519)"
          value={keyFile.x25519_pub}
          copied={copied === 'x25519'}
          onCopy={() => copy(keyFile.x25519_pub, 'x25519')}
        />

        {/* Backup */}
        <View
          style={{
            marginTop: 16,
            padding: 14,
            borderRadius: 14,
            backgroundColor: 'rgba(240,179,90,0.08)',
            borderWidth: 1, borderColor: 'rgba(240,179,90,0.25)',
          }}
        >
          <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
            <Ionicons name="lock-closed-outline" size={14} color="#f0b35a" />
            <Text style={{ color: '#f0b35a', fontSize: 13, fontWeight: '700', marginLeft: 6 }}>
              Backup your key file
            </Text>
          </View>
          <Text style={{ color: '#d0a26a', fontSize: 12, lineHeight: 17, marginBottom: 10 }}>
            Export it now and store somewhere safe — password managers, cold
            storage, printed paper. If you lose it, you lose the account.
          </Text>
          <Pressable
            onPress={exportKey}
            style={({ pressed }) => ({
              alignItems: 'center', justifyContent: 'center',
              paddingVertical: 10, borderRadius: 999,
              backgroundColor: pressed ? '#2a1f0f' : '#1a1409',
              borderWidth: 1, borderColor: 'rgba(240,179,90,0.35)',
            })}
          >
            <Text style={{ color: '#f0b35a', fontWeight: '700', fontSize: 14 }}>
              Export key.json
            </Text>
          </Pressable>
        </View>

        {/* Continue */}
        <Pressable
          onPress={() => router.replace('/(app)/chats' as never)}
          style={({ pressed }) => ({
            alignItems: 'center', justifyContent: 'center',
            paddingVertical: 14, borderRadius: 999, marginTop: 20,
            backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
          })}
        >
          <Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 15 }}>
            Open messenger
          </Text>
        </Pressable>
      </ScrollView>
    </View>
  );
}

function KeyCard({
  title, value, copied, onCopy,
}: {
  title: string;
  value: string;
  copied: boolean;
  onCopy: () => void;
}) {
  return (
    <View
      style={{
        borderRadius: 14,
        backgroundColor: '#0a0a0a',
        borderWidth: 1, borderColor: '#1f1f1f',
        padding: 14,
      }}
    >
      <Text
        style={{
          color: '#5a5a5a', fontSize: 11, fontWeight: '700',
          textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 8,
        }}
      >
        {title}
      </Text>
      <Text style={{ color: '#ffffff', fontSize: 12, fontFamily: 'monospace', lineHeight: 18 }}>
        {value}
      </Text>
      <Pressable
        onPress={onCopy}
        style={({ pressed }) => ({
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          paddingVertical: 9, borderRadius: 999,
          marginTop: 10,
          backgroundColor: pressed ? '#1a1a1a' : '#111111',
          borderWidth: 1, borderColor: '#1f1f1f',
        })}
      >
        <Ionicons
          name={copied ? 'checkmark' : 'copy-outline'}
          size={14}
          color={copied ? '#3ba55d' : '#ffffff'}
        />
        <Text
          style={{
            color: copied ? '#3ba55d' : '#ffffff',
            fontSize: 13, fontWeight: '600', marginLeft: 6,
          }}
        >
          {copied ? 'Copied' : 'Copy'}
        </Text>
      </Pressable>
    </View>
  );
}