import React, { useState } from 'react';
import { ActivityIndicator, Pressable, Switch, Text, View } from 'react-native';
import { Info } from 'lucide-react-native';

import { ConnectorIcon } from './ConnectorCards';
import { connectorDescription, connectorSubtitle } from './connectorPanelUtils';
import { connectorPanelStyles as cStyles } from './connectorPanelStyles';
import { styles as sharedStyles } from '../../styles';
import { themedColor, themedSurface } from '../../theme';
import type { SuperagentConnector, SuperagentConnectorAccessMode } from '../../types';

export function ConnectorDetailView({
  canConnect,
  connector,
  isConnecting,
  onCancel,
  onConnect,
}: {
  // False when the host omits an onConnect handler (read-only / host-managed
  // consumers): the CTA must read as unavailable, not fire a no-op.
  canConnect: boolean;
  connector: SuperagentConnector;
  isConnecting: boolean;
  onCancel: () => void;
  onConnect: (connector: SuperagentConnector, accessMode: SuperagentConnectorAccessMode | null) => void;
}) {
  const supportsAccessModes = !!connector.accessModes || connector.supportsReadOnly;
  const [readOnly, setReadOnly] = useState(false);
  const requiresConfig = !!connector.requiresConnectionConfig;

  return (
    <View>
      <View style={cStyles.detailHeader}>
        <ConnectorIcon connector={connector} />
        <View style={cStyles.detailTitleWrap}>
          <Text numberOfLines={1} style={cStyles.detailTitle}>{connector.name}</Text>
          <Text numberOfLines={2} style={cStyles.detailSubtitle}>{connectorSubtitle(connector)}</Text>
        </View>
      </View>

      <Text style={cStyles.detailDescription}>{connectorDescription(connector)}</Text>

      {supportsAccessModes ? (
        <View style={cStyles.readOnlyRow}>
          <View style={cStyles.readOnlyText}>
            <Text style={cStyles.readOnlyTitle}>Read-only access</Text>
            <Text style={cStyles.readOnlyBody}>Let the agent read data but not make changes.</Text>
          </View>
          <Switch
            disabled={isConnecting}
            ios_backgroundColor={themedSurface('#2A2A2A')}
            onValueChange={setReadOnly}
            thumbColor="#F4F4F5"
            trackColor={{ false: themedSurface('#2A2A2A'), true: '#246B43' }}
            value={readOnly}
          />
        </View>
      ) : null}

      <View style={cStyles.detailFooter}>
        {requiresConfig ? (
          <View style={cStyles.webOnlyPill}>
            <Info color={themedColor('#A1A1AA')} size={14} strokeWidth={2.2} />
            <Text style={cStyles.webOnlyPillText}>Set up on web</Text>
          </View>
        ) : isConnecting ? (
          // Keep the in-flight OAuth visible with a spinner + a way to abort,
          // instead of silently popping back to the list.
          <View style={cStyles.connectingFooter}>
            <ActivityIndicator color={themedColor('#8B5CF6')} size="small" />
            <Pressable
              accessibilityLabel={`Cancel ${connector.name} connection`}
              accessibilityRole="button"
              onPress={onCancel}
              style={({ pressed }) => [cStyles.cancelButton, pressed && sharedStyles.pressed]}
            >
              <Text style={cStyles.cancelButtonText}>Cancel</Text>
            </Pressable>
          </View>
        ) : (
          <Pressable
            accessibilityLabel={`Connect ${connector.name}`}
            accessibilityRole="button"
            disabled={!canConnect}
            onPress={() => onConnect(connector, supportsAccessModes && readOnly ? 'read_only' : supportsAccessModes ? 'full_access' : null)}
            style={({ pressed }) => [cStyles.connectButton, !canConnect && cStyles.disabled, pressed && sharedStyles.pressed]}
          >
            <Text style={cStyles.connectButtonText}>Connect</Text>
          </Pressable>
        )}
      </View>
    </View>
  );
}