import React, { useState } from 'react';
import { providers } from '../services/providerCatalog';
import ServiceForm from './ServiceForm';
import GoogleTokenTool from './GoogleTokenTool';

const PROVIDER_ICONS = {
  gateway:      '🔀',
  google:       '🔍',
  meta:         '📘',
  tiktok:       '🎵',
  creative:     '🎨',
  intelligence: '🧠',
  registration: '📝',
  management:   '⚙️',
};

const PROVIDER_DESC = {
  gateway:      'Direct Gateway calls — wizard, intelligence, ping',
  google:       'Google Ads API via internal GoogleApi container',
  meta:         'Meta Ads API via internal MetaApi container',
  tiktok:       'TikTok Ads API via internal TikTokApi container',
  creative:     'Creative pipeline — URL analysis, copy, images',
  intelligence: 'Spend distribution forecast engine',
  registration: 'Registration API — prospects and onboarding',
  management:   'Management API — help content, documents',
};

export default function ApiTestingPanel() {
  const [selectedProvider, setSelectedProvider] = useState(null);
  const [showTokenTool,    setShowTokenTool]    = useState(false);

  if (showTokenTool) {
    return (
      <div className="content-panel">
        <button
          className="token-btn"
          onClick={() => setShowTokenTool(false)}
          style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 6 }}
        >
          ← Back to API Testing
        </button>
        <GoogleTokenTool />
      </div>
    );
  }

  if (selectedProvider) {
    return (
      <div>
        <div style={{ padding: '0 0 12px' }}>
          <button
            className="token-btn"
            onClick={() => setSelectedProvider(null)}
            style={{ display: 'flex', alignItems: 'center', gap: 6 }}
          >
            ← Back to API Testing
          </button>
        </div>
        <ServiceForm initialProvider={selectedProvider} />
      </div>
    );
  }

  return (
    <div className="content-panel" style={{ maxWidth: 860 }}>
      <div style={{ marginBottom: 20 }}>
        <h3 style={{ margin: 0, fontSize: 16, color: '#1e293b' }}>API Testing</h3>
        <p style={{ margin: '4px 0 0', fontSize: 13, color: '#64748b' }}>
          Select a provider to test its endpoints
        </p>
      </div>

      {/* Provider grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
        gap: 12,
        marginBottom: 24
      }}>
        {providers.filter(p => p.id !== 'management' || true).map(p => (
          <button
            key={p.id}
            onClick={() => setSelectedProvider(p.id)}
            style={{
              background: '#fff',
              border: '1px solid #e2e8f0',
              borderRadius: 8,
              padding: '16px 18px',
              textAlign: 'left',
              cursor: 'pointer',
              transition: 'all 0.15s',
              display: 'flex',
              alignItems: 'flex-start',
              gap: 12,
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = '#0066cc';
              e.currentTarget.style.boxShadow = '0 0 0 3px rgba(0,102,204,0.1)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = '#e2e8f0';
              e.currentTarget.style.boxShadow = 'none';
            }}
          >
            <span style={{ fontSize: 22, flexShrink: 0, marginTop: 1 }}>
              {PROVIDER_ICONS[p.id] || '📡'}
            </span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, color: '#1e293b', marginBottom: 3 }}>
                {p.label}
              </div>
              <div style={{ fontSize: 12, color: '#64748b', lineHeight: 1.4 }}>
                {PROVIDER_DESC[p.id] || 'Test API endpoints'}
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* Google OAuth tool */}
      <div style={{
        borderTop: '1px solid #e2e8f0',
        paddingTop: 20
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1, color: '#94a3b8', marginBottom: 12 }}>
          TOOLS
        </div>
        <button
          onClick={() => setShowTokenTool(true)}
          style={{
            background: '#fff',
            border: '1px solid #e2e8f0',
            borderRadius: 8,
            padding: '14px 18px',
            textAlign: 'left',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            width: '100%',
            maxWidth: 300,
          }}
          onMouseEnter={e => {
            e.currentTarget.style.borderColor = '#0066cc';
            e.currentTarget.style.boxShadow = '0 0 0 3px rgba(0,102,204,0.1)';
          }}
          onMouseLeave={e => {
            e.currentTarget.style.borderColor = '#e2e8f0';
            e.currentTarget.style.boxShadow = 'none';
          }}
        >
          <span style={{ fontSize: 20 }}>🔑</span>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14, color: '#1e293b', marginBottom: 2 }}>
              Google OAuth Token
            </div>
            <div style={{ fontSize: 12, color: '#64748b' }}>
              Generate and inspect OAuth tokens
            </div>
          </div>
        </button>
      </div>
    </div>
  );
}
