import React from 'react';
import { Clock, FileText, MessageCircle, Plug, ShieldCheck, SlidersHorizontal, Users, type LucideIcon } from 'lucide-react-native';

import { AgentActionsSheet, type AgentAction } from './agentActionsParts';
import { FEATURE_MENU_TABS, getEditorTabLabel } from './featureMenu';
import { themedColor } from '../../theme';
import type { SuperagentEditorTab } from '../../types';

const FEATURE_ICONS: Partial<Record<SuperagentEditorTab, LucideIcon>> = {
  channels: MessageCircle,
  automations: Clock,
  files: FileText,
  connectors: Plug,
  agent_settings: SlidersHorizontal,
  security: ShieldCheck,
  sharing: Users,
};

/**
 * The agent chat header's "more" menu. Each row opens the matching feature in
 * its own modal (see `EditorDrawer` driven with `showTabs={false}`).
 */
export function AgentFeatureMenu({
  visible,
  onClose,
  onSelectFeature,
}: {
  visible: boolean;
  onClose: () => void;
  onSelectFeature: (tab: SuperagentEditorTab) => void;
}) {
  const actions: AgentAction[] = FEATURE_MENU_TABS.map((tab) => {
    const Icon = FEATURE_ICONS[tab] ?? SlidersHorizontal;
    return {
      key: tab,
      label: getEditorTabLabel(tab),
      icon: <Icon color={themedColor('#F4F4F5')} size={20} strokeWidth={2.2} />,
      onPress: () => onSelectFeature(tab),
    };
  });

  return <AgentActionsSheet actions={actions} onClose={onClose} title="Manage agent" visible={visible} />;
}