import { RGBA } from "@opentui/core"
import { Show } from "solid-js"
import type { JSX } from "@opentui/solid"
import type { PromptInfo } from "./history"

export type PromptMetaProps = {
  mode: "normal" | "shell"
  agentName: string | undefined
  agentDisplayName: string | undefined
  highlight: RGBA
  agentAlpha: number
  modelAlpha: number
  variantAlpha: number
  textMuted: RGBA
  textColor: RGBA
  providerLabel: string
  modelName: string
  showVariant: boolean
  variantName: string | undefined
  warningColor: RGBA
  hasRightContent: boolean
  right?: JSX.Element
}

export function PromptMeta(props: PromptMetaProps) {
  return (
    <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1} justifyContent="space-between">
      <box flexDirection="row" gap={1}>
        <Show when={props.agentName} fallback={<box height={1} />}>
          {(_) => (
            <>
              <text fg={fadeColor(props.highlight, props.agentAlpha)}>
                {props.mode === "shell"
                  ? "Shell"
                  : (props.agentDisplayName ?? titlecase(props.agentName ?? ""))}{" "}
              </text>
              <Show when={props.mode === "normal"}>
                <box flexDirection="row" gap={1}>
                  <text fg={fadeColor(props.textMuted, props.modelAlpha)}>·</text>
                  <text flexShrink={0} fg={fadeColor(props.textColor, props.modelAlpha)}>
                    {props.modelName}
                  </text>
                  <text fg={fadeColor(props.textMuted, props.modelAlpha)}>{props.providerLabel}</text>
                  <Show when={props.showVariant}>
                    <text fg={fadeColor(props.textMuted, props.variantAlpha)}>·</text>
                    <text>
                      <span style={{ fg: fadeColor(props.warningColor, props.variantAlpha), bold: true }}>
                        {props.variantName}
                      </span>
                    </text>
                  </Show>
                </box>
              </Show>
            </>
          )}
        </Show>
      </box>
      <Show when={props.hasRightContent}>
        <box flexDirection="row" gap={1} alignItems="center">
          {props.right}
        </box>
      </Show>
    </box>
  )
}

function fadeColor(color: RGBA, alpha: number) {
  return RGBA.fromValues(color.r, color.g, color.b, color.a * alpha)
}

function titlecase(str: string) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
