import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Layout } from '../components/Layout';
import { api } from '../lib/api';

interface GlobalSchedule {
  id: number;
  schedule_type: string;
  enabled: boolean;
  interval_hours?: number;
  run_time?: string;
  description?: string;
}

// Dispensary-centric schedule data (from dispensary_crawl_status view)
interface DispensarySchedule {
  dispensary_id: number;
  dispensary_name: string;
  city: string | null;
  state: string | null;
  dispensary_slug: string | null;
  slug: string | null;
  website: string | null;
  menu_url: string | null;
  menu_type: string | null;
  platform_dispensary_id: string | null;
  product_provider: string | null;
  provider_type: string | null;
  product_confidence: number | null;
  product_crawler_mode: string | null;
  last_product_scan_at: string | null;
  is_active: boolean;
  schedule_active: boolean;
  interval_minutes: number | null;
  priority: number;
  last_run_at: string | null;
  next_run_at: string | null;
  schedule_last_status: string | null;
  last_status: string | null;
  last_summary: string | null;
  schedule_last_error: string | null;
  last_error: string | null;
  consecutive_failures: number | null;
  total_runs: number | null;
  successful_runs: number | null;
  latest_job_id: number | null;
  latest_job_type: string | null;
  latest_job_status: string | null;
  latest_job_started: string | null;
  latest_products_found: number | null;
  // Computed from view
  can_crawl: boolean;
  schedule_status_reason: string | null;
}

interface CrawlJob {
  id: number;
  dispensary_id: number;
  dispensary_name: string;
  job_type: string;
  trigger_type: string;
  status: string;
  priority: number;
  scheduled_at: string;
  started_at: string | null;
  completed_at: string | null;
  products_found: number | null;
  products_new: number | null;
  products_updated: number | null;
  error_message: string | null;
}

export function ScraperSchedule() {
  const [globalSchedules, setGlobalSchedules] = useState<GlobalSchedule[]>([]);
  const [dispensarySchedules, setDispensarySchedules] = useState<DispensarySchedule[]>([]);
  const [jobs, setJobs] = useState<CrawlJob[]>([]);
  const [loading, setLoading] = useState(true);
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [activeTab, setActiveTab] = useState<'dispensaries' | 'jobs' | 'global'>('dispensaries');
  const [triggeringDispensary, setTriggeringDispensary] = useState<number | null>(null);
  const [resolvingId, setResolvingId] = useState<number | null>(null);
  const [refreshingDetection, setRefreshingDetection] = useState<number | null>(null);
  const [togglingSchedule, setTogglingSchedule] = useState<number | null>(null);
  const [filterDutchieOnly, setFilterDutchieOnly] = useState(false);
  const [stateFilter, setStateFilter] = useState<'all' | 'AZ'>('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [searchInput, setSearchInput] = useState(''); // For debouncing

  // Debounce search input
  useEffect(() => {
    const timer = setTimeout(() => {
      setSearchTerm(searchInput);
    }, 300);
    return () => clearTimeout(timer);
  }, [searchInput]);

  useEffect(() => {
    loadData();

    if (autoRefresh) {
      const interval = setInterval(loadData, 5000);
      return () => clearInterval(interval);
    }
  }, [autoRefresh, stateFilter, searchTerm]);

  const loadData = async () => {
    try {
      // Build filters for dispensary schedules
      const filters: { state?: string; search?: string } = {};
      if (stateFilter === 'AZ') {
        filters.state = 'AZ';
      }
      if (searchTerm.trim()) {
        filters.search = searchTerm.trim();
      }

      const [globalData, dispensaryData, jobsData] = await Promise.all([
        api.getGlobalSchedule(),
        api.getDispensarySchedules(Object.keys(filters).length > 0 ? filters : undefined),
        api.getDispensaryCrawlJobs(100)
      ]);

      setGlobalSchedules(globalData.schedules || []);
      setDispensarySchedules(dispensaryData.dispensaries || []);
      setJobs(jobsData.jobs || []);
    } catch (error) {
      console.error('Failed to load schedule data:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleTriggerCrawl = async (dispensaryId: number) => {
    setTriggeringDispensary(dispensaryId);
    try {
      await api.triggerDispensaryCrawl(dispensaryId);
      await loadData();
    } catch (error) {
      console.error('Failed to trigger crawl:', error);
    } finally {
      setTriggeringDispensary(null);
    }
  };

  const handleTriggerAll = async () => {
    if (!confirm('This will create crawl jobs for ALL active stores. Continue?')) return;
    try {
      const result = await api.triggerAllCrawls();
      alert(`Created ${result.jobs_created} crawl jobs`);
      await loadData();
    } catch (error) {
      console.error('Failed to trigger all crawls:', error);
    }
  };

  const handleCancelJob = async (jobId: number) => {
    try {
      await api.cancelCrawlJob(jobId);
      await loadData();
    } catch (error) {
      console.error('Failed to cancel job:', error);
    }
  };

  const handleResolvePlatformId = async (dispensaryId: number) => {
    setResolvingId(dispensaryId);
    try {
      const result = await api.resolvePlatformId(dispensaryId);
      if (result.success) {
        alert(result.message);
      } else {
        alert(`Failed: ${result.error || result.message}`);
      }
      await loadData();
    } catch (error: any) {
      console.error('Failed to resolve platform ID:', error);
      alert(`Error: ${error.message}`);
    } finally {
      setResolvingId(null);
    }
  };

  const handleRefreshDetection = async (dispensaryId: number) => {
    setRefreshingDetection(dispensaryId);
    try {
      const result = await api.refreshDetection(dispensaryId);
      alert(`Detected: ${result.menu_type}${result.platform_dispensary_id ? `, Platform ID: ${result.platform_dispensary_id}` : ''}`);
      await loadData();
    } catch (error: any) {
      console.error('Failed to refresh detection:', error);
      alert(`Error: ${error.message}`);
    } finally {
      setRefreshingDetection(null);
    }
  };

  const handleToggleSchedule = async (dispensaryId: number, currentActive: boolean) => {
    setTogglingSchedule(dispensaryId);
    try {
      await api.toggleDispensarySchedule(dispensaryId, !currentActive);
      await loadData();
    } catch (error: any) {
      console.error('Failed to toggle schedule:', error);
      alert(`Error: ${error.message}`);
    } finally {
      setTogglingSchedule(null);
    }
  };

  const handleDeleteSchedule = async (dispensaryId: number) => {
    if (!confirm('Are you sure you want to delete this schedule?')) return;
    try {
      await api.deleteDispensarySchedule(dispensaryId);
      await loadData();
    } catch (error: any) {
      console.error('Failed to delete schedule:', error);
      alert(`Error: ${error.message}`);
    }
  };

  const handleUpdateGlobalSchedule = async (type: string, data: any) => {
    try {
      await api.updateGlobalSchedule(type, data);
      await loadData();
    } catch (error) {
      console.error('Failed to update global schedule:', error);
    }
  };

  const formatTimeAgo = (dateString: string | null) => {
    if (!dateString) return 'Never';
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMins / 60);
    const diffDays = Math.floor(diffHours / 24);

    if (diffMins < 1) return 'Just now';
    if (diffMins < 60) return `${diffMins}m ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    return `${diffDays}d ago`;
  };

  const formatTimeUntil = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = date.getTime() - now.getTime();

    if (diffMs < 0) return 'Overdue';

    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMins / 60);

    if (diffMins < 60) return `${diffMins}m`;
    return `${diffHours}h ${diffMins % 60}m`;
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
      case 'success': return { bg: '#d1fae5', color: '#065f46' };
      case 'running': return { bg: '#dbeafe', color: '#1e40af' };
      case 'failed':
      case 'error': return { bg: '#fee2e2', color: '#991b1b' };
      case 'cancelled': return { bg: '#f3f4f6', color: '#374151' };
      case 'pending': return { bg: '#fef3c7', color: '#92400e' };
      case 'sandbox_only': return { bg: '#e0e7ff', color: '#3730a3' };
      case 'detection_only': return { bg: '#fce7f3', color: '#9d174d' };
      default: return { bg: '#f3f4f6', color: '#374151' };
    }
  };

  const getProviderBadge = (provider: string | null, mode: string | null) => {
    if (!provider) return null;
    const isProduction = mode === 'production';
    return {
      label: provider,
      bg: isProduction ? '#d1fae5' : '#fef3c7',
      color: isProduction ? '#065f46' : '#92400e',
      suffix: isProduction ? '' : ' (sandbox)'
    };
  };

  const globalIntervalSchedule = globalSchedules.find(s => s.schedule_type === 'global_interval');
  const dailySpecialSchedule = globalSchedules.find(s => s.schedule_type === 'daily_special');

  return (
    <Layout>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '30px' }}>
          <h1 style={{ fontSize: '32px', margin: 0 }}>Crawler Schedule</h1>
          <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
              <input
                type="checkbox"
                checked={autoRefresh}
                onChange={(e) => setAutoRefresh(e.target.checked)}
                style={{ width: '18px', height: '18px', cursor: 'pointer' }}
              />
              <span>Auto-refresh (5s)</span>
            </label>
            <button
              onClick={handleTriggerAll}
              style={{
                padding: '10px 20px',
                background: '#2563eb',
                color: 'white',
                border: 'none',
                borderRadius: '6px',
                cursor: 'pointer',
                fontWeight: '600'
              }}
            >
              Crawl All Stores
            </button>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ marginBottom: '30px', display: 'flex', gap: '10px', borderBottom: '2px solid #eee' }}>
          <button
            onClick={() => setActiveTab('dispensaries')}
            style={{
              padding: '12px 24px',
              background: activeTab === 'dispensaries' ? 'white' : 'transparent',
              border: 'none',
              borderBottom: activeTab === 'dispensaries' ? '3px solid #2563eb' : '3px solid transparent',
              cursor: 'pointer',
              fontSize: '16px',
              fontWeight: activeTab === 'dispensaries' ? '600' : '400',
              color: activeTab === 'dispensaries' ? '#2563eb' : '#666',
              marginBottom: '-2px'
            }}
          >
            Dispensary Schedules ({dispensarySchedules.length})
          </button>
          <button
            onClick={() => setActiveTab('jobs')}
            style={{
              padding: '12px 24px',
              background: activeTab === 'jobs' ? 'white' : 'transparent',
              border: 'none',
              borderBottom: activeTab === 'jobs' ? '3px solid #2563eb' : '3px solid transparent',
              cursor: 'pointer',
              fontSize: '16px',
              fontWeight: activeTab === 'jobs' ? '600' : '400',
              color: activeTab === 'jobs' ? '#2563eb' : '#666',
              marginBottom: '-2px'
            }}
          >
            Job Queue ({jobs.filter(j => j.status === 'pending' || j.status === 'running').length})
          </button>
          <button
            onClick={() => setActiveTab('global')}
            style={{
              padding: '12px 24px',
              background: activeTab === 'global' ? 'white' : 'transparent',
              border: 'none',
              borderBottom: activeTab === 'global' ? '3px solid #2563eb' : '3px solid transparent',
              cursor: 'pointer',
              fontSize: '16px',
              fontWeight: activeTab === 'global' ? '600' : '400',
              color: activeTab === 'global' ? '#2563eb' : '#666',
              marginBottom: '-2px'
            }}
          >
            Global Settings
          </button>
        </div>

        {activeTab === 'global' && (
          <div style={{ display: 'grid', gap: '20px' }}>
            {/* Global Interval Schedule */}
            <div style={{
              background: 'white',
              padding: '24px',
              borderRadius: '8px',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '20px' }}>
                <div>
                  <h2 style={{ fontSize: '20px', margin: 0, marginBottom: '8px' }}>Interval Crawl Schedule</h2>
                  <p style={{ color: '#666', margin: 0 }}>Crawl all stores periodically</p>
                </div>
                <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                  <span style={{ color: '#666' }}>Enabled</span>
                  <input
                    type="checkbox"
                    checked={globalIntervalSchedule?.enabled ?? true}
                    onChange={(e) => handleUpdateGlobalSchedule('global_interval', { enabled: e.target.checked })}
                    style={{ width: '20px', height: '20px', cursor: 'pointer' }}
                  />
                </label>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                  <span>Crawl every</span>
                  <select
                    value={globalIntervalSchedule?.interval_hours ?? 4}
                    onChange={(e) => handleUpdateGlobalSchedule('global_interval', { interval_hours: parseInt(e.target.value) })}
                    style={{
                      padding: '8px 12px',
                      borderRadius: '6px',
                      border: '1px solid #ddd',
                      fontSize: '16px'
                    }}
                  >
                    <option value={1}>1 hour</option>
                    <option value={2}>2 hours</option>
                    <option value={4}>4 hours</option>
                    <option value={6}>6 hours</option>
                    <option value={8}>8 hours</option>
                    <option value={12}>12 hours</option>
                    <option value={24}>24 hours</option>
                  </select>
                </label>
              </div>
            </div>

            {/* Daily Special Schedule */}
            <div style={{
              background: 'white',
              padding: '24px',
              borderRadius: '8px',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '20px' }}>
                <div>
                  <h2 style={{ fontSize: '20px', margin: 0, marginBottom: '8px' }}>Daily Special Crawl</h2>
                  <p style={{ color: '#666', margin: 0 }}>Crawl stores at local midnight to capture daily specials</p>
                </div>
                <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                  <span style={{ color: '#666' }}>Enabled</span>
                  <input
                    type="checkbox"
                    checked={dailySpecialSchedule?.enabled ?? true}
                    onChange={(e) => handleUpdateGlobalSchedule('daily_special', { enabled: e.target.checked })}
                    style={{ width: '20px', height: '20px', cursor: 'pointer' }}
                  />
                </label>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                  <span>Run at</span>
                  <input
                    type="time"
                    value={dailySpecialSchedule?.run_time?.slice(0, 5) ?? '00:01'}
                    onChange={(e) => handleUpdateGlobalSchedule('daily_special', { run_time: e.target.value })}
                    style={{
                      padding: '8px 12px',
                      borderRadius: '6px',
                      border: '1px solid #ddd',
                      fontSize: '16px'
                    }}
                  />
                  <span style={{ color: '#666' }}>(store local time)</span>
                </label>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'dispensaries' && (
          <div>
            {/* Filter Bar */}
            <div style={{ marginBottom: '15px', display: 'flex', gap: '20px', alignItems: 'center', flexWrap: 'wrap' }}>
              {/* State Filter Toggle */}
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <span style={{ fontWeight: '500', color: '#374151' }}>State:</span>
                <div style={{ display: 'flex', borderRadius: '6px', overflow: 'hidden', border: '1px solid #d1d5db' }}>
                  <button
                    onClick={() => setStateFilter('all')}
                    style={{
                      padding: '6px 14px',
                      background: stateFilter === 'all' ? '#2563eb' : 'white',
                      color: stateFilter === 'all' ? 'white' : '#374151',
                      border: 'none',
                      cursor: 'pointer',
                      fontSize: '14px',
                      fontWeight: '500'
                    }}
                  >
                    All
                  </button>
                  <button
                    onClick={() => setStateFilter('AZ')}
                    style={{
                      padding: '6px 14px',
                      background: stateFilter === 'AZ' ? '#2563eb' : 'white',
                      color: stateFilter === 'AZ' ? 'white' : '#374151',
                      border: 'none',
                      borderLeft: '1px solid #d1d5db',
                      cursor: 'pointer',
                      fontSize: '14px',
                      fontWeight: '500'
                    }}
                  >
                    AZ Only
                  </button>
                </div>
              </div>

              {/* Search Box */}
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <span style={{ fontWeight: '500', color: '#374151' }}>Search:</span>
                <input
                  type="text"
                  placeholder="Store name or slug..."
                  value={searchInput}
                  onChange={(e) => setSearchInput(e.target.value)}
                  style={{
                    padding: '6px 12px',
                    borderRadius: '6px',
                    border: '1px solid #d1d5db',
                    fontSize: '14px',
                    width: '200px'
                  }}
                />
                {searchInput && (
                  <button
                    onClick={() => { setSearchInput(''); setSearchTerm(''); }}
                    style={{
                      padding: '4px 8px',
                      background: '#f3f4f6',
                      border: '1px solid #d1d5db',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      fontSize: '12px'
                    }}
                  >
                    Clear
                  </button>
                )}
              </div>

              {/* Dutchie Only Checkbox */}
              <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                <input
                  type="checkbox"
                  checked={filterDutchieOnly}
                  onChange={(e) => setFilterDutchieOnly(e.target.checked)}
                  style={{ width: '16px', height: '16px', cursor: 'pointer' }}
                />
                <span>CannaIQ only</span>
              </label>

              {/* Results Count */}
              <span style={{ color: '#666', fontSize: '14px', marginLeft: 'auto' }}>
                Showing {(filterDutchieOnly
                  ? dispensarySchedules.filter(d => d.menu_type === 'dutchie')
                  : dispensarySchedules
                ).length} dispensaries
              </span>
            </div>
            <div style={{
              background: 'white',
              borderRadius: '8px',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              overflow: 'auto'
            }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: '1200px' }}>
              <thead>
                <tr style={{ background: '#f8f8f8', borderBottom: '2px solid #eee' }}>
                  <th style={{ padding: '12px', textAlign: 'left', fontWeight: '600' }}>Dispensary</th>
                  <th style={{ padding: '12px', textAlign: 'center', fontWeight: '600' }}>Menu Type</th>
                  <th style={{ padding: '12px', textAlign: 'center', fontWeight: '600' }}>Platform ID</th>
                  <th style={{ padding: '12px', textAlign: 'center', fontWeight: '600' }}>Status</th>
                  <th style={{ padding: '12px', textAlign: 'left', fontWeight: '600' }}>Last Run</th>
                  <th style={{ padding: '12px', textAlign: 'left', fontWeight: '600' }}>Next Run</th>
                  <th style={{ padding: '12px', textAlign: 'left', fontWeight: '600' }}>Last Result</th>
                  <th style={{ padding: '12px', textAlign: 'center', fontWeight: '600', minWidth: '220px' }}>Actions</th>
                </tr>
              </thead>
              <tbody>
                {(filterDutchieOnly
                  ? dispensarySchedules.filter(d => d.menu_type === 'dutchie')
                  : dispensarySchedules
                ).map((disp) => (
                  <tr key={disp.dispensary_id} style={{ borderBottom: '1px solid #eee' }}>
                    <td style={{ padding: '12px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        {disp.state && disp.city && (disp.dispensary_slug || disp.slug) ? (
                          <Link
                            to={`/dispensaries/${disp.state}/${disp.city.toLowerCase().replace(/\s+/g, '-')}/${disp.dispensary_slug || disp.slug}`}
                            style={{
                              fontWeight: '600',
                              color: '#2563eb',
                              textDecoration: 'none'
                            }}
                          >
                            {disp.dispensary_name}
                          </Link>
                        ) : (
                          <span style={{ fontWeight: '600' }}>{disp.dispensary_name}</span>
                        )}
                      </div>
                      <div style={{ fontSize: '12px', color: '#666' }}>
                        {disp.city ? `${disp.city}, ${disp.state}` : disp.state}
                      </div>
                    </td>
                    {/* Menu Type Column */}
                    <td style={{ padding: '12px', textAlign: 'center' }}>
                      {disp.menu_type ? (
                        <span style={{
                          padding: '4px 10px',
                          borderRadius: '12px',
                          fontSize: '11px',
                          fontWeight: '600',
                          background: disp.menu_type === 'dutchie' ? '#d1fae5' : '#e0e7ff',
                          color: disp.menu_type === 'dutchie' ? '#065f46' : '#3730a3'
                        }}>
                          {disp.menu_type}
                        </span>
                      ) : (
                        <span style={{
                          padding: '4px 10px',
                          borderRadius: '12px',
                          fontSize: '11px',
                          fontWeight: '600',
                          background: '#f3f4f6',
                          color: '#666'
                        }}>
                          unknown
                        </span>
                      )}
                    </td>
                    {/* Platform ID Column */}
                    <td style={{ padding: '12px', textAlign: 'center' }}>
                      {disp.platform_dispensary_id ? (
                        <span style={{
                          padding: '4px 8px',
                          borderRadius: '4px',
                          fontSize: '10px',
                          fontFamily: 'monospace',
                          background: '#d1fae5',
                          color: '#065f46'
                        }} title={disp.platform_dispensary_id}>
                          {disp.platform_dispensary_id.length > 12
                            ? `${disp.platform_dispensary_id.slice(0, 6)}...${disp.platform_dispensary_id.slice(-4)}`
                            : disp.platform_dispensary_id}
                        </span>
                      ) : (
                        <span style={{
                          padding: '4px 8px',
                          borderRadius: '4px',
                          fontSize: '10px',
                          background: '#fee2e2',
                          color: '#991b1b'
                        }}>
                          missing
                        </span>
                      )}
                    </td>
                    {/* Status Column - Shows can_crawl and reason */}
                    <td style={{ padding: '12px', textAlign: 'center' }}>
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
                        <span style={{
                          padding: '4px 10px',
                          borderRadius: '12px',
                          fontSize: '11px',
                          fontWeight: '600',
                          background: disp.can_crawl ? '#d1fae5' : (disp.is_active !== false ? '#fef3c7' : '#fee2e2'),
                          color: disp.can_crawl ? '#065f46' : (disp.is_active !== false ? '#92400e' : '#991b1b')
                        }}>
                          {disp.can_crawl ? 'Ready' : (disp.is_active !== false ? 'Not Ready' : 'Disabled')}
                        </span>
                        {disp.schedule_status_reason && disp.schedule_status_reason !== 'ready' && (
                          <span style={{ fontSize: '10px', color: '#666', maxWidth: '100px', textAlign: 'center' }}>
                            {disp.schedule_status_reason}
                          </span>
                        )}
                        {disp.interval_minutes && (
                          <span style={{ fontSize: '10px', color: '#999' }}>
                            Every {Math.round(disp.interval_minutes / 60)}h
                          </span>
                        )}
                      </div>
                    </td>
                    <td style={{ padding: '15px' }}>
                      <div>{formatTimeAgo(disp.last_run_at)}</div>
                      {disp.last_run_at && (
                        <div style={{ fontSize: '12px', color: '#999' }}>
                          {new Date(disp.last_run_at).toLocaleString()}
                        </div>
                      )}
                    </td>
                    <td style={{ padding: '15px' }}>
                      <div style={{ fontWeight: '600', color: '#2563eb' }}>
                        {disp.next_run_at ? formatTimeUntil(disp.next_run_at) : 'Not scheduled'}
                      </div>
                    </td>
                    <td style={{ padding: '15px' }}>
                      {disp.last_status || disp.latest_job_status ? (
                        <div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                            <span style={{
                              padding: '4px 10px',
                              borderRadius: '12px',
                              fontSize: '12px',
                              fontWeight: '600',
                              ...getStatusColor(disp.last_status || disp.latest_job_status || 'pending')
                            }}>
                              {disp.last_status || disp.latest_job_status}
                            </span>
                            {disp.last_error && (
                              <button
                                onClick={() => alert(disp.last_error)}
                                style={{
                                  padding: '2px 6px',
                                  background: '#fee2e2',
                                  color: '#991b1b',
                                  border: 'none',
                                  borderRadius: '4px',
                                  cursor: 'pointer',
                                  fontSize: '10px'
                                }}
                              >
                                Error
                              </button>
                            )}
                          </div>
                          {disp.last_summary ? (
                            <div style={{ fontSize: '12px', color: '#666', maxWidth: '250px' }}>
                              {disp.last_summary}
                            </div>
                          ) : disp.latest_products_found !== null ? (
                            <div style={{ fontSize: '12px', color: '#666' }}>
                              {disp.latest_products_found} products
                            </div>
                          ) : null}
                        </div>
                      ) : (
                        <span style={{ color: '#999', fontSize: '13px' }}>No runs yet</span>
                      )}
                    </td>
                    <td style={{ padding: '12px', textAlign: 'center' }}>
                      <div style={{ display: 'flex', gap: '6px', justifyContent: 'center', flexWrap: 'wrap' }}>
                        {/* Refresh Detection - always available */}
                        <button
                          onClick={() => handleRefreshDetection(disp.dispensary_id)}
                          disabled={refreshingDetection === disp.dispensary_id}
                          style={{
                            padding: '4px 8px',
                            background: refreshingDetection === disp.dispensary_id ? '#94a3b8' : '#f3f4f6',
                            color: '#374151',
                            border: '1px solid #d1d5db',
                            borderRadius: '4px',
                            cursor: refreshingDetection === disp.dispensary_id ? 'wait' : 'pointer',
                            fontSize: '11px'
                          }}
                          title="Re-detect menu type and resolve platform ID"
                        >
                          {refreshingDetection === disp.dispensary_id ? '...' : 'Refresh'}
                        </button>

                        {/* Resolve ID - only if dutchie and missing platform ID */}
                        {disp.menu_type === 'dutchie' && !disp.platform_dispensary_id && (
                          <button
                            onClick={() => handleResolvePlatformId(disp.dispensary_id)}
                            disabled={resolvingId === disp.dispensary_id}
                            style={{
                              padding: '4px 8px',
                              background: resolvingId === disp.dispensary_id ? '#94a3b8' : '#fef3c7',
                              color: '#92400e',
                              border: '1px solid #fcd34d',
                              borderRadius: '4px',
                              cursor: resolvingId === disp.dispensary_id ? 'wait' : 'pointer',
                              fontSize: '11px'
                            }}
                            title="Resolve platform dispensary ID via GraphQL"
                          >
                            {resolvingId === disp.dispensary_id ? '...' : 'Resolve ID'}
                          </button>
                        )}

                        {/* Run Now - only if can_crawl */}
                        <button
                          onClick={() => handleTriggerCrawl(disp.dispensary_id)}
                          disabled={triggeringDispensary === disp.dispensary_id || !disp.can_crawl}
                          style={{
                            padding: '4px 8px',
                            background: triggeringDispensary === disp.dispensary_id ? '#94a3b8' :
                                       !disp.can_crawl ? '#e5e7eb' : '#2563eb',
                            color: !disp.can_crawl ? '#9ca3af' : 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: triggeringDispensary === disp.dispensary_id || !disp.can_crawl ? 'not-allowed' : 'pointer',
                            fontSize: '11px'
                          }}
                          title={disp.can_crawl ? 'Trigger immediate crawl' : `Cannot crawl: ${disp.schedule_status_reason}`}
                        >
                          {triggeringDispensary === disp.dispensary_id ? '...' : 'Run'}
                        </button>

                        {/* Enable/Disable Schedule Toggle */}
                        <button
                          onClick={() => handleToggleSchedule(disp.dispensary_id, disp.is_active)}
                          disabled={togglingSchedule === disp.dispensary_id}
                          style={{
                            padding: '4px 8px',
                            background: togglingSchedule === disp.dispensary_id ? '#94a3b8' :
                                       disp.is_active ? '#fee2e2' : '#d1fae5',
                            color: disp.is_active ? '#991b1b' : '#065f46',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: togglingSchedule === disp.dispensary_id ? 'wait' : 'pointer',
                            fontSize: '11px'
                          }}
                          title={disp.is_active ? 'Disable scheduled crawling' : 'Enable scheduled crawling'}
                        >
                          {togglingSchedule === disp.dispensary_id ? '...' : (disp.is_active ? 'Disable' : 'Enable')}
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          </div>
        )}

        {activeTab === 'jobs' && (
          <>
            {/* Job Stats */}
            <div style={{ marginBottom: '30px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '15px' }}>
                <div style={{ background: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                  <div style={{ fontSize: '14px', color: '#999', marginBottom: '8px' }}>Pending</div>
                  <div style={{ fontSize: '32px', fontWeight: '600', color: '#f59e0b' }}>
                    {jobs.filter(j => j.status === 'pending').length}
                  </div>
                </div>
                <div style={{ background: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                  <div style={{ fontSize: '14px', color: '#999', marginBottom: '8px' }}>Running</div>
                  <div style={{ fontSize: '32px', fontWeight: '600', color: '#3b82f6' }}>
                    {jobs.filter(j => j.status === 'running').length}
                  </div>
                </div>
                <div style={{ background: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                  <div style={{ fontSize: '14px', color: '#999', marginBottom: '8px' }}>Completed</div>
                  <div style={{ fontSize: '32px', fontWeight: '600', color: '#10b981' }}>
                    {jobs.filter(j => j.status === 'completed').length}
                  </div>
                </div>
                <div style={{ background: 'white', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
                  <div style={{ fontSize: '14px', color: '#999', marginBottom: '8px' }}>Failed</div>
                  <div style={{ fontSize: '32px', fontWeight: '600', color: '#ef4444' }}>
                    {jobs.filter(j => j.status === 'failed').length}
                  </div>
                </div>
              </div>
            </div>

            {/* Jobs Table */}
            <div style={{
              background: 'white',
              borderRadius: '8px',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              overflow: 'hidden'
            }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: '#f8f8f8', borderBottom: '2px solid #eee' }}>
                    <th style={{ padding: '15px', textAlign: 'left', fontWeight: '600' }}>Dispensary</th>
                    <th style={{ padding: '15px', textAlign: 'center', fontWeight: '600' }}>Type</th>
                    <th style={{ padding: '15px', textAlign: 'center', fontWeight: '600' }}>Trigger</th>
                    <th style={{ padding: '15px', textAlign: 'center', fontWeight: '600' }}>Status</th>
                    <th style={{ padding: '15px', textAlign: 'right', fontWeight: '600' }}>Products</th>
                    <th style={{ padding: '15px', textAlign: 'left', fontWeight: '600' }}>Started</th>
                    <th style={{ padding: '15px', textAlign: 'left', fontWeight: '600' }}>Completed</th>
                    <th style={{ padding: '15px', textAlign: 'center', fontWeight: '600' }}>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {jobs.length === 0 ? (
                    <tr>
                      <td colSpan={8} style={{ padding: '40px', textAlign: 'center', color: '#666' }}>
                        No crawl jobs found
                      </td>
                    </tr>
                  ) : (
                    jobs.map((job) => (
                      <tr key={job.id} style={{ borderBottom: '1px solid #eee' }}>
                        <td style={{ padding: '15px' }}>
                          <div style={{ fontWeight: '600' }}>{job.dispensary_name}</div>
                          <div style={{ fontSize: '12px', color: '#999' }}>Job #{job.id}</div>
                        </td>
                        <td style={{ padding: '15px', textAlign: 'center', fontSize: '13px' }}>
                          {job.job_type}
                        </td>
                        <td style={{ padding: '15px', textAlign: 'center' }}>
                          <span style={{
                            padding: '3px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                            background: job.trigger_type === 'manual' ? '#e0e7ff' :
                                       job.trigger_type === 'daily_special' ? '#fce7f3' : '#f3f4f6',
                            color: job.trigger_type === 'manual' ? '#3730a3' :
                                   job.trigger_type === 'daily_special' ? '#9d174d' : '#374151'
                          }}>
                            {job.trigger_type}
                          </span>
                        </td>
                        <td style={{ padding: '15px', textAlign: 'center' }}>
                          <span style={{
                            padding: '4px 10px',
                            borderRadius: '12px',
                            fontSize: '12px',
                            fontWeight: '600',
                            ...getStatusColor(job.status)
                          }}>
                            {job.status}
                          </span>
                        </td>
                        <td style={{ padding: '15px', textAlign: 'right' }}>
                          {job.products_found !== null ? (
                            <div>
                              <div style={{ fontWeight: '600' }}>{job.products_found}</div>
                              {job.products_new !== null && job.products_updated !== null && (
                                <div style={{ fontSize: '12px', color: '#666' }}>
                                  +{job.products_new} / ~{job.products_updated}
                                </div>
                              )}
                            </div>
                          ) : '-'}
                        </td>
                        <td style={{ padding: '15px', fontSize: '13px' }}>
                          {job.started_at ? new Date(job.started_at).toLocaleString() : '-'}
                        </td>
                        <td style={{ padding: '15px', fontSize: '13px' }}>
                          {job.completed_at ? new Date(job.completed_at).toLocaleString() : '-'}
                        </td>
                        <td style={{ padding: '15px', textAlign: 'center' }}>
                          {job.status === 'pending' && (
                            <button
                              onClick={() => handleCancelJob(job.id)}
                              style={{
                                padding: '4px 10px',
                                background: '#fee2e2',
                                color: '#991b1b',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                fontSize: '12px'
                              }}
                            >
                              Cancel
                            </button>
                          )}
                          {job.error_message && (
                            <button
                              onClick={() => alert(job.error_message)}
                              style={{
                                padding: '4px 10px',
                                background: '#fee2e2',
                                color: '#991b1b',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                fontSize: '12px'
                              }}
                            >
                              View Error
                            </button>
                          )}
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </Layout>
  );
}