dchain/client-app/components/Composer.tsx

/**
 * Composer — плавающий блок ввода сообщения, прибит к низу.
 *
 * Композиция:
 *   1. Опциональный баннер (edit / reply) сверху.
 *   2. Опциональная pending-attachment preview.
 *   3. Либо:
 *       - обычный input-bubble с `[+] [textarea] [↑/🎤/⭕]`
 *       - inline VoiceRecorder когда идёт запись голосового
 *
 * Send-action зависит от состояния:
 *   - есть текст/attachment → ↑ (send)
 *   - пусто → показываем две иконки: 🎤 (start voice) + ⭕ (open video circle)
 *
 * API:
 *   mode, onCancelMode
 *   text, onChangeText
 *   onSend, sending
 *   onAttach          — tap на + (AttachmentMenu)
 *   attachment, onClearAttach
 *   onFinishVoice     — готовая voice-attachment (из VoiceRecorder)
 *   onStartVideoCircle — tap на ⭕, родитель открывает VideoCircleRecorder
 *   placeholder
 */
import React, { useRef, useState } from 'react';
import { View, Text, TextInput, Pressable, ActivityIndicator, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

import type { Attachment } from '@/lib/types';
import { VoiceRecorder } from '@/components/chat/VoiceRecorder';

export type ComposerMode =
  | { kind: 'new' }
  | { kind: 'edit';  text: string }
  | { kind: 'reply'; msgId: string; author: string; preview: string };

export interface ComposerProps {
  mode:          ComposerMode;
  onCancelMode?: () => void;

  text:          string;
  onChangeText:  (t: string) => void;

  onSend:        () => void;
  sending?:      boolean;

  onAttach?:     () => void;

  attachment?:    Attachment | null;
  onClearAttach?: () => void;

  /** Voice recording завершена и отправляем сразу (мгновенный flow). */
  onFinishVoice?:      (att: Attachment) => void;
  /** Tap на "⭕" — родитель открывает VideoCircleRecorder. */
  onStartVideoCircle?: () => void;

  placeholder?:  string;
}

const INPUT_MIN_HEIGHT = 24;
const INPUT_MAX_HEIGHT = 72;

export function Composer(props: ComposerProps) {
  const {
    mode, onCancelMode, text, onChangeText, onSend, sending, onAttach,
    attachment, onClearAttach,
    onFinishVoice, onStartVideoCircle,
    placeholder,
  } = props;

  const inputRef = useRef<TextInput>(null);
  const [recordingVoice, setRecordingVoice] = useState(false);

  const hasContent = !!text.trim() || !!attachment;
  const canSend    = hasContent && !sending;
  const inEdit     = mode.kind === 'edit';
  const inReply    = mode.kind === 'reply';

  const focusInput = () => inputRef.current?.focus();

  return (
    <View style={{ paddingHorizontal: 8, paddingTop: 6, paddingBottom: 4, gap: 6 }}>
      {/* ── Banner: edit / reply ── */}
      {(inEdit || inReply) && !recordingVoice && (
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 10,
            backgroundColor: '#111111',
            borderRadius: 18,
            paddingHorizontal: 14,
            paddingVertical: 10,
            borderWidth: 1,
            borderColor: '#1f1f1f',
          }}
        >
          <Ionicons
            name={inEdit ? 'create-outline' : 'arrow-undo-outline'}
            size={16}
            color="#ffffff"
          />
          <View style={{ flex: 1, minWidth: 0 }}>
            {inEdit && (
              <Text style={{ color: '#ffffff', fontSize: 14, fontWeight: '600' }}>
                Edit message
              </Text>
            )}
            {inReply && (
              <>
                <Text style={{ color: '#1d9bf0', fontSize: 12, fontWeight: '700' }} numberOfLines={1}>
                  Reply to {(mode as { author: string }).author}
                </Text>
                <Text style={{ color: '#8b8b8b', fontSize: 12 }} numberOfLines={1}>
                  {(mode as { preview: string }).preview}
                </Text>
              </>
            )}
          </View>
          <Pressable
            onPress={onCancelMode}
            hitSlop={8}
            style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
          >
            <Ionicons name="close" size={20} color="#8b8b8b" />
          </Pressable>
        </View>
      )}

      {/* ── Pending attachment preview ── */}
      {attachment && !recordingVoice && (
        <AttachmentChip attachment={attachment} onClear={onClearAttach} />
      )}

      {/* ── Voice recording (inline) ИЛИ обычный input ── */}
      {recordingVoice ? (
        <VoiceRecorder
          onFinish={(att) => {
            setRecordingVoice(false);
            onFinishVoice?.(att);
          }}
          onCancel={() => setRecordingVoice(false)}
        />
      ) : (
        <Pressable onPress={focusInput}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              backgroundColor: '#111111',
              borderRadius: 22,
              borderWidth: 1,
              borderColor: '#1f1f1f',
              paddingLeft: 4,
              paddingRight: 8,
              paddingVertical: 6,
              gap: 4,
            }}
          >
            {/* + attach — всегда, кроме edit */}
            {onAttach && !inEdit && (
              <Pressable
                onPress={(e) => { e.stopPropagation?.(); onAttach(); }}
                hitSlop={6}
                style={({ pressed }) => ({
                  width: 32, height: 32, borderRadius: 16,
                  alignItems: 'center', justifyContent: 'center',
                  opacity: pressed ? 0.6 : 1,
                })}
              >
                <Ionicons name="add" size={22} color="#ffffff" />
              </Pressable>
            )}

            <TextInput
              ref={inputRef}
              value={text}
              onChangeText={onChangeText}
              placeholder={placeholder ?? 'Message'}
              placeholderTextColor="#5a5a5a"
              multiline
              maxLength={2000}
              style={{
                flex: 1,
                color: '#ffffff',
                fontSize: 15,
                lineHeight: 20,
                minHeight: INPUT_MIN_HEIGHT,
                maxHeight: INPUT_MAX_HEIGHT,
                paddingTop: 6,
                paddingBottom: 6,
                paddingLeft: onAttach && !inEdit ? 6 : 10,
                paddingRight: 6,
              }}
            />

            {/* Правая часть: send ИЛИ [mic + video-circle] */}
            {canSend ? (
              <Pressable
                onPress={(e) => { e.stopPropagation?.(); onSend(); }}
                style={({ pressed }) => ({
                  width: 32, height: 32, borderRadius: 16,
                  backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
                  alignItems: 'center', justifyContent: 'center',
                })}
              >
                {sending ? (
                  <ActivityIndicator color="#ffffff" size="small" />
                ) : (
                  <Ionicons name="arrow-up" size={18} color="#ffffff" />
                )}
              </Pressable>
            ) : !inEdit && (onFinishVoice || onStartVideoCircle) ? (
              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                {onStartVideoCircle && (
                  <Pressable
                    onPress={(e) => { e.stopPropagation?.(); onStartVideoCircle(); }}
                    hitSlop={6}
                    style={({ pressed }) => ({
                      width: 32, height: 32, borderRadius: 16,
                      alignItems: 'center', justifyContent: 'center',
                      opacity: pressed ? 0.6 : 1,
                    })}
                  >
                    <Ionicons name="videocam-outline" size={20} color="#ffffff" />
                  </Pressable>
                )}
                {onFinishVoice && (
                  <Pressable
                    onPress={(e) => { e.stopPropagation?.(); setRecordingVoice(true); }}
                    hitSlop={6}
                    style={({ pressed }) => ({
                      width: 32, height: 32, borderRadius: 16,
                      alignItems: 'center', justifyContent: 'center',
                      opacity: pressed ? 0.6 : 1,
                    })}
                  >
                    <Ionicons name="mic-outline" size={20} color="#ffffff" />
                  </Pressable>
                )}
              </View>
            ) : null}
          </View>
        </Pressable>
      )}
    </View>
  );
}

// ─── Attachment chip — preview текущего pending attachment'а ────────

function AttachmentChip({
  attachment, onClear,
}: {
  attachment: Attachment;
  onClear?: () => void;
}) {
  const icon: React.ComponentProps<typeof Ionicons>['name'] =
    attachment.kind === 'image' ? 'image-outline'     :
    attachment.kind === 'video' ? 'videocam-outline'  :
    attachment.kind === 'voice' ? 'mic-outline'       :
                                  'document-outline';

  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 10,
        backgroundColor: '#111111',
        borderRadius: 14,
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderWidth: 1,
        borderColor: '#1f1f1f',
      }}
    >
      {attachment.kind === 'image' || attachment.kind === 'video' ? (
        <Image
          source={{ uri: attachment.uri }}
          style={{
            width: 40, height: 40,
            borderRadius: attachment.circle ? 20 : 8,
            backgroundColor: '#0a0a0a',
          }}
        />
      ) : (
        <View
          style={{
            width: 40, height: 40, borderRadius: 8,
            backgroundColor: '#1a1a1a',
            alignItems: 'center', justifyContent: 'center',
          }}
        >
          <Ionicons name={icon} size={20} color="#ffffff" />
        </View>
      )}

      <View style={{ flex: 1, minWidth: 0 }}>
        <Text style={{ color: '#ffffff', fontSize: 13, fontWeight: '600' }} numberOfLines={1}>
          {attachment.name ?? attachmentLabel(attachment)}
        </Text>
        <Text style={{ color: '#8b8b8b', fontSize: 11 }} numberOfLines={1}>
          {attachment.kind.toUpperCase()}
          {attachment.circle ? ' · circle' : ''}
          {attachment.size   ? ` · ${(attachment.size / 1024).toFixed(0)} KB` : ''}
          {attachment.duration ? ` · ${attachment.duration}s` : ''}
        </Text>
      </View>

      <Pressable
        onPress={onClear}
        hitSlop={8}
        style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, padding: 4 })}
      >
        <Ionicons name="close" size={18} color="#8b8b8b" />
      </Pressable>
    </View>
  );
}

function attachmentLabel(a: Attachment): string {
  switch (a.kind) {
    case 'image': return 'Photo';
    case 'video': return a.circle ? 'Video message' : 'Video';
    case 'voice': return 'Voice message';
    case 'file':  return 'File';
  }
}