import { createFileRoute, Link } from "@tanstack/react-router";
import { useCustomer, useListPlans } from "autumn-js/react";
import { trackEvent } from "@executor-js/react/api/analytics";
import { Button } from "@executor-js/react/components/button";
import { Badge } from "@executor-js/react/components/badge";
import { PageContainer, PageHeader } from "@executor-js/react/components/page";

type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];

export const Route = createFileRoute("/{-$orgSlug}/billing")({
  component: BillingPage,
});

const PLAN_TAGLINES: Record<string, string> = {
  free: "Free for up to 3 members",
  team: "$15 per member per month",
  enterprise: "Custom enterprise agreement",
};

function BillingPage() {
  const { data: customer, openCustomerPortal, isLoading: customerLoading } = useCustomer();
  const { data: plans, isLoading: plansLoading } = useListPlans();

  if (customerLoading || plansLoading) {
    return (
      <PageContainer>
        <div className="mb-10">
          <div className="h-8 w-28 animate-pulse rounded bg-muted" />
        </div>
        <div className="h-16 animate-pulse rounded-lg bg-muted" />
      </PageContainer>
    );
  }

  const allPlans: Plan[] = plans ?? [];
  const activePlan = allPlans.find(
    (p) => p.customerEligibility?.status === "active" && p.id !== "free",
  );
  const scheduledPlan = allPlans.find(
    (p) => p.customerEligibility?.status === "scheduled" && p.id !== "free",
  );
  const isCanceling = activePlan?.customerEligibility?.canceling ?? false;
  const isSwitching = isCanceling && scheduledPlan != null;
  const isTrialing = activePlan?.customerEligibility?.trialing ?? false;

  const displayPlan = isSwitching ? scheduledPlan : activePlan;
  const planId = displayPlan?.id ?? "free";
  const planName = displayPlan?.name ?? "Free";
  const tagline = PLAN_TAGLINES[planId] ?? "";

  const sub = customer?.subscriptions?.find(
    (s) =>
      s.planId === (activePlan?.id ?? "free") && (s.status === "active" || s.status === "trialing"),
  );

  const executions = customer?.balances?.executions;
  const members = customer?.balances?.members;

  return (
    <PageContainer>
      <PageHeader title="Billing" />

      {/* Current plan */}
      <div className="flex items-center justify-between py-4">
        <div>
          <div className="flex items-center gap-2">
            <p className="text-sm font-medium text-foreground leading-none">{planName}</p>
            {isSwitching && <Badge className="bg-muted text-muted-foreground">Switching</Badge>}
            {isCanceling && !isSwitching && (
              <Badge className="bg-muted text-muted-foreground">Canceling</Badge>
            )}
            {isTrialing && !isCanceling && (
              <Badge className="bg-primary/10 text-primary">Free trial</Badge>
            )}
          </div>
          <p className="mt-1 text-xs text-muted-foreground leading-none">
            {isSwitching && sub?.currentPeriodEnd
              ? `Starts ${new Date(sub.currentPeriodEnd).toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}`
              : isCanceling && sub?.currentPeriodEnd
                ? `Access until ${new Date(sub.currentPeriodEnd).toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}`
                : isTrialing && sub?.currentPeriodEnd
                  ? `Trial ends, then billing starts ${new Date(sub.currentPeriodEnd).toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}`
                  : sub?.currentPeriodEnd
                    ? `Renews ${new Date(sub.currentPeriodEnd).toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}`
                    : tagline}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {activePlan && !isCanceling && (
            <Button
              variant="ghost"
              type="button"
              onClick={() => {
                trackEvent("billing_cancel_plan_clicked", { plan_id: planId });
                openCustomerPortal();
              }}
              className="rounded-md px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
            >
              Cancel plan
            </Button>
          )}
          <Link
            to="/{-$orgSlug}/billing/plans"
            onClick={() => trackEvent("billing_manage_opened")}
            className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            Manage
          </Link>
        </div>
      </div>

      {/* Divider */}
      <div className="h-px bg-border/50 my-2" />

      {/* Usage */}
      {members && (
        <div className="py-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm font-medium text-foreground">Members</p>
            <p className="text-sm tabular-nums text-muted-foreground">
              {members.usage.toLocaleString()}
              {!members.unlimited && (
                <span className="text-muted-foreground">
                  {" / "}
                  {members.granted.toLocaleString()}
                </span>
              )}
            </p>
          </div>
        </div>
      )}

      {executions && (
        <div className="py-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm font-medium text-foreground">Executions</p>
            <p className="text-sm tabular-nums text-muted-foreground">
              {executions.usage.toLocaleString()}
              {!executions.unlimited && (
                <span className="text-muted-foreground">
                  {" / "}
                  {executions.granted.toLocaleString()} this month
                </span>
              )}
            </p>
          </div>
          {!executions.unlimited && executions.granted > 0 && (
            <div className="h-1.5 w-full overflow-hidden rounded-full bg-border">
              <div
                className="h-full rounded-full bg-primary transition-all duration-300"
                style={
                  {
                    "--progress": `${Math.min(100, (executions.usage / executions.granted) * 100)}%`,
                    width: "var(--progress)",
                  } as React.CSSProperties
                }
              />
            </div>
          )}
        </div>
      )}
    </PageContainer>
  );
}