/**
 * @license
 * Copyright 2025 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import type React from 'react';
import { Box, Text } from 'ink';
import { theme } from '../../semantic-colors.js';
import { type SkillDefinition } from '../../types.js';

interface SkillsListProps {
  skills: readonly SkillDefinition[];
  showDescriptions: boolean;
}

export const SkillsList: React.FC<SkillsListProps> = ({
  skills,
  showDescriptions,
}) => {
  const enabledSkills = skills
    .filter((s) => s.disabled !== true)
    .sort((a, b) => a.name.localeCompare(b.name));

  const disabledSkills = skills
    .filter((s) => s.disabled === true)
    .sort((a, b) => a.name.localeCompare(b.name));

  const renderSkill = (skill: SkillDefinition) => {
    let sourceLabel = '';
    if (skill.source === 'builtin') {
      sourceLabel = ' [Built-in]';
    } else if (skill.source === 'extension') {
      sourceLabel = ' [Extension]';
    }

    return (
      <Box key={skill.name} flexDirection="row">
        <Text color={theme.text.primary}>{'  '}- </Text>
        <Box flexDirection="column">
          <Text
            bold
            color={
              skill.disabled === true ? theme.text.secondary : theme.text.link
            }
          >
            {skill.name}
            {sourceLabel !== '' && (
              <Text color={theme.text.secondary}>{sourceLabel}</Text>
            )}
          </Text>
          {showDescriptions === true && skill.description !== '' && (
            <Box marginLeft={2}>
              <Text
                color={
                  skill.disabled === true
                    ? theme.text.secondary
                    : theme.text.primary
                }
              >
                {skill.description}
              </Text>
            </Box>
          )}
        </Box>
      </Box>
    );
  };

  return (
    <Box flexDirection="column" marginBottom={1}>
      {enabledSkills.length > 0 && (
        <Box flexDirection="column">
          <Text bold color={theme.text.primary}>
            Available Skills:
          </Text>
          <Box height={1} />
          {enabledSkills.map(renderSkill)}
        </Box>
      )}

      {enabledSkills.length > 0 && disabledSkills.length > 0 && (
        <Box marginY={1}>
          <Text color={theme.text.secondary}>{'-'.repeat(20)}</Text>
        </Box>
      )}

      {disabledSkills.length > 0 && (
        <Box flexDirection="column">
          <Text bold color={theme.text.secondary}>
            Disabled Skills:
          </Text>
          <Box height={1} />
          {disabledSkills.map(renderSkill)}
        </Box>
      )}

      {skills.length === 0 && (
        <Text color={theme.text.primary}> No skills available</Text>
      )}
    </Box>
  );
};