import { Callout } from "~/ui/Callout";
import { InlineSelect } from "~/ui/Field";
import { useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import type { getBilling } from "~/fns/billing";
import { formatQuantity, meterDef } from "~/lib/meters";
import type { MeterDef } from "~/lib/meters";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";
import { ProgressTrack, quotaTone } from "~/ui/ProgressTrack";
import { StripePanels } from "./StripePanels";
import { useFeatureFlag } from "~/hooks/use-feature-flag";
import { UsageChart } from "./UsageChart";
import { SpendingLimit } from "./SpendingLimit";
import { RatesPanel } from "./RatesPanel";
import { InfoTip } from "./InfoTip";
import { ComputeRatesNote } from "./ComputeRatesNote";
import { AiEndpointForm } from "~/components/ai/AiEndpointForm";

type Billing = Awaited<ReturnType<typeof getBilling>>;
type Meter = Billing["summary"]["meters"][number];

const CATEGORIES = ["compute", "storage", "network", "ai", "ops"] as const;
const CATEGORY_LABELS: Record<string, string> = {
  compute: "Compute",
  storage: "Storage",
  network: "Network",
  ai: "AI",
  ops: "Operations",
};

function unitOf(meter: string): MeterDef["unit"] {
  return meterDef(meter)?.unit ?? "count";
}

function dollars(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
}

function recentPeriods(count = 6): string[] {
  const now = new Date();
  return Array.from({ length: count }, (_, index) => {
    const date = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - index, 1));
    return date.toISOString().slice(0, 7);
  });
}

function MeterRow({ meter }: { meter: Meter }) {
  const limit = meter.hardCap ?? meter.included;
  const percent = limit && limit > 0 ? Math.min(100, (meter.quantity / limit) * 100) : 0;
  const unit = meter.unit as MeterDef["unit"];
  return (
    <li className="space-y-1.5 px-4 py-3" data-meter={meter.meter}>
      <div className="flex flex-wrap items-center gap-2 text-sm">
        <span className="text-kumo-default">{meter.label}</span>
        {meter.hardCap !== null && <Badge>hard cap</Badge>}
        <span className="ml-auto font-mono text-kumo-default" data-testid={`usage-${meter.meter}`}>
          {formatQuantity(unit, meter.quantity)}
          {limit !== null && limit > 0 && <span className="text-kumo-subtle"> / {formatQuantity(unit, limit)}</span>}
          {limit === 0 && meter.hardCap === null && <span className="text-kumo-subtle"> · pay as you go</span>}
        </span>
        {meter.creditCovered > 0 && (
          <span className="text-xs text-kumo-subtle">{formatQuantity(unit, meter.creditCovered)} from credit</span>
        )}
        {meter.overageCents > 0 && (
          <span className="font-mono text-xs text-kumo-warning">{dollars(meter.overageCents)}</span>
        )}
      </div>
      {limit !== null && limit > 0 && <ProgressTrack percent={percent} tone={quotaTone(percent)} />}
    </li>
  );
}

export function BillingPage({ billing, org }: { billing: Billing; org: string | null }) {
  const { summary } = billing;
  const navigate = useNavigate();
  const used = summary.meters.filter((meter) => meter.quantity > 0);
  const showRates = useFeatureFlag("billing-pricing-table", true);
  const [chartMeter, setChartMeter] = useState<string>(used[0]?.meter ?? "compute.runner");
  return (
    <div className="space-y-6">
      {billing.disabled && (
        <Callout tone="danger" role="alert">
          {billing.disabled.message}
        </Callout>
      )}
      <div className="flex flex-wrap items-center gap-3">
        <Heading level={2} size="md">
          Billing and usage
        </Heading>
        <Badge>{summary.plan.label}</Badge>
        <InlineSelect
          label="Billing period"
          className="ml-auto"
          value={summary.period}
          onValueChange={(value) => void navigate({ to: ".", search: { period: value } })}
          options={recentPeriods().map((period) => ({ value: period, label: period }))}
        />
      </div>
      <p className="text-sm text-kumo-subtle">
        Estimated overage this period:{" "}
        <span className="font-mono text-kumo-strong" data-testid="usage-total">
          {dollars(summary.totalCents)}
        </span>
        {summary.spendingLimitCents !== null && <> of a {dollars(summary.spendingLimitCents)} limit</>}. Self-hosted
        runner time is recorded but free. Running editor containers are listed on the{" "}
        {org ? (
          <TextLink to="/orgs/$org/containers" params={{ org }}>
            containers page
          </TextLink>
        ) : (
          <TextLink to="/settings/containers">containers page</TextLink>
        )}
        .
      </p>

      <StripePanels billing={billing} org={org} />

      {CATEGORIES.map((category) => (
        <Panel
          key={category}
          title={
            category === "compute" ? (
              <span className="flex flex-wrap items-center gap-1.5">
                {CATEGORY_LABELS[category]}
                <InfoTip label="How compute is priced">
                  <ComputeRatesNote />
                </InfoTip>
              </span>
            ) : (
              CATEGORY_LABELS[category]
            )
          }
        >
          <ul className="divide-y divide-kumo-hairline">
            {summary.meters
              .filter((meter) => meter.category === category)
              .map((meter) => (
                <MeterRow key={meter.meter} meter={meter} />
              ))}
          </ul>
        </Panel>
      ))}

      <Panel
        title="Over time"
        actions={
          <InlineSelect
            label="Meter"
            value={chartMeter}
            onValueChange={setChartMeter}
            options={summary.meters
              .filter((meter) => meter.quantity > 0 || meter.meter === chartMeter)
              .map((meter) => ({ value: meter.meter, label: meter.label }))}
          />
        }
      >
        <UsageChart days={summary.days} meter={chartMeter} period={summary.period} />
      </Panel>

      <Panel title="By repository">
        {summary.repos.length === 0 ? (
          <EmptyState title="No repository usage yet" icon="chart" />
        ) : (
          <table className="w-full text-sm">
            <tbody className="divide-y divide-kumo-hairline">
              {summary.repos.map((row) => (
                <tr key={`${row.repoId}:${row.meter}`}>
                  <td className="px-4 py-2 text-kumo-default">{row.name ?? row.repoId}</td>
                  <td className="px-4 py-2 text-kumo-subtle">{meterDef(row.meter)?.label ?? row.meter}</td>
                  <td className="px-4 py-2 text-right font-mono text-kumo-default">
                    {formatQuantity(unitOf(row.meter), row.quantity)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Panel>

      {showRates && <RatesPanel billing={billing} />}

      <Panel title="Spending limit">
        <SpendingLimit billing={billing} org={org} />
      </Panel>

      {billing.account.canEdit && (
        <AiEndpointForm
          title="AI endpoint"
          target={{ scope: "account", org }}
          endpoint={billing.ai.endpoint}
          providers={billing.ai.providers}
          fallback="Without an endpoint, AI features run on this instance's model and count toward plan limits and credit. Repositories can override this in their AI settings."
        />
      )}

      <Panel title="Alerts this period">
        {summary.alerts.length === 0 ? (
          <EmptyState title="No alerts" icon="chart" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {summary.alerts.map((alert) => (
              <li key={`${alert.subject}:${alert.threshold}`} className="flex gap-3 px-4 py-2 text-sm">
                <span className="text-kumo-default">
                  {alert.subject === "spend" ? "Spending limit" : (meterDef(alert.subject)?.label ?? alert.subject)}
                </span>
                <Badge>{alert.threshold}%</Badge>
                <span className="ml-auto text-xs text-kumo-subtle">
                  <RelativeTime timestamp={alert.createdAt} />
                </span>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}