import * as React from 'react';
import { Text } from '@anthropic/ink';
import { useAppState } from '../../state/AppState.js';

type Props = {
  teamsSelected: boolean;
  showHint: boolean;
};

/**
 * Footer status indicator showing teammate count
 * Similar to BackgroundTaskStatus but for teammates
 */
export function TeamStatus({ teamsSelected, showHint }: Props): React.ReactNode {
  const teamContext = useAppState(s => s.teamContext);

  // Derive teammate count from teamContext (no filesystem I/O needed)
  const totalTeammates = teamContext
    ? Object.values(teamContext.teammates).filter(t => t.name !== 'team-lead').length
    : 0;

  if (totalTeammates === 0) {
    return null;
  }

  const hint =
    showHint && teamsSelected ? (
      <>
        <Text dimColor>· </Text>
        <Text dimColor>Enter to view</Text>
      </>
    ) : null;

  const statusText = `${totalTeammates} ${totalTeammates === 1 ? 'teammate' : 'teammates'}`;

  return (
    <>
      <Text key={teamsSelected ? 'selected' : 'normal'} color="background" inverse={teamsSelected}>
        {statusText}
      </Text>
      {hint ? <Text> {hint}</Text> : null}
    </>
  );
}