import React, { useCallback, useState } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { Message } from "../../types";
import { playAudio, stopPlayback } from "../../services/audio";

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 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 className="items-center my-1 px-4">
        <Text className="text-pai-text-muted text-xs">{message.content}</Text>
      </View>
    );
  }

  return (
    <View
      className={`flex-row my-1 px-3 ${isUser ? "justify-end" : "justify-start"}`}
    >
      <View
        className={`max-w-[78%] rounded-2xl px-4 py-3 ${
          isUser
            ? "bg-pai-accent rounded-tr-sm"
            : "bg-pai-surface rounded-tl-sm"
        }`}
      >
        {message.type === "image" && message.imageBase64 ? (
          /* Image message */
          <View>
            <Image
              source={{ uri: `data:image/png;base64,${message.imageBase64}` }}
              style={{
                width: 260,
                height: 180,
                borderRadius: 10,
                backgroundColor: "#14141F",
              }}
              resizeMode="contain"
            />
            {message.content ? (
              <Text
                style={{
                  color: isUser ? "#FFF" : "#9898B0",
                  fontSize: 12,
                  marginTop: 4,
                }}
              >
                {message.content}
              </Text>
            ) : null}
          </View>
        ) : message.type === "voice" ? (
          <Pressable
            onPress={handleVoicePress}
            className="flex-row items-center gap-3"
          >
            {/* Play/pause icon */}
            <View
              className={`w-9 h-9 rounded-full items-center justify-center ${
                isPlaying ? "bg-pai-voice" : isUser ? "bg-white/20" : "bg-pai-border"
              }`}
            >
              <Text
                className={`text-base ${isUser ? "text-white" : "text-pai-text"}`}
              >
                {isPlaying ? "⏸" : "▶"}
              </Text>
            </View>

            {/* Waveform placeholder */}
            <View className="flex-1 flex-row items-center gap-px h-8">
              {Array.from({ length: 20 }).map((_, i) => (
                <View
                  key={i}
                  className={`flex-1 rounded-full ${
                    isPlaying && i < 10
                      ? "bg-pai-voice"
                      : isUser
                      ? "bg-white/50"
                      : "bg-pai-text-muted"
                  }`}
                  style={{
                    height: `${20 + Math.sin(i * 0.8) * 60}%`,
                  }}
                />
              ))}
            </View>

            {/* Duration */}
            <Text
              className={`text-xs ${
                isUser ? "text-white/80" : "text-pai-text-secondary"
              }`}
            >
              {formatDuration(message.duration)}
            </Text>
          </Pressable>
        ) : (
          <Text
            className={`text-base leading-6 ${
              isUser ? "text-white" : "text-pai-text"
            }`}
          >
            {message.content}
          </Text>
        )}

        {/* Timestamp + status */}
        <View className={`flex-row items-center mt-1 gap-1 ${isUser ? "justify-end" : "justify-start"}`}>
          <Text
            className={`text-2xs ${
              isUser ? "text-white/60" : "text-pai-text-muted"
            }`}
          >
            {formatTime(message.timestamp)}
          </Text>
          {isUser && message.status === "error" && (
            <Text className="text-2xs text-pai-error"> !</Text>
          )}
        </View>
      </View>
    </View>
  );
}