Epicure/apps/web/components/admin/feature-flags-form.tsx

"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Switch } from "@/components/ui/switch";

type Tier = "free" | "pro" | "family";

type FeatureDef = { key: string; label: string; description: string };

type Matrix = Record<string, Record<Tier, boolean>>;

const TIER_LABELS: Record<Tier, string> = { free: "Free", pro: "Pro", family: "Family" };
const TIERS: Tier[] = ["free", "pro", "family"];

export function FeatureFlagsForm({
  features,
  initialMatrix,
}: {
  features: FeatureDef[];
  initialMatrix: Matrix;
}) {
  const [matrix, setMatrix] = useState<Matrix>(initialMatrix);
  const [saving, setSaving] = useState<string | null>(null);

  async function toggle(featureKey: string, tier: Tier, enabled: boolean) {
    const cellKey = `${featureKey}:${tier}`;
    setSaving(cellKey);
    const prev = matrix[featureKey]![tier];
    setMatrix((m) => ({ ...m, [featureKey]: { ...m[featureKey]!, [tier]: enabled } }));
    try {
      const res = await fetch("/api/v1/admin/feature-flags", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ featureKey, tier, enabled }),
      });
      if (!res.ok) throw new Error();
    } catch {
      setMatrix((m) => ({ ...m, [featureKey]: { ...m[featureKey]!, [tier]: prev } }));
      toast.error("Failed to update feature flag");
    } finally {
      setSaving(null);
    }
  }

  return (
    <section className="rounded-xl border p-6 space-y-4">
      <div>
        <h2 className="font-semibold text-lg">Feature Toggles</h2>
        <p className="text-sm text-muted-foreground mt-1">
          Disable a feature for a tier to hide it for that tier&apos;s users (most features hide entirely; a few show a locked/upgrade state instead — see each feature&apos;s actual behavior in the app).
        </p>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left border-b">
              <th className="py-2 pr-4 font-medium text-muted-foreground">Feature</th>
              {TIERS.map((tier) => (
                <th key={tier} className="py-2 px-4 font-medium text-muted-foreground text-center">{TIER_LABELS[tier]}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {features.map((f) => (
              <tr key={f.key} className="border-b last:border-0">
                <td className="py-3 pr-4">
                  <p className="font-medium">{f.label}</p>
                  <p className="text-xs text-muted-foreground">{f.description}</p>
                </td>
                {TIERS.map((tier) => (
                  <td key={tier} className="py-3 px-4 text-center">
                    <Switch
                      checked={matrix[f.key]?.[tier] ?? true}
                      disabled={saving === `${f.key}:${tier}`}
                      onCheckedChange={(checked) => { void toggle(f.key, tier, checked); }}
                    />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}