import React, { useState, useEffect } from 'react';

export default function ActivityFeed() {
  const [activities, setActivities] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadActivities();
  }, []);

  const loadActivities = async () => {
    setLoading(true);
    try {
      const [tasksResult, commentsResult] = await Promise.all([
        window.mcp.callTool('wrike_list_tasks', { limit: 10 }),
        window.mcp.callTool('wrike_list_comments', {}),
      ]);

      const taskActivities = (tasksResult.tasks || []).map((task: any) => ({
        id: task.id,
        type: 'task',
        title: task.title,
        date: task.updatedDate,
        status: task.status,
      }));

      const commentActivities = (commentsResult.comments || []).slice(0, 10).map((comment: any) => ({
        id: comment.id,
        type: 'comment',
        title: comment.text.substring(0, 100),
        date: comment.createdDate,
      }));

      const combined = [...taskActivities, ...commentActivities].sort(
        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
      );

      setActivities(combined.slice(0, 20));
    } catch (error) {
      console.error('Failed to load activities:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Activity Feed</h1>
      
      <button
        onClick={loadActivities}
        style={{
          background: '#3b82f6',
          color: 'white',
          padding: '8px 16px',
          borderRadius: '6px',
          border: 'none',
          cursor: 'pointer',
          marginBottom: '24px',
        }}
      >
        Refresh
      </button>

      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ display: 'grid', gap: '12px' }}>
          {activities.map(activity => (
            <div
              key={activity.id}
              style={{
                background: '#1f2937',
                padding: '16px',
                borderRadius: '8px',
                border: '1px solid #374151',
                display: 'flex',
                gap: '16px',
              }}
            >
              <div
                style={{
                  width: '40px',
                  height: '40px',
                  borderRadius: '50%',
                  background: activity.type === 'task' ? '#3b82f6' : '#10b981',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                }}
              >
                {activity.type === 'task' ? '📝' : '💬'}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: '600', marginBottom: '4px' }}>{activity.title}</div>
                <div style={{ fontSize: '14px', color: '#9ca3af' }}>
                  {activity.type === 'task' ? `Task ${activity.status}` : 'Comment added'}
                  {' • '}
                  {new Date(activity.date).toLocaleString()}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
