thrilltrack-explorer/src/components/admin/SystemActivityLog.tsx

import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { 
  FileEdit, 
  Plus, 
  History, 
  Shield, 
  UserCog, 
  FileCheck, 
  FileX, 
  Flag, 
  AlertCircle, 
  Star, 
  AlertTriangle, 
  Image as ImageIcon, 
  CheckCircle,
  ChevronDown,
  ChevronUp,
  Trash2
} from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
import { 
  fetchSystemActivities, 
  SystemActivity, 
  ActivityType,
  EntityChangeDetails,
  AdminActionDetails,
  SubmissionReviewDetails,
  ReportResolutionDetails,
  ReviewModerationDetails,
  PhotoApprovalDetails
} from '@/lib/systemActivityService';

export interface SystemActivityLogRef {
  refresh: () => Promise<void>;
}

interface SystemActivityLogProps {
  limit?: number;
  showFilters?: boolean;
}

const activityTypeConfig = {
  entity_change: {
    icon: FileEdit,
    color: 'text-blue-500',
    bgColor: 'bg-blue-500/10',
    label: 'Entity Change',
  },
  admin_action: {
    icon: Shield,
    color: 'text-red-500',
    bgColor: 'bg-red-500/10',
    label: 'Admin Action',
  },
  submission_review: {
    icon: FileCheck,
    color: 'text-green-500',
    bgColor: 'bg-green-500/10',
    label: 'Submission Review',
  },
  report_resolution: {
    icon: Flag,
    color: 'text-orange-500',
    bgColor: 'bg-orange-500/10',
    label: 'Report Resolution',
  },
  review_moderation: {
    icon: Star,
    color: 'text-purple-500',
    bgColor: 'bg-purple-500/10',
    label: 'Review Moderation',
  },
  photo_approval: {
    icon: ImageIcon,
    color: 'text-teal-500',
    bgColor: 'bg-teal-500/10',
    label: 'Photo Approval',
  },
};

export const SystemActivityLog = forwardRef<SystemActivityLogRef, SystemActivityLogProps>(
  ({ limit = 50, showFilters = true }, ref) => {
    const [activities, setActivities] = useState<SystemActivity[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [filterType, setFilterType] = useState<ActivityType | 'all'>('all');
    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());

    const loadActivities = async () => {
      setIsLoading(true);
      try {
        const data = await fetchSystemActivities(limit, {
          type: filterType === 'all' ? undefined : filterType,
        });
        setActivities(data);
      } catch (error) {
        console.error('Error loading system activities:', error);
      } finally {
        setIsLoading(false);
      }
    };

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

    useImperativeHandle(ref, () => ({
      refresh: loadActivities,
    }));

    const toggleExpanded = (id: string) => {
      setExpandedIds(prev => {
        const next = new Set(prev);
        if (next.has(id)) {
          next.delete(id);
        } else {
          next.add(id);
        }
        return next;
      });
    };

    const renderActivityDetails = (activity: SystemActivity) => {
      const isExpanded = expandedIds.has(activity.id);

      switch (activity.type) {
        case 'entity_change': {
          const details = activity.details as EntityChangeDetails;
          return (
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <Badge variant="outline" className="capitalize">
                  {details.change_type}
                </Badge>
                <span className="text-muted-foreground">{details.entity_type}</span>
                {details.entity_name && (
                  <span className="font-medium">{details.entity_name}</span>
                )}
              </div>
              {isExpanded && details.change_reason && (
                <p className="text-sm text-muted-foreground pl-4 border-l-2">
                  Reason: {details.change_reason}
                </p>
              )}
              {isExpanded && details.version_number && (
                <p className="text-xs text-muted-foreground">
                  Version #{details.version_number}
                </p>
              )}
            </div>
          );
        }

        case 'admin_action': {
          const details = activity.details as AdminActionDetails;
          return (
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <Badge variant="destructive" className="capitalize">
                  {details.action.replace(/_/g, ' ')}
                </Badge>
                {details.target_username && (
                  <span className="text-muted-foreground">
                    → @{details.target_username}
                  </span>
                )}
              </div>
              {isExpanded && details.details && (
                <pre className="text-xs bg-muted p-2 rounded overflow-auto">
                  {JSON.stringify(details.details, null, 2)}
                </pre>
              )}
            </div>
          );
        }

        case 'submission_review': {
          const details = activity.details as SubmissionReviewDetails;
          const statusColor = details.status === 'approved' ? 'bg-green-500/10 text-green-500' : 'bg-red-500/10 text-red-500';
          
          // Special handling for photo deletion submissions
          if (details.submission_type === 'photo_delete' && details.photo_url) {
            return (
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-sm flex-wrap">
                  <Badge className={statusColor}>
                    {details.status}
                  </Badge>
                  <Trash2 className="h-4 w-4 text-muted-foreground" />
                  <span className="text-muted-foreground">Photo deletion</span>
                  {details.entity_type && (
                    <span className="text-muted-foreground">
                      from {details.entity_type}
                    </span>
                  )}
                </div>
                
                <div className="flex gap-3 items-start">
                  <img 
                    src={details.photo_url} 
                    alt={details.photo_title || details.photo_caption || 'Deleted photo'}
                    className="w-20 h-20 object-cover rounded border"
                  />
                  <div className="flex-1 space-y-1">
                    {details.photo_title && (
                      <p className="text-sm font-medium">{details.photo_title}</p>
                    )}
                    {details.photo_caption && (
                      <p className="text-sm text-muted-foreground">{details.photo_caption}</p>
                    )}
                    {details.deletion_reason && (
                      <div className="flex items-start gap-2 mt-2 p-2 bg-muted rounded text-sm">
                        <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                        <span className="text-muted-foreground">
                          <strong>Reason:</strong> {details.deletion_reason}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          }

          // Special handling for photo additions
          if (details.submission_type === 'photo' && details.photo_url) {
            return (
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-sm flex-wrap">
                  <Badge className={statusColor}>
                    {details.status}
                  </Badge>
                  <ImageIcon className="h-4 w-4 text-muted-foreground" />
                  <span className="text-muted-foreground">Photo submission</span>
                  {details.entity_type && (
                    <span className="text-muted-foreground">
                      to {details.entity_type}
                    </span>
                  )}
                </div>
                
                {isExpanded && (
                  <div className="flex gap-3 items-start">
                    <img 
                      src={details.photo_url} 
                      alt={details.photo_title || details.photo_caption || 'Photo'}
                      className="w-20 h-20 object-cover rounded border"
                    />
                    <div className="flex-1 space-y-1">
                      {details.photo_title && (
                        <p className="text-sm font-medium">{details.photo_title}</p>
                      )}
                      {details.photo_caption && (
                        <p className="text-sm text-muted-foreground">{details.photo_caption}</p>
                      )}
                    </div>
                  </div>
                )}
              </div>
            );
          }

          // Generic submission display
          return (
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <Badge className={statusColor}>
                  {details.status}
                </Badge>
                <span className="text-muted-foreground">{details.submission_type}</span>
                {details.entity_name && (
                  <span className="font-medium">{details.entity_name}</span>
                )}
              </div>
            </div>
          );
        }

        case 'report_resolution': {
          const details = activity.details as ReportResolutionDetails;
          return (
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <Badge variant="outline">{details.status}</Badge>
                <span className="text-muted-foreground">{details.reported_entity_type}</span>
              </div>
              {isExpanded && details.resolution_notes && (
                <p className="text-sm text-muted-foreground pl-4 border-l-2">
                  {details.resolution_notes}
                </p>
              )}
            </div>
          );
        }

        case 'review_moderation': {
          const details = activity.details as ReviewModerationDetails;
          return (
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <Badge variant="outline">{details.moderation_status}</Badge>
                <span className="text-muted-foreground">{details.entity_type} review</span>
              </div>
            </div>
          );
        }

        case 'photo_approval': {
          const details = activity.details as PhotoApprovalDetails;
          return (
            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <Badge className="bg-teal-500/10 text-teal-500">Approved</Badge>
                <span className="text-muted-foreground">{details.entity_type} photo</span>
              </div>
            </div>
          );
        }

        default:
          return null;
      }
    };

    if (isLoading) {
      return (
        <Card>
          <CardHeader>
            <CardTitle>System Activity Log</CardTitle>
            <CardDescription>Loading recent system activities...</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex gap-4">
                <Skeleton className="h-10 w-10 rounded-full" />
                <div className="flex-1 space-y-2">
                  <Skeleton className="h-4 w-3/4" />
                  <Skeleton className="h-3 w-1/2" />
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      );
    }

    return (
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>System Activity Log</CardTitle>
              <CardDescription>
                Complete audit trail of all system changes and actions
              </CardDescription>
            </div>
            {showFilters && (
              <Select value={filterType} onValueChange={(value) => setFilterType(value as ActivityType | 'all')}>
                <SelectTrigger className="w-[200px]">
                  <SelectValue placeholder="Filter by type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Activities</SelectItem>
                  {Object.entries(activityTypeConfig).map(([key, config]) => (
                    <SelectItem key={key} value={key}>
                      {config.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            )}
          </div>
        </CardHeader>
        <CardContent>
          {activities.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              No activities found
            </div>
          ) : (
            <div className="space-y-4">
              {activities.map((activity) => {
                const config = activityTypeConfig[activity.type];
                const Icon = config.icon;
                const isExpanded = expandedIds.has(activity.id);

                return (
                  <div
                    key={activity.id}
                    className="flex gap-4 p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
                  >
                    <div className={`p-2 rounded-full ${config.bgColor} h-fit`}>
                      <Icon className={`h-5 w-5 ${config.color}`} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2 mb-2">
                        <div className="flex items-center gap-2 flex-wrap">
                          {activity.actor ? (
                            <>
                              <Avatar className="h-6 w-6">
                                <AvatarImage src={activity.actor.avatar_url} />
                                <AvatarFallback>
                                  {activity.actor.username.slice(0, 2).toUpperCase()}
                                </AvatarFallback>
                              </Avatar>
                              <span className="font-medium">
                                {activity.actor.display_name || activity.actor.username}
                              </span>
                            </>
                          ) : (
                            <span className="font-medium text-muted-foreground">System</span>
                          )}
                          <span className="text-muted-foreground">
                            {activity.action}
                          </span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className="text-xs text-muted-foreground whitespace-nowrap">
                            {formatDistanceToNow(new Date(activity.timestamp), { addSuffix: true })}
                          </span>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-6 w-6 p-0"
                            onClick={() => toggleExpanded(activity.id)}
                          >
                            {isExpanded ? (
                              <ChevronUp className="h-4 w-4" />
                            ) : (
                              <ChevronDown className="h-4 w-4" />
                            )}
                          </Button>
                        </div>
                      </div>
                      {renderActivityDetails(activity)}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>
    );
  }
);

SystemActivityLog.displayName = 'SystemActivityLog';