/**
 * @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 { formatDuration } from '../utils/formatters.js';
import {
  getStatusColor,
  TOOL_SUCCESS_RATE_HIGH,
  TOOL_SUCCESS_RATE_MEDIUM,
  USER_AGREEMENT_RATE_HIGH,
  USER_AGREEMENT_RATE_MEDIUM,
} from '../utils/displayUtils.js';
import { useSessionStats } from '../contexts/SessionContext.js';
import type { ToolCallStats } from '@vybestack/llxprt-code-telemetry';
import { getBorderStyle } from '../contexts/UnicodeRenderingContext.js';

const TOOL_NAME_COL_WIDTH = 25;
const CALLS_COL_WIDTH = 8;
const SUCCESS_RATE_COL_WIDTH = 15;
const AVG_DURATION_COL_WIDTH = 15;

const StatRow: React.FC<{
  name: string;
  stats: ToolCallStats;
}> = ({ name, stats }) => {
  const successRate = stats.count > 0 ? (stats.success / stats.count) * 100 : 0;
  const avgDuration = stats.count > 0 ? stats.durationMs / stats.count : 0;
  const successColor = getStatusColor(successRate, {
    green: TOOL_SUCCESS_RATE_HIGH,
    yellow: TOOL_SUCCESS_RATE_MEDIUM,
  });

  return (
    <Box>
      <Box width={TOOL_NAME_COL_WIDTH}>
        <Text color={Colors.LightBlue}>{name}</Text>
      </Box>
      <Box width={CALLS_COL_WIDTH} justifyContent="flex-end">
        <Text color={Colors.Foreground}>{stats.count}</Text>
      </Box>
      <Box width={SUCCESS_RATE_COL_WIDTH} justifyContent="flex-end">
        <Text color={successColor}>{successRate.toFixed(1)}%</Text>
      </Box>
      <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
        <Text color={Colors.Foreground}>{formatDuration(avgDuration)}</Text>
      </Box>
    </Box>
  );
};

const ToolTableHeader: React.FC = () => (
  <Box>
    <Box width={TOOL_NAME_COL_WIDTH}>
      <Text bold color={Colors.Foreground}>
        Tool Name
      </Text>
    </Box>
    <Box width={CALLS_COL_WIDTH} justifyContent="flex-end">
      <Text bold color={Colors.Foreground}>
        Calls
      </Text>
    </Box>
    <Box width={SUCCESS_RATE_COL_WIDTH} justifyContent="flex-end">
      <Text bold color={Colors.Foreground}>
        Success Rate
      </Text>
    </Box>
    <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
      <Text bold color={Colors.Foreground}>
        Avg Duration
      </Text>
    </Box>
  </Box>
);

const TableDivider: React.FC = () => (
  <Box
    borderStyle={getBorderStyle('single')}
    borderBottom={true}
    borderTop={false}
    borderLeft={false}
    borderRight={false}
    borderColor={Colors.Gray}
    width="100%"
  />
);

interface DecisionRowProps {
  label: string;
  value: number;
  color: string;
}

const DecisionRow: React.FC<DecisionRowProps> = ({ label, value, color }) => (
  <Box>
    <Box width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}>
      <Text color={Colors.DimComment}> {label}</Text>
    </Box>
    <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
      <Text color={color}>{value}</Text>
    </Box>
  </Box>
);

interface UserDecisionSummaryProps {
  totalReviewed: number;
  totalDecisions: {
    accept: number;
    reject: number;
    modify: number;
  };
  agreementRate: number;
  agreementColor: string;
}

const UserDecisionSummary: React.FC<UserDecisionSummaryProps> = ({
  totalReviewed,
  totalDecisions,
  agreementRate,
  agreementColor,
}) => (
  <>
    <Text bold color={Colors.Foreground}>
      User Decision Summary
    </Text>
    <Box>
      <Box
        width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
      >
        <Text color={Colors.LightBlue}>Total Reviewed Suggestions:</Text>
      </Box>
      <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
        <Text color={Colors.Foreground}>{totalReviewed}</Text>
      </Box>
    </Box>
    <DecisionRow
      label="» Accepted:"
      value={totalDecisions.accept}
      color={Colors.AccentGreen}
    />
    <DecisionRow
      label="» Rejected:"
      value={totalDecisions.reject}
      color={Colors.AccentRed}
    />
    <DecisionRow
      label="» Modified:"
      value={totalDecisions.modify}
      color={Colors.AccentYellow}
    />
    <TableDivider />
    <Box>
      <Box
        width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
      >
        <Text color={Colors.DimComment}> Overall Agreement Rate:</Text>
      </Box>
      <Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
        <Text
          bold
          color={totalReviewed > 0 ? agreementColor : Colors.Foreground}
        >
          {totalReviewed > 0 ? `${agreementRate.toFixed(1)}%` : '--'}
        </Text>
      </Box>
    </Box>
  </>
);

const EmptyToolStats: React.FC = () => (
  <Box
    borderStyle={getBorderStyle('round')}
    borderColor={Colors.Gray}
    paddingY={1}
    paddingX={2}
  >
    <Text color={Colors.Foreground}>
      No tool calls have been made in this session.
    </Text>
  </Box>
);

interface ToolStatsContentProps {
  activeTools: Array<[string, ToolCallStats]>;
  totalDecisions: { accept: number; reject: number; modify: number };
}

const ToolStatsContent: React.FC<ToolStatsContentProps> = ({
  activeTools,
  totalDecisions,
}) => {
  const totalReviewed =
    totalDecisions.accept + totalDecisions.reject + totalDecisions.modify;
  const agreementRate =
    totalReviewed > 0 ? (totalDecisions.accept / totalReviewed) * 100 : 0;
  const agreementColor = getStatusColor(agreementRate, {
    green: USER_AGREEMENT_RATE_HIGH,
    yellow: USER_AGREEMENT_RATE_MEDIUM,
  });

  return (
    <Box
      borderStyle={getBorderStyle('round')}
      borderColor={Colors.Gray}
      flexDirection="column"
      paddingY={1}
      paddingX={2}
      width={70}
    >
      <Text bold color={Colors.AccentPurple}>
        Tool Stats
      </Text>
      <Box height={1} />
      <ToolTableHeader />
      <TableDivider />
      {activeTools.map(([name, stats]) => (
        <StatRow key={name} name={name} stats={stats} />
      ))}
      <Box height={1} />
      <UserDecisionSummary
        totalReviewed={totalReviewed}
        totalDecisions={totalDecisions}
        agreementRate={agreementRate}
        agreementColor={agreementColor}
      />
    </Box>
  );
};

export const ToolStatsDisplay: React.FC = () => {
  const { stats } = useSessionStats();
  const { tools } = stats.metrics;
  const activeTools = Object.entries(tools.byName).filter(
    ([, metrics]: [string, ToolCallStats]) => metrics.count > 0,
  );

  if (activeTools.length === 0) {
    return <EmptyToolStats />;
  }

  const totalDecisions = Object.values(tools.byName).reduce(
    (
      acc: { accept: number; reject: number; modify: number },
      tool: ToolCallStats,
    ) => {
      acc.accept += tool.decisions.accept;
      acc.reject += tool.decisions.reject;
      acc.modify += tool.decisions.modify;
      return acc;
    },
    { accept: 0, reject: 0, modify: 0 },
  );

  return (
    <ToolStatsContent
      activeTools={activeTools}
      totalDecisions={totalDecisions}
    />
  );
};