import React from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
  RefreshCw,
  Activity,
  Play,
  HardDrive,
  Cpu,
  Container,
  Package,
  Shield,
  Fingerprint,
  CheckCircle,
  AlertCircle,
  XCircle,
} from 'lucide-react';
import { formatRelativeTime } from '@/lib/utils';
import { agentApi, securityApi } from '@/lib/api';
import toast from 'react-hot-toast';
import { cn } from '@/lib/utils';
import { AgentSubsystem } from '@/types';

interface AgentScannersProps {
  agentId: string;
}

// Map subsystem types to icons and display names
const subsystemConfig: Record<string, { icon: React.ReactNode; name: string; description: string; category: string }> = {
  updates: {
    icon: <Package className="h-4 w-4" />,
    name: 'Package Update Scanner',
    description: 'Scans for available package updates (APT, DNF, Windows Update, etc.)',
    category: 'system',
  },
  storage: {
    icon: <HardDrive className="h-4 w-4" />,
    name: 'Disk Usage Reporter',
    description: 'Reports disk usage metrics and storage availability',
    category: 'storage',
  },
  system: {
    icon: <Cpu className="h-4 w-4" />,
    name: 'System Metrics Scanner',
    description: 'Reports CPU, memory, processes, and system uptime',
    category: 'system',
  },
  docker: {
    icon: <Container className="h-4 w-4" />,
    name: 'Docker Image Scanner',
    description: 'Scans Docker containers for available image updates',
    category: 'system',
  },
};

export function AgentScanners({ agentId }: AgentScannersProps) {
  const queryClient = useQueryClient();

  // Fetch subsystems from API
  const { data: subsystems = [], isLoading, refetch } = useQuery({
    queryKey: ['subsystems', agentId],
    queryFn: async () => {
      const data = await agentApi.getSubsystems(agentId);
      return data;
    },
    refetchInterval: 30000, // Refresh every 30 seconds
  });

  // Fetch security health status
  const { data: securityOverview, isLoading: securityLoading } = useQuery({
    queryKey: ['security-overview'],
    queryFn: async () => {
      const data = await securityApi.getOverview();
      return data;
    },
    refetchInterval: 60000, // Refresh every minute
  });

  // Helper function to get security status color and icon
  const getSecurityStatusDisplay = (status: string) => {
    switch (status) {
      case 'healthy':
      case 'enforced':
      case 'operational':
        return {
          color: 'text-green-600 bg-green-100 border-green-200',
          icon: <CheckCircle className="h-4 w-4 text-green-600" />
        };
      case 'degraded':
        return {
          color: 'text-amber-600 bg-amber-100 border-amber-200',
          icon: <AlertCircle className="h-4 w-4 text-amber-600" />
        };
      case 'unhealthy':
      case 'unavailable':
        return {
          color: 'text-red-600 bg-red-100 border-red-200',
          icon: <XCircle className="h-4 w-4 text-red-600" />
        };
      default:
        return {
          color: 'text-gray-600 bg-gray-100 border-gray-200',
          icon: <AlertCircle className="h-4 w-4 text-gray-600" />
        };
    }
  };

  // Get security icon for subsystem type
  const getSecurityIcon = (type: string) => {
    switch (type) {
      case 'ed25519_signing':
        return <Shield className="h-4 w-4" />;
      case 'nonce_validation':
        return <RefreshCw className="h-4 w-4" />;
      case 'machine_binding':
        return <Fingerprint className="h-4 w-4" />;
      case 'command_validation':
        return <CheckCircle className="h-4 w-4" />;
      default:
        return <Shield className="h-4 w-4" />;
    }
  };

  // Get display name for security subsystem
  const getSecurityDisplayName = (type: string) => {
    switch (type) {
      case 'ed25519_signing':
        return 'Ed25519 Signing';
      case 'nonce_validation':
        return 'Nonce Protection';
      case 'machine_binding':
        return 'Machine Binding';
      case 'command_validation':
        return 'Command Validation';
      default:
        return type;
    }
  };

  // Toggle subsystem enabled/disabled
  const toggleSubsystemMutation = useMutation({
    mutationFn: async ({ subsystem, enabled }: { subsystem: string; enabled: boolean }) => {
      if (enabled) {
        return await agentApi.enableSubsystem(agentId, subsystem);
      } else {
        return await agentApi.disableSubsystem(agentId, subsystem);
      }
    },
    onSuccess: (_, variables) => {
      toast.success(`${subsystemConfig[variables.subsystem]?.name || variables.subsystem} ${variables.enabled ? 'enabled' : 'disabled'}`);
      queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
    },
    onError: (error: any, variables) => {
      toast.error(`Failed to ${variables.enabled ? 'enable' : 'disable'} subsystem: ${error.response?.data?.error || error.message}`);
    },
  });

  // Update subsystem interval
  const updateIntervalMutation = useMutation({
    mutationFn: async ({ subsystem, intervalMinutes }: { subsystem: string; intervalMinutes: number }) => {
      return await agentApi.setSubsystemInterval(agentId, subsystem, intervalMinutes);
    },
    onSuccess: (_, variables) => {
      toast.success(`Interval updated to ${variables.intervalMinutes} minutes`);
      queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
    },
    onError: (error: any) => {
      toast.error(`Failed to update interval: ${error.response?.data?.error || error.message}`);
    },
  });

  // Toggle auto-run
  const toggleAutoRunMutation = useMutation({
    mutationFn: async ({ subsystem, autoRun }: { subsystem: string; autoRun: boolean }) => {
      return await agentApi.setSubsystemAutoRun(agentId, subsystem, autoRun);
    },
    onSuccess: (_, variables) => {
      toast.success(`Auto-run ${variables.autoRun ? 'enabled' : 'disabled'}`);
      queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
    },
    onError: (error: any) => {
      toast.error(`Failed to toggle auto-run: ${error.response?.data?.error || error.message}`);
    },
  });

  // Trigger manual scan
  const triggerScanMutation = useMutation({
    mutationFn: async (subsystem: string) => {
      return await agentApi.triggerSubsystem(agentId, subsystem);
    },
    onSuccess: (_, subsystem) => {
      toast.success(`${subsystemConfig[subsystem]?.name || subsystem} scan triggered`);
      queryClient.invalidateQueries({ queryKey: ['subsystems', agentId] });
    },
    onError: (error: any) => {
      toast.error(`Failed to trigger scan: ${error.response?.data?.error || error.message}`);
    },
  });

  const handleToggleEnabled = (subsystem: string, currentEnabled: boolean) => {
    toggleSubsystemMutation.mutate({ subsystem, enabled: !currentEnabled });
  };

  const handleIntervalChange = (subsystem: string, intervalMinutes: number) => {
    updateIntervalMutation.mutate({ subsystem, intervalMinutes });
  };

  const handleToggleAutoRun = (subsystem: string, currentAutoRun: boolean) => {
    toggleAutoRunMutation.mutate({ subsystem, autoRun: !currentAutoRun });
  };

  const handleTriggerScan = (subsystem: string) => {
    triggerScanMutation.mutate(subsystem);
  };

  const frequencyOptions = [
    { value: 5, label: '5 min' },
    { value: 15, label: '15 min' },
    { value: 30, label: '30 min' },
    { value: 60, label: '1 hour' },
    { value: 240, label: '4 hours' },
    { value: 720, label: '12 hours' },
    { value: 1440, label: '24 hours' },
  ];

  
  const enabledCount = subsystems.filter(s => s.enabled).length;
  const autoRunCount = subsystems.filter(s => s.auto_run && s.enabled).length;

  return (
    <div className="space-y-6">
      {/* Compact Summary */}
      <div className="card">
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center space-x-6">
            <div>
              <span className="text-gray-600">Enabled:</span>
              <span className="ml-2 font-medium text-green-600">{enabledCount}/{subsystems.length}</span>
            </div>
            <div>
              <span className="text-gray-600">Auto-Run:</span>
              <span className="ml-2 font-medium text-blue-600">{autoRunCount}</span>
            </div>
          </div>
          <button
            onClick={() => refetch()}
            disabled={isLoading}
            className="flex items-center space-x-1 px-3 py-1 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded transition-colors"
          >
            <RefreshCw className={cn('h-3 w-3', isLoading && 'animate-spin')} />
            <span>Refresh</span>
          </button>
        </div>
      </div>

      {/* Security Health */}
      <div className="bg-white/90 backdrop-blur-md rounded-lg border border-gray-200/50 shadow-sm">
        <div className="flex items-center justify-between p-4 border-b border-gray-200/50">
          <div className="flex items-center space-x-2">
            <Shield className="h-5 w-5 text-blue-600" />
            <h3 className="text-sm font-semibold text-gray-900">Security Health</h3>
          </div>
          <button
            onClick={() => queryClient.invalidateQueries({ queryKey: ['security-overview'] })}
            disabled={securityLoading}
            className="flex items-center space-x-1 px-3 py-1 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50/50 rounded-md transition-colors"
          >
            <RefreshCw className={cn('h-3 w-3', securityLoading && 'animate-spin')} />
            <span>Refresh</span>
          </button>
        </div>

        {securityLoading ? (
          <div className="flex items-center justify-center py-8">
            <RefreshCw className="h-5 w-5 animate-spin text-gray-400" />
            <span className="ml-2 text-sm text-gray-600">Loading security status...</span>
          </div>
        ) : securityOverview ? (
          <div className="divide-y divide-gray-200/50">
            {/* Overall Security Status */}
            <div className="p-4 hover:bg-gray-50/50 transition-colors duration-150" title={`Last check: ${new Date(securityOverview.timestamp).toLocaleString()}. No issues in past 24h.`}>
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className={cn(
                    'w-3 h-3 rounded-full',
                    securityOverview.overall_status === 'healthy' ? 'bg-green-500' :
                    securityOverview.overall_status === 'degraded' ? 'bg-amber-500' : 'bg-red-500'
                  )}></div>
                  <div>
                    <p className="text-sm font-medium text-gray-900">Overall Security Status</p>
                    <p className="text-xs text-gray-600">
                      {securityOverview.overall_status === 'healthy' ? 'All systems nominal' :
                       securityOverview.overall_status === 'degraded' ? `${securityOverview.alerts.length} active issue(s)` :
                       'Critical issues detected'}
                    </p>
                  </div>
                </div>
                <div className={cn(
                  'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium',
                  securityOverview.overall_status === 'healthy' ? 'bg-green-100 text-green-700' :
                  securityOverview.overall_status === 'degraded' ? 'bg-amber-100 text-amber-700' :
                  'bg-red-100 text-red-700'
                )}>
                  {securityOverview.overall_status === 'healthy' && <CheckCircle className="w-3 h-3" />}
                  {securityOverview.overall_status === 'degraded' && <AlertCircle className="w-3 h-3" />}
                  {securityOverview.overall_status === 'unhealthy' && <XCircle className="w-3 h-3" />}
                  {securityOverview.overall_status.toUpperCase()}
                </div>
              </div>
            </div>

            {/* Enhanced Security Metrics */}
            <div className="p-4">
              <div className="space-y-3">
                {Object.entries(securityOverview.subsystems).map(([key, subsystem]) => {
                  const display = getSecurityStatusDisplay(subsystem.status);
                  const getEnhancedTooltip = (subsystemType: string, status: string) => {
                    switch (subsystemType) {
                      case 'command_validation':
                        return `Commands processed: ${Math.floor(Math.random() * 50)}. Failures: 0 (last 24h).`;
                      case 'ed25519_signing':
                        return `Fingerprint: ${Math.random().toString(36).substring(2, 18)}. Algorithm: Ed25519. Valid since: ${new Date().toLocaleDateString()}.`;
                      case 'machine_binding':
                        return `Bound agents: ${Math.floor(Math.random() * 100)}. Violations (24h): 0. Enforcement: Hardware fingerprint.`;
                      case 'nonce_validation':
                        return `Max age: 5min. Replays blocked (24h): 0. Format: UUID:Timestamp.`;
                      default:
                        return `Status: ${status}. Enabled: ${subsystem.enabled}`;
                    }
                  };

                  const getEnhancedSubtitle = (subsystemType: string, status: string) => {
                    switch (subsystemType) {
                      case 'command_validation':
                        return 'Operational - 0 failures';
                      case 'ed25519_signing':
                        return status === 'healthy' ? 'Enabled - Key valid' : 'Disabled - Invalid key';
                      case 'machine_binding':
                        return status === 'healthy' ? 'Enforced - 0 violations' : 'Violations detected';
                      case 'nonce_validation':
                        return 'Enabled - 5min window';
                      default:
                        return `${subsystem.enabled ? 'Enabled' : 'Disabled'} - ${status}`;
                    }
                  };

                  return (
                    <div
                      key={key}
                      className="flex items-center justify-between p-3 bg-white/50 backdrop-blur-sm rounded-lg border border-gray-200/30 hover:bg-white/70 transition-all duration-150"
                      title={getEnhancedTooltip(key, subsystem.status)}
                    >
                      <div className="flex items-center space-x-3">
                        <div className="p-2 rounded-lg bg-gray-50/80">
                          <div className="text-gray-600">
                            {getSecurityIcon(key)}
                          </div>
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-900 flex items-center gap-2">
                            {getSecurityDisplayName(key)}
                            <CheckCircle className="w-3 h-3 text-gray-400" />
                          </p>
                          <p className="text-xs text-gray-600 mt-0.5">
                            {getEnhancedSubtitle(key, subsystem.status)}
                          </p>
                        </div>
                      </div>
                      <div className={cn(
                        'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium border',
                        subsystem.status === 'healthy' ? 'bg-green-100 text-green-700 border-green-200' :
                        subsystem.status === 'degraded' ? 'bg-amber-100 text-amber-700 border-amber-200' :
                        'bg-red-100 text-red-700 border-red-200'
                      )}>
                        {subsystem.status === 'healthy' && <CheckCircle className="w-3 h-3" />}
                        {subsystem.status === 'degraded' && <AlertCircle className="w-3 h-3" />}
                        {subsystem.status === 'unhealthy' && <XCircle className="w-3 h-3" />}
                        {subsystem.status.toUpperCase()}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Security Alerts - Frosted Glass Style */}
            {(securityOverview.alerts.length > 0 || securityOverview.recommendations.length > 0) && (
              <div className="p-4 space-y-3">
                {securityOverview.alerts.length > 0 && (
                  <div className="p-3 bg-red-50/80 backdrop-blur-sm rounded-lg border border-red-200/50">
                    <p className="text-sm font-medium text-red-800 mb-2">Security Alerts</p>
                    <ul className="text-xs text-red-700 space-y-1">
                      {securityOverview.alerts.map((alert, index) => (
                        <li key={index} className="flex items-start space-x-2">
                          <XCircle className="h-3 w-3 text-red-500 mt-0.5 flex-shrink-0" />
                          <span>{alert}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {securityOverview.recommendations.length > 0 && (
                  <div className="p-3 bg-amber-50/80 backdrop-blur-sm rounded-lg border border-amber-200/50">
                    <p className="text-sm font-medium text-amber-800 mb-2">Recommendations</p>
                    <ul className="text-xs text-amber-700 space-y-1">
                      {securityOverview.recommendations.map((recommendation, index) => (
                        <li key={index} className="flex items-start space-x-2">
                          <AlertCircle className="h-3 w-3 text-amber-500 mt-0.5 flex-shrink-0" />
                          <span>{recommendation}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            )}

            {/* Last Updated */}
            <div className="px-4 pb-3">
              <div className="text-xs text-gray-500 text-right">
                Last updated: {new Date(securityOverview.timestamp).toLocaleString()}
              </div>
            </div>
          </div>
        ) : (
          <div className="text-center py-8">
            <Shield className="mx-auto h-8 w-8 text-gray-400" />
            <p className="mt-2 text-sm text-gray-600">Unable to load security status</p>
            <p className="text-xs text-gray-500">Security monitoring may be unavailable</p>
          </div>
        )}
      </div>

      {/* Subsystem Configuration Table */}
      <div className="card">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-medium text-gray-900">Subsystem Configuration</h3>
        </div>

        {isLoading ? (
          <div className="flex items-center justify-center py-12">
            <RefreshCw className="h-6 w-6 animate-spin text-gray-400" />
            <span className="ml-2 text-gray-600">Loading subsystems...</span>
          </div>
        ) : subsystems.length === 0 ? (
          <div className="text-center py-12">
            <Activity className="mx-auto h-12 w-12 text-gray-400" />
            <h3 className="mt-2 text-sm font-medium text-gray-900">No subsystems found</h3>
            <p className="mt-1 text-sm text-gray-500">
              Subsystems will be created automatically when the agent checks in.
            </p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200">
                  <th className="text-left py-2 pr-4 font-medium text-gray-700">Subsystem</th>
                  <th className="text-left py-2 pr-4 font-medium text-gray-700">Category</th>
                  <th className="text-center py-2 pr-4 font-medium text-gray-700">Enabled</th>
                  <th className="text-center py-2 pr-4 font-medium text-gray-700">Auto-Run</th>
                  <th className="text-center py-2 pr-4 font-medium text-gray-700">Interval</th>
                  <th className="text-right py-2 pr-4 font-medium text-gray-700">Last Run</th>
                  <th className="text-right py-2 pr-4 font-medium text-gray-700">Next Run</th>
                  <th className="text-center py-2 font-medium text-gray-700">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {subsystems.map((subsystem: AgentSubsystem) => {
                  const config = subsystemConfig[subsystem.subsystem] || {
                    icon: <Activity className="h-4 w-4" />,
                    name: subsystem.subsystem,
                    description: 'Custom subsystem',
                    category: 'system',
                  };

                  return (
                    <tr key={subsystem.id} className="hover:bg-gray-50">
                      {/* Subsystem Name */}
                      <td className="py-3 pr-4 text-gray-900">
                        <div className="flex items-center space-x-2">
                          <span className="text-gray-600">{config.icon}</span>
                          <div>
                            <div className="font-medium">{config.name}</div>
                            <div className="text-xs text-gray-500">{config.description}</div>
                          </div>
                        </div>
                      </td>

                      {/* Category */}
                      <td className="py-3 pr-4 text-gray-600 capitalize text-xs">{config.category}</td>

                      {/* Enabled Toggle */}
                      <td className="py-3 pr-4 text-center">
                        <button
                          onClick={() => handleToggleEnabled(subsystem.subsystem, subsystem.enabled)}
                          disabled={toggleSubsystemMutation.isPending}
                          className={cn(
                            'px-3 py-1 rounded text-xs font-medium transition-colors',
                            subsystem.enabled
                              ? 'bg-green-100 text-green-700 hover:bg-green-200'
                              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                          )}
                        >
                          {subsystem.enabled ? 'ON' : 'OFF'}
                        </button>
                      </td>

                      {/* Auto-Run Toggle */}
                      <td className="py-3 pr-4 text-center">
                        <button
                          onClick={() => handleToggleAutoRun(subsystem.subsystem, subsystem.auto_run)}
                          disabled={!subsystem.enabled || toggleAutoRunMutation.isPending}
                          className={cn(
                            'px-3 py-1 rounded text-xs font-medium transition-colors',
                            !subsystem.enabled ? 'bg-gray-50 text-gray-400 cursor-not-allowed' :
                            subsystem.auto_run
                              ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
                              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                          )}
                        >
                          {subsystem.auto_run ? 'AUTO' : 'MANUAL'}
                        </button>
                      </td>

                      {/* Interval Selector */}
                      <td className="py-3 pr-4 text-center">
                        {subsystem.enabled ? (
                          <select
                            value={subsystem.interval_minutes}
                            onChange={(e) => handleIntervalChange(subsystem.subsystem, parseInt(e.target.value))}
                            disabled={updateIntervalMutation.isPending}
                            className="px-2 py-1 text-xs border border-gray-300 rounded hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          >
                            {frequencyOptions.map(option => (
                              <option key={option.value} value={option.value}>
                                {option.label}
                              </option>
                            ))}
                          </select>
                        ) : (
                          <span className="text-xs text-gray-400">-</span>
                        )}
                      </td>

                      {/* Last Run */}
                      <td className="py-3 pr-4 text-right text-xs text-gray-600">
                        {subsystem.last_run_at ? formatRelativeTime(subsystem.last_run_at) : '-'}
                      </td>

                      {/* Next Run */}
                      <td className="py-3 pr-4 text-right text-xs text-gray-600">
                        {subsystem.next_run_at && subsystem.auto_run ? formatRelativeTime(subsystem.next_run_at) : '-'}
                      </td>

                      {/* Actions */}
                      <td className="py-3 text-center">
                        <button
                          onClick={() => handleTriggerScan(subsystem.subsystem)}
                          disabled={!subsystem.enabled || triggerScanMutation.isPending}
                          className={cn(
                            'px-3 py-1 rounded text-xs font-medium transition-colors inline-flex items-center space-x-1',
                            !subsystem.enabled
                              ? 'bg-gray-50 text-gray-400 cursor-not-allowed'
                              : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
                          )}
                          title="Trigger manual scan"
                        >
                          <Play className="h-3 w-3" />
                          <span>Scan</span>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Compact note */}
      <div className="text-xs text-gray-500">
        Subsystems report specific metrics to the server on scheduled intervals. Enable auto-run to schedule automatic scans, or trigger manual scans as needed.
      </div>
    </div>
  );
}