'use client';

import React, { useState, useMemo, useEffect, useCallback } from 'react';
import Link from 'next/link';
import {
  useReactTable,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  getPaginationRowModel,
  ColumnDef,
  flexRender,
  SortingState,
  ColumnFiltersState,
} from '@tanstack/react-table';
import { JobStatus } from './ScraperTest';

interface LogEntry {
  timestamp: string;
  level: string;
  message: string;
  source: string;
}

interface JobLogs {
  job_id: string;
  status: string;
  error_message: string | null;
  logs: LogEntry[];
  log_count: number;
}

interface JobsViewProps {
  jobs: JobStatus[];
  onSelectJob: (job: JobStatus, previousJob?: JobStatus) => void;
  isLoadingJob: string | null;
  onRefresh?: () => void;
}

// Helper to format duration
function formatDuration(seconds: number): string {
  if (seconds < 60) return `${seconds.toFixed(1)}s`;
  const mins = Math.floor(seconds / 60);
  const secs = Math.round(seconds % 60);
  return `${mins}m ${secs}s`;
}

// Helper to calculate speed (reviews/second)
function calculateSpeed(reviewCount: number | null, scrapeTime: number | null): number | null {
  if (!reviewCount || !scrapeTime || scrapeTime === 0) return null;
  return reviewCount / scrapeTime;
}

// Helper to extract business name from URL
function extractBusinessName(job: JobStatus): string {
  if (job.business_name) return job.business_name;
  try {
    const urlObj = new URL(job.url);
    const query = urlObj.searchParams.get('query');
    return query ? decodeURIComponent(query) : 'Unknown Business';
  } catch {
    return 'Unknown Business';
  }
}

export default function JobsView({ jobs, onSelectJob, isLoadingJob, onRefresh }: JobsViewProps) {
  const [sorting, setSorting] = useState<SortingState>([{ id: 'created_at', desc: true }]);
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const [globalFilter, setGlobalFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [selectedJobLogs, setSelectedJobLogs] = useState<JobLogs | null>(null);
  const [loadingLogs, setLoadingLogs] = useState<string | null>(null);
  const [expandedErrors, setExpandedErrors] = useState<Set<string>>(new Set());

  // Live monitoring state
  const [monitoredJob, setMonitoredJob] = useState<JobStatus | null>(null);
  const [monitoredJobLogs, setMonitoredJobLogs] = useState<LogEntry[]>([]);
  const [isMonitoring, setIsMonitoring] = useState(false);

  // Delete state
  const [deleteConfirm, setDeleteConfirm] = useState<JobStatus | null>(null);
  const [isDeleting, setIsDeleting] = useState<string | null>(null);
  const [bulkDeleteConfirm, setBulkDeleteConfirm] = useState<'all' | 'completed' | 'failed' | null>(null);
  const [isBulkDeleting, setIsBulkDeleting] = useState(false);

  // Real-time updates for running jobs in the table
  const [runningJobUpdates, setRunningJobUpdates] = useState<Map<string, JobStatus>>(new Map());

  // SSE connection for real-time job updates
  useEffect(() => {
    const hasRunningJobs = jobs.some(j => j.status === 'running');

    // Only connect to SSE if there are running jobs
    if (!hasRunningJobs) {
      setRunningJobUpdates(new Map());
      return;
    }

    let eventSource: EventSource | null = null;
    let reconnectTimeout: NodeJS.Timeout | null = null;

    const connect = () => {
      eventSource = new EventSource('/api/jobs/stream');

      eventSource.onopen = () => {
        console.log('SSE connected for job updates');
      };

      eventSource.addEventListener('job_progress', (event) => {
        try {
          const data = JSON.parse(event.data);
          setRunningJobUpdates(prev => {
            const updated = new Map(prev);
            updated.set(data.job_id, {
              job_id: data.job_id,
              status: 'running',
              reviews_count: data.reviews_count,
              total_reviews: data.total_reviews,
              scrape_time: data.scrape_time,
            } as JobStatus);
            return updated;
          });
        } catch (err) {
          console.error('Failed to parse job_progress event:', err);
        }
      });

      eventSource.addEventListener('job_completed', (event) => {
        try {
          const data = JSON.parse(event.data);
          // Remove from running updates and trigger refresh
          setRunningJobUpdates(prev => {
            const updated = new Map(prev);
            updated.delete(data.job_id);
            return updated;
          });
          // Refresh the jobs list to get final state
          onRefresh?.();
        } catch (err) {
          console.error('Failed to parse job_completed event:', err);
        }
      });

      eventSource.addEventListener('job_failed', (event) => {
        try {
          const data = JSON.parse(event.data);
          setRunningJobUpdates(prev => {
            const updated = new Map(prev);
            updated.delete(data.job_id);
            return updated;
          });
          onRefresh?.();
        } catch (err) {
          console.error('Failed to parse job_failed event:', err);
        }
      });

      eventSource.addEventListener('job_partial', (event) => {
        try {
          const data = JSON.parse(event.data);
          setRunningJobUpdates(prev => {
            const updated = new Map(prev);
            updated.delete(data.job_id);
            return updated;
          });
          onRefresh?.();
        } catch (err) {
          console.error('Failed to parse job_partial event:', err);
        }
      });

      eventSource.onerror = () => {
        console.log('SSE connection error, reconnecting...');
        eventSource?.close();
        // Reconnect after 3 seconds
        reconnectTimeout = setTimeout(connect, 3000);
      };
    };

    connect();

    return () => {
      eventSource?.close();
      if (reconnectTimeout) clearTimeout(reconnectTimeout);
    };
  }, [jobs, onRefresh]);

  // Merge jobs with real-time updates
  const jobsWithUpdates = useMemo(() => {
    return jobs.map(job => {
      const update = runningJobUpdates.get(job.job_id);
      if (update && job.status === 'running') {
        return { ...job, ...update };
      }
      return job;
    });
  }, [jobs, runningJobUpdates]);

  const fetchJobLogs = async (jobId: string) => {
    setLoadingLogs(jobId);
    try {
      const response = await fetch(`/api/jobs/${jobId}/logs`);
      if (response.ok) {
        const data = await response.json();
        setSelectedJobLogs(data);
      }
    } catch (err) {
      console.error('Failed to fetch logs:', err);
    } finally {
      setLoadingLogs(null);
    }
  };

  // Live monitoring functions
  const startMonitoring = useCallback((job: JobStatus) => {
    setMonitoredJob(job);
    setMonitoredJobLogs([]);
    setIsMonitoring(true);
  }, []);

  const stopMonitoring = useCallback(() => {
    setIsMonitoring(false);
    setMonitoredJob(null);
    setMonitoredJobLogs([]);
  }, []);

  // Delete a single job
  const deleteJob = useCallback(async (jobId: string) => {
    setIsDeleting(jobId);
    try {
      const response = await fetch(`/api/jobs/${jobId}`, { method: 'DELETE' });
      if (response.ok) {
        setDeleteConfirm(null);
        onRefresh?.();
      } else {
        console.error('Failed to delete job');
      }
    } catch (err) {
      console.error('Error deleting job:', err);
    } finally {
      setIsDeleting(null);
    }
  }, [onRefresh]);

  // Bulk delete jobs by status
  const bulkDeleteJobs = useCallback(async (status: 'all' | 'completed' | 'failed') => {
    setIsBulkDeleting(true);
    try {
      const jobsToDelete = status === 'all'
        ? jobs
        : jobs.filter(j => j.status === status);

      await Promise.all(
        jobsToDelete.map(job =>
          fetch(`/api/jobs/${job.job_id}`, { method: 'DELETE' })
        )
      );

      setBulkDeleteConfirm(null);
      onRefresh?.();
    } catch (err) {
      console.error('Error bulk deleting jobs:', err);
    } finally {
      setIsBulkDeleting(false);
    }
  }, [jobs, onRefresh]);

  // SSE connection for live monitoring
  useEffect(() => {
    if (!isMonitoring || !monitoredJob) return;

    let eventSource: EventSource | null = null;
    let reconnectTimeout: NodeJS.Timeout | null = null;

    const connect = () => {
      eventSource = new EventSource(`/api/jobs/${monitoredJob.job_id}/stream`);

      eventSource.onopen = () => {
        console.log('SSE connected for live monitoring');
      };

      eventSource.addEventListener('initial_state', (event) => {
        try {
          const data = JSON.parse(event.data);
          setMonitoredJob(prev => prev ? { ...prev, ...data } : prev);
          if (data.logs) {
            setMonitoredJobLogs(data.logs);
          }
        } catch (err) {
          console.error('Failed to parse initial_state event:', err);
        }
      });

      eventSource.addEventListener('job_progress', (event) => {
        try {
          const data = JSON.parse(event.data);
          setMonitoredJob(prev => prev ? {
            ...prev,
            status: 'running',
            reviews_count: data.reviews_count,
            total_reviews: data.total_reviews,
            scrape_time: data.scrape_time,
          } : prev);
          if (data.logs) {
            setMonitoredJobLogs(data.logs);
          }
        } catch (err) {
          console.error('Failed to parse job_progress event:', err);
        }
      });

      eventSource.addEventListener('job_completed', (event) => {
        try {
          const data = JSON.parse(event.data);
          setMonitoredJob(prev => prev ? {
            ...prev,
            status: 'completed',
            reviews_count: data.reviews_count,
            total_reviews: data.total_reviews,
            scrape_time: data.scrape_time,
          } : prev);
          if (data.logs) {
            setMonitoredJobLogs(data.logs);
          }
          // Stop monitoring but keep modal open
          setIsMonitoring(false);
          eventSource?.close();
        } catch (err) {
          console.error('Failed to parse job_completed event:', err);
        }
      });

      eventSource.addEventListener('job_failed', (event) => {
        try {
          const data = JSON.parse(event.data);
          setMonitoredJob(prev => prev ? {
            ...prev,
            status: 'failed',
            error_message: data.error,
          } : prev);
          if (data.logs) {
            setMonitoredJobLogs(data.logs);
          }
          setIsMonitoring(false);
          eventSource?.close();
        } catch (err) {
          console.error('Failed to parse job_failed event:', err);
        }
      });

      eventSource.addEventListener('job_update', (event) => {
        try {
          const data = JSON.parse(event.data);
          setMonitoredJob(prev => prev ? { ...prev, ...data } : prev);
          if (data.logs) {
            setMonitoredJobLogs(data.logs);
          }
          // Check if job is no longer running
          if (data.status && data.status !== 'running') {
            setIsMonitoring(false);
            eventSource?.close();
          }
        } catch (err) {
          console.error('Failed to parse job_update event:', err);
        }
      });

      eventSource.onerror = () => {
        console.log('SSE connection error for live monitor, reconnecting...');
        eventSource?.close();
        // Reconnect after 2 seconds
        reconnectTimeout = setTimeout(connect, 2000);
      };
    };

    connect();

    return () => {
      eventSource?.close();
      if (reconnectTimeout) clearTimeout(reconnectTimeout);
    };
  }, [isMonitoring, monitoredJob?.job_id]);

  // Calculate summary stats
  const stats = useMemo(() => {
    const completed = jobsWithUpdates.filter(j => j.status === 'completed');
    const failed = jobsWithUpdates.filter(j => j.status === 'failed');
    const running = jobsWithUpdates.filter(j => j.status === 'running');

    const totalReviews = completed.reduce((sum, j) => sum + (j.reviews_count || 0), 0);
    const totalTime = completed.reduce((sum, j) => sum + (j.scrape_time || 0), 0);
    const avgTime = completed.length > 0 ? totalTime / completed.length : 0;
    const successRate = jobsWithUpdates.length > 0 ? (completed.length / jobsWithUpdates.length) * 100 : 0;

    // Jobs today
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const jobsToday = jobsWithUpdates.filter(j => new Date(j.created_at) >= today).length;

    // Average speed
    const speeds = completed
      .map(j => calculateSpeed(j.reviews_count, j.scrape_time))
      .filter((s): s is number => s !== null);
    const avgSpeed = speeds.length > 0 ? speeds.reduce((a, b) => a + b, 0) / speeds.length : 0;

    return {
      total: jobsWithUpdates.length,
      completed: completed.length,
      failed: failed.length,
      running: running.length,
      totalReviews,
      avgTime,
      successRate,
      jobsToday,
      avgSpeed,
    };
  }, [jobsWithUpdates]);

  // Filter jobs by status
  const filteredJobs = useMemo(() => {
    if (statusFilter === 'all') return jobsWithUpdates;
    return jobsWithUpdates.filter(j => j.status === statusFilter);
  }, [jobsWithUpdates, statusFilter]);

  // Find previous job for comparison
  const findPreviousJob = (job: JobStatus): JobStatus | undefined => {
    const sameBusinessJobs = jobsWithUpdates
      .filter(j => {
        const jobBusiness = extractBusinessName(j);
        const currentBusiness = extractBusinessName(job);
        return jobBusiness === currentBusiness && j.job_id !== job.job_id;
      })
      .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());

    const jobDate = new Date(job.created_at);
    return sameBusinessJobs.find(j =>
      new Date(j.created_at) < jobDate &&
      j.status === 'completed' &&
      j.reviews_count
    );
  };

  // Table columns
  const columns = useMemo<ColumnDef<JobStatus>[]>(
    () => [
      {
        accessorKey: 'business',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Business
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        accessorFn: (row) => extractBusinessName(row),
        cell: ({ row }) => {
          const name = extractBusinessName(row.original);
          const address = row.original.business_address;
          return (
            <div className="max-w-xs">
              <div className="font-semibold text-gray-900 truncate" title={name}>
                {name}
              </div>
              {address && (
                <div className="text-xs text-gray-500 truncate" title={address}>
                  {address}
                </div>
              )}
            </div>
          );
        },
      },
      {
        id: 'url',
        header: 'URL',
        cell: ({ row }) => {
          const url = row.original.url;
          return (
            <a
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
              className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs font-medium rounded-lg transition-colors"
              title={url}
            >
              <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
              Open
            </a>
          );
        },
      },
      {
        accessorKey: 'status',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Status
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => {
          const status = row.original.status;
          const isStuck = status === 'running' &&
            new Date().getTime() - new Date(row.original.created_at).getTime() > 10 * 60 * 1000;

          return (
            <div className="flex items-center gap-2">
              <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${
                status === 'completed' ? 'bg-green-100 text-green-800' :
                status === 'partial' ? 'bg-orange-100 text-orange-800' :
                isStuck ? 'bg-red-100 text-red-800' :
                status === 'running' ? 'bg-blue-100 text-blue-800' :
                status === 'failed' ? 'bg-red-100 text-red-800' :
                'bg-gray-100 text-gray-800'
              }`}>
                {status === 'running' && !isStuck && (
                  <div className="w-2 h-2 border border-current border-t-transparent rounded-full animate-spin" />
                )}
                {status === 'partial' && (
                  <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                  </svg>
                )}
                {isStuck && (
                  <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                  </svg>
                )}
                {isStuck ? 'Stuck' : status.charAt(0).toUpperCase() + status.slice(1)}
              </span>
            </div>
          );
        },
      },
      {
        accessorKey: 'reviews_count',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Reviews
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => {
          const count = row.original.reviews_count;
          const total = row.original.total_reviews;

          if (count === null) return <span className="text-gray-400">-</span>;

          const coverage = total ? Math.round((count / total) * 100) : null;

          return (
            <div>
              <div className="font-semibold text-gray-900">
                {count.toLocaleString()}
                {total && total !== count && (
                  <span className="text-gray-500 font-normal"> / {total.toLocaleString()}</span>
                )}
              </div>
              {coverage !== null && coverage < 100 && (
                <div className="mt-1">
                  <div className="w-16 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-blue-500 rounded-full"
                      style={{ width: `${coverage}%` }}
                    />
                  </div>
                </div>
              )}
            </div>
          );
        },
      },
      {
        accessorKey: 'scrape_time',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Duration
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => {
          const job = row.original;
          const isRunning = job.status === 'running';
          const isPartial = job.status === 'partial';
          const isStuck = isRunning &&
            new Date().getTime() - new Date(job.created_at).getTime() > 10 * 60 * 1000;

          // For actively running jobs (not stuck), show live elapsed time
          if (isRunning && !isStuck && job.started_at) {
            const elapsed = (Date.now() - new Date(job.started_at).getTime()) / 1000;
            return (
              <span className="font-medium text-blue-600 flex items-center gap-1">
                <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
                {formatDuration(elapsed)}
              </span>
            );
          }

          // For stuck jobs, show frozen elapsed time in red (no pulse)
          if (isStuck && job.started_at) {
            const elapsed = (Date.now() - new Date(job.started_at).getTime()) / 1000;
            return (
              <span className="font-medium text-red-600">
                {formatDuration(elapsed)}
              </span>
            );
          }

          // For partial jobs, use scrape_time or calculate from timestamps
          if (isPartial) {
            const time = job.scrape_time;
            if (time !== null) {
              return (
                <span className="font-medium text-orange-600">
                  {formatDuration(time)}
                </span>
              );
            }
            // Fallback: calculate from started_at to completed_at
            if (job.started_at && job.completed_at) {
              const elapsed = (new Date(job.completed_at).getTime() - new Date(job.started_at).getTime()) / 1000;
              return (
                <span className="font-medium text-orange-600">
                  {formatDuration(elapsed)}
                </span>
              );
            }
          }

          const time = job.scrape_time;
          if (time === null) return <span className="text-gray-400">-</span>;

          return (
            <span className="font-medium text-gray-700">
              {formatDuration(time)}
            </span>
          );
        },
      },
      {
        id: 'speed',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Speed
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        accessorFn: (row) => {
          const isStuck = row.status === 'running' &&
            new Date().getTime() - new Date(row.created_at).getTime() > 10 * 60 * 1000;

          // For actively running jobs (not stuck), calculate speed from elapsed time
          if (row.status === 'running' && !isStuck && row.started_at && row.reviews_count) {
            const elapsed = (Date.now() - new Date(row.started_at).getTime()) / 1000;
            return elapsed > 0 ? row.reviews_count / elapsed : null;
          }
          return calculateSpeed(row.reviews_count, row.scrape_time);
        },
        cell: ({ row }) => {
          const job = row.original;
          const isRunning = job.status === 'running';
          const isPartial = job.status === 'partial';
          const isStuck = isRunning &&
            new Date().getTime() - new Date(job.created_at).getTime() > 10 * 60 * 1000;

          // For actively running jobs (not stuck), show live speed
          if (isRunning && !isStuck && job.started_at && job.reviews_count) {
            const elapsed = (Date.now() - new Date(job.started_at).getTime()) / 1000;
            const speed = elapsed > 0 ? job.reviews_count / elapsed : 0;
            const isGood = speed >= 1;
            const isSlow = speed < 0.5;

            return (
              <span className={`font-medium flex items-center gap-1 ${
                isGood ? 'text-green-600' : isSlow ? 'text-orange-500' : 'text-blue-600'
              }`}>
                <div className="w-2 h-2 bg-current rounded-full animate-pulse" />
                {speed.toFixed(1)}/s
              </span>
            );
          }

          // For stuck jobs, show frozen speed in red
          if (isStuck && job.started_at && job.reviews_count) {
            const elapsed = (Date.now() - new Date(job.started_at).getTime()) / 1000;
            const speed = elapsed > 0 ? job.reviews_count / elapsed : 0;
            return (
              <span className="font-medium text-red-600">
                {speed.toFixed(1)}/s
              </span>
            );
          }

          // For partial jobs, show speed in orange
          if (isPartial) {
            const speed = calculateSpeed(job.reviews_count, job.scrape_time);
            if (speed !== null) {
              return (
                <span className="font-medium text-orange-600">
                  {speed.toFixed(1)}/s
                </span>
              );
            }
          }

          const speed = calculateSpeed(job.reviews_count, job.scrape_time);
          if (speed === null) return <span className="text-gray-400">-</span>;

          const isGood = speed >= 1;
          const isSlow = speed < 0.5;

          return (
            <span className={`font-medium ${
              isGood ? 'text-green-700' : isSlow ? 'text-orange-600' : 'text-gray-700'
            }`}>
              {speed.toFixed(1)}/s
            </span>
          );
        },
      },
      {
        accessorKey: 'created_at',
        header: ({ column }) => (
          <button
            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
            className="flex items-center gap-2 hover:text-blue-700 font-semibold"
          >
            Date
            <SortIcon sorted={column.getIsSorted()} />
          </button>
        ),
        cell: ({ row }) => {
          const date = new Date(row.original.created_at);
          const isToday = new Date().toDateString() === date.toDateString();

          return (
            <div>
              <div className="font-medium text-gray-900">
                {isToday ? 'Today' : date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
              </div>
              <div className="text-xs text-gray-500">
                {date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
              </div>
            </div>
          );
        },
        sortingFn: (rowA, rowB) => {
          return new Date(rowA.original.created_at).getTime() - new Date(rowB.original.created_at).getTime();
        },
      },
      {
        id: 'actions',
        header: 'Actions',
        cell: ({ row }) => {
          const job = row.original;
          const canView = job.reviews_count && job.reviews_count > 0;
          const isRunning = job.status === 'running';
          const isPartial = job.status === 'partial';
          const previousJob = findPreviousJob(job);

          return (
            <div className="flex items-center gap-2">
              {/* View Reviews - available for any job with reviews */}
              {canView && (
                <button
                  onClick={() => onSelectJob(job, previousJob)}
                  className={`px-2.5 py-1.5 text-xs font-semibold rounded-lg transition-colors flex items-center gap-1.5 ${
                    isRunning
                      ? 'bg-purple-600 text-white hover:bg-purple-700'
                      : isPartial
                      ? 'bg-orange-600 text-white hover:bg-orange-700'
                      : 'bg-blue-600 text-white hover:bg-blue-700'
                  }`}
                  title={isRunning ? 'Preview analytics (job still running)' : isPartial ? 'View partial results' : 'View analytics'}
                >
                  {isLoadingJob === job.job_id ? (
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  ) : (
                    <>
                      {isRunning && (
                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                      )}
                      {isRunning ? 'Preview' : isPartial ? 'Partial' : 'View'}
                    </>
                  )}
                </button>
              )}

              {/* Live Monitor - for actively running jobs (not stuck) */}
              {(() => {
                const isStuck = job.status === 'running' &&
                  new Date().getTime() - new Date(job.created_at).getTime() > 10 * 60 * 1000;
                return job.status === 'running' && !isStuck && (
                  <button
                    onClick={() => startMonitoring(job)}
                    className="px-2.5 py-1.5 bg-green-600 text-white text-xs font-semibold rounded-lg hover:bg-green-700 transition-colors flex items-center gap-1.5"
                  >
                    <span className="relative flex h-2 w-2">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
                      <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
                    </span>
                    Live
                  </button>
                );
              })()}

              {/* View DevTools */}
              <Link
                href={`/jobs/${job.job_id}`}
                className="p-1.5 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors"
                title="View DevTools"
                onClick={(e) => e.stopPropagation()}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
              </Link>

              {/* View Logs */}
              {(() => {
                const isStuck = job.status === 'running' &&
                  new Date().getTime() - new Date(job.created_at).getTime() > 10 * 60 * 1000;
                const isError = job.status === 'failed' || isStuck;
                return (
                  <button
                    onClick={() => fetchJobLogs(job.job_id)}
                    className={`p-1.5 rounded-lg transition-colors ${
                      isError
                        ? 'bg-red-100 text-red-700 hover:bg-red-200'
                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                    title="View logs"
                  >
                    {loadingLogs === job.job_id ? (
                      <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                    )}
                  </button>
                );
              })()}

              {/* Expand Error */}
              {job.status === 'failed' && job.error_message && (
                <button
                  onClick={() => {
                    const newExpanded = new Set(expandedErrors);
                    if (newExpanded.has(job.job_id)) {
                      newExpanded.delete(job.job_id);
                    } else {
                      newExpanded.add(job.job_id);
                    }
                    setExpandedErrors(newExpanded);
                  }}
                  className="p-1.5 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
                  title="Show error"
                >
                  <svg className={`w-4 h-4 transition-transform ${expandedErrors.has(job.job_id) ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              )}

              {/* Delete Job - allow for non-running or stuck jobs */}
              {(() => {
                const isStuck = job.status === 'running' &&
                  new Date().getTime() - new Date(job.created_at).getTime() > 10 * 60 * 1000;
                const canDelete = job.status !== 'running' || isStuck;

                return canDelete && (
                  <button
                    onClick={() => setDeleteConfirm(job)}
                    className="p-1.5 bg-gray-100 text-gray-500 rounded-lg hover:bg-red-100 hover:text-red-600 transition-colors"
                    title={isStuck ? "Delete stuck job" : "Delete job"}
                  >
                    {isDeleting === job.job_id ? (
                      <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
                    ) : (
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    )}
                  </button>
                );
              })()}
            </div>
          );
        },
      },
    ],
    [isLoadingJob, loadingLogs, expandedErrors, jobsWithUpdates, startMonitoring, isDeleting]
  );

  const table = useReactTable({
    data: filteredJobs,
    columns,
    state: {
      sorting,
      globalFilter,
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    globalFilterFn: (row, columnId, filterValue) => {
      const business = extractBusinessName(row.original).toLowerCase();
      const search = filterValue.toLowerCase();
      return business.includes(search);
    },
    initialState: {
      pagination: { pageSize: 20 },
    },
  });

  if (jobs.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-gray-500">
        <svg className="w-20 h-20 mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
        <h3 className="text-xl font-semibold text-gray-700 mb-2">No Jobs Yet</h3>
        <p className="text-sm text-gray-500">Start a new scrape to see your jobs here</p>
      </div>
    );
  }

  return (
    <div className="h-full overflow-y-auto p-6">
      {/* Header */}
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-gray-900">Jobs</h2>
        <p className="text-sm text-gray-600 mt-1">
          Monitor and analyze your scraping jobs
        </p>
      </div>

      {/* Summary Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
        <StatCard
          label="Total Jobs"
          value={stats.total}
          icon={<ClipboardIcon />}
          color="blue"
        />
        <StatCard
          label="Success Rate"
          value={`${stats.successRate.toFixed(0)}%`}
          icon={<CheckIcon />}
          color={stats.successRate >= 90 ? 'green' : stats.successRate >= 70 ? 'yellow' : 'red'}
        />
        <StatCard
          label="Reviews Scraped"
          value={stats.totalReviews.toLocaleString()}
          icon={<StarIcon />}
          color="purple"
        />
        <StatCard
          label="Avg Duration"
          value={formatDuration(stats.avgTime)}
          icon={<ClockIcon />}
          color="indigo"
        />
        <StatCard
          label="Avg Speed"
          value={`${stats.avgSpeed.toFixed(1)}/s`}
          icon={<SpeedIcon />}
          color={stats.avgSpeed >= 1 ? 'green' : 'orange'}
        />
        <StatCard
          label="Today"
          value={stats.jobsToday}
          icon={<CalendarIcon />}
          color="teal"
        />
      </div>

      {/* Filters */}
      <div className="bg-white border-2 border-gray-200 rounded-xl p-4 mb-6 flex flex-wrap items-center gap-4">
        {/* Search */}
        <div className="relative flex-1 min-w-[200px]">
          <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          <input
            type="text"
            placeholder="Search by business name..."
            value={globalFilter}
            onChange={(e) => setGlobalFilter(e.target.value)}
            className="w-full pl-9 pr-4 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm"
          />
        </div>

        {/* Status Filter */}
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-gray-600">Status:</span>
          <div className="flex gap-1">
            {['all', 'completed', 'running', 'failed'].map((status) => (
              <button
                key={status}
                onClick={() => setStatusFilter(status)}
                className={`px-3 py-1.5 text-xs font-semibold rounded-lg transition-colors ${
                  statusFilter === status
                    ? status === 'completed' ? 'bg-green-600 text-white' :
                      status === 'running' ? 'bg-blue-600 text-white' :
                      status === 'failed' ? 'bg-red-600 text-white' :
                      'bg-gray-900 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                }`}
              >
                {status === 'all' ? 'All' : status.charAt(0).toUpperCase() + status.slice(1)}
                {status !== 'all' && (
                  <span className="ml-1 opacity-75">
                    ({status === 'completed' ? stats.completed : status === 'running' ? stats.running : stats.failed})
                  </span>
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Bulk Delete */}
        <div className="flex items-center gap-2 ml-auto">
          <div className="relative group">
            <button
              className="px-3 py-1.5 text-xs font-semibold rounded-lg bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 transition-colors flex items-center gap-1.5"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
              Bulk Delete
              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div className="absolute right-0 mt-1 w-48 bg-white border-2 border-gray-200 rounded-lg shadow-lg hidden group-hover:block z-10">
              <button
                onClick={() => setBulkDeleteConfirm('completed')}
                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between"
                disabled={stats.completed === 0}
              >
                Delete Completed
                <span className="text-xs text-gray-400">({stats.completed})</span>
              </button>
              <button
                onClick={() => setBulkDeleteConfirm('failed')}
                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between"
                disabled={stats.failed === 0}
              >
                Delete Failed
                <span className="text-xs text-gray-400">({stats.failed})</span>
              </button>
              <div className="border-t border-gray-200" />
              <button
                onClick={() => setBulkDeleteConfirm('all')}
                className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center justify-between font-semibold"
                disabled={stats.total === 0}
              >
                Delete All Jobs
                <span className="text-xs text-red-400">({stats.total})</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Table */}
      <div className="bg-white border-2 border-gray-200 rounded-xl overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b-2 border-gray-200">
              {table.getHeaderGroups().map(headerGroup => (
                <tr key={headerGroup.id}>
                  {headerGroup.headers.map(header => (
                    <th key={header.id} className="px-4 py-3 text-left text-sm text-gray-700">
                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody className="divide-y divide-gray-100">
              {table.getRowModel().rows.map(row => (
                <React.Fragment key={row.id}>
                  <tr className="hover:bg-gray-50 transition-colors">
                    {row.getVisibleCells().map(cell => (
                      <td key={cell.id} className="px-4 py-3">
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </td>
                    ))}
                  </tr>
                  {/* Expanded Error Row */}
                  {expandedErrors.has(row.original.job_id) && row.original.error_message && (
                    <tr className="bg-red-50">
                      <td colSpan={columns.length} className="px-4 py-3">
                        <div className="flex items-start gap-2">
                          <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                          </svg>
                          <pre className="text-sm text-red-800 font-mono whitespace-pre-wrap break-all">
                            {row.original.error_message}
                          </pre>
                        </div>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        <div className="px-4 py-3 border-t-2 border-gray-200 flex items-center justify-between bg-gray-50">
          <div className="text-sm text-gray-600">
            Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{' '}
            {Math.min((table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize, filteredJobs.length)} of{' '}
            {filteredJobs.length} jobs
          </div>
          <div className="flex gap-2">
            <button
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
              className="px-3 py-1.5 text-sm font-medium border-2 border-gray-200 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors"
            >
              Previous
            </button>
            <button
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
              className="px-3 py-1.5 text-sm font-medium border-2 border-gray-200 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors"
            >
              Next
            </button>
          </div>
        </div>
      </div>

      {/* Logs Modal */}
      {selectedJobLogs && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
          onClick={() => setSelectedJobLogs(null)}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header */}
            <div className="bg-gray-100 border-b-2 border-gray-200 px-6 py-4 flex items-center justify-between">
              <div>
                <h3 className="text-xl font-bold text-gray-900">Job Logs</h3>
                <p className="text-sm text-gray-500">
                  {selectedJobLogs.log_count} log entries · Status: {' '}
                  <span className={`font-semibold ${
                    selectedJobLogs.status === 'completed' ? 'text-green-600' :
                    selectedJobLogs.status === 'failed' ? 'text-red-600' :
                    selectedJobLogs.status === 'running' ? 'text-blue-600' :
                    'text-gray-600'
                  }`}>
                    {selectedJobLogs.status}
                  </span>
                </p>
              </div>
              <button
                onClick={() => setSelectedJobLogs(null)}
                className="p-2 hover:bg-gray-200 rounded-full transition-colors"
              >
                <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Error Message */}
            {selectedJobLogs.error_message && (
              <div className="bg-red-50 border-b border-red-200 px-6 py-3">
                <div className="flex items-start gap-2">
                  <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                  </svg>
                  <div>
                    <p className="font-semibold text-red-800">Error</p>
                    <p className="text-sm text-red-700 font-mono whitespace-pre-wrap">{selectedJobLogs.error_message}</p>
                  </div>
                </div>
              </div>
            )}

            {/* Logs List */}
            <div className="flex-1 overflow-y-auto p-4">
              {selectedJobLogs.logs.length === 0 ? (
                <div className="text-center text-gray-500 py-8">
                  <svg className="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <p className="font-medium">No logs available</p>
                  <p className="text-sm">This job was created before logging was enabled</p>
                </div>
              ) : (
                <div className="space-y-1 font-mono text-sm">
                  {[...selectedJobLogs.logs]
                    .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
                    .map((log, idx) => (
                      <div
                        key={idx}
                        className={`px-3 py-2 rounded-lg ${
                          log.level === 'ERROR' ? 'bg-red-50 border border-red-200' :
                          log.level === 'WARNING' ? 'bg-yellow-50 border border-yellow-200' :
                          log.level === 'INFO' ? 'bg-blue-50 border border-blue-200' :
                          'bg-gray-50 border border-gray-200'
                        }`}
                      >
                        <div className="flex items-start gap-3">
                          <span className="text-gray-400 text-xs whitespace-nowrap">
                            {new Date(log.timestamp).toLocaleTimeString()}
                          </span>
                          <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${
                            log.level === 'ERROR' ? 'bg-red-200 text-red-800' :
                            log.level === 'WARNING' ? 'bg-yellow-200 text-yellow-800' :
                            log.level === 'INFO' ? 'bg-blue-200 text-blue-800' :
                            'bg-gray-200 text-gray-700'
                          }`}>
                            {log.level}
                          </span>
                          <span className={`px-1.5 py-0.5 rounded text-[10px] font-semibold ${
                            log.source === 'browser' ? 'bg-purple-100 text-purple-700' : 'bg-green-100 text-green-700'
                          }`}>
                            {log.source}
                          </span>
                          <span className="flex-1 text-gray-800 break-all">
                            {log.message}
                          </span>
                        </div>
                      </div>
                    ))}
                </div>
              )}
            </div>

            {/* Modal Footer */}
            <div className="bg-gray-100 border-t-2 border-gray-200 px-6 py-4">
              <button
                onClick={() => setSelectedJobLogs(null)}
                className="w-full py-2.5 bg-gray-900 text-white rounded-lg font-semibold hover:bg-gray-800 transition-colors"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Live Monitor Modal */}
      {monitoredJob && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
          onClick={() => stopMonitoring()}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header */}
            <div className="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-4 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="relative">
                  {isMonitoring && (
                    <>
                      <span className="absolute inline-flex h-full w-full rounded-full bg-white opacity-75 animate-ping"></span>
                      <span className="relative inline-flex rounded-full h-3 w-3 bg-white"></span>
                    </>
                  )}
                  {!isMonitoring && (
                    <span className={`inline-flex rounded-full h-3 w-3 ${
                      monitoredJob.status === 'completed' ? 'bg-green-200' :
                      monitoredJob.status === 'failed' ? 'bg-red-300' : 'bg-gray-300'
                    }`}></span>
                  )}
                </div>
                <div>
                  <h3 className="text-xl font-bold text-white">
                    {isMonitoring ? 'Live Monitor' : 'Job Finished'}
                  </h3>
                  <p className="text-sm text-green-100">
                    {extractBusinessName(monitoredJob)}
                  </p>
                </div>
              </div>
              <button
                onClick={() => stopMonitoring()}
                className="p-2 hover:bg-white/20 rounded-full transition-colors"
              >
                <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Progress Section */}
            <div className="px-6 py-4 bg-gray-50 border-b-2 border-gray-200">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-3">
                  <span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold ${
                    monitoredJob.status === 'completed' ? 'bg-green-100 text-green-800' :
                    monitoredJob.status === 'running' ? 'bg-blue-100 text-blue-800' :
                    monitoredJob.status === 'failed' ? 'bg-red-100 text-red-800' :
                    'bg-gray-100 text-gray-800'
                  }`}>
                    {monitoredJob.status === 'running' && (
                      <div className="w-2.5 h-2.5 border-2 border-current border-t-transparent rounded-full animate-spin" />
                    )}
                    {monitoredJob.status === 'completed' && (
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                      </svg>
                    )}
                    {monitoredJob.status === 'failed' && (
                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                      </svg>
                    )}
                    {monitoredJob.status.charAt(0).toUpperCase() + monitoredJob.status.slice(1)}
                  </span>
                </div>
                <div className="text-right">
                  <div className="text-2xl font-bold text-gray-900">
                    {monitoredJob.reviews_count?.toLocaleString() || 0}
                    {monitoredJob.total_reviews && (
                      <span className="text-gray-400 font-normal text-lg"> / {monitoredJob.total_reviews.toLocaleString()}</span>
                    )}
                  </div>
                  <div className="text-xs text-gray-500">reviews scraped</div>
                </div>
              </div>

              {/* Progress Bar */}
              {monitoredJob.total_reviews && monitoredJob.total_reviews > 0 && (
                <div className="mt-3">
                  <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                    <div
                      className={`h-full rounded-full transition-all duration-500 ${
                        monitoredJob.status === 'completed' ? 'bg-green-500' :
                        monitoredJob.status === 'failed' ? 'bg-red-500' :
                        'bg-blue-500'
                      }`}
                      style={{ width: `${Math.min(100, ((monitoredJob.reviews_count || 0) / monitoredJob.total_reviews) * 100)}%` }}
                    />
                  </div>
                  <div className="flex justify-between mt-1 text-xs text-gray-500">
                    <span>{Math.round(((monitoredJob.reviews_count || 0) / monitoredJob.total_reviews) * 100)}% complete</span>
                    {monitoredJob.status === 'running' && monitoredJob.reviews_count && monitoredJob.scrape_time && (
                      <span>
                        {(monitoredJob.reviews_count / monitoredJob.scrape_time).toFixed(1)} reviews/sec
                      </span>
                    )}
                  </div>
                </div>
              )}

              {/* Stats Row */}
              <div className="grid grid-cols-3 gap-4 mt-4">
                <div className="bg-white rounded-lg p-3 border border-gray-200">
                  <div className="text-xs text-gray-500 mb-1">Duration</div>
                  <div className="text-lg font-semibold text-gray-900">
                    {monitoredJob.scrape_time ? formatDuration(monitoredJob.scrape_time) : '-'}
                  </div>
                </div>
                <div className="bg-white rounded-lg p-3 border border-gray-200">
                  <div className="text-xs text-gray-500 mb-1">Speed</div>
                  <div className="text-lg font-semibold text-gray-900">
                    {monitoredJob.reviews_count && monitoredJob.scrape_time
                      ? `${(monitoredJob.reviews_count / monitoredJob.scrape_time).toFixed(1)}/s`
                      : '-'
                    }
                  </div>
                </div>
                <div className="bg-white rounded-lg p-3 border border-gray-200">
                  <div className="text-xs text-gray-500 mb-1">Started</div>
                  <div className="text-lg font-semibold text-gray-900">
                    {monitoredJob.started_at
                      ? new Date(monitoredJob.started_at).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
                      : '-'
                    }
                  </div>
                </div>
              </div>
            </div>

            {/* Error Message */}
            {monitoredJob.status === 'failed' && monitoredJob.error_message && (
              <div className="bg-red-50 border-b border-red-200 px-6 py-3">
                <div className="flex items-start gap-2">
                  <svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                  </svg>
                  <div>
                    <p className="font-semibold text-red-800">Error</p>
                    <p className="text-sm text-red-700 font-mono whitespace-pre-wrap">{monitoredJob.error_message}</p>
                  </div>
                </div>
              </div>
            )}

            {/* Live Logs Section */}
            <div className="flex-1 overflow-hidden flex flex-col">
              <div className="px-6 py-2 bg-gray-100 border-b border-gray-200 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <span className="text-sm font-semibold text-gray-700">Live Logs</span>
                  <span className="text-xs text-gray-500">({monitoredJobLogs.length} entries)</span>
                </div>
                {isMonitoring && (
                  <span className="text-xs text-green-600 flex items-center gap-1">
                    <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
                    Auto-refreshing
                  </span>
                )}
              </div>
              <div className="flex-1 overflow-y-auto p-4 bg-gray-900">
                {monitoredJobLogs.length === 0 ? (
                  <div className="text-center text-gray-500 py-8">
                    <svg className="w-12 h-12 mx-auto mb-3 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <p className="font-medium text-gray-400">Waiting for logs...</p>
                  </div>
                ) : (
                  <div className="space-y-1 font-mono text-xs">
                    {[...monitoredJobLogs]
                      .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
                      .map((log, idx) => (
                        <div
                          key={idx}
                          className={`px-2 py-1 rounded ${
                            log.level === 'ERROR' ? 'bg-red-900/30 text-red-300' :
                            log.level === 'WARNING' ? 'bg-yellow-900/30 text-yellow-300' :
                            log.level === 'INFO' ? 'text-green-300' :
                            'text-gray-400'
                          }`}
                        >
                          <span className="text-gray-500">
                            {new Date(log.timestamp).toLocaleTimeString()}
                          </span>
                          {' '}
                          <span className={`font-bold ${
                            log.level === 'ERROR' ? 'text-red-400' :
                            log.level === 'WARNING' ? 'text-yellow-400' :
                            log.level === 'INFO' ? 'text-blue-400' :
                            'text-gray-500'
                          }`}>
                            [{log.level}]
                          </span>
                          {' '}
                          <span className={`${
                            log.source === 'browser' ? 'text-purple-400' : 'text-green-400'
                          }`}>
                            [{log.source}]
                          </span>
                          {' '}
                          <span>{log.message}</span>
                        </div>
                      ))}
                  </div>
                )}
              </div>
            </div>

            {/* Modal Footer */}
            <div className="bg-gray-100 border-t-2 border-gray-200 px-6 py-4 flex gap-3">
              {monitoredJob.status === 'completed' && monitoredJob.reviews_count && (
                <button
                  onClick={() => {
                    const previousJob = findPreviousJob(monitoredJob);
                    onSelectJob(monitoredJob, previousJob);
                    stopMonitoring();
                  }}
                  className="flex-1 py-2.5 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
                >
                  View Reviews
                </button>
              )}
              <Link
                href={`/jobs/${monitoredJob.job_id}`}
                onClick={() => stopMonitoring()}
                className="py-2.5 px-6 bg-purple-600 text-white rounded-lg font-semibold hover:bg-purple-700 transition-colors flex items-center gap-2"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
                DevTools
              </Link>
              <button
                onClick={() => stopMonitoring()}
                className={`${monitoredJob.status === 'completed' && monitoredJob.reviews_count ? '' : 'flex-1'} py-2.5 px-6 bg-gray-900 text-white rounded-lg font-semibold hover:bg-gray-800 transition-colors`}
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Delete Confirmation Modal */}
      {deleteConfirm && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
          onClick={() => setDeleteConfirm(null)}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="p-6">
              <div className="flex items-center gap-4 mb-4">
                <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-900">Delete Job</h3>
                  <p className="text-sm text-gray-500">This action cannot be undone</p>
                </div>
              </div>
              <p className="text-gray-700 mb-2">
                Are you sure you want to delete this job?
              </p>
              <div className="bg-gray-100 rounded-lg p-3 mb-4">
                <p className="font-semibold text-gray-900">{extractBusinessName(deleteConfirm)}</p>
                <p className="text-sm text-gray-500">
                  {deleteConfirm.reviews_count ? `${deleteConfirm.reviews_count} reviews` : 'No reviews'} ·{' '}
                  {new Date(deleteConfirm.created_at).toLocaleDateString()}
                </p>
              </div>
            </div>
            <div className="bg-gray-100 px-6 py-4 flex gap-3">
              <button
                onClick={() => setDeleteConfirm(null)}
                className="flex-1 py-2.5 bg-white border-2 border-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={() => deleteJob(deleteConfirm.job_id)}
                disabled={isDeleting === deleteConfirm.job_id}
                className="flex-1 py-2.5 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {isDeleting === deleteConfirm.job_id ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    Deleting...
                  </>
                ) : (
                  'Delete Job'
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Bulk Delete Confirmation Modal */}
      {bulkDeleteConfirm && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
          onClick={() => setBulkDeleteConfirm(null)}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="p-6">
              <div className="flex items-center gap-4 mb-4">
                <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                  <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-900">
                    {bulkDeleteConfirm === 'all' ? 'Delete All Jobs' :
                     bulkDeleteConfirm === 'completed' ? 'Delete Completed Jobs' :
                     'Delete Failed Jobs'}
                  </h3>
                  <p className="text-sm text-gray-500">This action cannot be undone</p>
                </div>
              </div>
              <p className="text-gray-700 mb-4">
                {bulkDeleteConfirm === 'all' ? (
                  <>You are about to delete <span className="font-bold text-red-600">{stats.total} jobs</span> and all associated data.</>
                ) : bulkDeleteConfirm === 'completed' ? (
                  <>You are about to delete <span className="font-bold text-red-600">{stats.completed} completed jobs</span> and their reviews data.</>
                ) : (
                  <>You are about to delete <span className="font-bold text-red-600">{stats.failed} failed jobs</span> and their error logs.</>
                )}
              </p>
              <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                <p className="text-sm text-red-800">
                  <strong>Warning:</strong> All reviews data, logs, and job history will be permanently deleted.
                </p>
              </div>
            </div>
            <div className="bg-gray-100 px-6 py-4 flex gap-3">
              <button
                onClick={() => setBulkDeleteConfirm(null)}
                className="flex-1 py-2.5 bg-white border-2 border-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={() => bulkDeleteJobs(bulkDeleteConfirm)}
                disabled={isBulkDeleting}
                className="flex-1 py-2.5 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {isBulkDeleting ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    Deleting...
                  </>
                ) : (
                  `Delete ${bulkDeleteConfirm === 'all' ? stats.total : bulkDeleteConfirm === 'completed' ? stats.completed : stats.failed} Jobs`
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Helper Components
function SortIcon({ sorted }: { sorted: false | 'asc' | 'desc' }) {
  if (sorted === 'asc') {
    return (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
      </svg>
    );
  }
  if (sorted === 'desc') {
    return (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
      </svg>
    );
  }
  return (
    <svg className="w-4 h-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
    </svg>
  );
}

function StatCard({ label, value, icon, color }: { label: string; value: string | number; icon: React.ReactNode; color: string }) {
  const colors: Record<string, string> = {
    blue: 'from-blue-100 to-blue-200 border-blue-300 text-blue-900',
    green: 'from-green-100 to-green-200 border-green-300 text-green-900',
    red: 'from-red-100 to-red-200 border-red-300 text-red-900',
    yellow: 'from-yellow-100 to-yellow-200 border-yellow-300 text-yellow-900',
    orange: 'from-orange-100 to-orange-200 border-orange-300 text-orange-900',
    purple: 'from-purple-100 to-purple-200 border-purple-300 text-purple-900',
    indigo: 'from-indigo-100 to-indigo-200 border-indigo-300 text-indigo-900',
    teal: 'from-teal-100 to-teal-200 border-teal-300 text-teal-900',
  };

  return (
    <div className={`bg-gradient-to-br ${colors[color]} border-2 rounded-xl p-4`}>
      <div className="flex items-center gap-2 mb-1">
        <span className="opacity-70">{icon}</span>
        <span className="text-xs font-semibold uppercase tracking-wide opacity-80">{label}</span>
      </div>
      <div className="text-2xl font-bold">{value}</div>
    </div>
  );
}

// Icons
function ClipboardIcon() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  );
}

function StarIcon() {
  return (
    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
    </svg>
  );
}

function ClockIcon() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  );
}

function SpeedIcon() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
  );
}

function CalendarIcon() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
  );
}