import { useState, useEffect, useCallback } from 'react';
import { AppLayout } from '../../components/layout/AppLayout';
import { connectorsApi } from '../../api/connectors';
import type { ConnectorDef, ConnectorRecord, ConnectorLog, ConfigField } from '../../api/connectors';
import { useAuth } from '../../contexts/AuthContext';
import {
  Plug,
  Plus,
  X,
  RefreshCw,
  Trash2,
  CheckCircle2,
  AlertCircle,
  Loader2,
  ArrowRight,
  Clock,
  ExternalLink,
  Activity,
  Shield,
  Eye,
} from 'lucide-react';

// Map service name to icon color/category
const categoryConfig: Record<string, { bg: string; icon: string; label: string }> = {
  crm: { bg: 'bg-blue-100', icon: 'text-blue-600', label: 'CRM' },
  accounting: { bg: 'bg-green-100', icon: 'text-green-600', label: 'Accounting' },
  advertising: { bg: 'bg-purple-100', icon: 'text-purple-600', label: 'Advertising' },
  automation: { bg: 'bg-orange-100', icon: 'text-orange-600', label: 'Automation' },
  telephony: { bg: 'bg-amber-100', icon: 'text-amber-600', label: 'Telephony' },
  default: { bg: 'bg-surface-100', icon: 'text-surface-600', label: 'Integration' },
};

function getCategoryConfig(service: string) {
  // Infer category from service name
  if (service === 'hubspot') return categoryConfig.crm;
  if (service === 'quickbooks') return categoryConfig.accounting;
  if (service === 'google_ads' || service === 'googleads') return categoryConfig.advertising;
  if (service === 'zapier') return categoryConfig.automation;
  if (service === 'sms') return categoryConfig.telephony;
  return categoryConfig.default;
}

function statusConfig(status: string) {
  switch (status) {
    case 'connected':
      return { icon: CheckCircle2, color: 'text-green-600', label: 'Connected' };
    case 'syncing':
      return { icon: RefreshCw, color: 'text-blue-600', label: 'Syncing...' };
    case 'error':
      return { icon: AlertCircle, color: 'text-red-600', label: 'Error' };
    default:
      return { icon: Clock, color: 'text-surface-400', label: 'Inactive' };
  }
}

// Connector card for available (not yet connected) integrations
function AvailableCard({
  connector,
  onConnect,
  disabled,
}: {
  connector: ConnectorDef;
  onConnect: (c: ConnectorDef) => void;
  disabled?: boolean;
}) {
  const cat = getCategoryConfig(connector.service);
  return (
    <div className={`group relative flex flex-col rounded-xl border border-surface-200 bg-white p-5 sm:p-6 transition-shadow hover:shadow-md ${disabled ? 'opacity-60' : ''}`}>
      <div className="mb-4 flex items-start justify-between">
        <div className="flex items-center gap-3">
          <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${cat.bg}`}>
            <Plug className={`h-5 w-5 ${cat.icon}`} />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-surface-900">{connector.name}</h3>
            <p className="text-xs text-surface-500">{cat.label}</p>
          </div>
        </div>
        <span className="rounded-full bg-surface-100 px-2 py-0.5 text-[10px] font-medium text-surface-500">
          {connector.auth_type === 'oauth2' ? 'OAuth' : 'API Key'}
        </span>
      </div>

      <p className="mb-4 text-sm text-surface-600 flex-1">{connector.description}</p>

      <div className="mb-4 flex flex-wrap gap-1.5">
        {(connector.capabilities || []).slice(0, 4).map((cap) => (
          <span
            key={cap}
            className="rounded-md bg-surface-50 px-2 py-0.5 text-[10px] font-medium text-surface-500"
          >
            {cap}
          </span>
        ))}
        {connector.capabilities && connector.capabilities.length > 4 && (
          <span className="rounded-md bg-surface-50 px-2 py-0.5 text-[10px] font-medium text-surface-500">
            +{connector.capabilities.length - 4} more
          </span>
        )}
      </div>

      <div className="mt-auto flex items-center justify-between border-t border-surface-100 pt-4">
        <a
          href={connector.docs_url}
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1 text-xs text-surface-400 hover:text-surface-600 min-h-[44px]"
        >
          Docs <ExternalLink className="h-3 w-3" />
        </a>
        {disabled ? (
          <span className="flex items-center gap-1.5 rounded-lg bg-surface-100 px-3 py-2 text-sm font-medium text-surface-400 cursor-not-allowed min-h-[44px]">
            <Eye className="h-4 w-4" />
            View Only
          </span>
        ) : (
          <button
            onClick={() => onConnect(connector)}
            className="flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-700 min-h-[44px]"
          >
            <Plus className="h-4 w-4" />
            Connect
          </button>
        )}
      </div>
    </div>
  );
}

// Connector card for active connections
function ActiveCard({
  connector,
  onSync,
  onDisconnect,
  onReconnect,
  syncing,
  readOnly,
  isOAuth,
}: {
  connector: ConnectorRecord;
  onSync: (id: string) => void;
  onDisconnect: (id: string) => void;
  onReconnect?: (c: ConnectorRecord) => void;
  syncing: boolean;
  readOnly?: boolean;
  isOAuth?: boolean;
}) {
  const [showLogs, setShowLogs] = useState(false);
  const [logs, setLogs] = useState<ConnectorLog[]>([]);
  const status = statusConfig(connector.status);
  const StatusIcon = status.icon;

  const loadLogs = useCallback(async () => {
    try {
      const result = await connectorsApi.logs(connector.id);
      setLogs(result.logs);
    } catch {
      setLogs([]);
    }
  }, [connector.id]);

  const toggleLogs = async () => {
    if (!showLogs) {
      await loadLogs();
    }
    setShowLogs((v) => !v);
  };

  return (
    <div className="relative flex flex-col rounded-xl border border-surface-200 bg-white p-5 sm:p-6">
      <div className="mb-4 flex items-start justify-between">
        <div className="flex items-center gap-3">
          <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${getCategoryConfig(connector.service).bg}`}>
            <Plug className={`h-5 w-5 ${getCategoryConfig(connector.service).icon}`} />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-surface-900 capitalize">{connector.service.replace('_', ' ')}</h3>
            <div className={`flex items-center gap-1.5 ${status.color}`}>
              <StatusIcon className={`h-3.5 w-3.5 ${syncing ? 'animate-spin' : ''}`} />
              <span className="text-xs font-medium">{status.label}</span>
              {connector.last_sync_at && (
                <span className="text-xs text-surface-400">
                  {' · '}Last synced {new Date(connector.last_sync_at).toLocaleString()}
                </span>
              )}
            </div>
          </div>
        </div>
        <select
          value={connector.sync_frequency}
          onChange={(e) => {
            // For now, just visual — syncing frequency requires backend update endpoint
          }}
          className="rounded-lg border border-surface-200 bg-surface-50 px-2 py-1 text-xs font-medium text-surface-600 min-h-[44px]"
        >
          <option value="real_time">Real-time</option>
          <option value="hourly">Hourly</option>
          <option value="daily">Daily</option>
        </select>
      </div>

      {connector.error_message && (
        <div className="mb-4 flex items-start gap-2 rounded-lg bg-red-50 p-3">
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-600" />
          <p className="text-xs text-red-700">{connector.error_message}</p>
        </div>
      )}

      <div className="mt-auto flex items-center gap-2 border-t border-surface-100 pt-4">
        {readOnly ? (
          <span className="flex items-center gap-1.5 rounded-lg bg-surface-100 px-3 py-2 text-sm font-medium text-surface-400 cursor-not-allowed min-h-[44px]">
            <Shield className="h-4 w-4" />
            Read Only
          </span>
        ) : (
          <>
            <button
              onClick={() => onSync(connector.id)}
              disabled={syncing || connector.status === 'syncing'}
              className="flex items-center gap-1.5 rounded-lg bg-surface-100 px-3 py-2 text-sm font-medium text-surface-700 transition-colors hover:bg-surface-200 disabled:opacity-50 min-h-[44px]"
            >
              <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
              Sync Now
            </button>
            <button
              onClick={toggleLogs}
              className="flex items-center gap-1.5 rounded-lg bg-surface-100 px-3 py-2 text-sm font-medium text-surface-700 transition-colors hover:bg-surface-200 min-h-[44px]"
            >
              <Activity className="h-4 w-4" />
              Logs
            </button>
            {isOAuth && onReconnect && (
              <button
                onClick={() => onReconnect(connector)}
                className="flex items-center gap-1.5 rounded-lg bg-brand-50 px-3 py-2 text-sm font-medium text-brand-700 transition-colors hover:bg-brand-100 min-h-[44px]"
              >
                <Plug className="h-4 w-4" />
                Reconnect
              </button>
            )}
            <button
              onClick={() => onDisconnect(connector.id)}
              className="ml-auto flex items-center gap-1.5 rounded-lg bg-red-50 px-3 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-100 min-h-[44px]"
            >
              <Trash2 className="h-4 w-4" />
              Disconnect
            </button>
          </>
        )}
      </div>

      {/* Expandable logs */}
      {showLogs && (
        <div className="mt-4 max-h-48 overflow-y-auto rounded-lg border border-surface-200 bg-surface-50 p-3">
          {logs.length === 0 ? (
            <p className="text-xs text-surface-400">No sync logs yet</p>
          ) : (
            <div className="space-y-2">
              {logs.map((log: any) => (
                <div key={log.id} className="flex items-start gap-2 text-xs">
                  <span
                    className={`shrink-0 font-medium ${
                      log.status === 'success'
                        ? 'text-green-600'
                        : log.status === 'error'
                        ? 'text-red-600'
                        : 'text-surface-400'
                    }`}
                  >
                    {log.status}
                  </span>
                  <span className="text-surface-600">{log.event_type}</span>
                  {log.record_count > 0 && (
                    <span className="text-surface-400">{log.record_count} records</span>
                  )}
                  {log.duration_ms != null && (
                    <span className="text-surface-400">{log.duration_ms}ms</span>
                  )}
                  <span className="ml-auto shrink-0 text-surface-300">
                    {new Date(log.created_at).toLocaleTimeString()}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// Connect modal
function ConnectModal({
  connector,
  onClose,
  onSuccess,
}: {
  connector: ConnectorDef;
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [config, setConfig] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const result = await connectorsApi.create(connector.service, config, 'hourly');
      if (result.connector.status === 'connected') {
        onSuccess();
      } else {
        setError(result.connector.error_message || 'Connection failed');
      }
    } catch (err: unknown) {
      setError(
        (err as { response?: { data?: { error?: string } } })?.response?.data?.error || 'Connection failed'
      );
    } finally {
      setLoading(false);
    }
  };

  // Use config_fields if available, otherwise fall back to auth_fields
  const fields: ConfigField[] = connector.config_fields || connector.auth_fields?.map(f => ({
    name: f,
    label: f.replace(/_/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase()),
    type: f.includes('token') || f.includes('secret') || f.includes('password') ? 'password' : 'text',
    required: true,
  })) || [];

  // Determine which fields to show based on provider selection
  const selectedProvider = config.provider;
  const shouldShowField = (field: ConfigField) => {
    if (field.name === 'account_sid') return selectedProvider === 'twilio';
    if (field.name === 'auth_id') return selectedProvider === 'plivo';
    return true; // show all other fields
  };

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4">
      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-surface-900">Connect {connector.name}</h2>
          <button
            onClick={onClose}
            className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-lg text-surface-400 hover:bg-surface-100 hover:text-surface-600"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          {fields.map((field) => {
            if (!shouldShowField(field)) return null;

            const label = field.label || field.name.replace(/_/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase());
            const fieldType = field.type || 'text';
            const isRequired = field.required ?? true;

            return (
              <div key={field.name}>
                <label className="mb-1 block text-sm font-medium text-surface-700">
                  {label}
                  {!isRequired && <span className="text-surface-400"> (optional)</span>}
                </label>

                {fieldType === 'select' ? (
                  <select
                    className="w-full rounded-lg border border-surface-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-200 min-h-[44px] bg-white"
                    value={config[field.name] || ''}
                    onChange={(e) => setConfig((prev) => ({ ...prev, [field.name]: e.target.value }))}
                    required={isRequired}
                  >
                    <option value="">Select provider...</option>
                    {(field.options || []).map((opt: string) => (
                      <option key={opt} value={opt}>{opt.charAt(0).toUpperCase() + opt.slice(1)}</option>
                    ))}
                  </select>
                ) : (
                  <input
                    type={fieldType}
                    className="w-full rounded-lg border border-surface-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-200 min-h-[44px]"
                    placeholder={`Enter ${label.toLowerCase()}`}
                    value={config[field.name] || ''}
                    onChange={(e) => setConfig((prev) => ({ ...prev, [field.name]: e.target.value }))}
                    required={isRequired}
                  />
                )}
              </div>
            );
          })}

          {error && (
            <div className="flex items-start gap-2 rounded-lg bg-red-50 p-3">
              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-600" />
              <p className="text-xs text-red-700">{error}</p>
            </div>
          )}

          <div className="flex items-center gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 rounded-lg border border-surface-200 bg-white px-4 py-3 text-sm font-medium text-surface-700 transition-colors hover:bg-surface-50 min-h-[44px]"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="flex-1 flex items-center justify-center gap-2 rounded-lg bg-brand-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
            >
              {loading ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <>
                  <ArrowRight className="h-4 w-4" />
                  Connect
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ─── Role / access helpers ─────────────────────────────────────────────
/** Detect demo accounts by email suffix (e.g. demo@commandcenter.com). */
function isDemoAccount(email?: string | null): boolean {
  if (!email) return false;
  const lower = email.toLowerCase();
  return lower.startsWith('demo@') || lower === 'demo';
}

// Main page
export function IntegrationsPage() {
  const { user, hasCompanyPermission } = useAuth();
  const [available, setAvailable] = useState<ConnectorDef[]>([]);
  const [connected, setConnected] = useState<ConnectorRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [syncingId, setSyncingId] = useState<string | null>(null);
  const [connectModal, setConnectModal] = useState<ConnectorDef | null>(null);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  // ─── Access control derived state ───────────────────────────────────
  const canEdit = hasCompanyPermission('edit_integrations');
  const isDemo = isDemoAccount(user?.email);
  const isReadOnly = isDemo || !canEdit;

  const fetchData = useCallback(async () => {
    try {
      const [availRes, listRes] = await Promise.all([
        connectorsApi.available(),
        connectorsApi.list(),
      ]);
      setAvailable(availRes.connectors);
      setConnected(listRes.connectors);
    } catch {
      setToast({ message: 'Failed to load integrations', type: 'error' });
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleSync = async (id: string) => {
    if (isReadOnly) return;
    setSyncingId(id);
    try {
      await connectorsApi.sync(id);
      setToast({ message: 'Sync completed', type: 'success' });
      await fetchData();
    } catch (err: unknown) {
      setToast({ message: (err as { response?: { data?: { error?: string } } })?.response?.data?.error || 'Sync failed', type: 'error' });
    } finally {
      setSyncingId(null);
    }
  };

  const handleDisconnect = async (id: string) => {
    if (isReadOnly) return;
    try {
      await connectorsApi.remove(id);
      setToast({ message: 'Integration disconnected', type: 'success' });
      await fetchData();
    } catch (err: unknown) {
      setToast({ message: (err as { response?: { data?: { error?: string } } })?.response?.data?.error || 'Failed to disconnect', type: 'error' });
    }
  };

  const handleConnectClick = (connector: ConnectorDef) => {
    if (isReadOnly) return;
    // OAuth2 connectors redirect to provider login; manual connectors show modal
    if (connector.auth_type === 'oauth2') {
      window.location.href = `/api/connectors/oauth/authorize/${connector.service}`;
    } else {
      setConnectModal(connector);
    }
  };

  const handleReconnect = (connector: ConnectorRecord) => {
    if (isReadOnly) return;
    window.location.href = `/api/connectors/oauth/authorize/${connector.service}`;
  };

  const connectedServices = new Set(connected.map((c) => c.service));
  const unconnected = available.filter((a) => !connectedServices.has(a.service));

  // Handle OAuth callback success/error from URL params
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const success = params.get('oauth_success');
    const error = params.get('oauth_error');
    const message = params.get('message');

    if (success) {
      setToast({ message: `${success} connected successfully!`, type: 'success' });
      fetchData();
      params.delete('oauth_success');
      window.history.replaceState({}, '', window.location.pathname);
    } else if (error) {
      setToast({ message: `${message || error} connection failed. Please try again.`, type: 'error' });
      params.delete('oauth_error');
      params.delete('message');
      window.history.replaceState({}, '', window.location.pathname);
    }
  }, []);

  // Auto-dismiss toast
  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), 4000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  return (
    <AppLayout title="Integrations">
      {/* Toast */}
      {toast && (
        <div className="fixed top-4 right-4 z-[70] flex items-center gap-2 rounded-lg bg-surface-900 px-4 py-3 text-sm text-white shadow-lg">
          {toast.type === 'success' ? (
            <CheckCircle2 className="h-4 w-4 text-green-400" />
          ) : (
            <AlertCircle className="h-4 w-4 text-red-400" />
          )}
          {toast.message}
        </div>
      )}

      <div data-testid="page-content" className="space-y-6 sm:space-y-8">
        {/* Demo / read-only banner */}
        {isReadOnly && (
          <div className={`flex items-start gap-3 rounded-xl border p-4 ${
            isDemo
              ? 'border-amber-200 bg-amber-50'
              : 'border-blue-200 bg-blue-50'
          }`}>
            <Shield className={`mt-0.5 h-5 w-5 shrink-0 ${
              isDemo ? 'text-amber-600' : 'text-blue-600'
            }`} />
            <div>
              <p className={`text-sm font-semibold ${
                isDemo ? 'text-amber-800' : 'text-blue-800'
              }`}>
                {isDemo ? 'Demo Mode' : 'View Only'}
              </p>
              <p className={`mt-0.5 text-xs ${
                isDemo ? 'text-amber-700' : 'text-blue-700'
              }`}>
                {isDemo
                  ? 'This is a demo account. You can browse available integrations but cannot create, modify, or remove connectors. Contact your admin for full access.'
                  : 'Your current role does not have permission to manage integrations. Contact your company admin or owner to make changes.'}
              </p>
            </div>
          </div>
        )}

        {/* Header */}
        <div>
          <h1 className="text-xl sm:text-2xl font-bold text-surface-900">Integrations</h1>
          <p className="mt-1 text-sm text-surface-500">
            Connect your existing tools to pull live data into Command Sovereignty.
          </p>
        </div>

        {loading ? (
          <div className="flex items-center justify-center py-12">
            <Loader2 className="h-8 w-8 animate-spin text-brand-600" />
          </div>
        ) : (
          <>
            {/* Connected integrations */}
            <section>
              <div className="mb-4 flex items-center justify-between">
                <h2 className="text-sm font-semibold text-surface-700">
                  Connected ({connected.length})
                </h2>
              </div>

              {connected.length === 0 ? (
                <div className="rounded-xl border border-dashed border-surface-200 bg-surface-50 p-8 text-center">
                  <Plug className="mx-auto mb-3 h-8 w-8 text-surface-300" />
                  <p className="text-sm font-medium text-surface-500">No integrations connected yet</p>
                  <p className="mt-1 text-xs text-surface-400">
                    Connect your CRM, accounting, or advertising tools to start syncing data.
                  </p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {connected.map((c) => (
                    <ActiveCard
                      key={c.id}
                      connector={c}
                      onSync={handleSync}
                      onDisconnect={handleDisconnect}
                      onReconnect={handleReconnect}
                      syncing={syncingId === c.id}
                      readOnly={isReadOnly}
                      isOAuth={c.auth_type === 'oauth2'}
                    />
                  ))}
                </div>
              )}
            </section>

            {/* Available integrations */}
            {unconnected.length > 0 && (
              <section>
                <div className="mb-4 flex items-center justify-between">
                  <h2 className="text-sm font-semibold text-surface-700">
                    Available Integrations ({unconnected.length})
                  </h2>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                  {unconnected.map((c) => (
                    <AvailableCard
                      key={c.service}
                      connector={c}
                      onConnect={handleConnectClick}
                      disabled={isReadOnly}
                    />
                  ))}
                </div>
              </section>
            )}
          </>
        )}
      </div>

      {/* Connect modal — only shown if user has edit permission */}
      {connectModal && (
        <ConnectModal
          connector={connectModal}
          onClose={() => setConnectModal(null)}
          onSuccess={() => {
            setConnectModal(null);
            fetchData();
          }}
        />
      )}
    </AppLayout>
  );
}