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

import type React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { getGitCommitInfo } from '../../utils/gitCommitInfo.js';
import { getBorderStyle } from '../contexts/UnicodeRenderingContext.js';

// Resolve once at module load (the loader is cached and does synchronous file
// I/O on first call), keeping the React render path free of side effects.
const GIT_COMMIT_INFO = getGitCommitInfo();

interface AboutBoxProps {
  cliVersion: string;
  osVersion: string;
  sandboxEnv: string;
  modelVersion: string;
  keyfile: string;
  key: string;
  ideClient: string;
  provider: string;
  baseURL: string;
}

interface InfoRowProps {
  label: string;
  value: string;
}

const InfoRow: React.FC<InfoRowProps> = ({ label, value }) => (
  <Box flexDirection="row">
    <Box width="35%">
      <Text bold color={Colors.LightBlue}>
        {label}
      </Text>
    </Box>
    <Box>
      <Text color={Colors.Foreground}>{value}</Text>
    </Box>
  </Box>
);

interface ConditionalInfoRowProps {
  label: string;
  value: string | undefined;
}

const ConditionalInfoRow: React.FC<ConditionalInfoRowProps> = ({
  label,
  value,
}) => {
  if (!value) {
    return null;
  }
  return <InfoRow label={label} value={value} />;
};

const AboutBoxHeader: React.FC = () => (
  <Box marginBottom={1}>
    <Text bold color={Colors.AccentPurple}>
      About LLxprt Code
    </Text>
  </Box>
);

const AboutBoxContent: React.FC<{
  cliVersion: string;
  modelVersion: string;
  provider: string;
  sandboxEnv: string;
  osVersion: string;
  baseURL: string;
  ideClient: string;
}> = ({
  cliVersion,
  modelVersion,
  provider,
  sandboxEnv,
  osVersion,
  baseURL,
  ideClient,
}) => (
  <>
    <AboutBoxHeader />
    <InfoRow label="CLI Version" value={cliVersion} />
    {!['', 'N/A'].includes(GIT_COMMIT_INFO) && (
      <InfoRow label="Git Commit" value={GIT_COMMIT_INFO} />
    )}
    <InfoRow label="Model" value={modelVersion} />
    <InfoRow label="Provider" value={provider} />
    <ConditionalInfoRow label="Base URL" value={baseURL} />
    <InfoRow label="Sandbox" value={sandboxEnv} />
    <InfoRow label="OS" value={osVersion} />
    <ConditionalInfoRow label="IDE Client" value={ideClient} />
  </>
);

export const AboutBox: React.FC<AboutBoxProps> = ({
  cliVersion,
  osVersion,
  sandboxEnv,
  modelVersion,
  ideClient,
  provider,
  baseURL,
}) => (
  <Box
    borderStyle={getBorderStyle('round')}
    borderColor={Colors.Gray}
    flexDirection="column"
    padding={1}
    marginY={1}
    width="100%"
    backgroundColor={Colors.Background}
  >
    <AboutBoxContent
      cliVersion={cliVersion}
      modelVersion={modelVersion}
      provider={provider}
      sandboxEnv={sandboxEnv}
      osVersion={osVersion}
      baseURL={baseURL}
      ideClient={ideClient}
    />
  </Box>
);