'use client';

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
import { cn } from '@/lib/utils';
import type { ComponentProps } from 'react';
import type { LanguageModelUsage } from 'ai';
import { breakdownTokens, estimateCost, normalizeUsage } from 'tokenlens';
import { Separator } from '@/components/ui/separator';

export type ContextProps = ComponentProps<'button'> & {
  /** Total context window size in tokens */
  maxTokens: number;
  /** Tokens used so far */
  usedTokens: number;
  /** Optional full usage payload to enable breakdown view */
  usage?: LanguageModelUsage | undefined;
  /** Optional model id (canonical or alias) to compute cost */
  modelId?: string;
  /** Show token breakdown and optional cost inside hover */
  showBreakdown?: boolean;
};

const THOUSAND = 1000;
const MILLION = 1_000_000;
const BILLION = 1_000_000_000;
const PERCENT_MAX = 100;

// Lucide CircleIcon geometry
const ICON_VIEWBOX = 24;
const ICON_CENTER = 12;
const ICON_RADIUS = 10;
const ICON_STROKE_WIDTH = 2;

const formatTokens = (tokens?: number) => {
  if (tokens === undefined) {
    return;
  }
  if (!Number.isFinite(tokens)) {
    return;
  }
  const abs = Math.abs(tokens);
  if (abs < THOUSAND) {
    return `${tokens}`;
  }
  if (abs < MILLION) {
    return `${(tokens / THOUSAND).toFixed(1)}K`;
  }
  if (abs < BILLION) {
    return `${(tokens / MILLION).toFixed(1)}M`;
  }
  return `${(tokens / BILLION).toFixed(1)}B`;
};

const formatPercent = (value: number) => {
  if (!Number.isFinite(value)) {
    return '0%';
  }
  const rounded = Math.round(value * 10) / 10;
  return Number.isInteger(rounded)
    ? `${Math.trunc(rounded)}%`
    : `${rounded.toFixed(1)}%`;
};

const formatUSD = (value?: number) => {
  if (value === undefined || !Number.isFinite(value)) return undefined;
  const abs = Math.abs(value);
  // Finer precision for very small amounts common in LLM pricing
  let decimals = 2;
  if (abs < 0.001) decimals = 5;
  else if (abs < 0.01) decimals = 4;
  else if (abs < 0.1) decimals = 3;
  else if (abs < 10) decimals = 2;
  else decimals = 1;
  const text = value.toFixed(decimals);
  // Trim trailing zeros/decimal if not needed (e.g., 1.2300 -> 1.23, 2.0 -> 2)
  const trimmed = text.replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1');
  return `$${trimmed}`;
};

type ContextIconProps = {
  percent: number; // 0 - 100
};

export const ContextIcon = ({ percent }: ContextIconProps) => {
  const radius = ICON_RADIUS;
  const circumference = 2 * Math.PI * radius;
  const dashOffset = circumference * (1 - percent / PERCENT_MAX);

  return (
    <svg
      aria-label={`${formatPercent(percent)} of model context used`}
      height="20"
      role="img"
      style={{ color: 'currentcolor' }}
      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
      width="20"
    >
      <circle
        cx={ICON_CENTER}
        cy={ICON_CENTER}
        fill="none"
        opacity="0.25"
        r={radius}
        stroke="currentColor"
        strokeWidth={ICON_STROKE_WIDTH}
      />
      <circle
        cx={ICON_CENTER}
        cy={ICON_CENTER}
        fill="none"
        opacity="0.7"
        r={radius}
        stroke="currentColor"
        strokeDasharray={`${circumference} ${circumference}`}
        strokeDashoffset={dashOffset}
        strokeLinecap="round"
        strokeWidth={ICON_STROKE_WIDTH}
        transform={`rotate(-90 ${ICON_CENTER} ${ICON_CENTER})`}
      />
    </svg>
  );
};

export const Context = ({
  className,
  maxTokens,
  usedTokens,
  usage,
  modelId,
  showBreakdown,
  ...props
}: ContextProps) => {
  const safeMax = Math.max(0, Number.isFinite(maxTokens) ? maxTokens : 0);
  const safeUsed = Math.min(
    Math.max(0, Number.isFinite(usedTokens) ? usedTokens : 0),
    safeMax,
  );
  const usedPercent =
    safeMax > 0
      ? Math.min(PERCENT_MAX, Math.max(0, (safeUsed / safeMax) * PERCENT_MAX))
      : 0;

  const displayPct = formatPercent(Math.round(usedPercent * 10) / 10);

  const used = formatTokens(safeUsed);
  const total = formatTokens(safeMax);

  const uNorm = normalizeUsage(usage as any);
  const uBreakdown = breakdownTokens(usage as any);
  const costUSD = modelId
    ? estimateCost({ modelId, usage: uNorm }).totalUSD
    : undefined;
  const costText = formatUSD(costUSD);

  const segInput = Math.max(0, uNorm.input ?? 0);
  const segOutput = Math.max(0, uNorm.output ?? 0);
  const segCacheR = Math.max(0, uBreakdown.cacheReads ?? 0);
  const segCacheW = Math.max(0, uBreakdown.cacheWrites ?? 0);
  const denom = safeMax > 0 ? safeMax : 1;
  const w = (n: number) =>
    `${Math.min(100, Math.max(0, (n / denom) * 100)).toFixed(2)}%`;
  const fmtOrUnknown = (n?: number) =>
    n === undefined ? '—' : formatTokens(n);
  return (
    <HoverCard closeDelay={100} openDelay={100}>
      <HoverCardTrigger asChild>
        <button
          className={cn(
            'inline-flex select-none items-center gap-2 rounded-md px-2.5 py-1 text-sm',
            'bg-background text-foreground',
          )}
          type="button"
          {...props}
        >
          <span className="font-medium text-muted-foreground">
            {displayPct}
          </span>
          <ContextIcon percent={usedPercent} />
        </button>
      </HoverCardTrigger>
      <HoverCardContent align="center" className="w-fit p-3">
        <div className="min-w-[240px] space-y-2">
          <p className="text-center text-sm">
            {displayPct} • {used} / {total} tokens
            {costText ? (
              <span className="ml-1 text-muted-foreground">• {costText}</span>
            ) : null}
          </p>
          {true && (
            <div className="space-y-2">
              <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
                <div
                  className="h-full"
                  style={{
                    width: w(segCacheR),
                    background: 'var(--chart-2)',
                    opacity: 0.9,
                  }}
                />
                <div
                  className="h-full"
                  style={{
                    width: w(segCacheW),
                    background: 'var(--chart-4)',
                    opacity: 0.9,
                  }}
                />
                <div
                  className="h-full"
                  style={{
                    width: w(segInput),
                    background: 'var(--chart-1)',
                    opacity: 0.9,
                  }}
                />
                <div
                  className="h-full"
                  style={{
                    width: w(segOutput),
                    background: 'var(--chart-3)',
                    opacity: 0.9,
                  }}
                />
              </div>
              <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
                <div className="flex items-center justify-between">
                  <span className="flex items-center gap-2 text-muted-foreground">
                    <span className="inline-block size-2 rounded-sm bg-chart-1" />
                    Cache Hits
                  </span>
                  <span>{fmtOrUnknown(uBreakdown.cacheReads)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="flex items-center gap-2 text-muted-foreground">
                    <span className="inline-block size-2 rounded-sm bg-chart-2" />
                    Cache Writes
                  </span>
                  <span>{fmtOrUnknown(uBreakdown.cacheWrites)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="flex items-center gap-2 text-muted-foreground">
                    <span className="inline-block size-2 rounded-sm bg-chart-3" />
                    Input
                  </span>
                  <span>{formatTokens(uNorm.input)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="flex items-center gap-2 text-muted-foreground">
                    <span className="inline-block size-2 rounded-sm bg-chart-4" />
                    Output
                  </span>
                  <span>{formatTokens(uNorm.output)}</span>
                </div>
              </div>
            </div>
          )}
          {showBreakdown && (
            <div className="mt-1 space-y-1">
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Cache Hits</span>
                <span>{fmtOrUnknown(uBreakdown.cacheReads)}</span>
              </div>
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Cache Writes</span>
                <span>{fmtOrUnknown(uBreakdown.cacheWrites)}</span>
              </div>
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Input</span>
                <span>{formatTokens(uNorm.input)}</span>
              </div>
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Output</span>
                <span>{formatTokens(uNorm.output)}</span>
              </div>
              {costText && (
                <>
                  <Separator className="mt-1" />
                  <div className="flex items-center justify-between pt-1 text-xs">
                    <span className="text-muted-foreground">Total cost</span>
                    <span>{costText}</span>
                  </div>
                </>
              )}
            </div>
          )}
        </div>
      </HoverCardContent>
    </HoverCard>
  );
};