Epicure/apps/web/components/admin/tier-limits-form.tsx

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

const UNLIMITED = -1;

const FIELDS = [
  { key: "maxRecipes", label: "Max Recipes" },
  { key: "aiCallsPerMonth", label: "AI Calls / Month" },
  { key: "storageMb", label: "Storage (MB)" },
  { key: "maxPublicRecipes", label: "Max Public Recipes" },
] as const;

const STRIPE_FIELDS = [
  { key: "stripeProductId", label: "Stripe Product ID", placeholder: "prod_..." },
  { key: "stripePriceIdMonthly", label: "Monthly Price ID", placeholder: "price_..." },
  { key: "stripePriceIdYearly", label: "Yearly Price ID", placeholder: "price_... (optional)" },
] as const;

type TierDefinition = {
  tier: string;
  maxRecipes: number;
  aiCallsPerMonth: number;
  storageMb: number;
  maxPublicRecipes: number;
  stripeProductId: string | null;
  stripePriceIdMonthly: string | null;
  stripePriceIdYearly: string | null;
};

export function TierLimitsForm({ tierDefinition }: { tierDefinition: TierDefinition }) {
  const [values, setValues] = useState<Record<string, number>>({
    maxRecipes: tierDefinition.maxRecipes,
    aiCallsPerMonth: tierDefinition.aiCallsPerMonth,
    storageMb: tierDefinition.storageMb,
    maxPublicRecipes: tierDefinition.maxPublicRecipes,
  });
  const [stripeValues, setStripeValues] = useState<Record<string, string>>({
    stripeProductId: tierDefinition.stripeProductId ?? "",
    stripePriceIdMonthly: tierDefinition.stripePriceIdMonthly ?? "",
    stripePriceIdYearly: tierDefinition.stripePriceIdYearly ?? "",
  });
  // Remembers the last finite value per field so toggling "Unlimited" off restores it.
  const [lastFinite, setLastFinite] = useState<Record<string, number>>({
    maxRecipes: tierDefinition.maxRecipes === UNLIMITED ? 0 : tierDefinition.maxRecipes,
    aiCallsPerMonth: tierDefinition.aiCallsPerMonth === UNLIMITED ? 0 : tierDefinition.aiCallsPerMonth,
    storageMb: tierDefinition.storageMb === UNLIMITED ? 0 : tierDefinition.storageMb,
    maxPublicRecipes: tierDefinition.maxPublicRecipes === UNLIMITED ? 0 : tierDefinition.maxPublicRecipes,
  });
  const [saving, setSaving] = useState(false);

  async function handleSave() {
    setSaving(true);
    try {
      const res = await fetch(`/api/v1/admin/tiers/${tierDefinition.tier}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...values, ...stripeValues }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error((data as { error?: string }).error ?? "Save failed");
      }
      toast.success(`${tierDefinition.tier} tier limits saved`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Failed to save");
    } finally {
      setSaving(false);
    }
  }

  return (
    <section className="rounded-xl border p-6 space-y-4">
      <h2 className="font-semibold text-lg capitalize">{tierDefinition.tier}</h2>

      <div className="grid grid-cols-2 gap-4">
        {FIELDS.map(({ key, label }) => {
          const isUnlimited = values[key] === UNLIMITED;
          return (
            <div key={key} className="space-y-1.5">
              <div className="flex items-center justify-between">
                <Label htmlFor={`${tierDefinition.tier}-${key}`}>{label}</Label>
                <div className="flex items-center gap-1.5">
                  <Switch
                    id={`${tierDefinition.tier}-${key}-unlimited`}
                    size="sm"
                    checked={isUnlimited}
                    onCheckedChange={(checked) => {
                      if (checked) {
                        setLastFinite((prev) => ({ ...prev, [key]: values[key] ?? 0 }));
                        setValues((prev) => ({ ...prev, [key]: UNLIMITED }));
                      } else {
                        setValues((prev) => ({ ...prev, [key]: lastFinite[key] ?? 0 }));
                      }
                    }}
                  />
                  <Label htmlFor={`${tierDefinition.tier}-${key}-unlimited`} className="text-xs text-muted-foreground">
                    Unlimited
                  </Label>
                </div>
              </div>
              <Input
                id={`${tierDefinition.tier}-${key}`}
                type="number"
                min={0}
                disabled={isUnlimited}
                value={isUnlimited ? "" : values[key]}
                placeholder={isUnlimited ? "Unlimited" : undefined}
                onChange={(e) =>
                  setValues((prev) => ({ ...prev, [key]: Number(e.target.value) }))
                }
              />
            </div>
          );
        })}
      </div>

      {tierDefinition.tier !== "free" && (
        <div className="space-y-3 border-t pt-4">
          <p className="text-xs font-medium text-muted-foreground">Stripe (maps a checkout Price back to this tier)</p>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {STRIPE_FIELDS.map(({ key, label, placeholder }) => (
              <div key={key} className="space-y-1.5">
                <Label htmlFor={`${tierDefinition.tier}-${key}`} className="text-xs">{label}</Label>
                <Input
                  id={`${tierDefinition.tier}-${key}`}
                  value={stripeValues[key] ?? ""}
                  placeholder={placeholder}
                  onChange={(e) => setStripeValues((prev) => ({ ...prev, [key]: e.target.value }))}
                  className="font-mono text-sm"
                />
              </div>
            ))}
          </div>
        </div>
      )}

      <Button onClick={() => { void handleSave(); }} disabled={saving} size="sm">
        {saving ? "Saving…" : "Save"}
      </Button>
    </section>
  );
}