"use client";
import * as React from "react";
import { Sparkles, Wand2 } from "lucide-react";
import type { RouteResult, RouterMode } from "@/lib/client/router";
import { ROUTER_MODES, explainRoute } from "@/lib/client/router";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Segmented } from "@/components/ui/segmented";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDERS } from "@/lib/client/providers";
import { ModelPickerLauncher } from "./model-launcher";
import { cn, formatTokens } from "@/lib/utils";

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

/**
 * Smart Router recommendation shown before sending when the AUTO model is selected.
 * Transparent by design: recommendation + why + estimated cost + alternatives. Nothing is sent
 * until the user taps "Use recommendation" or picks a model.
 */
export function RouterCard({ open, onOpenChange, result, mode, onModeChange, onUse, alwaysAuto, onAlwaysAutoChange }: { open: boolean; onOpenChange: (o: boolean) => void; result: RouteResult | null; mode: RouterMode; onModeChange: (m: RouterMode) => void; onUse: (modelKey: string) => void; alwaysAuto: boolean; onAlwaysAutoChange: (v: boolean) => void }) {
  const rec = result?.recommended ?? null;
  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title={
        <span className="inline-flex items-center gap-2">
          <Wand2 className="size-4 text-accent" /> Smart Router
        </span>
      }
      description={result ? `Detected: ${result.analysis.signals.length ? result.analysis.signals.join(" · ") : `${result.analysis.task} prompt`} · ~${formatTokens(result.analysis.inputTokens)} input tokens` : undefined}
      size="md"
      footer={
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <label className="flex min-h-[44px] items-center gap-2 text-[13px] text-fg-muted sm:min-h-0 sm:mr-auto">
            <Switch size="sm" checked={alwaysAuto} onCheckedChange={onAlwaysAutoChange} aria-label="Always auto-route" />
            Always auto-route (don&apos;t ask again)
          </label>
          <div className="flex gap-2">
            <ModelPickerLauncher onChange={onUse} label="Choose another" className="flex-1 sm:flex-none" variant="outline" />
            <Button variant="accent" className="flex-1 sm:flex-none" disabled={!rec} onClick={() => rec && onUse(rec.model.key)}>
              <Sparkles /> Use recommendation
            </Button>
          </div>
        </div>
      }
    >
      <div className="space-y-4 pt-1">
        <Segmented<RouterMode> value={mode} onChange={onModeChange} size="sm" ariaLabel="Routing mode" className="max-w-full" options={ROUTER_MODES.map((m) => ({ value: m.value, label: m.label }))} />
        {rec ? (
          <button type="button" onClick={() => onUse(rec.model.key)} className="flex w-full items-start gap-3 rounded-xl border border-accent/50 bg-accent-soft/40 p-3 text-left transition-colors hover:bg-accent-soft/70">
            <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-bg-elevated">
              <ProviderIcon provider={rec.model.provider} size={16} />
            </span>
            <span className="min-w-0 flex-1">
              <span className="block text-[11px] font-medium uppercase tracking-wide text-accent">Recommended</span>
              <span className="block truncate text-[15px] font-semibold">{rec.model.displayName}</span>
              <span className="block text-[12.5px] text-fg-muted">
                {PROVIDERS[rec.model.provider]?.name ?? rec.model.provider} · {explainRoute(rec)}
              </span>
              <span className="mt-1 block text-[12px] tabular-nums text-fg-subtle">
                Estimated cost {usd(rec.estimatedUsd)}
                {rec.model.limits?.contextTokens ? ` · ${formatTokens(rec.model.limits.contextTokens)} context` : ""}
              </span>
            </span>
          </button>
        ) : (
          <p className="rounded-xl border border-dashed border-border p-4 text-center text-[13px] text-fg-muted">No connected model fits this prompt (check vision / file / context requirements).</p>
        )}
        {result?.alternatives.length ? (
          <div>
            <p className="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-fg-subtle">Alternatives</p>
            <ul className="divide-y divide-hairline overflow-hidden rounded-xl border border-border">
              {result.alternatives.map((a) => (
                <li key={a.model.key}>
                  <button type="button" onClick={() => onUse(a.model.key)} className={cn("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">{explainRoute(a)}</span>
                    </span>
                    <span className="shrink-0 text-[12px] tabular-nums text-fg-subtle">{usd(a.estimatedUsd)}</span>
                  </button>
                </li>
              ))}
            </ul>
          </div>
        ) : null}
        <p className="text-[11.5px] text-fg-subtle">Routing is computed locally from your connected models, the prompt and the mode above — no request is sent until you confirm.</p>
      </div>
    </ResponsiveDialog>
  );
}