"use client";
import * as React from "react";
import { AlertTriangle, ArrowUpRight, FileText, Loader2, MessageSquarePlus } from "lucide-react";
import type { PolyModel } from "@/lib/client/types";
import type { ContextEstimate, CostEstimate } from "@/lib/client/tokens";
import { formatEstimate } from "@/lib/client/tokens";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";
import { cn, formatTokens } from "@/lib/utils";

interface Props {
  estimate: ContextEstimate;
  cost: CostEstimate;
  model?: PolyModel;
  showCost?: boolean;
  onNewChat: () => void;
  onSummarize?: () => void;
  summarizing?: boolean;
  largerModel?: PolyModel | null;
  onSwitchLarger?: (key: string) => void;
  className?: string;
}

function fmtK(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
  if (n >= 1000) return `${Math.round(n / 1000)}K`;
  return String(n);
}

/**
 * Compact "43K / 200K" context meter + cost estimate. Turns into an action banner at 80 % (warn),
 * 95 % (critical) and when the estimate exceeds the window.
 */
export function ContextIndicator({ estimate, cost, showCost = true, onNewChat, onSummarize, summarizing, largerModel, onSwitchLarger, className }: Props) {
  const ratio = estimate.ratio ?? 0;
  const level = estimate.level;
  const bar = level === "over" || level === "critical" ? "bg-danger" : level === "warn" ? "bg-warning" : "bg-accent";
  const pct = Math.min(100, Math.round(ratio * 100));
  const label = estimate.contextTokens ? `${fmtK(estimate.total)} / ${fmtK(estimate.contextTokens)}` : `~${fmtK(estimate.total)} tokens`;
  const costLabel = showCost ? formatEstimate(estimate.total, cost.usd) : `~${fmtK(estimate.total)} tokens`;

  return (
    <div className={cn("space-y-1.5", className)}>
      <div className="flex min-w-0 items-center gap-2 text-[11px] tabular-nums text-fg-subtle">
        <Tooltip content={estimate.contextTokens ? `Estimated context: ${formatTokens(estimate.history)} history + ${formatTokens(estimate.draft)} draft of ${formatTokens(estimate.contextTokens)} (${pct}%)` : "Estimated tokens in this request (no known context limit)"}>
          <span className="inline-flex shrink-0 items-center gap-1.5">
            <span className={cn(level !== "ok" && (level === "warn" ? "text-warning" : "text-danger"))}>{label}</span>
            {estimate.contextTokens ? (
              <span className="relative h-1 w-14 overflow-hidden rounded-full bg-border sm:w-20" aria-hidden>
                <span className={cn("absolute inset-y-0 left-0 rounded-full transition-[width] duration-300", bar)} style={{ width: `${Math.max(2, pct)}%` }} />
              </span>
            ) : null}
          </span>
        </Tooltip>
        <span className="hidden text-border-strong sm:inline">·</span>
        <Tooltip content={cost.usd === null ? "No public pricing for this model" : `Input ≈ $${(cost.inputUsd ?? 0).toFixed(4)} · output (~${cost.outputTokens} tokens) ≈ $${(cost.outputUsd ?? 0).toFixed(4)} — provider list prices`}>
          <span className="hidden truncate sm:inline">{costLabel}</span>
        </Tooltip>
        {cost.usd !== null && showCost ? <span className="truncate sm:hidden">≈ {cost.usd < 0.01 ? `$${cost.usd.toFixed(4)}` : `$${cost.usd.toFixed(2)}`}</span> : null}
      </div>

      {level !== "ok" ? (
        <div className={cn("flex flex-wrap items-center gap-x-3 gap-y-2 rounded-xl px-3 py-2 text-[12.5px]", level === "warn" ? "bg-warning-soft text-warning" : "bg-danger-soft text-danger")} role="status">
          <span className="inline-flex min-w-0 flex-1 items-center gap-1.5">
            <AlertTriangle className="size-3.5 shrink-0" />
            <span className="truncate">{level === "over" ? "This request exceeds the model's context window." : level === "critical" ? `Context almost full (${pct}%). Answers may be cut off.` : `Context ${pct}% full — consider trimming.`}</span>
          </span>
          <div className="flex flex-wrap items-center gap-1.5">
            <Button size="xs" variant="outline" onClick={onNewChat} className="bg-bg-elevated">
              <MessageSquarePlus /> New chat
            </Button>
            {onSummarize ? (
              <Button size="xs" variant="outline" onClick={onSummarize} disabled={summarizing} className="bg-bg-elevated">
                {summarizing ? <Loader2 className="animate-spin" /> : <FileText />} {summarizing ? "Summarizing…" : "Summarize context"}
              </Button>
            ) : null}
            {largerModel && onSwitchLarger ? (
              <Button size="xs" variant="outline" onClick={() => onSwitchLarger(largerModel.key)} className="bg-bg-elevated">
                <ArrowUpRight /> Switch to {largerModel.displayName} ({fmtK(largerModel.limits?.contextTokens ?? 0)})
              </Button>
            ) : null}
          </div>
        </div>
      ) : null}
    </div>
  );
}