import React, { useState } from 'react';

const mockLogs = [
  { id: 1, action: 'member_kick', user: { name: 'ModUser', avatar: 'M', color: '#5865f2' }, target: 'SpamBot#1234', time: '2 minutes ago', reason: 'Spam' },
  { id: 2, action: 'channel_create', user: { name: 'Admin', avatar: 'A', color: '#ff0000' }, target: '#announcements', time: '15 minutes ago' },
  { id: 3, action: 'role_update', user: { name: 'Admin', avatar: 'A', color: '#ff0000' }, target: 'Moderator', time: '1 hour ago', changes: 'Added kick permission' },
  { id: 4, action: 'member_ban', user: { name: 'ModUser', avatar: 'M', color: '#5865f2' }, target: 'ToxicUser#9999', time: '2 hours ago', reason: 'Harassment' },
  { id: 5, action: 'message_delete', user: { name: 'AutoMod', avatar: '🤖', color: '#3ba55d' }, target: '5 messages', time: '3 hours ago', reason: 'Spam filter' },
  { id: 6, action: 'invite_create', user: { name: 'Member', avatar: 'M', color: '#ffa500' }, target: 'discord.gg/abc123', time: '4 hours ago' },
  { id: 7, action: 'member_timeout', user: { name: 'ModUser', avatar: 'M', color: '#5865f2' }, target: 'RuleBreaker#0001', time: '5 hours ago', reason: 'Breaking rules', duration: '10 minutes' },
  { id: 8, action: 'server_update', user: { name: 'Owner', avatar: 'O', color: '#e91e63' }, target: 'Server name', time: '1 day ago', changes: 'Changed to AeThex Foundation' },
  { id: 9, action: 'emoji_create', user: { name: 'Admin', avatar: 'A', color: '#ff0000' }, target: ':custom_emoji:', time: '2 days ago' },
  { id: 10, action: 'webhook_create', user: { name: 'Developer', avatar: 'D', color: '#0066ff' }, target: 'GitHub Webhook', time: '3 days ago' },
];

const actionTypes = [
  { id: 'all', label: 'All Actions' },
  { id: 'member', label: 'Member Actions' },
  { id: 'channel', label: 'Channel Actions' },
  { id: 'role', label: 'Role Actions' },
  { id: 'message', label: 'Message Actions' },
  { id: 'server', label: 'Server Actions' },
  { id: 'invite', label: 'Invite Actions' },
];

const actionIcons = {
  member_kick: '👢',
  member_ban: '🔨',
  member_timeout: '⏰',
  member_join: '📥',
  member_leave: '📤',
  channel_create: '➕',
  channel_delete: '🗑️',
  channel_update: '📝',
  role_create: '🎭',
  role_update: '🎭',
  role_delete: '🎭',
  message_delete: '💬',
  message_pin: '📌',
  server_update: '⚙️',
  invite_create: '🔗',
  invite_delete: '🔗',
  emoji_create: '😀',
  emoji_delete: '😀',
  webhook_create: '🔌',
  webhook_delete: '🔌',
};

const actionLabels = {
  member_kick: 'kicked',
  member_ban: 'banned',
  member_timeout: 'timed out',
  member_join: 'joined',
  member_leave: 'left',
  channel_create: 'created channel',
  channel_delete: 'deleted channel',
  channel_update: 'updated channel',
  role_create: 'created role',
  role_update: 'updated role',
  role_delete: 'deleted role',
  message_delete: 'deleted',
  message_pin: 'pinned',
  server_update: 'updated',
  invite_create: 'created invite',
  invite_delete: 'deleted invite',
  emoji_create: 'added emoji',
  emoji_delete: 'removed emoji',
  webhook_create: 'created webhook',
  webhook_delete: 'deleted webhook',
};

export default function AuditLog({ onClose }) {
  const [filter, setFilter] = useState('all');
  const [searchUser, setSearchUser] = useState('');
  const [expandedLog, setExpandedLog] = useState(null);

  const filteredLogs = mockLogs.filter(log => {
    if (filter !== 'all' && !log.action.startsWith(filter)) return false;
    if (searchUser && !log.user.name.toLowerCase().includes(searchUser.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="audit-log">
      <div className="audit-header">
        <h2>📋 Audit Log</h2>
        <button className="audit-close" onClick={onClose}>✕</button>
      </div>

      <div className="audit-filters">
        <div className="audit-search">
          <span>🔍</span>
          <input
            type="text"
            placeholder="Filter by user..."
            value={searchUser}
            onChange={(e) => setSearchUser(e.target.value)}
          />
        </div>
        <select 
          className="audit-type-filter"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        >
          {actionTypes.map(type => (
            <option key={type.id} value={type.id}>{type.label}</option>
          ))}
        </select>
      </div>

      <div className="audit-list">
        {filteredLogs.map(log => (
          <div 
            key={log.id} 
            className={`audit-entry ${expandedLog === log.id ? 'expanded' : ''}`}
            onClick={() => setExpandedLog(expandedLog === log.id ? null : log.id)}
          >
            <div className="audit-entry-main">
              <span className="audit-icon">{actionIcons[log.action] || '📝'}</span>
              <div 
                className="audit-user-avatar"
                style={{ background: log.user.color }}
              >
                {log.user.avatar}
              </div>
              <div className="audit-info">
                <span className="audit-user-name">{log.user.name}</span>
                <span className="audit-action">{actionLabels[log.action] || log.action}</span>
                <span className="audit-target">{log.target}</span>
              </div>
              <span className="audit-time">{log.time}</span>
            </div>
            
            {expandedLog === log.id && (
              <div className="audit-details">
                {log.reason && (
                  <div className="audit-detail-row">
                    <span className="detail-label">Reason:</span>
                    <span className="detail-value">{log.reason}</span>
                  </div>
                )}
                {log.duration && (
                  <div className="audit-detail-row">
                    <span className="detail-label">Duration:</span>
                    <span className="detail-value">{log.duration}</span>
                  </div>
                )}
                {log.changes && (
                  <div className="audit-detail-row">
                    <span className="detail-label">Changes:</span>
                    <span className="detail-value">{log.changes}</span>
                  </div>
                )}
                <div className="audit-detail-row">
                  <span className="detail-label">ID:</span>
                  <span className="detail-value audit-id">{log.id}</span>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="audit-footer">
        <span className="audit-count">{filteredLogs.length} entries</span>
        <button className="audit-load-more">Load More</button>
      </div>
    </div>
  );
}
