import React from 'react';

import { MembersEditorSection } from './MembersEditorSection';
import { LeadModelRow } from './LeadModelRow';

import type { MemberDraft } from './membersEditorTypes';
import type { MentionSuggestion } from '@renderer/types/mention';
import type { EffortLevel, TeamProviderId } from '@shared/types';

interface TeamRosterEditorSectionProps {
  members: MemberDraft[];
  onMembersChange: (members: MemberDraft[]) => void;
  fieldError?: string;
  validateMemberName?: (name: string) => string | null;
  showWorkflow?: boolean;
  showJsonEditor?: boolean;
  draftKeyPrefix?: string;
  projectPath?: string | null;
  taskSuggestions?: MentionSuggestion[];
  teamSuggestions?: MentionSuggestion[];
  hideMembersContent?: boolean;
  existingMembers?: readonly { name: string; color?: string; removedAt?: number | string | null }[];
  defaultProviderId?: TeamProviderId;
  inheritedProviderId: TeamProviderId;
  inheritedModel: string;
  inheritedEffort?: EffortLevel;
  inheritModelSettingsByDefault?: boolean;
  forceInheritedModelSettings?: boolean;
  lockProviderModel?: boolean;
  modelLockReason?: string;
  providerId: TeamProviderId;
  model: string;
  effort?: EffortLevel;
  limitContext: boolean;
  onProviderChange: (providerId: TeamProviderId) => void;
  onModelChange: (model: string) => void;
  onEffortChange: (effort: string) => void;
  onLimitContextChange: (value: boolean) => void;
  syncModelsWithTeammates: boolean;
  onSyncModelsWithTeammatesChange: (value: boolean) => void;
  headerTop?: React.ReactNode;
  headerBottom?: React.ReactNode;
}

export const TeamRosterEditorSection = ({
  members,
  onMembersChange,
  fieldError,
  validateMemberName,
  showWorkflow = false,
  showJsonEditor = true,
  draftKeyPrefix,
  projectPath,
  taskSuggestions,
  teamSuggestions,
  hideMembersContent = false,
  existingMembers,
  defaultProviderId = 'anthropic',
  inheritedProviderId,
  inheritedModel,
  inheritedEffort,
  inheritModelSettingsByDefault = false,
  forceInheritedModelSettings = false,
  lockProviderModel = false,
  modelLockReason,
  providerId,
  model,
  effort,
  limitContext,
  onProviderChange,
  onModelChange,
  onEffortChange,
  onLimitContextChange,
  syncModelsWithTeammates,
  onSyncModelsWithTeammatesChange,
  headerTop,
  headerBottom,
}: TeamRosterEditorSectionProps): React.JSX.Element => {
  return (
    <MembersEditorSection
      members={members}
      onChange={onMembersChange}
      fieldError={fieldError}
      validateMemberName={validateMemberName}
      showWorkflow={showWorkflow}
      showJsonEditor={showJsonEditor}
      draftKeyPrefix={draftKeyPrefix}
      projectPath={projectPath}
      taskSuggestions={taskSuggestions}
      teamSuggestions={teamSuggestions}
      hideContent={hideMembersContent}
      existingMembers={existingMembers}
      defaultProviderId={defaultProviderId}
      inheritedProviderId={inheritedProviderId}
      inheritedModel={inheritedModel}
      inheritedEffort={inheritedEffort}
      inheritModelSettingsByDefault={inheritModelSettingsByDefault}
      lockProviderModel={lockProviderModel}
      forceInheritedModelSettings={forceInheritedModelSettings}
      modelLockReason={modelLockReason}
      headerExtra={
        <div className="space-y-3">
          {headerTop}
          <LeadModelRow
            providerId={providerId}
            model={model}
            effort={effort}
            limitContext={limitContext}
            onProviderChange={onProviderChange}
            onModelChange={onModelChange}
            onEffortChange={onEffortChange}
            onLimitContextChange={onLimitContextChange}
            syncModelsWithTeammates={syncModelsWithTeammates}
            onSyncModelsWithTeammatesChange={onSyncModelsWithTeammatesChange}
          />
          {headerBottom}
        </div>
      }
    />
  );
};