import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import {
  listUpstreamSources,
  createUpstreamSource,
  updateUpstreamSource,
  deleteUpstreamSource,
  testUpstreamSource,
} from '../api';
import { UpstreamSource, SourceType, AuthType } from '../types';
import './AdminCachePage.css';

const SOURCE_TYPES: SourceType[] = ['npm', 'pypi', 'maven', 'docker', 'helm', 'nuget', 'deb', 'rpm', 'generic'];
const AUTH_TYPES: AuthType[] = ['none', 'basic', 'bearer', 'api_key'];

function AdminCachePage() {
  const { user, loading: authLoading } = useAuth();
  const navigate = useNavigate();

  // Upstream sources state
  const [sources, setSources] = useState<UpstreamSource[]>([]);
  const [loadingSources, setLoadingSources] = useState(true);
  const [sourcesError, setSourcesError] = useState<string | null>(null);

  // Create/Edit form state
  const [showForm, setShowForm] = useState(false);
  const [editingSource, setEditingSource] = useState<UpstreamSource | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    source_type: 'generic' as SourceType,
    url: '',
    enabled: true,
    auth_type: 'none' as AuthType,
    username: '',
    password: '',
    priority: 100,
  });
  const [formError, setFormError] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  // Test result state
  const [testingId, setTestingId] = useState<string | null>(null);
  const [testResults, setTestResults] = useState<Record<string, { success: boolean; message: string }>>({});

  // Delete confirmation state
  const [deletingId, setDeletingId] = useState<string | null>(null);

  // Success message
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  // Error modal state
  const [showErrorModal, setShowErrorModal] = useState(false);
  const [selectedError, setSelectedError] = useState<{ sourceName: string; error: string } | null>(null);

  useEffect(() => {
    if (!authLoading && !user) {
      navigate('/login', { state: { from: '/admin/cache' } });
    }
  }, [user, authLoading, navigate]);

  useEffect(() => {
    if (user && user.is_admin) {
      loadSources();
    }
  }, [user]);

  useEffect(() => {
    if (successMessage) {
      const timer = setTimeout(() => setSuccessMessage(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [successMessage]);

  async function loadSources() {
    setLoadingSources(true);
    setSourcesError(null);
    try {
      const data = await listUpstreamSources();
      setSources(data);
    } catch (err) {
      setSourcesError(err instanceof Error ? err.message : 'Failed to load sources');
    } finally {
      setLoadingSources(false);
    }
  }

  function openCreateForm() {
    setEditingSource(null);
    setFormData({
      name: '',
      source_type: 'generic',
      url: '',
      enabled: true,
      auth_type: 'none',
      username: '',
      password: '',
      priority: 100,
    });
    setFormError(null);
    setShowForm(true);
  }

  function openEditForm(source: UpstreamSource) {
    setEditingSource(source);
    setFormData({
      name: source.name,
      source_type: source.source_type,
      url: source.url,
      enabled: source.enabled,
      auth_type: source.auth_type,
      username: source.username || '',
      password: '',
      priority: source.priority,
    });
    setFormError(null);
    setShowForm(true);
  }

  async function handleFormSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!formData.name.trim()) {
      setFormError('Name is required');
      return;
    }
    if (!formData.url.trim()) {
      setFormError('URL is required');
      return;
    }

    setIsSaving(true);
    setFormError(null);

    try {
      let savedSourceId: string | null = null;

      if (editingSource) {
        // Update existing source
        await updateUpstreamSource(editingSource.id, {
          name: formData.name.trim(),
          source_type: formData.source_type,
          url: formData.url.trim(),
          enabled: formData.enabled,
          auth_type: formData.auth_type,
          username: formData.username.trim() || undefined,
          password: formData.password || undefined,
          priority: formData.priority,
        });
        savedSourceId = editingSource.id;
        setSuccessMessage('Source updated successfully');
      } else {
        // Create new source
        const newSource = await createUpstreamSource({
          name: formData.name.trim(),
          source_type: formData.source_type,
          url: formData.url.trim(),
          enabled: formData.enabled,
          auth_type: formData.auth_type,
          username: formData.username.trim() || undefined,
          password: formData.password || undefined,
          priority: formData.priority,
        });
        savedSourceId = newSource.id;
        setSuccessMessage('Source created successfully');
      }
      setShowForm(false);
      await loadSources();

      // Auto-test the source after save
      if (savedSourceId) {
        testSourceById(savedSourceId);
      }
    } catch (err) {
      setFormError(err instanceof Error ? err.message : 'Failed to save source');
    } finally {
      setIsSaving(false);
    }
  }

  async function handleDelete(source: UpstreamSource) {
    if (!window.confirm(`Delete upstream source "${source.name}"? This cannot be undone.`)) {
      return;
    }

    setDeletingId(source.id);
    try {
      await deleteUpstreamSource(source.id);
      setSuccessMessage(`Source "${source.name}" deleted`);
      await loadSources();
    } catch (err) {
      setSourcesError(err instanceof Error ? err.message : 'Failed to delete source');
    } finally {
      setDeletingId(null);
    }
  }

  async function handleTest(source: UpstreamSource) {
    testSourceById(source.id);
  }

  async function testSourceById(sourceId: string) {
    setTestingId(sourceId);
    setTestResults((prev) => ({ ...prev, [sourceId]: { success: true, message: 'Testing...' } }));

    try {
      const result = await testUpstreamSource(sourceId);
      setTestResults((prev) => ({
        ...prev,
        [sourceId]: {
          success: result.success,
          message: result.success
            ? `OK (${result.elapsed_ms}ms)`
            : result.error || `HTTP ${result.status_code}`,
        },
      }));
    } catch (err) {
      setTestResults((prev) => ({
        ...prev,
        [sourceId]: {
          success: false,
          message: err instanceof Error ? err.message : 'Test failed',
        },
      }));
    } finally {
      setTestingId(null);
    }
  }

  function showError(sourceName: string, error: string) {
    setSelectedError({ sourceName, error });
    setShowErrorModal(true);
  }

  if (authLoading) {
    return <div className="admin-cache-page">Loading...</div>;
  }

  if (!user?.is_admin) {
    return (
      <div className="admin-cache-page">
        <div className="error-message">Access denied. Admin privileges required.</div>
      </div>
    );
  }

  return (
    <div className="admin-cache-page">
      <h1>Upstream Sources</h1>

      {successMessage && <div className="success-message">{successMessage}</div>}

      {/* Upstream Sources Section */}
      <section className="sources-section">
        <div className="section-header">
          <button className="btn btn-primary" onClick={openCreateForm}>
            Add Source
          </button>
        </div>

        {loadingSources ? (
          <p>Loading sources...</p>
        ) : sourcesError ? (
          <div className="error-message">{sourcesError}</div>
        ) : sources.length === 0 ? (
          <p className="empty-message">No upstream sources configured.</p>
        ) : (
          <table className="sources-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>URL</th>
                <th>Priority</th>
                <th>Status</th>
                <th>Test</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {sources.map((source) => (
                <tr key={source.id} className={source.enabled ? '' : 'disabled-row'}>
                  <td>
                    <span className="source-name">{source.name}</span>
                    {source.source === 'env' && (
                      <span className="env-badge" title="Defined via environment variable">ENV</span>
                    )}
                  </td>
                  <td>{source.source_type}</td>
                  <td className="url-cell" title={source.url}>{source.url}</td>
                  <td>{source.priority}</td>
                  <td>
                    <span className={`status-badge ${source.enabled ? 'enabled' : 'disabled'}`}>
                      {source.enabled ? 'Enabled' : 'Disabled'}
                    </span>
                  </td>
                  <td className="test-cell">
                    {testingId === source.id ? (
                      <span className="test-dot testing" title="Testing...">●</span>
                    ) : testResults[source.id] ? (
                      testResults[source.id].success ? (
                        <span className="test-dot success" title={testResults[source.id].message}>●</span>
                      ) : (
                        <span
                          className="test-dot failure"
                          title="Click to see error"
                          onClick={() => showError(source.name, testResults[source.id].message)}
                        >●</span>
                      )
                    ) : null}
                  </td>
                  <td className="actions-cell">
                    <button
                      className="btn btn-sm btn-secondary"
                      onClick={() => handleTest(source)}
                      disabled={testingId === source.id}
                    >
                      Test
                    </button>
                    {source.source !== 'env' && (
                      <button className="btn btn-sm btn-secondary" onClick={() => openEditForm(source)}>
                        Edit
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>

      {/* Create/Edit Modal */}
      {showForm && (
        <div className="modal-overlay" onClick={() => setShowForm(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <h2>{editingSource ? 'Edit Upstream Source' : 'Add Upstream Source'}</h2>
            <form onSubmit={handleFormSubmit}>
              {formError && <div className="error-message">{formError}</div>}

              <div className="form-group">
                <label htmlFor="name">Name</label>
                <input
                  type="text"
                  id="name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="e.g., npm-private"
                  required
                />
              </div>

              <div className="form-row">
                <div className="form-group">
                  <label htmlFor="source_type">Type</label>
                  <select
                    id="source_type"
                    value={formData.source_type}
                    onChange={(e) => setFormData({ ...formData, source_type: e.target.value as SourceType })}
                  >
                    {SOURCE_TYPES.map((type) => (
                      <option key={type} value={type}>
                        {type}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="form-group">
                  <label htmlFor="priority">Priority</label>
                  <input
                    type="number"
                    id="priority"
                    value={formData.priority}
                    onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) || 100 })}
                    min="1"
                  />
                  <span className="help-text">Lower = higher priority</span>
                </div>
              </div>

              <div className="form-group">
                <label htmlFor="url">URL</label>
                <input
                  type="url"
                  id="url"
                  value={formData.url}
                  onChange={(e) => setFormData({ ...formData, url: e.target.value })}
                  placeholder="https://registry.example.com"
                  required
                />
              </div>

              <div className="form-row">
                <div className="form-group checkbox-group">
                  <label>
                    <input
                      type="checkbox"
                      checked={formData.enabled}
                      onChange={(e) => setFormData({ ...formData, enabled: e.target.checked })}
                    />
                    Enabled
                  </label>
                </div>
              </div>

              <div className="form-group">
                <label htmlFor="auth_type">Authentication</label>
                <select
                  id="auth_type"
                  value={formData.auth_type}
                  onChange={(e) => setFormData({ ...formData, auth_type: e.target.value as AuthType })}
                >
                  {AUTH_TYPES.map((type) => (
                    <option key={type} value={type}>
                      {type === 'none' ? 'None' : type === 'api_key' ? 'API Key' : type.charAt(0).toUpperCase() + type.slice(1)}
                    </option>
                  ))}
                </select>
              </div>

              {formData.auth_type !== 'none' && (
                <div className="form-row">
                  {(formData.auth_type === 'basic' || formData.auth_type === 'api_key') && (
                    <div className="form-group">
                      <label htmlFor="username">{formData.auth_type === 'api_key' ? 'Header Name' : 'Username'}</label>
                      <input
                        type="text"
                        id="username"
                        value={formData.username}
                        onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                        placeholder={formData.auth_type === 'api_key' ? 'X-API-Key' : 'username'}
                      />
                    </div>
                  )}
                  <div className="form-group">
                    <label htmlFor="password">
                      {formData.auth_type === 'bearer'
                        ? 'Token'
                        : formData.auth_type === 'api_key'
                        ? 'API Key Value'
                        : 'Password'}
                    </label>
                    <input
                      type="password"
                      id="password"
                      value={formData.password}
                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                      placeholder={editingSource ? '(unchanged)' : ''}
                    />
                    {editingSource && (
                      <span className="help-text">Leave empty to keep existing {formData.auth_type === 'bearer' ? 'token' : 'credentials'}</span>
                    )}
                  </div>
                </div>
              )}

              <div className="form-actions">
                {editingSource && (
                  <button
                    type="button"
                    className="btn btn-danger"
                    onClick={() => {
                      handleDelete(editingSource);
                      setShowForm(false);
                    }}
                    disabled={deletingId === editingSource.id}
                  >
                    {deletingId === editingSource.id ? 'Deleting...' : 'Delete'}
                  </button>
                )}
                <div className="form-actions-right">
                  <button type="button" className="btn" onClick={() => setShowForm(false)}>
                    Cancel
                  </button>
                  <button type="submit" className="btn btn-primary" disabled={isSaving}>
                    {isSaving ? 'Saving...' : editingSource ? 'Update' : 'Create'}
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Error Details Modal */}
      {showErrorModal && selectedError && (
        <div className="modal-overlay" onClick={() => setShowErrorModal(false)}>
          <div className="error-modal-content" onClick={(e) => e.stopPropagation()}>
            <h3>Connection Error: {selectedError.sourceName}</h3>
            <div className="error-details">{selectedError.error}</div>
            <div className="modal-actions">
              <button className="btn" onClick={() => setShowErrorModal(false)}>
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default AdminCachePage;