import React, { useCallback, useEffect, useState } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { Message } from "../../types";
import { playAudio, 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();

  useEffect(() => {
    return onPlayingChange((playing) => {
      if (!playing) setIsPlaying(false);
    });
  }, []);

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

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

    if (isPlaying) {
      await stopPlayback();
      setIsPlaying(false);
    } else {
      setIsPlaying(true);
      await playAudio(message.audioUri, () => setIsPlaying(false));
    }
  }, [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" ? (
          <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>
        ) : (
          <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>
  );
}