import { isRazorpayConfigured } from "@/lib/razorpay";
import PaymentsTabs from "@/components/admin/PaymentsTabs";

export default function AdminPaymentSettingsPage() {
  const configured = isRazorpayConfigured();
  const keyId = process.env.RAZORPAY_KEY_ID ?? "";
  const isLiveMode = keyId.startsWith("rzp_live_");
  const maskedKey = keyId ? `${keyId.slice(0, 12)}••••${keyId.slice(-4)}` : "—";

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Payment Settings</h1>
      <p className="mt-1 text-sm text-stone-500">
        Razorpay is the only payment method wired up right now — all methods it offers (UPI, cards, netbanking, wallets) are enabled at checkout.
      </p>

      <PaymentsTabs active="/iv-manage-84x2/payments/settings" />

      <div className="max-w-2xl space-y-4">
        <div className="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 connection</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" : "Not configured"}
            </span>
          </div>
          <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
            <div>
              <p className="text-xs uppercase text-stone-500">Mode</p>
              <p className="mt-0.5 font-medium text-stone-800">
                {!configured ? "—" : isLiveMode ? "Live" : "Test"}
              </p>
            </div>
            <div>
              <p className="text-xs uppercase text-stone-500">Key ID</p>
              <p className="mt-0.5 font-mono text-xs text-stone-700">{maskedKey}</p>
            </div>
          </div>
        </div>

        {configured && !isLiveMode && (
          <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
            You&apos;re in <strong>Test Mode</strong> — no real money moves. Switch to your Live Mode keys in Razorpay and
            update <code className="rounded bg-amber-100 px-1">.env</code> when you&apos;re ready to accept real payments.
          </div>
        )}
        {!configured && (
          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800">
            No Razorpay keys are set — checkout runs in demo mode (orders are recorded but no payment is actually
            collected). Add <code className="rounded bg-red-100 px-1">RAZORPAY_KEY_ID</code> and{" "}
            <code className="rounded bg-red-100 px-1">RAZORPAY_KEY_SECRET</code> to <code className="rounded bg-red-100 px-1">.env</code>.
          </div>
        )}

        <div className="rounded-lg border border-rose-100 bg-white p-4 text-sm text-stone-600">
          <p className="font-medium text-stone-700">Not built yet</p>
          <p className="mt-1">Cash on Delivery is intentionally not enabled — every order is paid online through Razorpay.</p>
        </div>
      </div>
    </div>
  );
}