import Link from "next/link";
import { isRazorpayConfigured } from "@/lib/razorpay";
import SettingsTabs from "@/components/admin/SettingsTabs";

export default function AdminPaymentGatewaySettingsPage() {
  const configured = isRazorpayConfigured();
  const keyId = process.env.RAZORPAY_KEY_ID ?? "";
  const isLiveMode = keyId.startsWith("rzp_live_");

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Payment Gateway</h1>
      <p className="mt-1 text-sm text-stone-500">Full configuration lives under Payments, to keep it next to the transactions it affects.</p>

      <SettingsTabs active="/iv-manage-84x2/settings/payment-gateway" />

      <div className="max-w-xl rounded-lg border border-rose-100 bg-white p-4">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-stone-700">Razorpay</span>
          <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${configured ? "bg-emerald-100 text-emerald-800" : "bg-red-100 text-red-800"}`}>
            {configured ? `Connected (${isLiveMode ? "Live" : "Test"} Mode)` : "Not configured"}
          </span>
        </div>
        <Link href="/iv-manage-84x2/payments/settings" className="mt-3 inline-block text-sm font-medium text-rose-700 hover:underline">
          Manage in Payments →
        </Link>
      </div>
    </div>
  );
}