'use client';

/**
 * ActivityTimeline Component
 *
 * Displays issue activity history.
 *
 * @module features/issues/components/ActivityTimeline
 */

import { MessageSquare, Bot, User } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import type { IssueActivity } from '../types';

interface ActivityTimelineProps {
  activities: IssueActivity[];
  onAddComment?: () => void;
  className?: string;
}

export function ActivityTimeline({ activities, onAddComment, className }: ActivityTimelineProps) {
  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" aria-hidden="true" />
            Activity
          </CardTitle>
          {onAddComment && (
            <Button variant="outline" size="sm" onClick={onAddComment}>
              Add Comment
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-6" role="list" aria-label="Issue activity">
          {activities.map((item, index) => (
            <div key={item.id} className="flex gap-4" role="listitem">
              <div className="relative flex flex-col items-center">
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
                  {item.actor.type === 'agent' ? (
                    <Bot className="h-4 w-4" aria-hidden="true" />
                  ) : (
                    <User className="h-4 w-4" aria-hidden="true" />
                  )}
                </div>
                {index < activities.length - 1 && (
                  <div className="absolute top-8 h-full w-px bg-border" aria-hidden="true" />
                )}
              </div>
              <div className={cn('flex-1', index < activities.length - 1 && 'pb-6')}>
                <div className="flex flex-wrap items-baseline gap-2">
                  <span className="font-medium">{item.actor.name}</span>
                  <span className="text-sm text-muted-foreground">{item.message}</span>
                </div>
                <p className="text-xs text-muted-foreground">
                  <time dateTime={item.timestamp}>{item.timestamp}</time>
                </p>
              </div>
            </div>
          ))}
        </div>

        {activities.length === 0 && (
          <div className="py-8 text-center text-muted-foreground">No activity yet</div>
        )}
      </CardContent>
    </Card>
  );
}