import React, { useCallback, useRef, useState } from "react";
import {
  Keyboard,
  Pressable,
  Text,
  TextInput,
  View,
} from "react-native";
import * as Haptics from "expo-haptics";
import { VoiceButton } from "./VoiceButton";
import { useTheme } from "../../contexts/ThemeContext";

interface InputBarProps {
  onSendText: (text: string) => void;
  onVoiceRecorded: (uri: string, durationMs?: number) => void;
  onReplay: () => void;
  isTextMode: boolean;
  onToggleMode: () => void;
  audioPlaying?: boolean;
}

export function InputBar({
  onSendText,
  onVoiceRecorded,
  onReplay,
  isTextMode,
  onToggleMode,
  audioPlaying = false,
}: InputBarProps) {
  const [text, setText] = useState("");
  const inputRef = useRef<TextInput>(null);
  const { colors } = useTheme();

  const canSend = !!text.trim();

  const handleSend = useCallback(() => {
    const trimmed = text.trim();
    if (!trimmed) return;
    onSendText(trimmed);
    setText("");
    Keyboard.dismiss();
  }, [text, onSendText]);

  if (!isTextMode) {
    // Voice mode: [Replay] [Talk] [Aa]
    return (
      <View
        style={{
          flexDirection: "row",
          gap: 10,
          paddingHorizontal: 16,
          paddingVertical: 10,
          paddingBottom: 6,
          borderTopWidth: 1,
          borderTopColor: colors.border,
          alignItems: "center",
        }}
      >
        {/* Replay / Stop */}
        <Pressable
          onPress={() => {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
            onReplay();
          }}
        >
          <View
            style={{
              width: 68,
              height: 68,
              borderRadius: 34,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: colors.bgTertiary,
              borderWidth: 1.5,
              borderColor: colors.border,
            }}
          >
            <Text style={{ fontSize: 24 }}>{audioPlaying ? "\u23F8" : "\u25B6"}</Text>
            <Text style={{ color: colors.textSecondary, fontSize: 10, marginTop: 1, fontWeight: "600" }}>
              {audioPlaying ? "Stop" : "Replay"}
            </Text>
          </View>
        </Pressable>

        {/* Talk button */}
        <View style={{ flex: 1, alignItems: "center" }}>
          <VoiceButton onVoiceRecorded={onVoiceRecorded} />
        </View>

        {/* Text mode toggle */}
        <Pressable
          onPress={() => {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
            onToggleMode();
            setTimeout(() => inputRef.current?.focus(), 150);
          }}
        >
          <View
            style={{
              width: 68,
              height: 68,
              borderRadius: 34,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: colors.bgTertiary,
              borderWidth: 1.5,
              borderColor: colors.border,
            }}
          >
            <Text style={{ fontSize: 22, color: colors.textSecondary, fontWeight: "700" }}>Aa</Text>
          </View>
        </Pressable>
      </View>
    );
  }

  // Text mode: [Mic] [TextInput] [Send]
  return (
    <View
      style={{
        flexDirection: "row",
        gap: 8,
        paddingHorizontal: 12,
        paddingVertical: 8,
        borderTopWidth: 1,
        borderTopColor: colors.border,
        alignItems: "flex-end",
      }}
    >
      {/* Voice mode toggle */}
      <Pressable
        onPress={() => {
          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
          Keyboard.dismiss();
          onToggleMode();
        }}
        style={{
          width: 40,
          height: 40,
          borderRadius: 20,
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: colors.bgTertiary,
          marginBottom: 2,
        }}
      >
        <Text style={{ fontSize: 20 }}>{"\uD83C\uDFA4"}</Text>
      </Pressable>

      {/* Text input */}
      <TextInput
        ref={inputRef}
        value={text}
        onChangeText={setText}
        placeholder="Message PAI..."
        placeholderTextColor={colors.textMuted}
        multiline
        maxLength={2000}
        onSubmitEditing={handleSend}
        returnKeyType="send"
        blurOnSubmit
        style={{
          flex: 1,
          backgroundColor: colors.bgTertiary,
          borderRadius: 20,
          paddingHorizontal: 16,
          paddingVertical: 10,
          maxHeight: 120,
          color: colors.text,
          fontSize: 16,
        }}
      />

      {/* Send button */}
      <Pressable
        onPress={handleSend}
        disabled={!canSend}
        style={{
          width: 40,
          height: 40,
          borderRadius: 20,
          alignItems: "center",
          justifyContent: "center",
          marginBottom: 2,
          backgroundColor: canSend ? colors.accent : colors.bgTertiary,
        }}
      >
        <Text
          style={{
            fontSize: 18,
            fontWeight: "bold",
            color: canSend ? "#FFFFFF" : colors.textMuted,
          }}
        >
          {"\u2191"}
        </Text>
      </Pressable>
    </View>
  );
}