import React, { useCallback, useEffect, useState } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { Message } from "../../types";
import { playSingle, stopPlayback, onPlayingChange } from "../../services/audio";
import { ImageViewer } from "./ImageViewer";
import { useTheme } from "../../contexts/ThemeContext";

interface MessageBubbleProps {
  message: Message;
}

function formatDuration(ms?: number): string {
  if (!ms) return "0:00";
  const totalSeconds = Math.floor(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

function formatTime(timestamp: number): string {
  const d = new Date(timestamp);
  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

export function MessageBubble({ message }: MessageBubbleProps) {
  const [isPlaying, setIsPlaying] = useState(false);
  const [showViewer, setShowViewer] = useState(false);
  const { colors, isDark } = useTheme();

  // Track whether THIS bubble's audio is playing via the singleton URI
  useEffect(() => {
    return onPlayingChange((uri) => {
      setIsPlaying(uri !== null && uri === message.audioUri);
    });
  }, [message.audioUri]);

  const isUser = message.role === "user";
  const isSystem = message.role === "system";

  const handleVoicePress = useCallback(async () => {
    if (!message.audioUri) return;

    if (isPlaying) {
      // This bubble is playing — stop it
      await stopPlayback();
    } else {
      // Play this bubble (stops anything else automatically)
      await playSingle(message.audioUri, () => {});
    }
  }, [isPlaying, message.audioUri]);

  if (isSystem) {
    return (
      <View style={{ alignItems: "center", marginVertical: 4, paddingHorizontal: 16 }}>
        <Text style={{ color: colors.textMuted, fontSize: 12 }}>{message.content}</Text>
      </View>
    );
  }

  const bubbleBg = isUser
    ? colors.accent
    : isDark ? "#252538" : colors.bgSecondary;
  const bubbleRadius = isUser
    ? { borderTopRightRadius: 4 }
    : { borderTopLeftRadius: 4 };

  return (
    <View
      style={{
        flexDirection: "row",
        marginVertical: 4,
        paddingHorizontal: 12,
        justifyContent: isUser ? "flex-end" : "flex-start",
      }}
    >
      <View
        style={{
          maxWidth: "78%",
          borderRadius: 16,
          paddingHorizontal: 16,
          paddingVertical: 12,
          backgroundColor: bubbleBg,
          ...bubbleRadius,
        }}
      >
        {message.type === "image" && message.imageBase64 ? (
          <View>
            <Pressable onPress={() => setShowViewer(true)}>
              <Image
                source={{ uri: `data:image/png;base64,${message.imageBase64}` }}
                style={{
                  width: 260,
                  height: 180,
                  borderRadius: 10,
                  backgroundColor: colors.bgTertiary,
                }}
                resizeMode="contain"
              />
            </Pressable>
            {message.content ? (
              <Text
                style={{
                  color: isUser ? "#FFF" : colors.textSecondary,
                  fontSize: 12,
                  marginTop: 4,
                }}
              >
                {message.content}
              </Text>
            ) : null}
            <ImageViewer
              visible={showViewer}
              imageBase64={message.imageBase64}
              onClose={() => setShowViewer(false)}
            />
          </View>
        ) : message.type === "voice" ? (
          <View>
            <Pressable
              onPress={handleVoicePress}
              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
            >
              <View
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 18,
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: isPlaying
                    ? "#FF9F43"
                    : isUser
                    ? "rgba(255,255,255,0.2)"
                    : colors.border,
                }}
              >
                <Text style={{ fontSize: 14, color: isUser ? "#FFF" : colors.text }}>
                  {isPlaying ? "\u23F8" : "\u25B6"}
                </Text>
              </View>

              <View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 1, height: 32 }}>
                {Array.from({ length: 20 }).map((_, i) => (
                  <View
                    key={i}
                    style={{
                      flex: 1,
                      borderRadius: 2,
                      backgroundColor: isPlaying && i < 10
                        ? "#FF9F43"
                        : isUser
                        ? "rgba(255,255,255,0.5)"
                        : colors.textMuted,
                      height: `${20 + Math.sin(i * 0.8) * 60}%`,
                    }}
                  />
                ))}
              </View>

              <Text
                style={{
                  fontSize: 11,
                  color: isUser ? "rgba(255,255,255,0.8)" : colors.textSecondary,
                }}
              >
                {formatDuration(message.duration)}
              </Text>
            </Pressable>
            {message.content ? (
              <Text
                style={{
                  fontSize: 14,
                  lineHeight: 20,
                  marginTop: 8,
                  color: isUser ? "rgba(255,255,255,0.9)" : colors.textSecondary,
                }}
              >
                {message.content}
              </Text>
            ) : null}
          </View>
        ) : (
          <Text
            style={{
              fontSize: 16,
              lineHeight: 24,
              color: isUser ? "#FFF" : colors.text,
            }}
          >
            {message.content}
          </Text>
        )}

        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
            marginTop: 4,
            gap: 4,
            justifyContent: isUser ? "flex-end" : "flex-start",
          }}
        >
          <Text
            style={{
              fontSize: 10,
              color: isUser ? "rgba(255,255,255,0.6)" : colors.textMuted,
            }}
          >
            {formatTime(message.timestamp)}
          </Text>
          {isUser && message.status === "error" && (
            <Text style={{ fontSize: 10, color: colors.danger }}> !</Text>
          )}
        </View>
      </View>
    </View>
  );
}