whyrating-engine-legacy/web/app/dashboard/scrapers/page.tsx

'use client';

import React, { useState, useCallback, useMemo, useEffect } from 'react';

// API base URL
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

// Types from API
interface ScraperStats {
  total_jobs: number;
  success_rate: number;
  avg_duration: number;
}

interface ApiScraperVersion {
  id: string;
  job_type: string;
  version: string;
  variant: 'stable' | 'beta' | 'canary';
  is_default: boolean;
  traffic_pct: number;
  module_path: string;
  function_name: string | null;
  deprecated_at: string | null;
  stats: ScraperStats;
}

// Internal UI type
interface ScraperVersion {
  id: string;
  version: string;
  variant: 'stable' | 'beta' | 'canary';
  traffic_percentage: number;
  jobs_24h: number;
  success_rate: number;
  avg_duration: number;
  status: 'active' | 'deprecated' | 'inactive';
  module_path: string;
  function_name: string;
  created_at: string;
  promoted_at?: string;
  is_default?: boolean;
}

// Transform API response to internal format
function transformApiScraper(api: ApiScraperVersion): ScraperVersion {
  let status: 'active' | 'deprecated' | 'inactive' = 'inactive';
  if (api.deprecated_at) {
    status = 'deprecated';
  } else if (api.traffic_pct > 0) {
    status = 'active';
  }

  return {
    id: api.id,
    version: api.version,
    variant: api.variant,
    traffic_percentage: api.traffic_pct,
    jobs_24h: api.stats.total_jobs,
    success_rate: api.stats.success_rate,
    avg_duration: api.stats.avg_duration,
    status,
    module_path: api.module_path,
    function_name: api.function_name || 'scrape',
    created_at: new Date().toISOString(),
    is_default: api.is_default,
  };
}

export default function ScrapersPage() {
  const [versions, setVersions] = useState<ScraperVersion[]>([]);
  const [isLoadingVersions, setIsLoadingVersions] = useState(true);
  const [loadError, setLoadError] = useState<string | null>(null);
  const [showAddForm, setShowAddForm] = useState(false);
  const [editingTraffic, setEditingTraffic] = useState<string | null>(null);
  const [trafficValues, setTrafficValues] = useState<Record<string, number>>({});
  const [isUpdatingTraffic, setIsUpdatingTraffic] = useState(false);

  // Fetch scrapers from API
  const fetchScrapers = useCallback(async () => {
    try {
      setLoadError(null);
      const response = await fetch(`${API_BASE}/api/admin/scrapers`);
      if (!response.ok) {
        throw new Error(`Failed to fetch scrapers: ${response.statusText}`);
      }
      const data: ApiScraperVersion[] = await response.json();
      setVersions(data.map(transformApiScraper));
    } catch (error) {
      console.error('Failed to fetch scrapers:', error);
      setLoadError(error instanceof Error ? error.message : 'Failed to load scrapers');
    } finally {
      setIsLoadingVersions(false);
    }
  }, []);

  useEffect(() => {
    fetchScrapers();
  }, [fetchScrapers]);

  // Confirmation modal state
  const [confirmAction, setConfirmAction] = useState<{
    type: 'promote' | 'deprecate' | 'delete';
    version: ScraperVersion;
  } | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  // New version form state
  const [newVersion, setNewVersion] = useState({
    version: '',
    variant: 'beta' as 'stable' | 'beta' | 'canary',
    module_path: '',
    function_name: '',
    traffic_percentage: 0,
  });

  // Calculate total traffic for active versions
  const totalTraffic = useMemo(() => {
    return versions
      .filter(v => v.status === 'active')
      .reduce((sum, v) => sum + (trafficValues[v.id] ?? v.traffic_percentage), 0);
  }, [versions, trafficValues]);

  // Initialize traffic values when editing starts
  const startEditingTraffic = useCallback(() => {
    const initial: Record<string, number> = {};
    versions.forEach(v => {
      initial[v.id] = v.traffic_percentage;
    });
    setTrafficValues(initial);
    setEditingTraffic('all');
  }, [versions]);

  // Update traffic allocation
  const handleTrafficUpdate = async () => {
    if (totalTraffic !== 100) {
      alert('Traffic allocation must equal 100%');
      return;
    }

    setIsUpdatingTraffic(true);
    try {
      // Update each scraper's traffic via API
      const updates = Object.entries(trafficValues).map(async ([id, pct]) => {
        const response = await fetch(`${API_BASE}/api/admin/scrapers/${id}/traffic`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ traffic_pct: pct }),
        });
        if (!response.ok) {
          throw new Error(`Failed to update traffic for ${id}`);
        }
      });

      await Promise.all(updates);

      // Refresh data from server
      await fetchScrapers();
      setEditingTraffic(null);
    } catch (error) {
      console.error('Failed to update traffic:', error);
      alert('Failed to update traffic allocation. Please try again.');
    } finally {
      setIsUpdatingTraffic(false);
    }
  };

  // Promote version to stable
  const promoteVersion = async (version: ScraperVersion) => {
    setIsProcessing(true);
    try {
      const response = await fetch(`${API_BASE}/api/admin/scrapers/${version.id}/promote?traffic_pct=80`, {
        method: 'POST',
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.detail || 'Failed to promote version');
      }

      // Refresh data from server
      await fetchScrapers();
      setConfirmAction(null);
    } catch (error) {
      console.error('Failed to promote version:', error);
      alert(error instanceof Error ? error.message : 'Failed to promote version');
    } finally {
      setIsProcessing(false);
    }
  };

  // Deprecate version
  const deprecateVersion = async (version: ScraperVersion) => {
    setIsProcessing(true);
    try {
      const response = await fetch(`${API_BASE}/api/admin/scrapers/${version.id}/deprecate`, {
        method: 'POST',
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.detail || 'Failed to deprecate version');
      }

      // Refresh data from server
      await fetchScrapers();
      setConfirmAction(null);
    } catch (error) {
      console.error('Failed to deprecate version:', error);
      alert(error instanceof Error ? error.message : 'Failed to deprecate version');
    } finally {
      setIsProcessing(false);
    }
  };

  // Add new version
  const handleAddVersion = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const response = await fetch(`${API_BASE}/api/admin/scrapers`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          job_type: 'google_reviews',
          version: newVersion.version,
          variant: newVersion.variant,
          module_path: newVersion.module_path,
          function_name: newVersion.function_name,
          traffic_pct: newVersion.traffic_percentage,
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.detail || 'Failed to add version');
      }

      // Refresh data from server
      await fetchScrapers();

      setNewVersion({
        version: '',
        variant: 'beta',
        module_path: '',
        function_name: '',
        traffic_percentage: 0,
      });
      setShowAddForm(false);
    } catch (error) {
      console.error('Failed to add version:', error);
      alert(error instanceof Error ? error.message : 'Failed to add version');
    }
  };

  // Variant badge styling
  const getVariantStyle = (variant: string) => {
    switch (variant) {
      case 'stable':
        return 'bg-green-100 text-green-800 border-green-300';
      case 'beta':
        return 'bg-blue-100 text-blue-800 border-blue-300';
      case 'canary':
        return 'bg-yellow-100 text-yellow-800 border-yellow-300';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-300';
    }
  };

  // Status badge styling
  const getStatusStyle = (status: string) => {
    switch (status) {
      case 'active':
        return 'bg-green-100 text-green-800';
      case 'deprecated':
        return 'bg-red-100 text-red-800';
      case 'inactive':
        return 'bg-gray-100 text-gray-600';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  // Loading state
  if (isLoadingVersions) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <p className="text-gray-600">Loading scrapers...</p>
        </div>
      </div>
    );
  }

  // Error state
  if (loadError) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg className="w-8 h-8 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>
          <h3 className="text-lg font-semibold text-gray-800 mb-2">Failed to load scrapers</h3>
          <p className="text-gray-600 mb-4">{loadError}</p>
          <button
            onClick={() => { setIsLoadingVersions(true); fetchScrapers(); }}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
          >
            Try Again
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="h-full overflow-y-auto p-6">
      {/* Header */}
      <div className="mb-6 flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Scraper Versions</h1>
          <p className="text-sm text-gray-600 mt-1">
            Manage scraper versions and A/B testing
          </p>
        </div>
        <button
          onClick={() => setShowAddForm(!showAddForm)}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          Add Version
        </button>
      </div>

      {/* Add New Version Form */}
      {showAddForm && (
        <div className="mb-6 bg-white border-2 border-gray-200 rounded-xl p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-bold text-gray-900">Add New Version</h2>
            <button
              onClick={() => setShowAddForm(false)}
              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
            >
              <svg className="w-5 h-5 text-gray-500" 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>

          <form onSubmit={handleAddVersion} className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {/* Version */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Version
                </label>
                <input
                  type="text"
                  value={newVersion.version}
                  onChange={(e) => setNewVersion(prev => ({ ...prev, version: e.target.value }))}
                  placeholder="e.g., 1.2.0"
                  className="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm"
                  required
                />
              </div>

              {/* Variant */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Variant
                </label>
                <select
                  value={newVersion.variant}
                  onChange={(e) => setNewVersion(prev => ({ ...prev, variant: e.target.value as 'stable' | 'beta' | 'canary' }))}
                  className="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm bg-white"
                  required
                >
                  <option value="canary">Canary</option>
                  <option value="beta">Beta</option>
                  <option value="stable">Stable</option>
                </select>
              </div>

              {/* Initial Traffic */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Initial Traffic %
                </label>
                <input
                  type="number"
                  min="0"
                  max="100"
                  value={newVersion.traffic_percentage}
                  onChange={(e) => setNewVersion(prev => ({ ...prev, traffic_percentage: parseInt(e.target.value) || 0 }))}
                  className="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm"
                  required
                />
              </div>

              {/* Module Path */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Module Path
                </label>
                <input
                  type="text"
                  value={newVersion.module_path}
                  onChange={(e) => setNewVersion(prev => ({ ...prev, module_path: e.target.value }))}
                  placeholder="e.g., scrapers.google_reviews"
                  className="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm font-mono"
                  required
                />
              </div>

              {/* Function Name */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Function Name
                </label>
                <input
                  type="text"
                  value={newVersion.function_name}
                  onChange={(e) => setNewVersion(prev => ({ ...prev, function_name: e.target.value }))}
                  placeholder="e.g., scrape_reviews"
                  className="w-full px-3 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm font-mono"
                  required
                />
              </div>
            </div>

            <div className="flex justify-end gap-3 pt-2">
              <button
                type="button"
                onClick={() => setShowAddForm(false)}
                className="px-4 py-2 border-2 border-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors"
              >
                Cancel
              </button>
              <button
                type="submit"
                className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
              >
                Add Version
              </button>
            </div>
          </form>
        </div>
      )}

      {/* Traffic Allocation Section */}
      <div className="mb-6 bg-white border-2 border-gray-200 rounded-xl p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-bold text-gray-900">Traffic Allocation</h2>
          {editingTraffic ? (
            <div className="flex items-center gap-3">
              <span className={`text-sm font-semibold ${totalTraffic === 100 ? 'text-green-600' : 'text-red-600'}`}>
                Total: {totalTraffic}%
              </span>
              <button
                onClick={() => setEditingTraffic(null)}
                className="px-3 py-1.5 text-sm font-semibold border-2 border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleTrafficUpdate}
                disabled={totalTraffic !== 100 || isUpdatingTraffic}
                className="px-3 py-1.5 text-sm font-semibold bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
              >
                {isUpdatingTraffic && (
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                )}
                Update Traffic
              </button>
            </div>
          ) : (
            <button
              onClick={startEditingTraffic}
              className="px-3 py-1.5 text-sm font-semibold bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
              Edit Allocation
            </button>
          )}
        </div>

        {/* Traffic Bar Visualization */}
        <div className="mb-4">
          <div className="h-8 rounded-lg overflow-hidden flex">
            {versions
              .filter(v => v.status === 'active')
              .sort((a, b) => b.traffic_percentage - a.traffic_percentage)
              .map((version) => {
                const percentage = trafficValues[version.id] ?? version.traffic_percentage;
                if (percentage === 0) return null;

                return (
                  <div
                    key={version.id}
                    className={`h-full flex items-center justify-center text-xs font-bold text-white transition-all ${
                      version.variant === 'stable' ? 'bg-green-500' :
                      version.variant === 'beta' ? 'bg-blue-500' :
                      'bg-yellow-500'
                    }`}
                    style={{ width: `${percentage}%` }}
                  >
                    {percentage >= 10 && `${version.version} (${percentage}%)`}
                  </div>
                );
              })}
          </div>
          <div className="flex justify-between mt-2 text-xs text-gray-500">
            <span>0%</span>
            <span>50%</span>
            <span>100%</span>
          </div>
        </div>

        {/* Traffic Sliders (when editing) */}
        {editingTraffic && (
          <div className="space-y-4 pt-4 border-t border-gray-200">
            {versions
              .filter(v => v.status === 'active')
              .map((version) => (
                <div key={version.id} className="flex items-center gap-4">
                  <div className="w-24">
                    <span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-semibold border ${getVariantStyle(version.variant)}`}>
                      {version.variant}
                    </span>
                  </div>
                  <span className="w-20 text-sm font-medium text-gray-700">v{version.version}</span>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={trafficValues[version.id] ?? version.traffic_percentage}
                    onChange={(e) => setTrafficValues(prev => ({
                      ...prev,
                      [version.id]: parseInt(e.target.value),
                    }))}
                    className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                  />
                  <input
                    type="number"
                    min="0"
                    max="100"
                    value={trafficValues[version.id] ?? version.traffic_percentage}
                    onChange={(e) => setTrafficValues(prev => ({
                      ...prev,
                      [version.id]: parseInt(e.target.value) || 0,
                    }))}
                    className="w-20 px-2 py-1 border-2 border-gray-200 rounded-lg text-sm text-center focus:border-blue-500 focus:outline-none"
                  />
                  <span className="text-sm text-gray-500">%</span>
                </div>
              ))}
          </div>
        )}
      </div>

      {/* Scraper Versions 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">
              <tr>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Version</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Variant</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Traffic %</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Jobs (24h)</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Success Rate</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Avg Duration</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Status</th>
                <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {versions.map((version) => (
                <tr key={version.id} className="hover:bg-gray-50 transition-colors">
                  {/* Version */}
                  <td className="px-4 py-3">
                    <div>
                      <span className="font-semibold text-gray-900">{version.version}</span>
                      {version.promoted_at && (
                        <div className="text-xs text-gray-500 mt-0.5">
                          Promoted {new Date(version.promoted_at).toLocaleDateString()}
                        </div>
                      )}
                    </div>
                  </td>

                  {/* Variant */}
                  <td className="px-4 py-3">
                    <span className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-semibold border ${getVariantStyle(version.variant)}`}>
                      {version.variant}
                    </span>
                  </td>

                  {/* Traffic % */}
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      <div className="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div
                          className={`h-full rounded-full ${
                            version.variant === 'stable' ? 'bg-green-500' :
                            version.variant === 'beta' ? 'bg-blue-500' :
                            'bg-yellow-500'
                          }`}
                          style={{ width: `${version.traffic_percentage}%` }}
                        />
                      </div>
                      <span className="font-semibold text-gray-900">{version.traffic_percentage}%</span>
                    </div>
                  </td>

                  {/* Jobs (24h) */}
                  <td className="px-4 py-3">
                    <span className="font-medium text-gray-900">{version.jobs_24h.toLocaleString()}</span>
                  </td>

                  {/* Success Rate */}
                  <td className="px-4 py-3">
                    <span className={`font-semibold ${
                      version.success_rate >= 95 ? 'text-green-600' :
                      version.success_rate >= 80 ? 'text-yellow-600' :
                      version.success_rate > 0 ? 'text-red-600' :
                      'text-gray-400'
                    }`}>
                      {version.success_rate > 0 ? `${version.success_rate.toFixed(1)}%` : '-'}
                    </span>
                  </td>

                  {/* Avg Duration */}
                  <td className="px-4 py-3">
                    <span className="font-medium text-gray-700">
                      {version.avg_duration > 0 ? `${version.avg_duration}s` : '-'}
                    </span>
                  </td>

                  {/* Status */}
                  <td className="px-4 py-3">
                    <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold ${getStatusStyle(version.status)}`}>
                      {version.status === 'active' && (
                        <span className="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5" />
                      )}
                      {version.status.charAt(0).toUpperCase() + version.status.slice(1)}
                    </span>
                  </td>

                  {/* Actions */}
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      {/* Promote Button (for beta/canary) */}
                      {version.variant !== 'stable' && version.status === 'active' && (
                        <button
                          onClick={() => setConfirmAction({ type: 'promote', version })}
                          className="px-2.5 py-1.5 bg-green-100 text-green-700 text-xs font-semibold rounded-lg hover:bg-green-200 transition-colors flex items-center gap-1"
                          title="Promote to Stable"
                        >
                          <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="M5 10l7-7m0 0l7 7m-7-7v18" />
                          </svg>
                          Promote
                        </button>
                      )}

                      {/* Deprecate Button */}
                      {version.status === 'active' && (
                        <button
                          onClick={() => setConfirmAction({ type: 'deprecate', version })}
                          className="px-2.5 py-1.5 bg-red-100 text-red-700 text-xs font-semibold rounded-lg hover:bg-red-200 transition-colors flex items-center gap-1"
                          title="Deprecate Version"
                        >
                          <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                          </svg>
                          Deprecate
                        </button>
                      )}

                      {/* Edit Button */}
                      <button
                        onClick={() => {/* TODO: Open edit modal */}}
                        className="p-1.5 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors"
                        title="Edit Version"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                      </button>

                      {/* View Details */}
                      <button
                        onClick={() => {/* TODO: Open details modal */}}
                        className="p-1.5 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors"
                        title="View Details"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Empty State */}
        {versions.length === 0 && (
          <div className="py-12 text-center">
            <svg className="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
            <h3 className="text-lg font-semibold text-gray-700 mb-1">No Scraper Versions</h3>
            <p className="text-sm text-gray-500 mb-4">Add your first scraper version to get started</p>
            <button
              onClick={() => setShowAddForm(true)}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
            >
              Add Version
            </button>
          </div>
        )}
      </div>

      {/* Confirmation Modal */}
      {confirmAction && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
          onClick={() => setConfirmAction(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 rounded-full flex items-center justify-center ${
                  confirmAction.type === 'promote' ? 'bg-green-100' :
                  confirmAction.type === 'deprecate' ? 'bg-red-100' :
                  'bg-gray-100'
                }`}>
                  {confirmAction.type === 'promote' && (
                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                    </svg>
                  )}
                  {confirmAction.type === 'deprecate' && (
                    <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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                  )}
                </div>
                <div>
                  <h3 className="text-lg font-bold text-gray-900">
                    {confirmAction.type === 'promote' ? 'Promote to Stable' :
                     confirmAction.type === 'deprecate' ? 'Deprecate Version' :
                     'Delete Version'}
                  </h3>
                  <p className="text-sm text-gray-500">
                    v{confirmAction.version.version} ({confirmAction.version.variant})
                  </p>
                </div>
              </div>

              {confirmAction.type === 'promote' && (
                <div className="space-y-3">
                  <p className="text-gray-700">
                    This will promote <strong>v{confirmAction.version.version}</strong> to the stable channel.
                  </p>
                  <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                    <p className="text-sm text-yellow-800">
                      <strong>Note:</strong> The current stable version will be demoted to beta with reduced traffic.
                    </p>
                  </div>
                </div>
              )}

              {confirmAction.type === 'deprecate' && (
                <div className="space-y-3">
                  <p className="text-gray-700">
                    This will deprecate <strong>v{confirmAction.version.version}</strong> and redistribute its traffic.
                  </p>
                  <div className="bg-red-50 border border-red-200 rounded-lg p-3">
                    <p className="text-sm text-red-800">
                      <strong>Warning:</strong> This version will no longer receive traffic. Any in-progress jobs will complete, but no new jobs will use this version.
                    </p>
                  </div>
                </div>
              )}
            </div>

            <div className="bg-gray-100 px-6 py-4 flex gap-3">
              <button
                onClick={() => setConfirmAction(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={() => {
                  if (confirmAction.type === 'promote') {
                    promoteVersion(confirmAction.version);
                  } else if (confirmAction.type === 'deprecate') {
                    deprecateVersion(confirmAction.version);
                  }
                }}
                disabled={isProcessing}
                className={`flex-1 py-2.5 rounded-lg font-semibold transition-colors disabled:opacity-50 flex items-center justify-center gap-2 ${
                  confirmAction.type === 'promote'
                    ? 'bg-green-600 text-white hover:bg-green-700'
                    : 'bg-red-600 text-white hover:bg-red-700'
                }`}
              >
                {isProcessing && (
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                )}
                {confirmAction.type === 'promote' ? 'Promote' : 'Deprecate'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}