whyrating-engine-legacy/web/components/JobDevTools/index.tsx

'use client';

import { useState, useMemo } from 'react';
import { Bug, Globe, Network, Cpu, Filter, ChevronDown, ChevronUp } from 'lucide-react';

// Type definitions
export interface StructuredLog {
  timestamp: string;
  timestamp_ms: number;
  level: 'DEBUG' | 'INFO' | 'WARN' | 'ERROR' | 'FATAL';
  category: 'scraper' | 'browser' | 'network' | 'system';
  message: string;
  metrics?: Record<string, any>;
  network?: Record<string, any>;
}

export interface MetricsData {
  cpu_percent?: number;
  memory_mb?: number;
  duration_ms?: number;
  requests_made?: number;
  reviews_scraped?: number;
  [key: string]: any;
}

export interface CrashReport {
  error_type: string;
  error_message: string;
  stack_trace?: string;
  timestamp: string;
  context?: Record<string, any>;
}

export interface SessionFingerprint {
  session_id: string;
  browser_version?: string;
  proxy_used?: boolean;
  locale?: string;
  viewport?: { width: number; height: number };
  [key: string]: any;
}

export interface JobDevToolsProps {
  logs: StructuredLog[];
  metrics?: MetricsData;
  crashReport?: CrashReport;
  sessionFingerprint?: SessionFingerprint;
  isStreaming?: boolean;
}

type TabType = 'all' | 'scraper' | 'browser' | 'network' | 'system';
type LogLevel = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR' | 'FATAL';

const TAB_CONFIG: { id: TabType; label: string; icon: typeof Bug; category?: StructuredLog['category'] }[] = [
  { id: 'all', label: 'All', icon: Filter },
  { id: 'scraper', label: 'Scraper', icon: Bug, category: 'scraper' },
  { id: 'browser', label: 'Browser', icon: Globe, category: 'browser' },
  { id: 'network', label: 'Network', icon: Network, category: 'network' },
  { id: 'system', label: 'System', icon: Cpu, category: 'system' },
];

const LEVEL_COLORS: Record<LogLevel, { bg: string; text: string; border: string }> = {
  DEBUG: { bg: 'bg-gray-700', text: 'text-gray-300', border: 'border-gray-600' },
  INFO: { bg: 'bg-blue-900', text: 'text-blue-300', border: 'border-blue-700' },
  WARN: { bg: 'bg-yellow-900', text: 'text-yellow-300', border: 'border-yellow-700' },
  ERROR: { bg: 'bg-red-900', text: 'text-red-300', border: 'border-red-700' },
  FATAL: { bg: 'bg-purple-900', text: 'text-purple-300', border: 'border-purple-700' },
};

const LEVEL_BADGE_COLORS: Record<LogLevel, string> = {
  DEBUG: 'bg-gray-600 text-gray-200',
  INFO: 'bg-blue-600 text-blue-100',
  WARN: 'bg-yellow-600 text-yellow-100',
  ERROR: 'bg-red-600 text-red-100',
  FATAL: 'bg-purple-600 text-purple-100',
};

export default function JobDevTools({
  logs,
  metrics,
  crashReport,
  sessionFingerprint,
  isStreaming = false,
}: JobDevToolsProps) {
  const [activeTab, setActiveTab] = useState<TabType>('all');
  const [enabledLevels, setEnabledLevels] = useState<Set<LogLevel>>(
    new Set(['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'])
  );
  const [showLevelFilter, setShowLevelFilter] = useState(false);

  // Calculate counts per category
  const categoryCounts = useMemo(() => {
    const counts: Record<TabType, number> = {
      all: logs.length,
      scraper: 0,
      browser: 0,
      network: 0,
      system: 0,
    };

    logs.forEach((log) => {
      if (log.category in counts) {
        counts[log.category as keyof typeof counts]++;
      }
    });

    return counts;
  }, [logs]);

  // Calculate counts per level
  const levelCounts = useMemo(() => {
    const counts: Record<LogLevel, number> = {
      DEBUG: 0,
      INFO: 0,
      WARN: 0,
      ERROR: 0,
      FATAL: 0,
    };

    logs.forEach((log) => {
      if (log.level in counts) {
        counts[log.level]++;
      }
    });

    return counts;
  }, [logs]);

  // Filter logs by active tab and enabled levels
  const filteredLogs = useMemo(() => {
    return logs.filter((log) => {
      const matchesTab = activeTab === 'all' || log.category === activeTab;
      const matchesLevel = enabledLevels.has(log.level);
      return matchesTab && matchesLevel;
    });
  }, [logs, activeTab, enabledLevels]);

  const toggleLevel = (level: LogLevel) => {
    setEnabledLevels((prev) => {
      const next = new Set(prev);
      if (next.has(level)) {
        // Don't allow deselecting all levels
        if (next.size > 1) {
          next.delete(level);
        }
      } else {
        next.add(level);
      }
      return next;
    });
  };

  const formatTimestamp = (timestamp: string) => {
    try {
      const date = new Date(timestamp);
      return date.toLocaleTimeString('en-US', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        fractionalSecondDigits: 3,
      });
    } catch {
      return timestamp;
    }
  };

  return (
    <div className="w-full min-h-[400px] bg-gray-900 rounded-xl border-2 border-gray-700 flex flex-col">
      {/* Header with streaming indicator */}
      <div className="flex items-center justify-between px-4 py-2 border-b border-gray-700 bg-gray-800 rounded-t-xl">
        <div className="flex items-center gap-2">
          <Bug className="w-5 h-5 text-green-400" />
          <span className="font-semibold text-gray-200">Job DevTools</span>
          {isStreaming && (
            <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-900 text-green-300 text-xs font-medium rounded-full border border-green-700">
              <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
              Streaming
            </span>
          )}
        </div>
        <span className="text-sm text-gray-400">
          {filteredLogs.length} / {logs.length} logs
        </span>
      </div>

      {/* Tab bar */}
      <div className="flex items-center border-b border-gray-700 bg-gray-850 px-2">
        {TAB_CONFIG.map((tab) => {
          const Icon = tab.icon;
          const count = categoryCounts[tab.id];
          const isActive = activeTab === tab.id;

          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-all border-b-2 ${
                isActive
                  ? 'text-blue-400 border-blue-400 bg-gray-800'
                  : 'text-gray-400 border-transparent hover:text-gray-200 hover:bg-gray-800'
              }`}
            >
              <Icon className="w-4 h-4" />
              <span>{tab.label}</span>
              <span
                className={`px-2 py-0.5 text-xs rounded-full ${
                  isActive
                    ? 'bg-blue-900 text-blue-300'
                    : 'bg-gray-700 text-gray-400'
                }`}
              >
                {count}
              </span>
            </button>
          );
        })}

        {/* Level filter toggle */}
        <div className="ml-auto relative">
          <button
            onClick={() => setShowLevelFilter(!showLevelFilter)}
            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors"
          >
            <Filter className="w-4 h-4" />
            <span>Levels</span>
            {showLevelFilter ? (
              <ChevronUp className="w-4 h-4" />
            ) : (
              <ChevronDown className="w-4 h-4" />
            )}
          </button>

          {/* Level filter dropdown */}
          {showLevelFilter && (
            <div className="absolute right-0 top-full mt-1 z-10 bg-gray-800 border border-gray-600 rounded-lg shadow-lg p-2 min-w-[160px]">
              {(Object.keys(LEVEL_BADGE_COLORS) as LogLevel[]).map((level) => (
                <label
                  key={level}
                  className="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-700 rounded cursor-pointer"
                >
                  <input
                    type="checkbox"
                    checked={enabledLevels.has(level)}
                    onChange={() => toggleLevel(level)}
                    className="w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-500 focus:ring-blue-500 focus:ring-offset-gray-800"
                  />
                  <span
                    className={`px-2 py-0.5 text-xs font-semibold rounded ${LEVEL_BADGE_COLORS[level]}`}
                  >
                    {level}
                  </span>
                  <span className="text-gray-400 text-xs ml-auto">
                    {levelCounts[level]}
                  </span>
                </label>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Log entries - scrollable area */}
      <div className="flex-1 overflow-y-auto min-h-[250px] max-h-[500px] font-mono text-sm">
        {filteredLogs.length === 0 ? (
          <div className="flex items-center justify-center h-full text-gray-500">
            <div className="text-center">
              <Bug className="w-8 h-8 mx-auto mb-2 opacity-50" />
              <p>No logs to display</p>
              <p className="text-xs mt-1">
                {logs.length > 0
                  ? 'Try adjusting your filters'
                  : 'Logs will appear here during job execution'}
              </p>
            </div>
          </div>
        ) : (
          <div className="divide-y divide-gray-800">
            {filteredLogs.map((log, index) => {
              const levelStyle = LEVEL_COLORS[log.level];
              return (
                <div
                  key={`${log.timestamp_ms}-${index}`}
                  className={`px-4 py-2 hover:bg-gray-800 transition-colors ${levelStyle.bg} bg-opacity-20`}
                >
                  <div className="flex items-start gap-3">
                    {/* Timestamp */}
                    <span className="text-gray-500 text-xs whitespace-nowrap pt-0.5">
                      {formatTimestamp(log.timestamp)}
                    </span>

                    {/* Level badge */}
                    <span
                      className={`px-1.5 py-0.5 text-xs font-semibold rounded ${LEVEL_BADGE_COLORS[log.level]} whitespace-nowrap`}
                    >
                      {log.level}
                    </span>

                    {/* Category badge */}
                    <span className="px-1.5 py-0.5 text-xs font-medium rounded bg-gray-700 text-gray-300 whitespace-nowrap">
                      {log.category}
                    </span>

                    {/* Message */}
                    <span className={`flex-1 ${levelStyle.text} break-words`}>
                      {log.message}
                    </span>
                  </div>

                  {/* Additional data (metrics/network) */}
                  {(log.metrics || log.network) && (
                    <div className="mt-1 ml-[72px] text-xs text-gray-500">
                      {log.metrics && (
                        <span className="mr-4">
                          metrics: {JSON.stringify(log.metrics)}
                        </span>
                      )}
                      {log.network && (
                        <span>network: {JSON.stringify(log.network)}</span>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Reserved space for metrics/session panels (footer) */}
      <div className="border-t border-gray-700 bg-gray-800 px-4 py-3 rounded-b-xl">
        <div className="flex items-center justify-between text-xs text-gray-400">
          <div className="flex items-center gap-4">
            {metrics && (
              <>
                {metrics.duration_ms !== undefined && (
                  <span>Duration: {(metrics.duration_ms / 1000).toFixed(2)}s</span>
                )}
                {metrics.reviews_scraped !== undefined && (
                  <span>Reviews: {metrics.reviews_scraped}</span>
                )}
                {metrics.memory_mb !== undefined && (
                  <span>Memory: {metrics.memory_mb.toFixed(1)}MB</span>
                )}
              </>
            )}
          </div>
          <div className="flex items-center gap-4">
            {sessionFingerprint && (
              <span className="text-gray-500">
                Session: {sessionFingerprint.session_id?.slice(0, 8)}...
              </span>
            )}
            {crashReport && (
              <span className="text-red-400 font-medium">
                Crash: {crashReport.error_type}
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}