"use client";
import * as React from "react";
import { Coins } from "lucide-react";
import type { PolyModel } from "@/lib/client/types";
import type { RouteCandidate } from "@/lib/client/router";
import type { CostEstimate } from "@/lib/client/tokens";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { formatTokens } from "@/lib/utils";

function usd(n: number | null): string {
  if (n === null) return "—";
  return n < 0.01 ? `$${n.toFixed(4)}` : `$${n.toFixed(2)}`;
}

/** Shown before sending when the estimate exceeds `COST_CONFIRM_THRESHOLD_USD`; offers cheaper models with one-tap switching. */
export function CostConfirm({ open, onOpenChange, model, estimate, alternatives, onSend, onSwitch }: { open: boolean; onOpenChange: (o: boolean) => void; model: PolyModel | null | undefined; estimate: CostEstimate | null; alternatives: RouteCandidate[]; onSend: () => void; onSwitch: (modelKey: string) => void }) {
  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title={
        <span className="inline-flex items-center gap-2">
          <Coins className="size-4 text-warning" /> This request may cost ≈ {usd(estimate?.usd ?? null)}
        </span>
      }
      description={model && estimate ? `${model.displayName} · ~${formatTokens(estimate.inputTokens)} input tokens + ~${formatTokens(estimate.outputTokens)} expected output, at provider list prices.` : undefined}
      size="sm"
      footer={
        <div className="flex gap-2 sm:justify-end">
          <Button variant="ghost" className="flex-1 sm:flex-none" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button variant="primary" className="flex-1 sm:flex-none" onClick={onSend}>
            Send anyway
          </Button>
        </div>
      }
    >
      <div className="space-y-3 pt-1">
        {alternatives.length ? (
          <div>
            <p className="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Cheaper alternatives</p>
            <ul className="divide-y divide-hairline overflow-hidden rounded-xl border border-border">
              {alternatives.map((a) => (
                <li key={a.model.key}>
                  <button type="button" onClick={() => onSwitch(a.model.key)} className="flex min-h-[48px] w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-bg-subtle">
                    <ProviderIcon provider={a.model.provider} size={14} />
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-[13.5px] font-medium">{a.model.displayName}</span>
                      <span className="block truncate text-[12px] text-fg-muted">{a.reasons.length ? a.reasons.join(" · ") : "Fits this prompt"}</span>
                    </span>
                    <span className="shrink-0 text-[12.5px] font-medium tabular-nums text-success">≈ {usd(a.estimatedUsd)}</span>
                  </button>
                </li>
              ))}
            </ul>
            <p className="mt-1.5 text-[11.5px] text-fg-subtle">Tap a model to switch and send immediately.</p>
          </div>
        ) : (
          <p className="text-[13px] text-fg-muted">No cheaper connected model can take this prompt (context, vision or file requirements).</p>
        )}
      </div>
    </ResponsiveDialog>
  );
}