/**
 * ToolActivityLog -- Real-time tool call activity display.
 */

import React from 'react';
import type { ToolActivity } from './useWorkspace';

interface ToolActivityLogProps {
  activities: ToolActivity[];
}

export const ToolActivityLog: React.FC<ToolActivityLogProps> = ({ activities }) => {
  if (!activities.length) {
    return (
      <div style={{ padding: 16, textAlign: 'center', color: '#999', fontSize: 12 }}>
        No tool activity yet
      </div>
    );
  }

  return (
    <div style={{ padding: 8 }}>
      {activities.map(activity => (
        <div
          key={activity.id}
          style={{
            padding: '8px 10px',
            marginBottom: 6,
            borderRadius: 6,
            fontSize: 12,
            border: `1px solid ${
              activity.status === 'calling'
                ? '#ffc107'
                : activity.status === 'success'
                  ? '#4caf50'
                  : '#f44336'
            }30`,
            background: activity.status === 'calling'
              ? '#fff8e1'
              : activity.status === 'success'
                ? '#e8f5e9'
                : '#ffebee',
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontWeight: 600 }}>{activity.toolName}</span>
            <span style={{
              fontSize: 10,
              padding: '1px 6px',
              borderRadius: 3,
              background: activity.status === 'calling'
                ? '#ffc107'
                : activity.status === 'success'
                  ? '#4caf50'
                  : '#f44336',
              color: '#fff',
            }}>
              {activity.status}
            </span>
          </div>
          {activity.args && Object.keys(activity.args).length > 0 && (
            <div style={{ marginTop: 4, color: '#666', fontSize: 11 }}>
              {Object.entries(activity.args)
                .map(([k, v]) => `${k}: ${typeof v === 'string' ? v.slice(0, 50) : JSON.stringify(v)}`)
                .join(', ')}
            </div>
          )}
          {activity.result && (
            <div style={{ marginTop: 4, color: '#388e3c', fontSize: 11, maxHeight: 60, overflow: 'hidden' }}>
              {activity.result.slice(0, 200)}
              {activity.result.length > 200 && '...'}
            </div>
          )}
          {activity.error && (
            <div style={{ marginTop: 4, color: '#c62828', fontSize: 11 }}>
              {activity.error}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};