/**
 * Activity Feed App - Recent activity across the project
 */

import React, { useState } from 'react';

export function ActivityFeed({ projectId }: { projectId?: number }) {
  const [activities] = useState([
    { id: 1, type: 'todo_completed', person: 'Alice', content: 'completed "Design homepage mockup"', timestamp: '2 hours ago' },
    { id: 2, type: 'comment', person: 'Bob', content: 'commented on "Design Direction"', timestamp: '3 hours ago' },
    { id: 3, type: 'message', person: 'Charlie', content: 'posted "Timeline Update"', timestamp: '5 hours ago' },
    { id: 4, type: 'todo_created', person: 'Diana', content: 'created todo "QA testing round 1"', timestamp: '1 day ago' },
    { id: 5, type: 'file_upload', person: 'Alice', content: 'uploaded "logo-draft-v3.png"', timestamp: '1 day ago' },
    { id: 6, type: 'schedule', person: 'Bob', content: 'scheduled "Design Review" for Jan 15', timestamp: '2 days ago' },
  ]);

  const getActivityIcon = (type: string) => {
    switch (type) {
      case 'todo_completed': return '✅';
      case 'todo_created': return '📝';
      case 'comment': return '💬';
      case 'message': return '📢';
      case 'file_upload': return '📎';
      case 'schedule': return '📅';
      default: return '•';
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Activity Feed</h1>
      
      <div style={{ borderLeft: '2px solid #ddd', paddingLeft: '20px' }}>
        {activities.map((activity, index) => (
          <div key={activity.id} style={{ 
            position: 'relative',
            marginBottom: index < activities.length - 1 ? '24px' : 0,
            paddingBottom: index < activities.length - 1 ? '24px' : 0
          }}>
            <div style={{ 
              position: 'absolute', 
              left: '-30px', 
              width: '20px', 
              height: '20px', 
              borderRadius: '50%', 
              background: 'white', 
              border: '2px solid #1d8cf8',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '10px'
            }}>
              {getActivityIcon(activity.type)}
            </div>
            <div style={{ fontSize: '14px', marginBottom: '4px' }}>
              <span style={{ fontWeight: 'bold' }}>{activity.person}</span> {activity.content}
            </div>
            <div style={{ fontSize: '12px', color: '#999' }}>{activity.timestamp}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
