"use client";

/**
 * Admin → Feature Flags
 * ─────────────────────
 * Coming-soon placeholder. A FeatureFlag Prisma model + a per-key
 * editor + per-user / per-brand override rules are the next iteration.
 * Until then, env-var-based flags are managed in vercel.json or via
 * the Vercel dashboard.
 */

import { Flag, Settings, Lock } from "lucide-react";

const KNOWN_ENV_FLAGS: Array<{ key: string; description: string }> = [
  {
    key: "ANTHROPIC_API_KEY",
    description: "Enables every Claude-backed AI feature (AI Strategist, content briefs, recommendations). Without it features fall back to mock responses.",
  },
  {
    key: "OPENAI_API_KEY",
    description: "Secondary LLM provider used as a fallback when Anthropic rate-limits or returns errors.",
  },
  {
    key: "DATAFORSEO_LOGIN / DATAFORSEO_PASSWORD",
    description: "Live SERP + keyword data for Rank Tracker / Competitor Intel / Keyword Research. Without it those features fall back to AI-estimated data.",
  },
  {
    key: "PLATFORM_TELEMETRY_DISABLED",
    description: "Set to \"1\" to silence trackEvent writes globally — useful for noisy local dev.",
  },
  {
    key: "CRON_SECRET",
    description: "Required for every /api/cron/* route. Vercel cron sends this in the Authorization header.",
  },
];

export default function AdminFlagsPage() {
  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
          <Flag className="w-5 h-5 text-slate-700" /> Feature Flags
        </h1>
        <p className="text-slate-500 text-sm mt-1">
          Per-key feature toggles for the platform.
        </p>
      </div>

      {/* Coming-soon banner */}
      <div className="rounded-xl border border-amber-200 bg-amber-50 px-5 py-4 flex items-start gap-3">
        <Lock className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
        <div>
          <p className="text-sm font-bold text-amber-900">In-app feature flags coming soon</p>
          <p className="text-xs text-amber-800/80 mt-0.5 leading-relaxed">
            A FeatureFlag Prisma model + key-value editor + per-brand / per-user override rules
            land in a follow-up iteration. Until then, environment-variable flags are managed in
            Vercel (Project → Settings → Environment Variables).
          </p>
        </div>
      </div>

      {/* Env-var reference */}
      <div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
        <div className="px-4 py-3 border-b border-slate-100 flex items-center gap-2">
          <Settings className="w-4 h-4 text-slate-600" />
          <h2 className="font-bold text-slate-800 text-sm">Active env-var flags</h2>
          <span className="ml-auto text-[10px] text-slate-400">Read-only · edit in Vercel dashboard</span>
        </div>
        <ul className="divide-y divide-slate-100">
          {KNOWN_ENV_FLAGS.map((flag) => (
            <li key={flag.key} className="px-4 py-3">
              <p className="text-xs font-mono font-bold text-slate-800">{flag.key}</p>
              <p className="text-xs text-slate-500 leading-relaxed mt-1">{flag.description}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
