/**
 * AI chat message bubble for the AI assistant screen.
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '../themes/ThemeProvider';

interface AIBubbleProps {
  message: string;
  isAI: boolean;
  timestamp: string;
}

export default function AIBubble({ message, isAI, timestamp }: AIBubbleProps) {
  const { theme } = useTheme();

  const formatTime = (ts: string): string => {
    try {
      const d = new Date(ts);
      return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
    } catch {
      return '';
    }
  };

  return (
    <View style={[styles.container, isAI ? styles.aiContainer : styles.userContainer]}>
      <View
        style={[
          styles.bubble,
          isAI
            ? [styles.aiBubble, { backgroundColor: theme.colors.card }]
            : [styles.userBubble, { backgroundColor: theme.colors.primary }],
          theme.shadow.sm,
        ]}
      >
        {isAI && (
          <Text style={[styles.aiLabel, { color: theme.colors.accent }]}>Fogbreak AI</Text>
        )}
        <Text
          style={[
            styles.message,
            { color: isAI ? theme.colors.text : theme.colors.white },
          ]}
        >
          {message}
        </Text>
      </View>
      <Text
        style={[
          styles.timestamp,
          { color: theme.colors.textSecondary },
          isAI ? styles.aiTimestamp : styles.userTimestamp,
        ]}
      >
        {formatTime(timestamp)}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 4,
    marginHorizontal: 16,
  },
  aiContainer: {
    alignItems: 'flex-start',
  },
  userContainer: {
    alignItems: 'flex-end',
  },
  bubble: {
    maxWidth: '82%',
    borderRadius: 16,
    paddingHorizontal: 14,
    paddingVertical: 10,
  },
  aiBubble: {
    borderTopLeftRadius: 4,
  },
  userBubble: {
    borderTopRightRadius: 4,
  },
  aiLabel: {
    fontSize: 11,
    fontWeight: '700',
    marginBottom: 4,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  message: {
    fontSize: 15,
    lineHeight: 21,
  },
  timestamp: {
    fontSize: 10,
    marginTop: 4,
  },
  aiTimestamp: {
    marginLeft: 4,
  },
  userTimestamp: {
    marginRight: 4,
  },
});