import type { getBilling } from "~/fns/billing";
import { formatQuantity, METERS } from "~/lib/meters";
import type { MeterDef } from "~/lib/meters";
import { PRICING_BASIS, rateLabel } from "~/lib/pricing-display";
import { Panel } from "~/ui/Panel";
import { ComputeRatesNote } from "./ComputeRatesNote";
import { InfoTip } from "./InfoTip";

type Billing = Awaited<ReturnType<typeof getBilling>>;

function allowance(unit: MeterDef["unit"], value: number | undefined): string {
  if (value === undefined) return "unlimited";
  if (value === 0) return "none";
  return formatQuantity(unit, value);
}

/** Every priced meter with what each plan includes and the rate past it, all derived from src/lib/pricing.ts. */
export function RatesPanel({ billing }: { billing: Billing }) {
  const { free, pro } = billing.plans;
  const priced = METERS.filter((meter) => rateLabel(meter.id) !== null);
  return (
    <Panel
      title={
        <span className="flex items-center gap-2">
          Pricing
          <span className="text-xs font-normal text-kumo-subtle">
            Cloudflare's cost x {PRICING_BASIS.markup}, metered exactly
          </span>
        </span>
      }
    >
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="text-left text-xs text-kumo-subtle">
            <tr className="border-b border-kumo-hairline">
              <th className="px-4 py-2 font-normal">Usage</th>
              <th className="px-4 py-2 font-normal">{free.label} includes</th>
              <th className="px-4 py-2 font-normal">
                {pro.label} includes (${(pro.priceCents / 100).toFixed(0)}/month)
              </th>
              <th className="px-4 py-2 text-right font-normal">Then</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kumo-hairline">
            {priced.map((meter) => (
              <tr key={meter.id} data-rate={meter.id}>
                <td className="px-4 py-2 text-kumo-default">
                  <div className="flex flex-wrap items-center gap-1.5">
                    {meter.label}
                    {meter.id === "compute.runner" && (
                      <InfoTip label="How compute is priced">
                        <ComputeRatesNote />
                      </InfoTip>
                    )}
                  </div>
                </td>
                <td className="px-4 py-2 font-mono text-kumo-subtle">
                  {allowance(meter.unit, free.included[meter.id])}
                </td>
                <td className="px-4 py-2 font-mono text-kumo-subtle">
                  {allowance(meter.unit, pro.included[meter.id])}
                </td>
                <td className="px-4 py-2 text-right font-mono text-kumo-default">{rateLabel(meter.id)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="border-t border-kumo-hairline px-4 py-2 text-xs text-kumo-subtle">
        The free plan stops at its allowances instead of billing. Bandwidth, git operations, self-hosted runners and
        calls with your own AI key are free.
      </p>
    </Panel>
  );
}