dchain/client-app/app/(app)/profile/[address].tsx

/**
 * Profile screen — shows info about any address (yours or someone else's),
 * plus their post feed, follow/unfollow button, and basic counters.
 *
 * Routes:
 *   /(app)/profile/<ed25519-hex>
 *
 * Two states:
 *   - Known contact → open chat, show full info
 *   - Unknown address → Twitter-style "discovery" profile: shows just the
 *     address + posts + follow button. Useful when tapping an author from
 *     the feed of someone you don't chat with.
 */
import React, { useCallback, useEffect, useState } from 'react';
import {
  View, Text, ScrollView, Pressable, Alert, FlatList,
  ActivityIndicator, RefreshControl,
} from 'react-native';
import { router, useLocalSearchParams } 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 type { Contact } from '@/lib/types';

import { Avatar } from '@/components/Avatar';
import { Header } from '@/components/Header';
import { IconButton } from '@/components/IconButton';
import { PostCard } from '@/components/feed/PostCard';
import {
  fetchAuthorPosts, fetchStats, followUser, unfollowUser,
  formatCount, type FeedPostItem,
} from '@/lib/feed';
import { humanizeTxError } from '@/lib/api';

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

type Tab = 'posts' | 'info';

export default function ProfileScreen() {
  const insets = useSafeAreaInsets();
  const { address } = useLocalSearchParams<{ address: string }>();
  const contacts = useStore(s => s.contacts);
  const keyFile  = useStore(s => s.keyFile);
  const contact  = contacts.find(c => c.address === address);

  const [tab, setTab] = useState<Tab>('posts');
  const [posts, setPosts] = useState<FeedPostItem[]>([]);
  const [likedSet, setLikedSet] = useState<Set<string>>(new Set());
  const [loadingPosts, setLoadingPosts] = useState(true);
  const [refreshing, setRefreshing] = useState(false);

  // Follow state is optimistic + reconciled via on-chain query. For MVP
  // we keep a local-only flag that toggles immediately on tap; future:
  // query chain.Following(me) once on mount to seed accurate initial state.
  const [following, setFollowing] = useState(false);
  const [followingBusy, setFollowingBusy] = useState(false);
  const [copied, setCopied] = useState<string | null>(null);

  const isMe = !!keyFile && keyFile.pub_key === address;
  const displayName = contact?.username
    ? `@${contact.username}`
    : contact?.alias ?? (isMe ? 'Вы' : shortAddr(address ?? ''));

  const loadPosts = useCallback(async (isRefresh = false) => {
    if (!address) return;
    if (isRefresh) setRefreshing(true); else setLoadingPosts(true);
    try {
      const items = await fetchAuthorPosts(address, 40);
      setPosts(items);
      if (keyFile) {
        const liked = new Set<string>();
        for (const p of items) {
          const s = await fetchStats(p.post_id, keyFile.pub_key);
          if (s?.liked_by_me) liked.add(p.post_id);
        }
        setLikedSet(liked);
      }
    } catch {
      setPosts([]);
    } finally {
      setLoadingPosts(false);
      setRefreshing(false);
    }
  }, [address, keyFile]);

  useEffect(() => {
    if (tab === 'posts') loadPosts(false);
  }, [tab, loadPosts]);

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

  const openChat = () => {
    if (!address) return;
    router.replace(`/(app)/chats/${address}` as never);
  };

  const onToggleFollow = async () => {
    if (!keyFile || !address || isMe || followingBusy) return;
    setFollowingBusy(true);
    const wasFollowing = following;
    setFollowing(!wasFollowing);
    try {
      if (wasFollowing) {
        await unfollowUser({ from: keyFile.pub_key, privKey: keyFile.priv_key, target: address });
      } else {
        await followUser({ from: keyFile.pub_key, privKey: keyFile.priv_key, target: address });
      }
    } catch (e: any) {
      setFollowing(wasFollowing);
      Alert.alert('Не удалось', humanizeTxError(e));
    } finally {
      setFollowingBusy(false);
    }
  };

  const onStatsChanged = useCallback(async (postID: string) => {
    if (!keyFile) return;
    const s = await fetchStats(postID, keyFile.pub_key);
    if (!s) return;
    setPosts(ps => ps.map(p => p.post_id === postID
      ? { ...p, likes: s.likes, views: s.views } : p));
    setLikedSet(set => {
      const next = new Set(set);
      if (s.liked_by_me) next.add(postID); else next.delete(postID);
      return next;
    });
  }, [keyFile]);

  const onDeleted = useCallback((postID: string) => {
    setPosts(ps => ps.filter(p => p.post_id !== postID));
  }, []);

  // ── Hero + follow button block ──────────────────────────────────────

  const Hero = (
    <View style={{ paddingHorizontal: 14, paddingTop: 16, paddingBottom: 4 }}>
      <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
        <Avatar name={displayName} address={address} size={72} />
        <View style={{ flex: 1 }} />
        {!isMe ? (
          <Pressable
            onPress={onToggleFollow}
            disabled={followingBusy}
            style={({ pressed }) => ({
              paddingHorizontal: 18, paddingVertical: 9,
              borderRadius: 999,
              backgroundColor: following
                ? (pressed ? '#1a1a1a' : '#111111')
                : (pressed ? '#e7e7e7' : '#ffffff'),
              borderWidth: following ? 1 : 0,
              borderColor: '#1f1f1f',
              minWidth: 110,
              alignItems: 'center',
            })}
          >
            {followingBusy ? (
              <ActivityIndicator
                size="small"
                color={following ? '#ffffff' : '#000000'}
              />
            ) : (
              <Text
                style={{
                  color: following ? '#ffffff' : '#000000',
                  fontWeight: '700',
                  fontSize: 13,
                }}
              >
                {following ? 'Вы подписаны' : 'Подписаться'}
              </Text>
            )}
          </Pressable>
        ) : (
          <Pressable
            onPress={() => router.push('/(app)/settings' as never)}
            style={({ pressed }) => ({
              paddingHorizontal: 18, paddingVertical: 9,
              borderRadius: 999,
              backgroundColor: pressed ? '#1a1a1a' : '#111111',
              borderWidth: 1, borderColor: '#1f1f1f',
            })}
          >
            <Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 13 }}>
              Редактировать
            </Text>
          </Pressable>
        )}
      </View>

      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 14 }}>
        <Text style={{ color: '#ffffff', fontSize: 22, fontWeight: '800' }}>
          {displayName}
        </Text>
        {contact?.username && (
          <Ionicons name="checkmark-circle" size={18} color="#1d9bf0" style={{ marginLeft: 5 }} />
        )}
      </View>
      <Text style={{ color: '#6a6a6a', fontSize: 12, marginTop: 2 }}>
        {shortAddr(address ?? '')}
      </Text>

      {/* Counters row — post count is derived from what we loaded; follower/
          following counters would require chain.Followers / chain.Following
          HTTP exposure which isn't wired yet (Phase D). */}
      <View style={{ flexDirection: 'row', marginTop: 12, gap: 18 }}>
        <Text style={{ color: '#ffffff', fontSize: 13 }}>
          <Text style={{ fontWeight: '700' }}>{formatCount(posts.length)}</Text>
          <Text style={{ color: '#6a6a6a' }}> постов</Text>
        </Text>
      </View>

      {/* Secondary actions: open chat + copy address */}
      {!isMe && contact && (
        <View style={{ flexDirection: 'row', gap: 8, marginTop: 14 }}>
          <Pressable
            onPress={openChat}
            style={({ pressed }) => ({
              flex: 1,
              alignItems: 'center', justifyContent: 'center',
              paddingVertical: 10, borderRadius: 999,
              backgroundColor: pressed ? '#1a1a1a' : '#111111',
              borderWidth: 1, borderColor: '#1f1f1f',
              flexDirection: 'row', gap: 6,
            })}
          >
            <Ionicons name="chatbubble-outline" size={14} color="#ffffff" />
            <Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>
              Чат
            </Text>
          </Pressable>
          <Pressable
            onPress={() => address && copy(address, 'address')}
            style={({ pressed }) => ({
              flex: 1,
              alignItems: 'center', justifyContent: 'center',
              paddingVertical: 10, borderRadius: 999,
              backgroundColor: pressed ? '#1a1a1a' : '#111111',
              borderWidth: 1, borderColor: '#1f1f1f',
            })}
          >
            <Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>
              {copied === 'address' ? 'Скопировано' : 'Копировать адрес'}
            </Text>
          </Pressable>
        </View>
      )}
    </View>
  );

  // ── Tab strip ────────────────────────────────────────────────────────

  const TabStrip = (
    <View
      style={{
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#141414',
        marginTop: 14,
      }}
    >
      {(['posts', 'info'] as Tab[]).map(key => (
        <Pressable
          key={key}
          onPress={() => setTab(key)}
          style={{
            flex: 1,
            alignItems: 'center',
            paddingVertical: 12,
          }}
        >
          <Text
            style={{
              color: tab === key ? '#ffffff' : '#6a6a6a',
              fontWeight: tab === key ? '700' : '500',
              fontSize: 13,
            }}
          >
            {key === 'posts' ? 'Посты' : 'Инфо'}
          </Text>
          {tab === key && (
            <View style={{
              marginTop: 6,
              width: 48, height: 3, borderRadius: 1.5,
              backgroundColor: '#1d9bf0',
            }} />
          )}
        </Pressable>
      ))}
    </View>
  );

  // ── Content per tab ─────────────────────────────────────────────────

  if (tab === 'posts') {
    return (
      <View style={{ flex: 1, backgroundColor: '#000000' }}>
        <Header
          title="Профиль"
          divider
          left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
        />
        <FlatList
          data={posts}
          keyExtractor={p => p.post_id}
          renderItem={({ item }) => (
            <PostCard
              post={item}
              likedByMe={likedSet.has(item.post_id)}
              onStatsChanged={onStatsChanged}
              onDeleted={onDeleted}
            />
          )}
          ListHeaderComponent={
            <>
              {Hero}
              {TabStrip}
            </>
          }
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={() => loadPosts(true)}
              tintColor="#1d9bf0"
            />
          }
          ListEmptyComponent={
            loadingPosts ? (
              <View style={{ padding: 40, alignItems: 'center' }}>
                <ActivityIndicator color="#1d9bf0" />
              </View>
            ) : (
              <View style={{
                paddingVertical: 60,
                paddingHorizontal: 32,
                alignItems: 'center',
              }}>
                <Ionicons name="newspaper-outline" size={32} color="#6a6a6a" />
                <Text style={{ color: '#ffffff', fontWeight: '700', marginTop: 10 }}>
                  Пока нет постов
                </Text>
                <Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 6, textAlign: 'center' }}>
                  {isMe
                    ? 'Нажмите на синюю кнопку в ленте, чтобы написать первый.'
                    : 'Этот пользователь ещё ничего не публиковал.'}
                </Text>
              </View>
            )
          }
        />
      </View>
    );
  }

  // Info tab
  return (
    <View style={{ flex: 1, backgroundColor: '#000000' }}>
      <Header
        title="Профиль"
        divider
        left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
      />
      <ScrollView>
        {Hero}
        {TabStrip}

        <View style={{ paddingHorizontal: 14, paddingTop: 14 }}>
          <View
            style={{
              borderRadius: 14,
              backgroundColor: '#0a0a0a',
              borderWidth: 1, borderColor: '#1f1f1f',
              overflow: 'hidden',
            }}
          >
            <InfoRow label="Адрес" value={shortAddr(address ?? '')} mono />
            {contact && (
              <>
                <InfoRow
                  label="Ключ шифрования"
                  value={contact.x25519Pub ? shortAddr(contact.x25519Pub) : 'не опубликован'}
                  mono={!!contact.x25519Pub}
                  danger={!contact.x25519Pub}
                />
                <InfoRow label="Добавлен" value={new Date(contact.addedAt).toLocaleDateString()} />
              </>
            )}
          </View>
        </View>
        <View style={{ height: 40 + insets.bottom }} />
      </ScrollView>
    </View>
  );
}

function InfoRow({
  label, value, mono, accent, danger,
}: {
  label:  string;
  value:  string;
  mono?:  boolean;
  accent?: boolean;
  danger?: boolean;
}) {
  const color = danger ? '#f0b35a' : accent ? '#1d9bf0' : '#ffffff';
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 14,
        paddingVertical: 12,
        borderTopWidth: 1,
        borderTopColor: '#1f1f1f',
      }}
    >
      <Text style={{ color: '#8b8b8b', fontSize: 13, flex: 1 }}>{label}</Text>
      <Text
        style={{
          color, fontSize: 13,
          fontFamily: mono ? 'monospace' : undefined,
          fontWeight: '600',
        }}
        numberOfLines={1}
      >
        {value}
      </Text>
    </View>
  );
}

// Silence unused-import lint for Contact type used only in helpers.
const _contactType: Contact | null = null; void _contactType;