dchain/client-app/components/feed/ShareSheet.tsx

/**
 * ShareSheet — bottom-sheet picker that forwards a feed post into one
 * (or several) chats. Opens when the user taps the share icon on a
 * PostCard.
 *
 * Design notes
 * ------------
 * - Single modal component, managed by the parent via `visible` +
 *   `onClose`. Parent passes the `post` it wants to share.
 * - Multi-select: the user can tick several contacts at once and hit
 *   "Отправить". Fits the common "share with a couple of friends"
 *   flow better than one-at-a-time.
 * - Only contacts with an x25519 key show up — those are the ones we
 *   can actually encrypt for. An info note explains absent contacts.
 * - Search: typing filters the list by username / alias / address
 *   prefix. Useful once the user has more than a screenful of
 *   contacts.
 */
import React, { useMemo, useState } from 'react';
import {
  View, Text, Pressable, Modal, FlatList, TextInput, ActivityIndicator, Alert,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Avatar } from '@/components/Avatar';
import { useStore } from '@/lib/store';
import type { Contact } from '@/lib/types';
import type { FeedPostItem } from '@/lib/feed';
import { forwardPostToContacts } from '@/lib/forwardPost';

export interface ShareSheetProps {
  visible:  boolean;
  post:     FeedPostItem | null;
  onClose:  () => void;
}

export function ShareSheet({ visible, post, onClose }: ShareSheetProps) {
  const insets  = useSafeAreaInsets();
  const contacts = useStore(s => s.contacts);
  const keyFile  = useStore(s => s.keyFile);

  const [query, setQuery]       = useState('');
  const [picked, setPicked]     = useState<Set<string>>(new Set());
  const [sending, setSending]   = useState(false);

  const available = useMemo(() => {
    const q = query.trim().toLowerCase();
    const withKeys = contacts.filter(c => !!c.x25519Pub);
    if (!q) return withKeys;
    return withKeys.filter(c =>
      (c.username ?? '').toLowerCase().includes(q) ||
      (c.alias ?? '').toLowerCase().includes(q) ||
      c.address.toLowerCase().startsWith(q),
    );
  }, [contacts, query]);

  const toggle = (address: string) => {
    setPicked(prev => {
      const next = new Set(prev);
      if (next.has(address)) next.delete(address);
      else next.add(address);
      return next;
    });
  };

  const doSend = async () => {
    if (!post || !keyFile) return;
    const targets = contacts.filter(c => picked.has(c.address));
    if (targets.length === 0) return;
    setSending(true);
    try {
      const { ok, failed } = await forwardPostToContacts({
        post, contacts: targets, keyFile,
      });
      if (failed > 0) {
        Alert.alert('Done', `Sent to ${ok} of ${ok + failed} ${plural(ok + failed)}.`);
      }
      // Close + reset regardless — done is done.
      setPicked(new Set());
      setQuery('');
      onClose();
    } catch (e: any) {
      Alert.alert('Failed', String(e?.message ?? e));
    } finally {
      setSending(false);
    }
  };

  const closeAndReset = () => {
    setPicked(new Set());
    setQuery('');
    onClose();
  };

  return (
    <Modal
      visible={visible}
      animationType="slide"
      transparent
      onRequestClose={closeAndReset}
    >
      {/* Dim backdrop — tap to dismiss */}
      <Pressable
        onPress={closeAndReset}
        style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.72)', justifyContent: 'flex-end' }}
      >
        {/* Sheet body — stopPropagation so inner taps don't dismiss */}
        <Pressable
          onPress={(e) => e.stopPropagation?.()}
          style={{
            backgroundColor: '#0a0a0a',
            borderTopLeftRadius: 22,
            borderTopRightRadius: 22,
            paddingTop: 10,
            paddingBottom: Math.max(insets.bottom, 10) + 10,
            maxHeight: '78%',
            borderTopWidth: 1,
            borderTopColor: '#1f1f1f',
          }}
        >
          {/* Drag handle */}
          <View
            style={{
              alignSelf: 'center',
              width: 44, height: 4,
              borderRadius: 2,
              backgroundColor: '#2a2a2a',
              marginBottom: 10,
            }}
          />

          {/* Title row */}
          <View style={{
            flexDirection: 'row', alignItems: 'center',
            paddingHorizontal: 16, marginBottom: 10,
          }}>
            <Text style={{ color: '#ffffff', fontSize: 17, fontWeight: '700' }}>
              Share post
            </Text>
            <View style={{ flex: 1 }} />
            <Pressable onPress={closeAndReset} hitSlop={8}>
              <Ionicons name="close" size={22} color="#8b8b8b" />
            </Pressable>
          </View>

          {/* Search */}
          <View style={{ paddingHorizontal: 16, marginBottom: 10 }}>
            <View style={{
              flexDirection: 'row', alignItems: 'center',
              backgroundColor: '#111111',
              borderWidth: 1, borderColor: '#1f1f1f',
              borderRadius: 12,
              paddingHorizontal: 10,
              gap: 6,
            }}>
              <Ionicons name="search" size={14} color="#6a6a6a" />
              <TextInput
                value={query}
                onChangeText={setQuery}
                placeholder="Search contacts"
                placeholderTextColor="#5a5a5a"
                style={{
                  flex: 1,
                  color: '#ffffff',
                  fontSize: 14,
                  paddingVertical: 10,
                }}
                autoCorrect={false}
                autoCapitalize="none"
              />
              {query.length > 0 && (
                <Pressable onPress={() => setQuery('')} hitSlop={6}>
                  <Ionicons name="close-circle" size={16} color="#6a6a6a" />
                </Pressable>
              )}
            </View>
          </View>

          {/* Contact list */}
          <FlatList
            data={available}
            keyExtractor={c => c.address}
            renderItem={({ item }) => (
              <ContactRow
                contact={item}
                checked={picked.has(item.address)}
                onToggle={() => toggle(item.address)}
              />
            )}
            ListEmptyComponent={
              <View style={{
                paddingVertical: 40,
                alignItems: 'center',
              }}>
                <Ionicons name="people-outline" size={28} color="#5a5a5a" />
                <Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 10 }}>
                  {query.length > 0
                    ? 'No contacts match this search'
                    : 'No contacts with encryption keys yet'}
                </Text>
              </View>
            }
          />

          {/* Send button */}
          <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
            <Pressable
              onPress={doSend}
              disabled={picked.size === 0 || sending}
              style={({ pressed }) => ({
                alignItems: 'center',
                justifyContent: 'center',
                paddingVertical: 13,
                borderRadius: 999,
                backgroundColor:
                  picked.size === 0 ? '#1f1f1f'
                  : pressed ? '#1a8cd8' : '#1d9bf0',
              })}
            >
              {sending ? (
                <ActivityIndicator color="#ffffff" size="small" />
              ) : (
                <Text style={{
                  color: picked.size === 0 ? '#5a5a5a' : '#ffffff',
                  fontWeight: '700',
                  fontSize: 14,
                }}>
                  {picked.size === 0
                    ? 'Select contacts'
                    : `Send (${picked.size})`}
                </Text>
              )}
            </Pressable>
          </View>
        </Pressable>
      </Pressable>
    </Modal>
  );
}

// ── Row ─────────────────────────────────────────────────────────────────

function ContactRow({ contact, checked, onToggle }: {
  contact: Contact;
  checked: boolean;
  onToggle: () => void;
}) {
  const name = contact.username
    ? `@${contact.username}`
    : contact.alias ?? shortAddr(contact.address);
  return (
    <Pressable
      onPress={onToggle}
      style={({ pressed }) => ({
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
        paddingVertical: 10,
        backgroundColor: pressed ? '#111111' : 'transparent',
      })}
    >
      <Avatar name={name} address={contact.address} size={38} />
      <View style={{ flex: 1, marginLeft: 12, minWidth: 0 }}>
        <Text
          numberOfLines={1}
          style={{ color: '#ffffff', fontSize: 14, fontWeight: '600' }}
        >
          {name}
        </Text>
        <Text
          numberOfLines={1}
          style={{ color: '#6a6a6a', fontSize: 11, marginTop: 2 }}
        >
          {shortAddr(contact.address, 8)}
        </Text>
      </View>
      {/* Checkbox indicator */}
      <View
        style={{
          width: 22, height: 22,
          borderRadius: 11,
          borderWidth: 1.5,
          borderColor: checked ? '#1d9bf0' : '#2a2a2a',
          backgroundColor: checked ? '#1d9bf0' : 'transparent',
          alignItems: 'center', justifyContent: 'center',
        }}
      >
        {checked && <Ionicons name="checkmark" size={14} color="#ffffff" />}
      </View>
    </Pressable>
  );
}

function shortAddr(a: string, n = 6): string {
  if (!a) return '—';
  return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
}

function plural(n: number): string {
  return n === 1 ? 'chat' : 'chats';
}