import { useState, useEffect, useCallback } from 'react';
import { 
  Activity, 
  Zap, 
  Database, 
  Server, 
  Workflow,
  Globe,
  CheckCircle,
  AlertTriangle,
  XCircle,
  RefreshCw,
  TrendingUp,
  Clock,
  Cpu,
  HardDrive,
  MemoryStick
} from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import DebugSiteSelector from '../../components/common/DebugSiteSelector';
import { fetchAPI } from '../../services/api';
import { useSiteStore } from '../../store/siteStore';

// Types
interface SystemMetrics {
  cpu: { usage_percent: number; cores: number; status: string };
  memory: { total_gb: number; used_gb: number; usage_percent: number; status: string };
  disk: { total_gb: number; used_gb: number; usage_percent: number; status: string };
}

interface ServiceHealth {
  database: { status: string; connected: boolean };
  redis: { status: string; connected: boolean };
  celery: { status: string; worker_count: number };
}

interface ApiGroupHealth {
  name: string;
  total: number;
  healthy: number;
  warning: number;
  error: number;
  percentage: number;
  status: 'healthy' | 'warning' | 'error';
}

interface WorkflowHealth {
  name: string;
  steps: { name: string; status: 'healthy' | 'warning' | 'error'; message?: string }[];
  overall: 'healthy' | 'warning' | 'error';
}

interface IntegrationHealth {
  platform: string;
  connected: boolean;
  last_sync: string | null;
  sync_enabled: boolean;
  plugin_active: boolean;
  status: 'healthy' | 'warning' | 'error';
}

export default function MasterStatus() {
  const { activeSite } = useSiteStore();
  const [loading, setLoading] = useState(true);
  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
  
  // System metrics
  const [systemMetrics, setSystemMetrics] = useState<SystemMetrics | null>(null);
  const [serviceHealth, setServiceHealth] = useState<ServiceHealth | null>(null);
  
  // API health
  const [apiHealth, setApiHealth] = useState<ApiGroupHealth[]>([]);
  
  // Workflow health (keywords → clusters → ideas → tasks → content → publish)
  const [workflowHealth, setWorkflowHealth] = useState<WorkflowHealth[]>([]);
  
  // Integration health
  const [integrationHealth, setIntegrationHealth] = useState<IntegrationHealth | null>(null);

  // Fetch system metrics
  const fetchSystemMetrics = useCallback(async () => {
    try {
      const data = await fetchAPI('/v1/system/status/');
      setSystemMetrics(data.system);
      setServiceHealth({
        database: data.database,
        redis: data.redis,
        celery: data.celery,
      });
    } catch (error) {
      console.error('Failed to fetch system metrics:', error);
    }
  }, []);

  // Fetch API health (aggregated from API monitor)
  const fetchApiHealth = useCallback(async () => {
    const groups = [
      { name: 'Auth & User', endpoints: ['/v1/auth/me/', '/v1/auth/sites/', '/v1/auth/accounts/'] },
      { name: 'Planner', endpoints: ['/v1/planner/keywords/', '/v1/planner/clusters/', '/v1/planner/ideas/'] },
      { name: 'Writer', endpoints: ['/v1/writer/tasks/', '/v1/writer/content/', '/v1/writer/images/'] },
      { name: 'Integration', endpoints: ['/v1/integration/integrations/'] },
    ];

    const healthChecks: ApiGroupHealth[] = [];

    for (const group of groups) {
      let healthy = 0;
      let warning = 0;
      let error = 0;

      for (const endpoint of group.endpoints) {
        try {
          const startTime = Date.now();
          await fetchAPI(endpoint + (activeSite ? `?site=${activeSite.id}` : ''));
          const responseTime = Date.now() - startTime;
          
          if (responseTime < 1000) healthy++;
          else if (responseTime < 3000) warning++;
          else error++;
        } catch (e) {
          error++;
        }
      }

      const total = group.endpoints.length;
      const percentage = Math.round((healthy / total) * 100);
      
      healthChecks.push({
        name: group.name,
        total,
        healthy,
        warning,
        error,
        percentage,
        status: error > 0 ? 'error' : warning > 0 ? 'warning' : 'healthy',
      });
    }

    setApiHealth(healthChecks);
  }, [activeSite]);

  // Check workflow health (end-to-end pipeline)
  const checkWorkflowHealth = useCallback(async () => {
    if (!activeSite) {
      setWorkflowHealth([]);
      return;
    }

    const workflows: WorkflowHealth[] = [];

    // Content Generation Workflow
    try {
      const steps = [];
      
      // Step 1: Keywords exist
      const keywords = await fetchAPI(`/v1/planner/keywords/?site=${activeSite.id}`);
      steps.push({
        name: 'Keywords Imported',
        status: keywords.count > 0 ? 'healthy' : 'warning' as const,
        message: `${keywords.count} keywords`,
      });

      // Step 2: Clusters exist
      const clusters = await fetchAPI(`/v1/planner/clusters/?site=${activeSite.id}`);
      steps.push({
        name: 'Content Clusters',
        status: clusters.count > 0 ? 'healthy' : 'warning' as const,
        message: `${clusters.count} clusters`,
      });

      // Step 3: Ideas generated
      const ideas = await fetchAPI(`/v1/planner/ideas/?site=${activeSite.id}`);
      steps.push({
        name: 'Content Ideas',
        status: ideas.count > 0 ? 'healthy' : 'warning' as const,
        message: `${ideas.count} ideas`,
      });

      // Step 4: Tasks created
      const tasks = await fetchAPI(`/v1/writer/tasks/?site=${activeSite.id}`);
      steps.push({
        name: 'Writer Tasks',
        status: tasks.count > 0 ? 'healthy' : 'warning' as const,
        message: `${tasks.count} tasks`,
      });

      // Step 5: Content generated
      const content = await fetchAPI(`/v1/writer/content/?site=${activeSite.id}`);
      steps.push({
        name: 'Content Generated',
        status: content.count > 0 ? 'healthy' : 'warning' as const,
        message: `${content.count} articles`,
      });

      const hasErrors = steps.some(s => s.status === 'error');
      const hasWarnings = steps.some(s => s.status === 'warning');

      workflows.push({
        name: 'Content Generation Pipeline',
        steps,
        overall: hasErrors ? 'error' : hasWarnings ? 'warning' : 'healthy',
      });
    } catch (error) {
      workflows.push({
        name: 'Content Generation Pipeline',
        steps: [{ name: 'Pipeline Check', status: 'error', message: 'Failed to check workflow' }],
        overall: 'error',
      });
    }

    setWorkflowHealth(workflows);
  }, [activeSite]);

  // Check integration health
  const checkIntegrationHealth = useCallback(async () => {
    if (!activeSite) {
      setIntegrationHealth(null);
      return;
    }

    try {
      const integrations = await fetchAPI(`/v1/integration/integrations/?site_id=${activeSite.id}`);
      
      if (integrations.results && integrations.results.length > 0) {
        const wpIntegration = integrations.results.find((i: any) => i.platform === 'wordpress');
        
        if (wpIntegration) {
          const health = await fetchAPI(`/v1/integration/integrations/${wpIntegration.id}/debug-status/`);
          
          setIntegrationHealth({
            platform: 'WordPress',
            connected: wpIntegration.is_active,
            last_sync: wpIntegration.last_sync_at,
            sync_enabled: wpIntegration.sync_enabled,
            plugin_active: health.health?.plugin_active || false,
            status: wpIntegration.is_active && health.health?.plugin_active ? 'healthy' : 'warning',
          });
        } else {
          setIntegrationHealth(null);
        }
      } else {
        setIntegrationHealth(null);
      }
    } catch (error) {
      console.error('Failed to check integration:', error);
      setIntegrationHealth(null);
    }
  }, [activeSite]);

  // Refresh all data
  const refreshAll = useCallback(async () => {
    setLoading(true);
    await Promise.all([
      fetchSystemMetrics(),
      fetchApiHealth(),
      checkWorkflowHealth(),
      checkIntegrationHealth(),
    ]);
    setLastUpdate(new Date());
    setLoading(false);
  }, [fetchSystemMetrics, fetchApiHealth, checkWorkflowHealth, checkIntegrationHealth]);

  // Initial load and auto-refresh (pause when page not visible)
  useEffect(() => {
    let interval: NodeJS.Timeout;
    
    const handleVisibilityChange = () => {
      if (document.hidden) {
        // Page not visible - clear interval
        if (interval) clearInterval(interval);
      } else {
        // Page visible - refresh and restart interval
        refreshAll();
        interval = setInterval(refreshAll, 30000);
      }
    };
    
    // Initial setup
    refreshAll();
    interval = setInterval(refreshAll, 30000);
    
    // Listen for visibility changes
    document.addEventListener('visibilitychange', handleVisibilityChange);
    
    return () => {
      clearInterval(interval);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [refreshAll]);

  // Status badge component
  const StatusBadge = ({ status }: { status: string }) => {
    const colors = {
      healthy: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
      warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
      error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
    };
    
    const icons = {
      healthy: CheckCircle,
      warning: AlertTriangle,
      error: XCircle,
    };

    const Icon = icons[status as keyof typeof icons] || AlertTriangle;

    return (
      <div className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${colors[status as keyof typeof colors]}`}>
        <Icon className="h-3 w-3" />
        {status.charAt(0).toUpperCase() + status.slice(1)}
      </div>
    );
  };

  // Progress bar component
  const ProgressBar = ({ value, status }: { value: number; status: string }) => {
    const colors = {
      healthy: 'bg-green-500',
      warning: 'bg-yellow-500',
      error: 'bg-red-500',
    };

    return (
      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
        <div 
          className={`h-2 rounded-full transition-all ${colors[status as keyof typeof colors]}`}
          style={{ width: `${value}%` }}
        />
      </div>
    );
  };

  return (
    <>
      <PageMeta title="System Status - IGNY8" description="Master status dashboard" />
      
      <div className="space-y-6">
        {/* Header */}
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-semibold text-gray-800 dark:text-white/90">System Status</h1>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              Master dashboard showing all system health metrics
            </p>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-sm text-gray-500 dark:text-gray-400">
              <Clock className="h-4 w-4 inline mr-1" />
              Last updated: {lastUpdate.toLocaleTimeString()}
            </div>
            <button
              onClick={refreshAll}
              disabled={loading}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
              Refresh
            </button>
          </div>
        </div>

        {/* System Resources & Services Health */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <Server className="h-5 w-5 text-blue-600" />
            System Resources
          </h3>
          <div className="flex gap-6">
            {/* Compact System Metrics (70% width) */}
            <div className="flex-1 grid grid-cols-3 gap-4">
              {/* CPU */}
              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-1">
                    <Cpu className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">CPU</span>
                  </div>
                  <StatusBadge status={systemMetrics?.cpu.status || 'warning'} />
                </div>
                <div className="text-lg font-bold text-gray-900 dark:text-white">
                  {systemMetrics?.cpu.usage_percent.toFixed(1)}%
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{systemMetrics?.cpu.cores} cores</p>
                <ProgressBar value={systemMetrics?.cpu.usage_percent || 0} status={systemMetrics?.cpu.status || 'warning'} />
              </div>

              {/* Memory */}
              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-1">
                    <MemoryStick className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Memory</span>
                  </div>
                  <StatusBadge status={systemMetrics?.memory.status || 'warning'} />
                </div>
                <div className="text-lg font-bold text-gray-900 dark:text-white">
                  {systemMetrics?.memory.usage_percent.toFixed(1)}%
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                  {systemMetrics?.memory.used_gb.toFixed(1)}/{systemMetrics?.memory.total_gb.toFixed(1)} GB
                </p>
                <ProgressBar value={systemMetrics?.memory.usage_percent || 0} status={systemMetrics?.memory.status || 'warning'} />
              </div>

              {/* Disk */}
              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-1">
                    <HardDrive className="h-4 w-4 text-gray-600 dark:text-gray-400" />
                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Disk</span>
                  </div>
                  <StatusBadge status={systemMetrics?.disk.status || 'warning'} />
                </div>
                <div className="text-lg font-bold text-gray-900 dark:text-white">
                  {systemMetrics?.disk.usage_percent.toFixed(1)}%
                </div>
                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                  {systemMetrics?.disk.used_gb.toFixed(1)}/{systemMetrics?.disk.total_gb.toFixed(1)} GB
                </p>
                <ProgressBar value={systemMetrics?.disk.usage_percent || 0} status={systemMetrics?.disk.status || 'warning'} />
              </div>
            </div>

            {/* Services Stack (30% width) */}
            <div className="w-1/3 space-y-2">
              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Database className="h-4 w-4 text-blue-600" />
                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">PostgreSQL</span>
                </div>
                <StatusBadge status={serviceHealth?.database.status || 'warning'} />
              </div>

              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Zap className="h-4 w-4 text-red-600" />
                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Redis</span>
                </div>
                <StatusBadge status={serviceHealth?.redis.status || 'warning'} />
              </div>

              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Activity className="h-4 w-4 text-green-600" />
                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Celery</span>
                </div>
                <div className="flex items-center gap-1">
                  <span className="text-xs text-gray-500">{serviceHealth?.celery.worker_count || 0}w</span>
                  <StatusBadge status={serviceHealth?.celery.status || 'warning'} />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Site Selector */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700">
          <DebugSiteSelector />
        </div>

        {/* API Health by Module */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <Zap className="h-5 w-5 text-yellow-600" />
            API Module Health
          </h3>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            {apiHealth.map((group) => (
              <div key={group.name} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <div className="flex items-center justify-between mb-3">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{group.name}</span>
                  <StatusBadge status={group.status} />
                </div>
                <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                  {group.percentage}%
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
                  {group.healthy}/{group.total} healthy
                </div>
                <ProgressBar value={group.percentage} status={group.status} />
              </div>
            ))}
          </div>
        </div>

        {/* Content Workflow Health */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <Workflow className="h-5 w-5 text-purple-600" />
            Content Pipeline Status
          </h3>
          {workflowHealth.length === 0 ? (
            <p className="text-sm text-gray-500 dark:text-gray-400">Select a site to view workflow health</p>
          ) : (
            <div className="space-y-4">
              {workflowHealth.map((workflow) => (
                <div key={workflow.name} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                  <div className="flex items-center justify-between mb-4">
                    <h4 className="font-medium text-gray-900 dark:text-white">{workflow.name}</h4>
                    <StatusBadge status={workflow.overall} />
                  </div>
                  <div className="flex items-center gap-2">
                    {workflow.steps.map((step, idx) => (
                      <div key={idx} className="flex-1">
                        <div className="flex items-center justify-between mb-1">
                          <span className="text-xs text-gray-600 dark:text-gray-400">{step.name}</span>
                          {step.status === 'healthy' ? (
                            <CheckCircle className="h-3 w-3 text-green-600" />
                          ) : step.status === 'warning' ? (
                            <AlertTriangle className="h-3 w-3 text-yellow-600" />
                          ) : (
                            <XCircle className="h-3 w-3 text-red-600" />
                          )}
                        </div>
                        {step.message && (
                          <p className="text-xs text-gray-500 dark:text-gray-400">{step.message}</p>
                        )}
                        {idx < workflow.steps.length - 1 && (
                          <div className="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded">
                            <div className={`h-1 rounded ${
                              step.status === 'healthy' ? 'bg-green-500' : 
                              step.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'
                            }`} style={{ width: '100%' }} />
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* WordPress Integration */}
        {integrationHealth && (
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
              <Globe className="h-5 w-5 text-blue-600" />
              WordPress Integration
            </h3>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Connection</span>
                <StatusBadge status={integrationHealth.connected ? 'healthy' : 'error'} />
              </div>
              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Plugin Status</span>
                <StatusBadge status={integrationHealth.plugin_active ? 'healthy' : 'warning'} />
              </div>
              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Sync Enabled</span>
                <StatusBadge status={integrationHealth.sync_enabled ? 'healthy' : 'warning'} />
              </div>
              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Last Sync</span>
                <span className="text-sm text-gray-900 dark:text-white">
                  {integrationHealth.last_sync 
                    ? new Date(integrationHealth.last_sync).toLocaleString() 
                    : 'Never'}
                </span>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
}