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

interface HealthCheck {
  name: string;
  description: string;
  status: 'healthy' | 'warning' | 'error' | 'checking';
  message?: string;
  details?: string;
  lastChecked?: string;
}

interface ModuleHealth {
  module: string;
  description: string;
  checks: HealthCheck[];
}

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 DebugStatus() {
  const [moduleHealths, setModuleHealths] = useState<ModuleHealth[]>([]);
  const [loading, setLoading] = useState(false);

  // Helper to get auth token
  const getAuthToken = () => {
    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 '';
                  })();
    return token;
  };

  // Helper to make authenticated API calls
  const apiCall = async (path: string, method: string = 'GET', body?: any) => {
    const token = getAuthToken();
    const headers: HeadersInit = {
      'Content-Type': 'application/json',
    };
    
    if (token) {
      headers['Authorization'] = `Bearer ${token}`;
    }

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

    if (body && method !== 'GET') {
      options.body = JSON.stringify(body);
    }

    const response = await fetch(`${API_BASE_URL}${path}`, options);
    const data = await response.json();
    return { response, data };
  };

  // Check database schema field mappings (the issues we just fixed)
  const checkDatabaseSchemaMapping = useCallback(async (): Promise<HealthCheck> => {
    try {
      // Test Writer Content endpoint (was failing with entity_type error)
      const { response: contentResp, data: contentData } = await apiCall('/v1/writer/content/');
      
      if (!contentResp.ok) {
        return {
          name: 'Database Schema Mapping',
          description: 'Checks if model field names map correctly to database columns',
          status: 'error',
          message: `Writer Content API failed with ${contentResp.status}`,
          details: 'Model fields may not be mapped to database columns correctly (e.g., content_type vs entity_type)',
          lastChecked: new Date().toISOString(),
        };
      }

      // Check if response has the expected structure with new field names
      if (contentData?.results && Array.isArray(contentData.results)) {
        // If we can fetch content, schema mapping is working
        return {
          name: 'Database Schema Mapping',
          description: 'Checks if model field names map correctly to database columns',
          status: 'healthy',
          message: 'All model fields correctly mapped via db_column attributes',
          details: `Content API working correctly. Fields like content_type, content_html, content_structure are properly mapped.`,
          lastChecked: new Date().toISOString(),
        };
      }

      return {
        name: 'Database Schema Mapping',
        description: 'Checks if model field names map correctly to database columns',
        status: 'warning',
        message: 'Content API returned unexpected structure',
        details: 'Response format may have changed',
        lastChecked: new Date().toISOString(),
      };
    } catch (error: any) {
      return {
        name: 'Database Schema Mapping',
        description: 'Checks if model field names map correctly to database columns',
        status: 'error',
        message: error.message || 'Failed to check schema mapping',
        details: 'Check if db_column attributes are set correctly in models',
        lastChecked: new Date().toISOString(),
      };
    }
  }, []);

  // Check Writer module health
  const checkWriterModule = useCallback(async (): Promise<HealthCheck[]> => {
    const checks: HealthCheck[] = [];

    // Check Content endpoint
    try {
      const { response: contentResp, data: contentData } = await apiCall('/v1/writer/content/');
      
      if (contentResp.ok && contentData?.success !== false) {
        checks.push({
          name: 'Content List',
          description: 'Writer content listing endpoint',
          status: 'healthy',
          message: `Found ${contentData?.count || 0} content items`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Content List',
          description: 'Writer content listing endpoint',
          status: 'error',
          message: contentData?.error || `Failed with ${contentResp.status}`,
          details: 'Check model field mappings (content_type, content_html, content_structure)',
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Content List',
        description: 'Writer content listing endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    // Check Tasks endpoint
    try {
      const { response: tasksResp, data: tasksData } = await apiCall('/v1/writer/tasks/');
      
      if (tasksResp.ok && tasksData?.success !== false) {
        checks.push({
          name: 'Tasks List',
          description: 'Writer tasks listing endpoint',
          status: 'healthy',
          message: `Found ${tasksData?.count || 0} tasks`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Tasks List',
          description: 'Writer tasks listing endpoint',
          status: 'error',
          message: tasksData?.error || `Failed with ${tasksResp.status}`,
          details: 'Check model field mappings (content_type, content_structure, taxonomy_term)',
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Tasks List',
        description: 'Writer tasks listing endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    // Check Content Validation
    try {
      // Get first content ID if available
      const { data: contentData } = await apiCall('/v1/writer/content/');
      const firstContentId = contentData?.results?.[0]?.id;
      
      if (firstContentId) {
        const { response: validationResp, data: validationData } = await apiCall(
          `/v1/writer/content/${firstContentId}/validation/`
        );
        
        if (validationResp.ok && validationData?.success !== false) {
          checks.push({
            name: 'Content Validation',
            description: 'Content validation before publish',
            status: 'healthy',
            message: 'Validation endpoint working',
            lastChecked: new Date().toISOString(),
          });
        } else {
          checks.push({
            name: 'Content Validation',
            description: 'Content validation before publish',
            status: 'error',
            message: validationData?.error || `Failed with ${validationResp.status}`,
            details: 'Check validation_service.py field references (content_html, content_type)',
            lastChecked: new Date().toISOString(),
          });
        }
      } else {
        checks.push({
          name: 'Content Validation',
          description: 'Content validation before publish',
          status: 'warning',
          message: 'No content available to test validation',
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Content Validation',
        description: 'Content validation before publish',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    return checks;
  }, []);

  // Check Planner module health
  const checkPlannerModule = useCallback(async (): Promise<HealthCheck[]> => {
    const checks: HealthCheck[] = [];

    // Check Clusters endpoint
    try {
      const { response: clustersResp, data: clustersData } = await apiCall('/v1/planner/clusters/');
      
      if (clustersResp.ok && clustersData?.success !== false) {
        checks.push({
          name: 'Clusters List',
          description: 'Planner clusters listing endpoint',
          status: 'healthy',
          message: `Found ${clustersData?.count || 0} clusters`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Clusters List',
          description: 'Planner clusters listing endpoint',
          status: 'error',
          message: clustersData?.error || `Failed with ${clustersResp.status}`,
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Clusters List',
        description: 'Planner clusters listing endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    // Check Keywords endpoint
    try {
      const { response: keywordsResp, data: keywordsData } = await apiCall('/v1/planner/keywords/');
      
      if (keywordsResp.ok && keywordsData?.success !== false) {
        checks.push({
          name: 'Keywords List',
          description: 'Planner keywords listing endpoint',
          status: 'healthy',
          message: `Found ${keywordsData?.count || 0} keywords`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Keywords List',
          description: 'Planner keywords listing endpoint',
          status: 'error',
          message: keywordsData?.error || `Failed with ${keywordsResp.status}`,
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Keywords List',
        description: 'Planner keywords listing endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    // Check Ideas endpoint
    try {
      const { response: ideasResp, data: ideasData } = await apiCall('/v1/planner/ideas/');
      
      if (ideasResp.ok && ideasData?.success !== false) {
        checks.push({
          name: 'Ideas List',
          description: 'Planner ideas listing endpoint',
          status: 'healthy',
          message: `Found ${ideasData?.count || 0} ideas`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Ideas List',
          description: 'Planner ideas listing endpoint',
          status: 'error',
          message: ideasData?.error || `Failed with ${ideasResp.status}`,
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Ideas List',
        description: 'Planner ideas listing endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    return checks;
  }, []);

  // Check Sites module health
  const checkSitesModule = useCallback(async (): Promise<HealthCheck[]> => {
    const checks: HealthCheck[] = [];

    // Check Sites list
    try {
      const { response: sitesResp, data: sitesData } = await apiCall('/v1/auth/sites/');
      
      if (sitesResp.ok && sitesData?.success !== false) {
        checks.push({
          name: 'Sites List',
          description: 'Sites listing endpoint',
          status: 'healthy',
          message: `Found ${sitesData?.count || sitesData?.results?.length || 0} sites`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Sites List',
          description: 'Sites listing endpoint',
          status: 'error',
          message: sitesData?.error || `Failed with ${sitesResp.status}`,
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Sites List',
        description: 'Sites listing endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    return checks;
  }, []);

  // Check Integration module health
  const checkIntegrationModule = useCallback(async (): Promise<HealthCheck[]> => {
    const checks: HealthCheck[] = [];

    // Check Integration content types endpoint
    try {
      // Get first site ID if available
      const { data: sitesData } = await apiCall('/v1/auth/sites/');
      const firstSiteId = sitesData?.results?.[0]?.id || sitesData?.[0]?.id;
      
      if (firstSiteId) {
        const { response: contentTypesResp, data: contentTypesData } = await apiCall(
          `/v1/integration/integrations/${firstSiteId}/content-types/`
        );
        
        if (contentTypesResp.ok && contentTypesData?.success !== false) {
          checks.push({
            name: 'Content Types Sync',
            description: 'Integration content types endpoint',
            status: 'healthy',
            message: 'Content types endpoint working',
            lastChecked: new Date().toISOString(),
          });
        } else {
          checks.push({
            name: 'Content Types Sync',
            description: 'Integration content types endpoint',
            status: 'error',
            message: contentTypesData?.error || `Failed with ${contentTypesResp.status}`,
            details: 'Check integration views field mappings (content_type_map vs entity_type_map)',
            lastChecked: new Date().toISOString(),
          });
        }
      } else {
        checks.push({
          name: 'Content Types Sync',
          description: 'Integration content types endpoint',
          status: 'warning',
          message: 'No sites available to test integration',
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Content Types Sync',
        description: 'Integration content types endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    return checks;
  }, []);

  // Check Content Manager module health (taxonomy relations)
  const checkContentManagerModule = useCallback(async (): Promise<HealthCheck[]> => {
    const checks: HealthCheck[] = [];

    // Check Taxonomy endpoint
    try {
      const { response: taxonomyResp, data: taxonomyData } = await apiCall('/v1/writer/taxonomy/');
      
      if (taxonomyResp.ok && taxonomyData?.success !== false) {
        checks.push({
          name: 'Taxonomy System',
          description: 'Content taxonomy endpoint',
          status: 'healthy',
          message: `Found ${taxonomyData?.count || 0} taxonomy items`,
          lastChecked: new Date().toISOString(),
        });
      } else {
        checks.push({
          name: 'Taxonomy System',
          description: 'Content taxonomy endpoint',
          status: 'error',
          message: taxonomyData?.error || `Failed with ${taxonomyResp.status}`,
          details: 'Check ContentTaxonomyRelation through model and field mappings',
          lastChecked: new Date().toISOString(),
        });
      }
    } catch (error: any) {
      checks.push({
        name: 'Taxonomy System',
        description: 'Content taxonomy endpoint',
        status: 'error',
        message: error.message || 'Network error',
        lastChecked: new Date().toISOString(),
      });
    }

    return checks;
  }, []);

  // Run all health checks
  const runAllChecks = useCallback(async () => {
    setLoading(true);

    try {
      // Run schema check first
      const schemaCheck = await checkDatabaseSchemaMapping();

      // Run module checks in parallel
      const [writerChecks, plannerChecks, sitesChecks, integrationChecks, contentMgrChecks] = await Promise.all([
        checkWriterModule(),
        checkPlannerModule(),
        checkSitesModule(),
        checkIntegrationModule(),
        checkContentManagerModule(),
      ]);

      // Build module health results
      const moduleHealthResults: ModuleHealth[] = [
        {
          module: 'Database Schema',
          description: 'Critical database field mapping checks',
          checks: [schemaCheck],
        },
        {
          module: 'Writer Module',
          description: 'Content creation and task management',
          checks: writerChecks,
        },
        {
          module: 'Planner Module',
          description: 'Keyword clustering and content planning',
          checks: plannerChecks,
        },
        {
          module: 'Sites Module',
          description: 'Site management and configuration',
          checks: sitesChecks,
        },
        {
          module: 'Integration Module',
          description: 'External platform sync (WordPress, etc.)',
          checks: integrationChecks,
        },
        {
          module: 'Content Manager',
          description: 'Taxonomy and content organization',
          checks: contentMgrChecks,
        },
      ];

      setModuleHealths(moduleHealthResults);
    } catch (error) {
      console.error('Failed to run health checks:', error);
    } finally {
      setLoading(false);
    }
  }, [
    checkDatabaseSchemaMapping,
    checkWriterModule,
    checkPlannerModule,
    checkSitesModule,
    checkIntegrationModule,
    checkContentManagerModule,
  ]);

  // Run checks on mount
  useEffect(() => {
    runAllChecks();
  }, [runAllChecks]);

  // Calculate module status
  const getModuleStatus = (module: ModuleHealth): 'error' | 'warning' | 'healthy' => {
    const statuses = module.checks.map(c => c.status);
    if (statuses.some(s => s === 'error')) return 'error';
    if (statuses.some(s => s === 'warning')) return 'warning';
    return 'healthy';
  };

  // Calculate overall health
  const getOverallHealth = () => {
    const allStatuses = moduleHealths.flatMap(m => m.checks.map(c => c.status));
    const total = allStatuses.length;
    const healthy = allStatuses.filter(s => s === 'healthy').length;
    const warning = allStatuses.filter(s => s === 'warning').length;
    const error = allStatuses.filter(s => s === 'error').length;
    
    let status: 'error' | 'warning' | 'healthy' = 'healthy';
    if (error > 0) status = 'error';
    else if (warning > 0) status = 'warning';
    
    return { total, healthy, warning, error, status, percentage: total > 0 ? Math.round((healthy / total) * 100) : 0 };
  };

  const overallHealth = getOverallHealth();

  return (
    <>
      <PageMeta title="Debug Status - IGNY8" description="Module health checks and diagnostics" />
      
      <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">Debug Status</h1>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              Comprehensive health checks for all modules and recent bug fixes
            </p>
          </div>
          <button
            onClick={runAllChecks}
            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 ? 'Running Checks...' : 'Refresh All'}
          </button>
        </div>

        {/* Overall Health Summary */}
        <ComponentCard
          title={
            <div className="flex items-center gap-2">
              <span>Overall System Health</span>
              <span className={`text-lg ${getStatusColor(overallHealth.status)}`}>
                {getStatusIcon(overallHealth.status)}
              </span>
            </div>
          }
          desc={
            overallHealth.status === 'error'
              ? `${overallHealth.error} critical issue${overallHealth.error !== 1 ? 's' : ''} detected`
              : overallHealth.status === 'warning'
              ? `${overallHealth.warning} warning${overallHealth.warning !== 1 ? 's' : ''} detected`
              : 'All systems operational'
          }
        >
          <div className="space-y-4">
            {/* Health Percentage */}
            <div className="text-center">
              <div className={`text-5xl font-bold ${getStatusColor(overallHealth.status)}`}>
                {overallHealth.percentage}%
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400 mt-2">
                {overallHealth.healthy} of {overallHealth.total} checks passed
              </div>
            </div>

            {/* Health Breakdown */}
            <div className="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
              <div className="text-center">
                <div className={`text-2xl font-semibold ${getStatusColor('healthy')}`}>
                  {overallHealth.healthy}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">Healthy</div>
              </div>
              <div className="text-center">
                <div className={`text-2xl font-semibold ${getStatusColor('warning')}`}>
                  {overallHealth.warning}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">Warnings</div>
              </div>
              <div className="text-center">
                <div className={`text-2xl font-semibold ${getStatusColor('error')}`}>
                  {overallHealth.error}
                </div>
                <div className="text-xs text-gray-500 dark:text-gray-500 mt-1">Errors</div>
              </div>
            </div>
          </div>
        </ComponentCard>

        {/* Module Health Cards */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {moduleHealths.map((moduleHealth, index) => {
            const moduleStatus = getModuleStatus(moduleHealth);
            const healthyCount = moduleHealth.checks.filter(c => c.status === 'healthy').length;
            const totalCount = moduleHealth.checks.length;

            return (
              <ComponentCard
                key={index}
                title={
                  <div className="flex items-center gap-2">
                    <span>{moduleHealth.module}</span>
                    <span className={`text-xs px-2 py-0.5 rounded ${getStatusBadge(moduleStatus)}`}>
                      {getStatusIcon(moduleStatus)}
                    </span>
                  </div>
                }
                desc={
                  moduleStatus === 'error'
                    ? `Issues detected - ${healthyCount}/${totalCount} checks passed`
                    : moduleStatus === 'warning'
                    ? `Warnings detected - ${healthyCount}/${totalCount} checks passed`
                    : `All ${totalCount} checks passed`
                }
              >
                <div className="space-y-3">
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    {moduleHealth.description}
                  </p>

                  {/* Health Checks List */}
                  {moduleHealth.checks.map((check, checkIndex) => (
                    <div
                      key={checkIndex}
                      className={`p-3 rounded-lg border ${
                        check.status === 'healthy'
                          ? 'border-green-200 dark:border-green-900/50 bg-green-50 dark:bg-green-900/20'
                          : check.status === 'warning'
                          ? 'border-yellow-200 dark:border-yellow-900/50 bg-yellow-50 dark:bg-yellow-900/20'
                          : check.status === 'error'
                          ? 'border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/20'
                          : 'border-blue-200 dark:border-blue-900/50 bg-blue-50 dark:bg-blue-900/20'
                      }`}
                    >
                      <div className="flex items-start gap-2">
                        <span className={`text-lg ${getStatusColor(check.status)} flex-shrink-0`}>
                          {getStatusIcon(check.status)}
                        </span>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="font-medium text-gray-800 dark:text-white/90">
                              {check.name}
                            </span>
                            <span className={`text-xs px-2 py-0.5 rounded ${getStatusBadge(check.status)}`}>
                              {check.status}
                            </span>
                          </div>
                          <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
                            {check.description}
                          </p>
                          {check.message && (
                            <p className={`text-sm ${getStatusColor(check.status)} font-medium`}>
                              {check.message}
                            </p>
                          )}
                          {check.details && (
                            <p className="text-xs text-gray-600 dark:text-gray-400 mt-1 italic">
                              💡 {check.details}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </ComponentCard>
            );
          })}
        </div>

        {/* Help Section */}
        <ComponentCard
          title="Troubleshooting Guide"
          desc="Common issues and solutions"
        >
          <div className="space-y-4">
            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-900/50">
              <h3 className="font-medium text-gray-800 dark:text-white/90 mb-2">
                Database Schema Mapping Errors
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                If you see errors about missing fields like <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">entity_type</code>, 
                <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs ml-1">cluster_role</code>, or 
                <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs ml-1">html_content</code>:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside space-y-1">
                <li>Check that model fields have correct <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">db_column</code> attributes</li>
                <li>Verify database columns exist with <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">SELECT column_name FROM information_schema.columns</code></li>
                <li>Review <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">DATABASE_SCHEMA_FIELD_MAPPING_GUIDE.md</code> in repo root</li>
              </ul>
            </div>

            <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-900/50">
              <h3 className="font-medium text-gray-800 dark:text-white/90 mb-2">
                Field Reference Errors in Code
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                If API endpoints return 500 errors with AttributeError or similar:
              </p>
              <ul className="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside space-y-1">
                <li>Search codebase for old field names: <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">entity_type</code>, <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">cluster_role</code>, <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">html_content</code></li>
                <li>Replace with new names: <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">content_type</code>, <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">content_structure</code>, <code className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">content_html</code></li>
                <li>Check views, services, and serializers in writer/planner/integration modules</li>
              </ul>
            </div>

            <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-900/50">
              <h3 className="font-medium text-gray-800 dark:text-white/90 mb-2">
                All Checks Passing?
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                Great! Your system is healthy. This page will help you quickly diagnose issues if they appear in the future.
                Bookmark this page and check it first when troubleshooting module-specific problems.
              </p>
            </div>
          </div>
        </ComponentCard>
      </div>
    </>
  );
}