import React from 'react';
import { ActivityLog, User } from '../types';
import { XIcon } from './icons/XIcon';

interface ActivityLogModalProps {
  logs: ActivityLog[];
  users: User[];
  onClose: () => void;
}

const ActivityLogModal: React.FC<ActivityLogModalProps> = ({ logs, users, onClose }) => {
  const getUserById = (userId: string) => users.find(u => u.id === userId);

  const formatLogMessage = (log: ActivityLog): string => {
    const actor = getUserById(log.actorId);
    const actorName = actor ? actor.username : `User (${log.actorId})`;
    const targetUser = log.targetId ? getUserById(log.targetId) : null;
    const targetUsername = targetUser ? targetUser.username : `User (${log.targetId})`;


    switch (log.action) {
      case 'CREATED_POST':
        return `${actorName} created a post: "${(log.details?.caption as string || '').substring(0, 30)}..."`;
      case 'DELETED_POST':
        return `${actorName} deleted a post (ID: ${log.targetId}).`;
      case 'REPORTED_POST':
        return `${actorName} reported post ${log.targetId} for "${log.details?.reason}".`;
      case 'DISMISSED_REPORTS':
        return `${actorName} dismissed all reports for post ${log.targetId}.`;
      case 'CHANGED_ROLE':
        return `${actorName} changed the role of ${targetUsername} from ${log.details?.from} to ${log.details?.to}.`;
      case 'SUSPENDED_USER':
        return `${actorName} suspended ${targetUsername} for: "${log.details?.reason}".`;
      case 'UNSUSPENDED_USER':
        return `${actorName} unsuspended ${targetUsername}.`;
      case 'TEMP_DELETED_USER':
        return `${actorName} temporarily deleted ${targetUsername}.`;
      case 'RESTORED_USER':
        return `${actorName} restored the account for ${targetUsername}.`;
      case 'PERMA_DELETED_USER':
        return `${actorName} permanently deleted user ${log.targetId}.`;
      case 'REQUESTED_UNSUSPEND':
        return `${actorName} requested to be unsuspended.`;
      case 'CREATED_AD':
        return `${actorName} created a new ad: "${(log.details?.caption as string || '').substring(0, 30)}..."`;
      case 'ACTIVATED_AD':
        return `${actorName} activated ad (ID: ${log.targetId}).`;
      case 'DEACTIVATED_AD':
        return `${actorName} deactivated ad (ID: ${log.targetId}).`;
      case 'DELETED_AD':
        return `${actorName} deleted ad (ID: ${log.targetId}).`;
      default:
        return `Action: ${log.action} by ${actorName}`;
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-background rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col border border-accent">
        <div className="flex justify-between items-center p-4 border-b border-muted">
          <h2 className="text-xl font-bold">Activity Log</h2>
          <button onClick={onClose} className="text-secondary hover:text-foreground">
            <XIcon className="w-6 h-6" />
          </button>
        </div>
        <div className="p-4 overflow-y-auto">
          {logs.length > 0 ? (
            <ul className="space-y-3">
              {logs.map(log => (
                <li key={log.id} className="flex items-start gap-3 p-2 rounded-md hover:bg-muted">
                  <img src={getUserById(log.actorId)?.avatar} alt="" className="w-8 h-8 rounded-full mt-1" />
                  <div className="flex-grow">
                    <p className="text-sm">{formatLogMessage(log)}</p>
                    <p className="text-xs text-muted-foreground">{new Date(log.timestamp).toLocaleString()}</p>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-muted-foreground text-center py-8">No activity recorded yet.</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default ActivityLogModal;