import { useState, useEffect, useCallback } from "react";
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
import { API_BASE_URL } from "../../services/api";

interface EndpointStatus {
  endpoint: string;
  method: string;
  status: 'healthy' | 'warning' | 'error' | 'checking';
  responseTime?: number;
  lastChecked?: string;
  error?: string;
}

interface EndpointGroup {
  name: string;
  endpoints: {
    path: string;
    method: string;
    description: string;
  }[];
}

const endpointGroups: EndpointGroup[] = [
  {
    name: "Core Health & Auth",
    endpoints: [
      { path: "/api/ping/", method: "GET", description: "Health check" },
      { path: "/v1/system/status/", method: "GET", description: "System status" },
      { path: "/v1/auth/login/", method: "POST", description: "Login" },
      { path: "/v1/auth/me/", method: "GET", description: "Current user" },
      { path: "/v1/auth/register/", method: "POST", description: "Registration" },
    ],
  },
  {
    name: "Auth & User Management",
    endpoints: [
      { path: "/v1/auth/users/", method: "GET", description: "List users" },
      { path: "/v1/auth/accounts/", method: "GET", description: "List accounts" },
      { path: "/v1/auth/sites/", method: "GET", description: "List sites" },
      { path: "/v1/auth/sectors/", method: "GET", description: "List sectors" },
      { path: "/v1/auth/plans/", method: "GET", description: "List plans" },
      { path: "/v1/auth/industries/", method: "GET", description: "List industries" },
    ],
  },
  {
    name: "Planner Module",
    endpoints: [
      { path: "/v1/planner/keywords/", method: "GET", description: "List keywords" },
      { path: "/v1/planner/keywords/auto_cluster/", method: "POST", description: "AI clustering" },
      { path: "/v1/planner/clusters/", method: "GET", description: "List clusters" },
      { path: "/v1/planner/clusters/auto_generate_ideas/", method: "POST", description: "AI ideas" },
      { path: "/v1/planner/ideas/", method: "GET", description: "List ideas" },
    ],
  },
  {
    name: "Writer Module",
    endpoints: [
      { path: "/v1/writer/tasks/", method: "GET", description: "List tasks" },
      { path: "/v1/writer/tasks/auto_generate_content/", method: "POST", description: "AI content" },
      { path: "/v1/writer/content/", method: "GET", description: "List content" },
      { path: "/v1/writer/content/generate_image_prompts/", method: "POST", description: "Image prompts" },
      { path: "/v1/writer/images/", method: "GET", description: "List images" },
      { path: "/v1/writer/images/generate_images/", method: "POST", description: "AI images" },
    ],
  },
  {
    name: "System & Billing",
    endpoints: [
      { path: "/v1/system/prompts/", method: "GET", description: "List prompts" },
      { path: "/v1/system/settings/integrations/1/test/", method: "POST", description: "Test integration" },
      { path: "/v1/billing/credits/balance/balance/", method: "GET", description: "Credit balance" },
      { path: "/v1/billing/credits/usage/", method: "GET", description: "Usage logs" },
    ],
  },
];

const getStatusColor = (status: string) => {
  switch (status) {
    case 'healthy': return 'text-green-600 dark:text-green-400';
    case 'warning': return 'text-yellow-600 dark:text-yellow-400';
    case 'error': return 'text-red-600 dark:text-red-400';
    case 'checking': return 'text-blue-600 dark:text-blue-400';
    default: return 'text-gray-600 dark:text-gray-400';
  }
};

const getStatusBadge = (status: string) => {
  switch (status) {
    case 'healthy': return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
    case 'warning': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
    case 'error': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
    case 'checking': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
    default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
  }
};

const getStatusIcon = (status: string) => {
  switch (status) {
    case 'healthy': return '✓';
    case 'warning': return '⚠';
    case 'error': return '✗';
    case 'checking': return '⟳';
    default: return '?';
  }
};

export default function ApiMonitor() {
  const [endpointStatuses, setEndpointStatuses] = useState<Record<string, EndpointStatus>>({});
  const [loading, setLoading] = useState(false);
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [refreshInterval, setRefreshInterval] = useState(30); // seconds

  const checkEndpoint = useCallback(async (path: string, method: string) => {
    const key = `${method}:${path}`;
    
    // Set checking status
    setEndpointStatuses(prev => ({
      ...prev,
      [key]: {
        endpoint: path,
        method,
        status: 'checking',
      },
    }));

    const startTime = Date.now();
    
    try {
      // Use fetch directly for monitoring to get response status
      // Get token from auth store or localStorage
      const token = localStorage.getItem('auth_token') || 
                    (() => {
                      try {
                        const authStorage = localStorage.getItem('auth-storage');
                        if (authStorage) {
                          const parsed = JSON.parse(authStorage);
                          return parsed?.state?.token || '';
                        }
                      } catch (e) {
                        // Ignore parsing errors
                      }
                      return '';
                    })();
      
      const headers: HeadersInit = {
        'Content-Type': 'application/json',
      };
      
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }

      const fetchOptions: RequestInit = {
        method,
        headers,
        credentials: 'include',
      };

      // For POST endpoints, send empty body for monitoring
      if (method === 'POST') {
        fetchOptions.body = JSON.stringify({});
      }

      const response = await fetch(`${API_BASE_URL}${path}`, fetchOptions);
      const responseTime = Date.now() - startTime;
      
      // Check response status
      // 2xx = healthy, 4xx = warning (endpoint exists but auth/validation issue), 5xx = error
      let status: 'healthy' | 'warning' | 'error' = 'healthy';
      if (response.status >= 500) {
        status = 'error';
      } else if (response.status >= 400 && response.status < 500) {
        status = 'warning'; // 4xx is warning (auth/permission/validation - endpoint exists)
      }

      setEndpointStatuses(prev => ({
        ...prev,
        [key]: {
          endpoint: path,
          method,
          status,
          responseTime,
          lastChecked: new Date().toISOString(),
        },
      }));
    } catch (err: any) {
      const responseTime = Date.now() - startTime;
      
      // Network errors or timeouts are real errors
      setEndpointStatuses(prev => ({
        ...prev,
        [key]: {
          endpoint: path,
          method,
          status: 'error',
          responseTime,
          lastChecked: new Date().toISOString(),
          error: err instanceof Error ? err.message : 'Network error',
        },
      }));
    }
  }, []);

  const checkAllEndpoints = useCallback(async () => {
    setLoading(true);
    
    // Check all endpoints in parallel (but limit concurrency)
    const allChecks = endpointGroups.flatMap(group =>
      group.endpoints.map(ep => checkEndpoint(ep.path, ep.method))
    );

    // Check in batches of 5 to avoid overwhelming the server
    const batchSize = 5;
    for (let i = 0; i < allChecks.length; i += batchSize) {
      const batch = allChecks.slice(i, i + batchSize);
      await Promise.all(batch);
      // Small delay between batches
      if (i + batchSize < allChecks.length) {
        await new Promise(resolve => setTimeout(resolve, 100));
      }
    }

    setLoading(false);
  }, [checkEndpoint]);

  useEffect(() => {
    // Only check when component is mounted (page is visible)
    checkAllEndpoints();

    // Set up auto-refresh if enabled
    if (autoRefresh) {
      const interval = setInterval(() => {
        checkAllEndpoints();
      }, refreshInterval * 1000);

      return () => clearInterval(interval);
    }
  }, [autoRefresh, refreshInterval, checkAllEndpoints]);

  const getEndpointStatus = (path: string, method: string): EndpointStatus => {
    const key = `${method}:${path}`;
    return endpointStatuses[key] || {
      endpoint: path,
      method,
      status: 'checking',
    };
  };

  const getGroupHealth = (group: EndpointGroup) => {
    const statuses = group.endpoints.map(ep => getEndpointStatus(ep.path, ep.method).status);
    const healthy = statuses.filter(s => s === 'healthy').length;
    const total = statuses.length;
    return { healthy, total };
  };

  return (
    <>
      <PageMeta title="API Monitor - IGNY8" description="API endpoint monitoring" />
      
      <div className="space-y-6">
        {/* Header Controls */}
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-semibold text-gray-800 dark:text-white/90">API Monitor</h1>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              Monitor API endpoint health and response times
            </p>
          </div>
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
              <input
                type="checkbox"
                checked={autoRefresh}
                onChange={(e) => setAutoRefresh(e.target.checked)}
                className="rounded border-gray-300"
              />
              Auto-refresh
            </label>
            {autoRefresh && (
              <select
                value={refreshInterval}
                onChange={(e) => setRefreshInterval(Number(e.target.value))}
                className="text-sm rounded border-gray-300 dark:bg-gray-800 dark:border-gray-700"
              >
                <option value={30}>30s</option>
                <option value={60}>1min</option>
                <option value={300}>5min</option>
              </select>
            )}
            <button
              onClick={checkAllEndpoints}
              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 text-sm"
            >
              {loading ? 'Checking...' : 'Refresh All'}
            </button>
          </div>
        </div>

        {/* Monitoring Tables - 3 per row */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {endpointGroups.map((group, groupIndex) => {
            const groupHealth = getGroupHealth(group);
            return (
              <ComponentCard
                key={groupIndex}
                title={group.name}
                desc={`${groupHealth.healthy}/${groupHealth.total} healthy`}
              >
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead>
                      <tr>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                          Endpoint
                        </th>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                          Status
                        </th>
                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                          Time
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                      {group.endpoints.map((endpoint, epIndex) => {
                        const status = getEndpointStatus(endpoint.path, endpoint.method);
                        return (
                          <tr key={epIndex} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                            <td className="px-3 py-2">
                              <div className="text-xs">
                                <span className="font-mono text-gray-600 dark:text-gray-400">
                                  {endpoint.method}
                                </span>
                                <div className="text-xs text-gray-500 dark:text-gray-500 mt-0.5 truncate max-w-[200px]">
                                  {endpoint.path}
                                </div>
                                <div className="text-xs text-gray-400 dark:text-gray-600 mt-0.5">
                                  {endpoint.description}
                                </div>
                              </div>
                            </td>
                            <td className="px-3 py-2">
                              <span
                                className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${getStatusBadge(status.status)}`}
                                title={status.error || status.status}
                              >
                                <span>{getStatusIcon(status.status)}</span>
                                <span className="capitalize">{status.status}</span>
                              </span>
                            </td>
                            <td className="px-3 py-2">
                              {status.responseTime ? (
                                <span className="text-xs text-gray-600 dark:text-gray-400">
                                  {status.responseTime}ms
                                </span>
                              ) : (
                                <span className="text-xs text-gray-400 dark:text-gray-600">-</span>
                              )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              </ComponentCard>
            );
          })}
        </div>

        {/* Summary Stats */}
        <ComponentCard title="Summary" desc="Overall API health statistics">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {endpointGroups.map((group, index) => {
              const groupHealth = getGroupHealth(group);
              const percentage = groupHealth.total > 0 
                ? Math.round((groupHealth.healthy / groupHealth.total) * 100) 
                : 0;
              
              return (
                <div key={index} className="text-center">
                  <div className="text-2xl font-semibold text-gray-800 dark:text-white/90">
                    {percentage}%
                  </div>
                  <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    {group.name}
                  </div>
                  <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">
                    {groupHealth.healthy}/{groupHealth.total} healthy
                  </div>
                </div>
              );
            })}
          </div>
        </ComponentCard>
      </div>
    </>
  );
}