thrilltrack-explorer/src/components/moderation/ActivityCard.tsx

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { CheckCircle, XCircle, Flag, Shield, AlertCircle } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';

interface ActivityCardProps {
  activity: {
    id: string;
    type: 'submission' | 'report' | 'review';
    action: 'approved' | 'rejected' | 'reviewed' | 'dismissed' | 'flagged';
    entity_type?: string;
    entity_name?: string;
    timestamp: string;
    moderator_id?: string | null;
    moderator?: {
      username: string;
      display_name?: string | null;
      avatar_url?: string | null;
    };
  };
}

export function ActivityCard({ activity }: ActivityCardProps) {
  const getActionIcon = () => {
    switch (activity.action) {
      case 'approved':
        return <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />;
      case 'rejected':
        return <XCircle className="w-5 h-5 text-red-600 dark:text-red-400" />;
      case 'reviewed':
        return <Shield className="w-5 h-5 text-blue-600 dark:text-blue-400" />;
      case 'dismissed':
        return <XCircle className="w-5 h-5 text-gray-600 dark:text-gray-400" />;
      case 'flagged':
        return <AlertCircle className="w-5 h-5 text-orange-600 dark:text-orange-400" />;
      default:
        return <Flag className="w-5 h-5 text-muted-foreground" />;
    }
  };

  const getActionBadge = () => {
    const variants = {
      approved: 'default',
      rejected: 'destructive',
      reviewed: 'default',
      dismissed: 'secondary',
      flagged: 'secondary',
    } as const;

    return (
      <Badge variant={variants[activity.action] || 'secondary'} className="capitalize">
        {activity.action}
      </Badge>
    );
  };

  const getActivityTitle = () => {
    const typeLabels = {
      submission: 'Submission',
      report: 'Report',
      review: 'Review',
    };

    const entityTypeLabels = {
      park: 'Park',
      ride: 'Ride',
      photo: 'Photo',
      company: 'Company',
      review: 'Review',
    };

    const entityLabel = activity.entity_type 
      ? entityTypeLabels[activity.entity_type as keyof typeof entityTypeLabels] || activity.entity_type
      : typeLabels[activity.type];

    return `${entityLabel} ${activity.action}`;
  };

  const moderatorName = activity.moderator?.display_name || activity.moderator?.username || 'Unknown Moderator';
  const moderatorInitial = moderatorName.charAt(0).toUpperCase();

  return (
    <Card className="p-4 hover:bg-accent/50 transition-colors">
      <div className="flex items-start gap-4">
        <div className="p-2 bg-muted rounded-lg">
          {getActionIcon()}
        </div>
        
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-2 mb-1">
            <p className="font-medium truncate">
              {getActivityTitle()}
            </p>
            {getActionBadge()}
          </div>
          
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Avatar className="w-5 h-5">
              <AvatarImage src={activity.moderator?.avatar_url || undefined} />
              <AvatarFallback className="text-xs">{moderatorInitial}</AvatarFallback>
            </Avatar>
            <span className="truncate">
              by {moderatorName}
            </span>
            <span className="text-xs">•</span>
            <span className="text-xs whitespace-nowrap">
              {formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
            </span>
          </div>
        </div>
      </div>
    </Card>
  );
}