import React from 'react';
import { formatFieldLabel, formatFieldValueAsText } from './chatDataUtils';
import styles from './ChatAssistant.module.css';

interface ChatMessageCardProps {
  data: Record<string, unknown>[];
}

interface ChatCardFieldProps {
  fieldKey: string;
  value: unknown;
}

const ChatCardField: React.FC<ChatCardFieldProps> = ({ fieldKey, value }) => {
  const label = formatFieldLabel(fieldKey);

  if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
    return (
      <div className={styles.chatCardFieldGroup}>
        <p className={styles.chatCardField}>
          <strong>{label}</strong>
        </p>
        <div className={styles.chatCardNested}>
          {Object.entries(value as Record<string, unknown>).map(([nestedKey, nestedValue]) => (
            <ChatCardField key={nestedKey} fieldKey={nestedKey} value={nestedValue} />
          ))}
        </div>
      </div>
    );
  }

  return (
    <p className={styles.chatCardField}>
      <strong>{label}:</strong> {formatFieldValueAsText(value)}
    </p>
  );
};

const ChatMessageCard: React.FC<ChatMessageCardProps> = ({ data }) => {
  if (data.length === 0) {
    return null;
  }

  return (
    <div className={styles.chatCardList}>
      {data.map((item, index) => (
        <div key={index} className={styles.chatCardItem}>
          {Object.entries(item).map(([key, value]) => (
            <ChatCardField key={key} fieldKey={key} value={value} />
          ))}
        </div>
      ))}
    </div>
  );
};

export default ChatMessageCard;