import React, { useState, useEffect, useContext } from 'react';
import { AuthContext } from '../contexts/AuthContext';
import { formatDistanceToNow } from 'date-fns';

const SecurityLogs = () => {
  const { user, tenant } = useContext(AuthContext);
  const [logs, setLogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [filters, setFilters] = useState({
    level: 'all',
    eventType: 'all',
    timeRange: '24h',
    search: ''
  });
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 50,
    total: 0
  });

  useEffect(() => {
    if (user && tenant) {
      loadSecurityLogs();
    }
  }, [user, tenant, filters, pagination.page]);

  const loadSecurityLogs = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        page: pagination.page,
        limit: pagination.limit,
        ...filters
      });

      const response = await fetch(`/api/${tenant.slug}/security-logs?${params}`, {
        headers: {
          'Authorization': `Bearer ${user.token}`,
          'Content-Type': 'application/json'
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      setLogs(data.logs || []);
      setPagination(prev => ({
        ...prev,
        total: data.total || 0
      }));
    } catch (err) {
      console.error('Failed to load security logs:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const getLogLevelBadge = (level) => {
    const styles = {
      'critical': 'bg-red-500 text-white px-2 py-1 rounded text-xs font-semibold',
      'high': 'bg-orange-500 text-white px-2 py-1 rounded text-xs font-semibold',
      'medium': 'bg-yellow-500 text-black px-2 py-1 rounded text-xs font-semibold',
      'low': 'bg-blue-500 text-white px-2 py-1 rounded text-xs font-semibold',
      'info': 'bg-gray-500 text-white px-2 py-1 rounded text-xs font-semibold'
    };
    return styles[level] || styles.info;
  };

  const getEventTypeIcon = (eventType) => {
    const icons = {
      'failed_login': '🚫',
      'successful_login': '✅',
      'suspicious_activity': '⚠️',
      'country_alert': '🌍',
      'brute_force': '🔨',
      'account_lockout': '🔒',
      'password_reset': '🔄',
      'admin_action': '👤'
    };
    return icons[eventType] || '📋';
  };

  const formatMetadata = (metadata) => {
    if (!metadata) return '';
    const items = [];
    if (metadata.ip_address) items.push(`IP: ${metadata.ip_address}`);
    if (metadata.country) items.push(`Country: ${metadata.country}`);
    if (metadata.user_agent) items.push(`Agent: ${metadata.user_agent.substring(0, 50)}...`);
    return items.join(' | ');
  };

  const totalPages = Math.ceil(pagination.total / pagination.limit);

  // Don't render if user is not authenticated
  if (!user || !tenant) {
    return (
      <div className="p-6">
        <div className="text-center py-8 text-gray-500">
          Please log in to view security logs
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2 text-gray-900">Security Logs</h1>
        <p className="text-gray-600">Monitor security events for your tenant: {tenant.name}</p>
      </div>

      {error && (
        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
          <div className="text-red-800">{error}</div>
        </div>
      )}

      {/* Filters */}
      <div className="bg-white rounded-lg shadow mb-6">
        <div className="px-6 py-4 border-b border-gray-200">
          <h3 className="text-lg font-medium text-gray-900">Filters</h3>
        </div>
        <div className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Security Level</label>
              <select
                value={filters.level}
                onChange={(e) => setFilters(prev => ({ ...prev, level: e.target.value }))}
                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="all">All Levels</option>
                <option value="critical">Critical</option>
                <option value="high">High</option>
                <option value="medium">Medium</option>
                <option value="low">Low</option>
                <option value="info">Info</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Event Type</label>
              <select
                value={filters.eventType}
                onChange={(e) => setFilters(prev => ({ ...prev, eventType: e.target.value }))}
                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="all">All Events</option>
                <option value="failed_login">Failed Logins</option>
                <option value="successful_login">Successful Logins</option>
                <option value="suspicious_activity">Suspicious Activity</option>
                <option value="country_alert">Country Alerts</option>
                <option value="brute_force">Brute Force</option>
                <option value="account_lockout">Account Lockouts</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Time Range</label>
              <select
                value={filters.timeRange}
                onChange={(e) => setFilters(prev => ({ ...prev, timeRange: e.target.value }))}
                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="1h">Last Hour</option>
                <option value="24h">Last 24 Hours</option>
                <option value="7d">Last 7 Days</option>
                <option value="30d">Last 30 Days</option>
                <option value="all">All Time</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Search</label>
              <input
                type="text"
                placeholder="IP, username..."
                value={filters.search}
                onChange={(e) => setFilters(prev => ({ ...prev, search: e.target.value }))}
                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Security Logs Table */}
      <div className="bg-white rounded-lg shadow">
        <div className="px-6 py-4 border-b border-gray-200">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-medium text-gray-900">Security Events</h3>
            <span className="text-sm text-gray-500">
              {pagination.total} total events
            </span>
          </div>
        </div>
        <div className="p-6">
          {loading ? (
            <div className="flex justify-center py-8">
              <div className="text-gray-500">Loading security logs...</div>
            </div>
          ) : logs.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              No security logs found matching your criteria
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-200">
                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Time</th>
                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Level</th>
                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Event</th>
                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Message</th>
                    <th className="text-left p-3 text-sm font-medium text-gray-500 uppercase tracking-wider">Details</th>
                  </tr>
                </thead>
                <tbody>
                  {logs.map((log) => (
                    <tr key={log.id} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="p-3 text-sm">
                        <div>{new Date(log.timestamp).toLocaleString()}</div>
                        <div className="text-xs text-gray-500">
                          {formatDistanceToNow(new Date(log.timestamp), { addSuffix: true })}
                        </div>
                      </td>
                      <td className="p-3">
                        <span className={getLogLevelBadge(log.level)}>
                          {log.level.toUpperCase()}
                        </span>
                      </td>
                      <td className="p-3">
                        <div className="flex items-center gap-2">
                          <span>{getEventTypeIcon(log.event_type)}</span>
                          <span className="text-sm">{log.event_type.replace('_', ' ').toUpperCase()}</span>
                        </div>
                      </td>
                      <td className="p-3 text-sm max-w-md">
                        <div className="truncate" title={log.message}>
                          {log.message}
                        </div>
                      </td>
                      <td className="p-3 text-xs text-gray-600 max-w-md">
                        <div className="truncate" title={formatMetadata(log.metadata)}>
                          {formatMetadata(log.metadata)}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex justify-between items-center mt-6">
              <div className="text-sm text-gray-500">
                Page {pagination.page} of {totalPages}
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => setPagination(prev => ({ ...prev, page: Math.max(1, prev.page - 1) }))}
                  disabled={pagination.page === 1}
                  className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
                >
                  Previous
                </button>
                <button
                  onClick={() => setPagination(prev => ({ ...prev, page: Math.min(totalPages, prev.page + 1) }))}
                  disabled={pagination.page === totalPages}
                  className="px-3 py-1 text-sm border border-gray-300 rounded disabled:opacity-50 hover:bg-gray-50"
                >
                  Next
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default SecurityLogs;