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

import type React from 'react';
import { useState, useCallback } from 'react';
import { Box, Text } from 'ink';
import { SemanticColors } from '../colors.js';
import { useResponsive } from '../hooks/useResponsive.js';
import { useKeypress } from '../hooks/useKeypress.js';
import type { Profile } from '@vybestack/llxprt-code-settings';
import { getBorderStyle } from '../contexts/UnicodeRenderingContext.js';

interface ProfileDetailDialogProps {
  profileName: string;
  profile: Profile | null;
  onClose: () => void;
  onLoad: (profileName: string) => void;
  onDelete: (profileName: string) => void;
  onSetDefault: (profileName: string) => void;
  onEdit: (profileName: string) => void;
  isLoading?: boolean;
  isDefault?: boolean;
  isActive?: boolean;
  error?: string;
}

interface LoadBalancerMemberDetail {
  name: string;
  provider?: string;
  model?: string;
  contextLimit?: number;
  reasoningEnabled?: boolean;
  temperature?: unknown;
  maxTokens?: unknown;
  loadError?: boolean;
}

type LoadBalancerDisplayProfile = Profile & {
  type: 'loadbalancer';
  profiles: string[];
  policy: string;
  contextLimit?: number;
  loadBalancerProfileDetails?: LoadBalancerMemberDetail[];
};

/**
 * Allowlist of ephemeralSettings keys that are safe to display.
 * Any key NOT in this set will be hidden to prevent accidental secret leakage.
 */
const SAFE_EPHEMERAL_KEYS = new Set([
  'baseurl',
  'endpoint',
  'url',
  'timeout',
  'maxretries',
  'retries',
  'region',
  'debug',
  'loglevel',
  'version',
  'apiversion',
  'organization',
  'orgid',
  'project',
  'projectid',
  'maxtokens',
  'temperature',
  'topp',
  'topk',
  'stream',
  'safetysettings',
]);

// Type guard for load balancer profile
function isLoadBalancerProfile(profile: Profile): profile is Profile & {
  type: 'loadbalancer';
  profiles: string[];
  policy: string;
} {
  const record = asRenderableRecord(profile);
  return (
    profile.type === 'loadbalancer' &&
    Array.isArray(record?.profiles) &&
    typeof record.policy === 'string'
  );
}

function asRenderableRecord(
  value: unknown,
): Record<string, unknown> | undefined {
  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
    return undefined;
  }

  return value as Record<string, unknown>;
}

function getBooleanValue(
  record: Record<string, unknown> | undefined,
  key: string,
): boolean | undefined {
  const value = record?.[key];
  return typeof value === 'boolean' ? value : undefined;
}

function getLoadBalancerContextLimit(
  profile: LoadBalancerDisplayProfile,
): number | undefined {
  return profile.contextLimit;
}

function getLoadBalancerEffectiveMinimum(
  profile: LoadBalancerDisplayProfile,
): number | undefined {
  const limits = profile.loadBalancerProfileDetails
    ?.map((detail) => detail.contextLimit)
    .filter(
      (value): value is number =>
        typeof value === 'number' && Number.isInteger(value) && value > 0,
    );

  return limits === undefined || limits.length === 0
    ? undefined
    : Math.min(...limits);
}

function formatDetailValue(value: unknown): string {
  if (typeof value === 'string') return value;
  return JSON.stringify(value);
}

function handleDetailKeypress(
  key: { name?: string; sequence?: string },
  confirmDelete: boolean,
  profileName: string,
  error: string | undefined,
  profile: Profile | null,
  setConfirmDelete: React.Dispatch<React.SetStateAction<boolean>>,
  onClose: () => void,
  onDelete: (name: string) => void,
  onLoad: (name: string) => void,
  onEdit: (name: string) => void,
  onSetDefault: (name: string) => void,
): void {
  if (key.name === 'escape') {
    if (confirmDelete) {
      setConfirmDelete(false);
    } else {
      onClose();
    }
    return;
  }

  if (error || !profile) {
    return;
  }

  if (confirmDelete) {
    if (key.sequence === 'y' || key.sequence === 'Y') {
      onDelete(profileName);
    } else if (key.sequence === 'n' || key.sequence === 'N') {
      setConfirmDelete(false);
    }
    return;
  }

  if (key.sequence === 'l') {
    onLoad(profileName);
    return;
  }
  if (key.sequence === 'e') {
    onEdit(profileName);
    return;
  }
  if (key.sequence === 'd') {
    setConfirmDelete(true);
  }
  if (key.sequence === 's') {
    onSetDefault(profileName);
  }
}

const LoadBalancerMemberItem: React.FC<{
  memberName: string;
  detail: LoadBalancerMemberDetail | undefined;
}> = ({ memberName, detail }) => (
  <Box flexDirection="column">
    <Text color={SemanticColors.text.primary}>
      {'  '}- {memberName}
    </Text>
    {detail?.loadError === true && (
      <Text color={SemanticColors.status.warning}>
        {'    '}details unavailable
      </Text>
    )}
    {detail?.provider !== undefined && (
      <Text color={SemanticColors.text.primary}>
        {'    '}Provider: {detail.provider}
      </Text>
    )}
    {detail?.model !== undefined && (
      <Text color={SemanticColors.text.primary}>
        {'    '}Model: {detail.model}
      </Text>
    )}
    {detail?.contextLimit !== undefined && (
      <Text color={SemanticColors.text.primary}>
        {'    '}Context Limit: {detail.contextLimit}
      </Text>
    )}
    {detail?.reasoningEnabled !== undefined && (
      <Text color={SemanticColors.text.primary}>
        {'    '}Reasoning: {detail.reasoningEnabled ? 'enabled' : 'disabled'}
      </Text>
    )}
    {detail?.temperature !== undefined && (
      <Text color={SemanticColors.text.primary}>
        {'    '}temperature: {formatDetailValue(detail.temperature)}
      </Text>
    )}
    {detail?.maxTokens !== undefined && (
      <Text color={SemanticColors.text.primary}>
        {'    '}maxTokens: {formatDetailValue(detail.maxTokens)}
      </Text>
    )}
  </Box>
);

const LoadBalancerConfig: React.FC<{
  profile: LoadBalancerDisplayProfile;
}> = ({ profile }) => {
  const ephemeralSettings = asRenderableRecord(profile.ephemeralSettings);
  const modelParams = asRenderableRecord(profile.modelParams);
  const contextLimit = getLoadBalancerContextLimit(profile);
  const effectiveMinimum = getLoadBalancerEffectiveMinimum(profile);
  const reasoningEnabled = getBooleanValue(
    ephemeralSettings,
    'reasoning.enabled',
  );

  return (
    <Box flexDirection="column">
      <Box marginBottom={1}>
        <Text color={SemanticColors.text.secondary}>Type: </Text>
        <Text color={SemanticColors.text.accent}>Load Balancer</Text>
      </Box>
      <Box marginBottom={1}>
        <Text color={SemanticColors.text.secondary}>Policy: </Text>
        <Text color={SemanticColors.text.primary}>{profile.policy}</Text>
      </Box>
      {contextLimit !== undefined && (
        <Box marginBottom={1}>
          <Text color={SemanticColors.text.secondary}>Context Limit: </Text>
          <Text color={SemanticColors.text.primary}>{contextLimit}</Text>
        </Box>
      )}
      {effectiveMinimum !== undefined && (
        <Box marginBottom={1}>
          <Text color={SemanticColors.text.secondary}>
            Effective Minimum Context:{' '}
          </Text>
          <Text color={SemanticColors.text.primary}>{effectiveMinimum}</Text>
        </Box>
      )}

      {reasoningEnabled !== undefined && (
        <Box marginBottom={1}>
          <Text color={SemanticColors.text.secondary}>Reasoning: </Text>
          <Text color={SemanticColors.text.primary}>
            {reasoningEnabled ? 'enabled' : 'disabled'}
          </Text>
        </Box>
      )}
      {modelParams !== undefined && (
        <ModelParamsSection modelParams={modelParams} />
      )}
      <Box flexDirection="column" marginBottom={1}>
        <Text color={SemanticColors.text.secondary}>Member Profiles:</Text>
        {profile.profiles.map((memberName: string) => {
          const detail = profile.loadBalancerProfileDetails?.find(
            (candidate) => candidate.name === memberName,
          );

          return (
            <LoadBalancerMemberItem
              key={memberName}
              memberName={memberName}
              detail={detail}
            />
          );
        })}
      </Box>
    </Box>
  );
};

const ModelParamsSection: React.FC<{
  modelParams: Record<string, unknown>;
}> = ({ modelParams }) => {
  if (Object.keys(modelParams).length === 0) return null;

  return (
    <Box flexDirection="column" marginBottom={1}>
      <Text color={SemanticColors.text.secondary}>Model Parameters:</Text>
      {Object.entries(modelParams).map(([key, value]) => (
        <Text key={key} color={SemanticColors.text.primary}>
          {'  '}
          {key}: {JSON.stringify(value)}
        </Text>
      ))}
    </Box>
  );
};

const EphemeralSettingsSection: React.FC<{
  ephemeralSettings: Record<string, unknown>;
}> = ({ ephemeralSettings }) => (
  <Box flexDirection="column" marginBottom={1}>
    <Text color={SemanticColors.text.secondary}>Settings:</Text>
    {Object.entries(ephemeralSettings)
      .filter(([key]) => SAFE_EPHEMERAL_KEYS.has(key.toLowerCase()))
      .filter(([, value]) => value !== undefined && value !== null)
      .slice(0, 10)
      .map(([key, value]) => (
        <Text key={key} color={SemanticColors.text.primary}>
          {'  '}
          {key}: {JSON.stringify(value)}
        </Text>
      ))}
  </Box>
);

const AuthConfigSection: React.FC<{
  profile: Profile & { auth?: { type: string; buckets?: string[] } };
}> = ({ profile }) => {
  if (!profile.auth) return null;

  return (
    <Box flexDirection="column" marginBottom={1}>
      <Text color={SemanticColors.text.secondary}>Authentication:</Text>
      <Text color={SemanticColors.text.primary}>
        {'  '}Type: {profile.auth.type}
      </Text>
      {profile.auth.buckets != null && profile.auth.buckets.length > 0 && (
        <Text color={SemanticColors.text.primary}>
          {'  '}Buckets: {profile.auth.buckets.join(', ')}
        </Text>
      )}
    </Box>
  );
};

const StandardProfileConfig: React.FC<{ profile: Profile }> = ({ profile }) => {
  const modelParams = asRenderableRecord(
    (profile as { modelParams?: unknown }).modelParams,
  );
  const ephemeralSettings = asRenderableRecord(
    (profile as { ephemeralSettings?: unknown }).ephemeralSettings,
  );

  return (
    <Box flexDirection="column">
      <Box marginBottom={1}>
        <Text color={SemanticColors.text.secondary}>Type: </Text>
        <Text color={SemanticColors.text.primary}>Standard</Text>
      </Box>
      <Box marginBottom={1}>
        <Text color={SemanticColors.text.secondary}>Provider: </Text>
        <Text color={SemanticColors.text.accent}>{profile.provider}</Text>
      </Box>
      <Box marginBottom={1}>
        <Text color={SemanticColors.text.secondary}>Model: </Text>
        <Text color={SemanticColors.text.primary}>{profile.model}</Text>
      </Box>
      {modelParams !== undefined && (
        <ModelParamsSection modelParams={modelParams} />
      )}
      {ephemeralSettings !== undefined && (
        <EphemeralSettingsSection ephemeralSettings={ephemeralSettings} />
      )}
      <AuthConfigSection profile={profile} />
    </Box>
  );
};

const ProfileConfigDisplay: React.FC<{ profile: Profile }> = ({ profile }) => {
  if (isLoadBalancerProfile(profile)) {
    return <LoadBalancerConfig profile={profile} />;
  }
  return <StandardProfileConfig profile={profile} />;
};

const DeleteConfirmation: React.FC<{
  profileName: string;
  width: number;
}> = ({ profileName, width }) => (
  <Box
    borderStyle={getBorderStyle('round')}
    borderColor={SemanticColors.status.warning}
    flexDirection="column"
    padding={1}
    width={Math.min(width, 60)}
  >
    <Text bold color={SemanticColors.status.warning}>
      Delete Profile?
    </Text>
    <Box marginY={1}>
      <Text color={SemanticColors.text.primary}>
        Are you sure you want to delete &quot;{profileName}&quot;?
      </Text>
    </Box>
    <Text color={SemanticColors.text.secondary}>
      This action cannot be undone.
    </Text>
    <Box marginTop={1}>
      <Text color={SemanticColors.text.accent}>
        Press y to confirm, n or Esc to cancel
      </Text>
    </Box>
  </Box>
);

const ActionsBar: React.FC = () => (
  <Box
    marginTop={1}
    borderStyle={getBorderStyle('single')}
    borderTop
    borderBottom={false}
    borderLeft={false}
    borderRight={false}
    borderColor={SemanticColors.border.default}
    paddingTop={1}
  >
    <Text color={SemanticColors.text.secondary}>
      Actions: <Text color={SemanticColors.text.accent}>l</Text>=load{' '}
      <Text color={SemanticColors.text.accent}>e</Text>=edit{' '}
      <Text color={SemanticColors.text.accent}>d</Text>=delete{' '}
      <Text color={SemanticColors.text.accent}>s</Text>=set-default{' '}
      <Text color={SemanticColors.text.secondary}>Esc</Text>=back
    </Text>
  </Box>
);

const LoadingState: React.FC = () => (
  <Box
    borderStyle={getBorderStyle('round')}
    borderColor={SemanticColors.border.default}
    flexDirection="column"
    padding={1}
  >
    <Text color={SemanticColors.text.primary}>Loading profile...</Text>
  </Box>
);

const ErrorState: React.FC<{ error: string }> = ({ error }) => (
  <Box
    borderStyle={getBorderStyle('round')}
    borderColor={SemanticColors.status.error}
    flexDirection="column"
    padding={1}
  >
    <Text bold color={SemanticColors.status.error}>
      Error Loading Profile
    </Text>
    <Text color={SemanticColors.text.secondary}>{error}</Text>
    <Box marginTop={1}>
      <Text color={SemanticColors.text.secondary}>Press Esc to go back</Text>
    </Box>
  </Box>
);

const NotFoundState: React.FC<{ profileName: string }> = ({ profileName }) => (
  <Box
    borderStyle={getBorderStyle('round')}
    borderColor={SemanticColors.border.default}
    flexDirection="column"
    padding={1}
  >
    <Text color={SemanticColors.text.secondary}>
      Profile not found: {profileName}
    </Text>
    <Text color={SemanticColors.text.secondary}>Press Esc to go back</Text>
  </Box>
);

const ProfileHeader: React.FC<{
  profileName: string;
  isActive: boolean;
  isDefault: boolean;
}> = ({ profileName, isActive, isDefault }) => (
  <Box marginBottom={1}>
    <Text bold color={SemanticColors.text.accent}>
      {profileName}
    </Text>
    {isActive && <Text color={SemanticColors.status.success}> (Active)</Text>}
    {isDefault && <Text color={SemanticColors.text.secondary}> (Default)</Text>}
  </Box>
);

export const ProfileDetailDialog: React.FC<ProfileDetailDialogProps> = ({
  profileName,
  profile,
  onClose,
  onLoad,
  onDelete,
  onSetDefault,
  onEdit,
  isLoading = false,
  isDefault = false,
  isActive = false,
  error,
}) => {
  const { isNarrow, width } = useResponsive();
  const [confirmDelete, setConfirmDelete] = useState(false);

  const handleKeypress = useCallback(
    (key: Parameters<Parameters<typeof useKeypress>[0]>[0]) => {
      handleDetailKeypress(
        key,
        confirmDelete,
        profileName,
        error,
        profile,
        setConfirmDelete,
        onClose,
        onDelete,
        onLoad,
        onEdit,
        onSetDefault,
      );
    },
    [
      confirmDelete,
      profileName,
      error,
      profile,
      setConfirmDelete,
      onClose,
      onDelete,
      onLoad,
      onEdit,
      onSetDefault,
    ],
  );

  useKeypress(handleKeypress, { isActive: !isLoading });

  if (isLoading) return <LoadingState />;
  if (error) return <ErrorState error={error} />;
  if (!profile) return <NotFoundState profileName={profileName} />;
  if (confirmDelete) {
    return <DeleteConfirmation profileName={profileName} width={width} />;
  }

  const dialogWidth = isNarrow ? undefined : Math.min(width, 80);

  return (
    <Box
      borderStyle={getBorderStyle('round')}
      borderColor={SemanticColors.border.default}
      flexDirection="column"
      padding={1}
      width={dialogWidth}
    >
      <ProfileHeader
        profileName={profileName}
        isActive={isActive}
        isDefault={isDefault}
      />
      <ProfileConfigDisplay profile={profile} />
      <ActionsBar />
    </Box>
  );
};