ledgerone_frontend/app/settings/subscription/page.tsx

"use client";

import { useEffect, useState } from "react";
import { AppShell } from "../../../components/app-shell";
import { apiFetch } from "@/lib/api";

type ApiResponse<T> = {
  data: T;
  meta: { timestamp: string; version: "v1" };
  error: null | { message: string; code?: string };
};

type SubscriptionData = {
  plan?: string;
  status?: string;
  currentPeriodEnd?: string;
  cancelAtPeriodEnd?: boolean;
};

const PLAN_LABELS: Record<string, string> = {
  free: "Free",
  pro: "Pro",
  elite: "Elite",
};

const PLAN_DESCRIPTIONS: Record<string, string> = {
  free: "Up to 2 active accounts, no paid exports, and core ledger tools.",
  pro: "Up to 10 active accounts, secure exports, Google Sheets sync, and public API access.",
  elite: "Unlimited active accounts with every Pro capability and dedicated support.",
};

const PLAN_PRICES: Record<"pro" | "elite", string> = {
  pro: "$9/mo",
  elite: "Custom",
};

export default function SubscriptionPage() {
  const [sub, setSub] = useState<SubscriptionData | null>(null);
  const [loading, setLoading] = useState(true);
  const [actionStatus, setActionStatus] = useState("");
  const [actionLoading, setActionLoading] = useState(false);

  useEffect(() => {
    apiFetch<SubscriptionData>("/api/billing/subscription")
      .then((res) => {
        if (!res.error) setSub(res.data);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const handleUpgrade = async (plan: string) => {
    setActionLoading(true);
    setActionStatus("Redirecting to checkout...");
    const appUrl = typeof window !== "undefined" ? window.location.origin : "";
    const res = await apiFetch<{ url: string }>("/api/billing/checkout", {
      method: "POST",
      body: JSON.stringify({
        plan,
        successUrl: `${appUrl}/settings/subscription?upgraded=1`,
        cancelUrl: `${appUrl}/settings/subscription`,
      }),
    });
    setActionLoading(false);
    if (res.error || !res.data?.url) {
      setActionStatus(res.error?.message ?? "Could not start checkout. Check Stripe configuration.");
      return;
    }
    window.location.href = res.data.url;
  };

  const handlePortal = async () => {
    setActionLoading(true);
    setActionStatus("Redirecting to billing portal...");
    const appUrl = typeof window !== "undefined" ? window.location.origin : "";
    const res = await apiFetch<{ url: string }>("/api/billing/portal", {
      method: "POST",
      body: JSON.stringify({ returnUrl: `${appUrl}/settings/subscription` }),
    });
    setActionLoading(false);
    if (res.error || !res.data?.url) {
      setActionStatus(res.error?.message ?? "Could not open billing portal. Check Stripe configuration.");
      return;
    }
    window.location.href = res.data.url;
  };

  const currentPlan = sub?.plan ?? "free";
  const planLabel = PLAN_LABELS[currentPlan] ?? currentPlan;
  const planDesc = PLAN_DESCRIPTIONS[currentPlan] ?? "";

  return (
    <AppShell title="Subscription" subtitle="Manage your plan and billing details.">
      <div className="max-w-4xl space-y-6">
        {/* Current plan card */}
        <div className="glass-panel rounded-2xl p-8">
          <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground font-semibold">Current Plan</p>
          {loading ? (
            <div className="mt-4 h-8 w-32 bg-secondary/60 rounded animate-pulse" />
          ) : (
            <>
              <div className="mt-3 flex items-center gap-3">
                <span className="text-3xl font-bold text-foreground">{planLabel}</span>
                {sub?.status && sub.status !== "active" && sub.status !== "free" && (
                  <span className="text-xs font-medium px-2 py-1 rounded-full bg-yellow-500/10 text-yellow-500 capitalize">
                    {sub.status}
                  </span>
                )}
                {(sub?.status === "active" || currentPlan !== "free") && (
                  <span className="text-xs font-medium px-2 py-1 rounded-full bg-primary/10 text-primary">Active</span>
                )}
              </div>
              <p className="mt-2 text-sm text-muted-foreground">{planDesc}</p>
              {sub?.cancelAtPeriodEnd && (
                <p className="mt-2 text-xs text-yellow-500">Cancels at end of billing period.</p>
              )}
              {sub?.currentPeriodEnd && (
                <p className="mt-2 text-xs text-muted-foreground">
                  Current period ends {new Date(sub.currentPeriodEnd).toLocaleDateString()}.
                </p>
              )}
            </>
          )}

          {!loading && currentPlan !== "free" && (
            <button
              onClick={handlePortal}
              disabled={actionLoading}
              className="mt-6 rounded-lg border border-border bg-secondary/30 py-2 px-4 text-sm font-medium text-foreground hover:bg-secondary/60 transition-all disabled:opacity-50"
            >
              Manage Billing
            </button>
          )}
        </div>

        {currentPlan !== "elite" && (
          <div className="grid gap-4 md:grid-cols-2">
            {(["pro", "elite"] as const)
              .filter((plan) => currentPlan === "free" || plan === "elite")
              .map((plan) => (
              <div key={plan} className="glass-panel rounded-2xl p-6 border border-border hover:border-primary/50 transition-all">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-lg font-bold text-foreground">{PLAN_LABELS[plan]}</p>
                    <p className="mt-1 text-sm font-semibold text-primary">{PLAN_PRICES[plan]}</p>
                  </div>
                  {currentPlan === plan && (
                    <span className="rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">Current</span>
                  )}
                </div>
                <p className="mt-3 text-sm text-muted-foreground">{PLAN_DESCRIPTIONS[plan]}</p>
                <button
                  onClick={() => handleUpgrade(plan)}
                  disabled={actionLoading || currentPlan === plan}
                  className="mt-4 w-full rounded-lg bg-primary py-2 px-4 text-sm font-bold text-primary-foreground hover:bg-primary/90 transition-all disabled:opacity-50"
                >
                  {currentPlan === plan ? "Current plan" : `Upgrade to ${PLAN_LABELS[plan]}`}
                </button>
              </div>
            ))}
          </div>
        )}

        {actionStatus && (
          <p className="text-sm text-muted-foreground">{actionStatus}</p>
        )}
      </div>
    </AppShell>
  );
}