"use client";
import * as React from "react";
import Link from "next/link";
import { ArrowRight, PiggyBank, TrendingDown, TrendingUp, Minus, Info } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Tooltip } from "@/components/ui/tooltip";
import { cn, formatUsd, formatNumber } from "@/lib/utils";
import type { SavingsOpportunity, UsageProjection, UsageKpis } from "./types";

/** "Estimated monthly cost" — daily average over the observed part of the range × 30, plus the trend vs the previous period. */
export function ProjectionCard({ projection, kpis, rangeDays, className }: { projection: UsageProjection; kpis: UsageKpis; rangeDays: number; className?: string }) {
  const trend = projection.costTrendPct;
  const Icon = trend === null ? Minus : trend > 2 ? TrendingUp : trend < -2 ? TrendingDown : Minus;
  const tone = trend === null || Math.abs(trend) <= 2 ? "text-fg-muted" : trend > 0 ? "text-danger" : "text-success";
  const days = projection.observedDays;
  return (
    <section className={cn("panel flex flex-col p-4", className)} aria-label="Projected monthly cost">
      <header className="flex items-start justify-between gap-3">
        <div>
          <h3 className="text-[13px] font-semibold tracking-tight">Estimated monthly cost</h3>
          <p className="text-[11px] text-fg-subtle">If the last {days < 1 ? "hours" : `${Math.round(days)} day${Math.round(days) === 1 ? "" : "s"}`} continued for 30 days</p>
        </div>
        <Tooltip content="Daily average of the estimated cost over the observed part of this range, multiplied by 30. Based on public list prices; your provider invoice may differ.">
          <span className="text-fg-subtle">
            <Info className="size-3.5" />
          </span>
        </Tooltip>
      </header>
      <p className="mt-3 text-[32px] font-semibold leading-none tracking-tight">{formatUsd(projection.estimatedMonthlyCost)}</p>
      <dl className="mt-4 grid grid-cols-2 gap-3 text-xs">
        <div>
          <dt className="text-fg-subtle">Daily average</dt>
          <dd className="mt-0.5 font-medium">{formatUsd(projection.dailyAverageCost, { precise: projection.dailyAverageCost < 0.01 })}</dd>
        </div>
        <div>
          <dt className="text-fg-subtle">This period</dt>
          <dd className="mt-0.5 font-medium">{formatUsd(kpis.costUsd)}</dd>
        </div>
        <div className="col-span-2 flex items-center gap-1.5 border-t border-hairline pt-3">
          <Icon className={cn("size-3.5", tone)} />
          {projection.previous ? (
            <span className="text-fg-muted">
              {trend === null ? (
                <>No spend in the previous {rangeDays}-day period ({formatNumber(projection.previous.requests)} requests).</>
              ) : (
                <>
                  <span className={cn("font-medium", tone)}>
                    {trend > 0 ? "+" : ""}
                    {trend.toFixed(Math.abs(trend) >= 100 ? 0 : 1)}%
                  </span>{" "}
                  vs previous period ({formatUsd(projection.previous.costUsd)})
                </>
              )}
            </span>
          ) : (
            <span className="text-fg-muted">No previous period to compare against.</span>
          )}
        </div>
      </dl>
    </section>
  );
}

/** Savings opportunities computed from real records + registry pricing (top 3). Each row deep-links to the model catalog. */
export function SavingsCard({ savings, className, loading }: { savings: SavingsOpportunity[]; className?: string; loading?: boolean }) {
  const total = savings.reduce((a, s) => a + s.savingsUsd, 0);
  return (
    <section className={cn("panel flex flex-col p-4", className)} aria-label="Savings opportunities">
      <header className="flex items-start justify-between gap-3">
        <div>
          <h3 className="text-[13px] font-semibold tracking-tight">Savings opportunities</h3>
          <p className="text-[11px] text-fg-subtle">Same tokens, cheaper sibling on the same provider</p>
        </div>
        <span className="flex size-8 items-center justify-center rounded-lg bg-success-soft text-success">
          <PiggyBank className="size-4" />
        </span>
      </header>
      {loading ? (
        <p className="mt-4 text-xs text-fg-subtle">Analysing…</p>
      ) : savings.length === 0 ? (
        <div className="mt-4 rounded-lg bg-bg-elevated/60 p-3 text-xs leading-5 text-fg-muted">
          Nothing to save right now. We look for a model on the same provider with the same capabilities that would have cost at least 40 % less for the traffic you actually sent — none qualifies for this period.
        </div>
      ) : (
        <>
          <p className="mt-3 text-[26px] font-semibold leading-none tracking-tight text-success">~{formatUsd(total)}</p>
          <p className="mt-1 text-xs text-fg-subtle">could have been saved in this period</p>
          <ul className="mt-4 space-y-3">
            {savings.map((s) => (
              <li key={`${s.fromModelKey}→${s.toModelKey}`} className="rounded-lg bg-bg-elevated/60 p-3">
                <p className="text-[13px] leading-5">
                  <span className="inline-flex items-center gap-1 align-middle">
                    <ProviderIcon provider={s.provider} size={13} />
                    <span className="font-medium">{s.fromLabel}</span>
                    <ArrowRight className="size-3 text-fg-subtle" />
                    <span className="font-medium">{s.toLabel}</span>
                  </span>
                </p>
                <p className="mt-1 text-xs text-fg-muted">
                  Switching eligible tasks could have saved <span className="font-medium text-success">~{formatUsd(s.savingsUsd)}</span> ({s.savingsPct.toFixed(0)} %) across {formatNumber(s.requests)} request{s.requests === 1 ? "" : "s"}.
                </p>
                <details className="mt-1.5 text-[11px] text-fg-subtle">
                  <summary className="tap cursor-pointer select-none hover:text-fg-muted">Why this sibling?</summary>
                  <p className="mt-1 leading-4">{s.rationale}</p>
                  <p className="mt-1">
                    {formatUsd(s.currentCostUsd)} at {s.fromLabel} list prices vs {formatUsd(s.alternativeCostUsd)} at {s.toLabel}.
                  </p>
                </details>
                <Link href={`/app/models?q=${encodeURIComponent(s.toLabel)}`} className="tap mt-1.5 inline-flex items-center gap-1 text-xs font-medium text-accent hover:underline">
                  Compare in the catalog <ArrowRight className="size-3" />
                </Link>
              </li>
            ))}
          </ul>
        </>
      )}
      <p className="mt-3 text-[11px] leading-4 text-fg-subtle">Estimates only — quality differs between tiers. Reasoning, vision, tools and structured output must all be supported by the sibling; context windows are checked against your average prompt.</p>
    </section>
  );
}