"use client";

import type { ReactNode } from "react";
import { useTranslations } from "next-intl";
import {
  Loader2,
  TestTube,
  Banknote,
  CheckCircle2,
  CircleDashed,
  Webhook,
} from "lucide-react";
import {
  StripeLogo,
  PayPalLogo,
  RazorpayLogo,
  PaystackLogo,
  PesapalLogo,
  IotecLogo,
  CashOnDeliveryLogo,
} from "./payment-brand-logos";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { SecretInput } from "@/components/admin/settings/fields/secret-input";
import { useCredentialMeta } from "@/components/admin/settings/fields/use-credential-meta";
import { EnvSourceHint } from "@/components/admin/settings/fields/env-source-hint";
import type { Settings } from "@/components/admin/settings/types";
import { StickySaveFooter } from "./sticky-save-footer";
import { SettingsTabHeader } from "./settings-tab-header";
import { cn } from "@/lib/utils";

type ProviderId =
  | "stripe"
  | "paypal"
  | "razorpay"
  | "paystack"
  | "pesapal"
  | "iotec";

function ProviderCard(props: {
  logo: ReactNode;
  title: string;
  description: string;
  enabled: boolean;
  onToggle: (checked: boolean) => void;
  badges?: ReactNode;
  testButton?: ReactNode;
  children?: ReactNode;
}) {
  return (
    <div
      className={cn(
        "rounded-lg border bg-card text-card-foreground transition-colors",
        props.enabled ? "border-border" : "border-dashed",
      )}
    >
      <div className="flex items-center gap-3 px-5 py-4">
        {props.logo}
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h3 className="text-sm font-semibold">{props.title}</h3>
            {props.badges}
          </div>
          <p className="text-xs text-muted-foreground">{props.description}</p>
        </div>
        <Switch
          checked={props.enabled}
          onCheckedChange={props.onToggle}
          aria-label={`Enable ${props.title}`}
        />
      </div>
      {props.enabled && (props.children || props.testButton) && (
        <div className="border-t px-5 py-5 space-y-4">
          {props.children}
          {props.testButton && (
            <div className="flex justify-end pt-1">{props.testButton}</div>
          )}
        </div>
      )}
    </div>
  );
}

function StatusBadge(props: { configured: boolean }) {
  if (props.configured) {
    return (
      <Badge
        variant="secondary"
        className="gap-1 bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/15 dark:text-emerald-400"
      >
        <CheckCircle2 className="h-3 w-3" />
        Configured
      </Badge>
    );
  }
  return (
    <Badge variant="outline" className="gap-1 text-muted-foreground">
      <CircleDashed className="h-3 w-3" />
      Not configured
    </Badge>
  );
}

function ModeBadge(props: { mode: "test" | "live" | "sandbox" }) {
  if (props.mode === "live") {
    return (
      <Badge className="bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/15 dark:text-emerald-400">
        Live
      </Badge>
    );
  }
  return (
    <Badge
      variant="secondary"
      className="bg-amber-500/10 text-amber-600 hover:bg-amber-500/15 dark:text-amber-400"
    >
      {props.mode === "sandbox" ? "Sandbox" : "Test"}
    </Badge>
  );
}

export function PaymentSettingsTab(props: {
  settings: Settings;
  isSaving: boolean;
  isDirty: boolean;
  isTestingPayment: boolean;
  isRegisteringPesapalIpn: boolean;
  updateNestedField: (path: string, value: unknown) => void;
  onSave: () => void | Promise<unknown>;
  onTestConnection: (provider: ProviderId) => void | Promise<unknown>;
  onRegisterPesapalIpn: () => void | Promise<unknown>;
}) {
  const t = useTranslations();
  const {
    settings,
    isSaving,
    isDirty,
    isTestingPayment,
    isRegisteringPesapalIpn,
    updateNestedField,
    onSave,
    onTestConnection,
    onRegisterPesapalIpn,
  } = props;

  const stripe = settings.payment?.stripe;
  const razorpay = settings.payment?.razorpay;
  const paystack = settings.payment?.paystack;
  const pesapal = settings.payment?.pesapal;
  const iotec = settings.payment?.iotec;
  const paypal = settings.payment?.paypal;
  const cod = settings.payment?.cod;

  // Credential values are stripped server-side; presence + masked previews and
  // the test/live key mode arrive via _meta instead.
  const cred = useCredentialMeta(settings);
  const keyModes = settings._meta?.keyModes;
  const stripeMode = keyModes?.stripe ?? null;
  const razorpayMode = keyModes?.razorpay ?? null;
  const paystackMode = keyModes?.paystack ?? null;
  const paypalMode = paypal?.mode === "live" ? "live" : "sandbox";
  const pesapalMode = pesapal?.mode === "live" ? "live" : "sandbox";
  const iotecMode = iotec?.mode === "live" ? "live" : "sandbox";

  // Per-field .env fallback presence (DB still wins when a value is saved).
  const env = settings._meta?.envSources?.payment;

  const stripeConfigured = Boolean(
    (cred("payment.stripe.publishableKey").set || env?.stripe.publishableKey) &&
      (cred("payment.stripe.secretKey").set || env?.stripe.secretKey),
  );
  const razorpayConfigured = Boolean(
    (cred("payment.razorpay.keyId").set || env?.razorpay.keyId) &&
      (cred("payment.razorpay.keySecret").set || env?.razorpay.keySecret),
  );
  const paystackConfigured = Boolean(
    (cred("payment.paystack.publicKey").set || env?.paystack.publicKey) &&
      (cred("payment.paystack.secretKey").set || env?.paystack.secretKey),
  );
  const paypalConfigured = Boolean(
    (cred("payment.paypal.clientId").set || env?.paypal.clientId) &&
      (cred("payment.paypal.clientSecret").set || env?.paypal.clientSecret),
  );
  const pesapalConfigured = Boolean(
    (cred("payment.pesapal.consumerKey").set || env?.pesapal.consumerKey) &&
      (cred("payment.pesapal.consumerSecret").set ||
        env?.pesapal.consumerSecret) &&
      (cred("payment.pesapal.ipnId").set || env?.pesapal.ipnId),
  );
  const iotecConfigured = Boolean(
    (cred("payment.iotec.clientId").set || env?.iotec.clientId) &&
      (cred("payment.iotec.clientSecret").set || env?.iotec.clientSecret) &&
      (cred("payment.iotec.walletId").set || env?.iotec.walletId),
  );

  const renderTestButton = (provider: ProviderId, enabled: boolean) => {
    if (!enabled) return null;
    return (
      <Button
        type="button"
        variant="outline"
        size="sm"
        onClick={() => onTestConnection(provider)}
        disabled={isSaving || isTestingPayment}
      >
        {isTestingPayment ? (
          <Loader2 className="h-4 w-4 animate-spin mr-2" />
        ) : (
          <TestTube className="h-4 w-4 mr-2" />
        )}
        Test connection
      </Button>
    );
  };

  const enabledCount = [
    stripe?.enabled,
    razorpay?.enabled,
    paystack?.enabled,
    pesapal?.enabled,
    paypal?.enabled,
    cod?.enabled,
  ].filter(Boolean).length;

  return (
    <div className="relative">
      <div className="space-y-6">
        <SettingsTabHeader
          title={t("admin.settings.payment.title")}
          description={t("admin.settings.payment.description")}
          meta={<Badge variant="secondary">{enabledCount} active</Badge>}
        />

        {/* Stripe */}
        <ProviderCard
          logo={<StripeLogo />}
          title={t("admin.settings.payment.stripe.title")}
          description="Accept credit & debit cards globally"
          enabled={stripe?.enabled ?? false}
          onToggle={(c) => updateNestedField("payment.stripe.enabled", c)}
          badges={
            <>
              <StatusBadge configured={stripeConfigured} />
              {stripeMode && <ModeBadge mode={stripeMode} />}
            </>
          }
          testButton={renderTestButton("stripe", stripe?.enabled ?? false)}
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="stripePublishableKey"
                label={t("admin.settings.payment.stripePublishableKey")}
                value={stripe?.publishableKey || ""}
                onChange={(v) =>
                  updateNestedField("payment.stripe.publishableKey", v)
                }
                secretSet={cred("payment.stripe.publishableKey").set}
                maskedHint={cred("payment.stripe.publishableKey").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="pk_live_... or pk_test_..."
                helperText="Saved keys are not shown again for security."
                revealTyped
              />
              <EnvSourceHint show={Boolean(env?.stripe.publishableKey)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="stripeSecretKey"
                label={t("admin.settings.payment.stripe.secretKey")}
                value={stripe?.secretKey || ""}
                onChange={(v) => updateNestedField("payment.stripe.secretKey", v)}
                secretSet={cred("payment.stripe.secretKey").set}
                maskedHint={cred("payment.stripe.secretKey").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="sk_live_... or sk_test_..."
                helperText="Saved keys are not shown again for security."
              />
              <EnvSourceHint show={Boolean(env?.stripe.secretKey)} />
            </div>
          </div>
          <SecretInput
            id="stripeWebhookSecret"
            label={t("admin.settings.payment.stripeWebhookSecret")}
            value={stripe?.webhookSecret || ""}
            onChange={(v) =>
              updateNestedField("payment.stripe.webhookSecret", v)
            }
            secretSet={cred("payment.stripe.webhookSecret").set}
            maskedHint={cred("payment.stripe.webhookSecret").hint}
            placeholderWhenSet="Saved (leave blank to keep)"
            placeholderWhenUnset="whsec_..."
            helperText="Required for handling payment events. Get this from Stripe Dashboard → Developers → Webhooks."
          />
          <EnvSourceHint show={Boolean(env?.stripe.webhookSecret)} />
        </ProviderCard>

        {/* PayPal */}
        <ProviderCard
          logo={<PayPalLogo />}
          title={t("admin.settings.payment.paypal.title")}
          description="Trusted global checkout & wallet"
          enabled={paypal?.enabled ?? false}
          onToggle={(c) => updateNestedField("payment.paypal.enabled", c)}
          badges={
            <>
              <StatusBadge configured={paypalConfigured} />
              <ModeBadge mode={paypalMode} />
            </>
          }
          testButton={renderTestButton("paypal", paypal?.enabled ?? false)}
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="paypalClientId"
                label={t("admin.settings.payment.paypalClientId")}
                value={paypal?.clientId || ""}
                onChange={(v) => updateNestedField("payment.paypal.clientId", v)}
                secretSet={cred("payment.paypal.clientId").set}
                maskedHint={cred("payment.paypal.clientId").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="PayPal client ID"
                helperText="Saved keys are not shown again for security."
                revealTyped
              />
              <EnvSourceHint show={Boolean(env?.paypal.clientId)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="paypalClientSecret"
                label={t("admin.settings.payment.paypal.clientSecret")}
                value={paypal?.clientSecret || ""}
                onChange={(v) =>
                  updateNestedField("payment.paypal.clientSecret", v)
                }
                secretSet={cred("payment.paypal.clientSecret").set}
                maskedHint={cred("payment.paypal.clientSecret").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                helperText="Saved secrets are not shown again for security."
              />
              <EnvSourceHint show={Boolean(env?.paypal.clientSecret)} />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="paypalMode">
                {t("admin.settings.payment.paypalMode")}
              </Label>
              <Select
                value={paypal?.mode}
                onValueChange={(v) => updateNestedField("payment.paypal.mode", v)}
              >
                <SelectTrigger id="paypalMode">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="sandbox">
                    {t("admin.settings.payment.paypalSandbox")}
                  </SelectItem>
                  <SelectItem value="live">
                    {t("admin.settings.payment.paypalLive")}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <SecretInput
                id="paypalWebhookId"
                label={t("admin.settings.payment.paypalWebhookId")}
                value={paypal?.webhookId || ""}
                onChange={(v) =>
                  updateNestedField("payment.paypal.webhookId", v)
                }
                secretSet={cred("payment.paypal.webhookId").set}
                maskedHint={cred("payment.paypal.webhookId").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="PayPal webhook ID"
                revealTyped
              />
            </div>
          </div>
        </ProviderCard>

        {/* Razorpay */}
        <ProviderCard
          logo={<RazorpayLogo />}
          title="Razorpay"
          description="Popular payment gateway for India"
          enabled={razorpay?.enabled ?? false}
          onToggle={(c) => updateNestedField("payment.razorpay.enabled", c)}
          badges={
            <>
              <StatusBadge configured={razorpayConfigured} />
              {razorpayMode && <ModeBadge mode={razorpayMode} />}
            </>
          }
          testButton={renderTestButton(
            "razorpay",
            razorpay?.enabled ?? false,
          )}
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="razorpayKeyId"
                label="Key ID"
                value={razorpay?.keyId || ""}
                onChange={(v) => updateNestedField("payment.razorpay.keyId", v)}
                secretSet={cred("payment.razorpay.keyId").set}
                maskedHint={cred("payment.razorpay.keyId").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="rzp_test_... or rzp_live_..."
                helperText="Saved keys are not shown again for security."
                revealTyped
              />
              <EnvSourceHint show={Boolean(env?.razorpay.keyId)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="razorpayKeySecret"
                label="Key Secret"
                value={razorpay?.keySecret || ""}
                onChange={(v) =>
                  updateNestedField("payment.razorpay.keySecret", v)
                }
                secretSet={cred("payment.razorpay.keySecret").set}
                maskedHint={cred("payment.razorpay.keySecret").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="Key secret"
                helperText="Saved keys are not shown again for security."
              />
              <EnvSourceHint show={Boolean(env?.razorpay.keySecret)} />
            </div>
          </div>
          <SecretInput
            id="razorpayWebhookSecret"
            label="Webhook Secret"
            value={razorpay?.webhookSecret || ""}
            onChange={(v) =>
              updateNestedField("payment.razorpay.webhookSecret", v)
            }
            secretSet={cred("payment.razorpay.webhookSecret").set}
            maskedHint={cred("payment.razorpay.webhookSecret").hint}
            placeholderWhenSet="Saved (leave blank to keep)"
            placeholderWhenUnset="Webhook secret"
            helperText="Saved secrets are not shown again for security."
          />
          <EnvSourceHint show={Boolean(env?.razorpay.webhookSecret)} />
        </ProviderCard>

        {/* Paystack */}
        <ProviderCard
          logo={<PaystackLogo />}
          title="Paystack"
          description="Modern payments for Africa"
          enabled={paystack?.enabled ?? false}
          onToggle={(c) => updateNestedField("payment.paystack.enabled", c)}
          badges={
            <>
              <StatusBadge configured={paystackConfigured} />
              {paystackMode && <ModeBadge mode={paystackMode} />}
            </>
          }
          testButton={renderTestButton(
            "paystack",
            paystack?.enabled ?? false,
          )}
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="paystackPublicKey"
                label="Public Key"
                value={paystack?.publicKey || ""}
                onChange={(v) =>
                  updateNestedField("payment.paystack.publicKey", v)
                }
                secretSet={cred("payment.paystack.publicKey").set}
                maskedHint={cred("payment.paystack.publicKey").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="pk_test_... or pk_live_..."
                helperText="Saved keys are not shown again for security."
                revealTyped
              />
              <EnvSourceHint show={Boolean(env?.paystack.publicKey)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="paystackSecretKey"
                label="Secret Key"
                value={paystack?.secretKey || ""}
                onChange={(v) =>
                  updateNestedField("payment.paystack.secretKey", v)
                }
                secretSet={cred("payment.paystack.secretKey").set}
                maskedHint={cred("payment.paystack.secretKey").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="sk_test_... or sk_live_..."
                helperText="Saved keys are not shown again for security."
              />
              <EnvSourceHint show={Boolean(env?.paystack.secretKey)} />
            </div>
          </div>
        </ProviderCard>

        {/* Pesapal */}
        <ProviderCard
          logo={<PesapalLogo />}
          title="Pesapal"
          description="Mobile money and card payments across East Africa"
          enabled={pesapal?.enabled ?? false}
          onToggle={(checked) =>
            updateNestedField("payment.pesapal.enabled", checked)
          }
          badges={
            <>
              <StatusBadge configured={pesapalConfigured} />
              <ModeBadge mode={pesapalMode} />
            </>
          }
          testButton={
            <div className="flex flex-wrap justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => onRegisterPesapalIpn()}
                disabled={
                  isSaving ||
                  isDirty ||
                  isTestingPayment ||
                  isRegisteringPesapalIpn
                }
              >
                {isRegisteringPesapalIpn ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <Webhook className="mr-2 h-4 w-4" />
                )}
                Register IPN
              </Button>
              {renderTestButton("pesapal", pesapal?.enabled ?? false)}
            </div>
          }
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="pesapalConsumerKey"
                label="Consumer Key"
                value={pesapal?.consumerKey || ""}
                onChange={(value) =>
                  updateNestedField("payment.pesapal.consumerKey", value)
                }
                secretSet={cred("payment.pesapal.consumerKey").set}
                maskedHint={cred("payment.pesapal.consumerKey").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="Pesapal consumer key"
                helperText="Saved keys are not shown again for security."
                revealTyped
              />
              <EnvSourceHint show={Boolean(env?.pesapal.consumerKey)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="pesapalConsumerSecret"
                label="Consumer Secret"
                value={pesapal?.consumerSecret || ""}
                onChange={(value) =>
                  updateNestedField("payment.pesapal.consumerSecret", value)
                }
                secretSet={cred("payment.pesapal.consumerSecret").set}
                maskedHint={cred("payment.pesapal.consumerSecret").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="Pesapal consumer secret"
                helperText="Saved secrets are not shown again for security."
              />
              <EnvSourceHint show={Boolean(env?.pesapal.consumerSecret)} />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="pesapalMode">Mode</Label>
              <Select
                value={pesapalMode}
                onValueChange={(value) =>
                  updateNestedField("payment.pesapal.mode", value)
                }
              >
                <SelectTrigger id="pesapalMode">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="sandbox">Sandbox</SelectItem>
                  <SelectItem value="live">Live</SelectItem>
                </SelectContent>
              </Select>
              <EnvSourceHint show={Boolean(env?.pesapal.mode)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="pesapalIpnId"
                label="IPN ID"
                value={pesapal?.ipnId || ""}
                onChange={(value) =>
                  updateNestedField("payment.pesapal.ipnId", value)
                }
                secretSet={cred("payment.pesapal.ipnId").set}
                maskedHint={cred("payment.pesapal.ipnId").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="Registered Pesapal IPN ID"
                revealTyped
              />
              <p className="text-xs text-muted-foreground">
                Register <code>/api/payments/pesapal/ipn</code> as a POST IPN URL,
                then enter the returned ID.
              </p>
              <EnvSourceHint show={Boolean(env?.pesapal.ipnId)} />
            </div>
          </div>
        </ProviderCard>

        {/* ioTec Pay */}
        <ProviderCard
          logo={<IotecLogo />}
          title="ioTec Pay"
          description="MTN & Airtel mobile money and card payments (Uganda)"
          enabled={iotec?.enabled ?? false}
          onToggle={(checked) =>
            updateNestedField("payment.iotec.enabled", checked)
          }
          badges={
            <>
              <StatusBadge configured={iotecConfigured} />
              <ModeBadge mode={iotecMode} />
            </>
          }
          testButton={renderTestButton("iotec", iotec?.enabled ?? false)}
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="iotecClientId"
                label="Client ID"
                value={iotec?.clientId || ""}
                onChange={(value) =>
                  updateNestedField("payment.iotec.clientId", value)
                }
                secretSet={cred("payment.iotec.clientId").set}
                maskedHint={cred("payment.iotec.clientId").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="ioTec client ID"
                helperText="Saved keys are not shown again for security."
                revealTyped
              />
              <EnvSourceHint show={Boolean(env?.iotec.clientId)} />
            </div>
            <div className="space-y-2">
              <SecretInput
                id="iotecClientSecret"
                label="Client Secret"
                value={iotec?.clientSecret || ""}
                onChange={(value) =>
                  updateNestedField("payment.iotec.clientSecret", value)
                }
                secretSet={cred("payment.iotec.clientSecret").set}
                maskedHint={cred("payment.iotec.clientSecret").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="ioTec client secret"
                helperText="Saved secrets are not shown again for security."
              />
              <EnvSourceHint show={Boolean(env?.iotec.clientSecret)} />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <SecretInput
                id="iotecWalletId"
                label="Wallet ID"
                value={iotec?.walletId || ""}
                onChange={(value) =>
                  updateNestedField("payment.iotec.walletId", value)
                }
                secretSet={cred("payment.iotec.walletId").set}
                maskedHint={cred("payment.iotec.walletId").hint}
                placeholderWhenSet="Saved (leave blank to keep)"
                placeholderWhenUnset="ioTec Pay wallet UUID"
                revealTyped
              />
              <p className="text-xs text-muted-foreground">
                Found in the ioTec Pay portal under your wallet settings.
              </p>
              <EnvSourceHint show={Boolean(env?.iotec.walletId)} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="iotecMode">Mode</Label>
              <Select
                value={iotecMode}
                onValueChange={(value) =>
                  updateNestedField("payment.iotec.mode", value)
                }
              >
                <SelectTrigger id="iotecMode">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="sandbox">Sandbox</SelectItem>
                  <SelectItem value="live">Live</SelectItem>
                </SelectContent>
              </Select>
              <EnvSourceHint show={Boolean(env?.iotec.mode)} />
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            Optional: in the ioTec Pay portal, set the collection callback URL to{" "}
            <code>/api/payments/iotec/callback</code> for instant status updates.
            Payments are confirmed by polling even without it.
          </p>
        </ProviderCard>

        {/* Cash on Delivery */}
        <ProviderCard
          logo={<CashOnDeliveryLogo />}
          title={t("admin.settings.payment.cod.title")}
          description="Let customers pay when their order arrives"
          enabled={cod?.enabled ?? false}
          onToggle={(c) => updateNestedField("payment.cod.enabled", c)}
          badges={
            <Badge variant="outline" className="gap-1">
              <Banknote className="h-3 w-3" />
              Offline
            </Badge>
          }
        >
          <div className="space-y-2">
            <Label htmlFor="codInstructions">
              {t("admin.settings.payment.codInstructions")}
            </Label>
            <Textarea
              id="codInstructions"
              value={cod?.instructions || ""}
              onChange={(e) =>
                updateNestedField("payment.cod.instructions", e.target.value)
              }
              rows={3}
              placeholder="e.g. Please keep exact change ready when the courier arrives."
            />
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="codMinOrder">
                {t("admin.settings.payment.codMinOrder")}
              </Label>
              <Input
                id="codMinOrder"
                type="number"
                value={cod?.minOrderAmount || 0}
                onChange={(e) =>
                  updateNestedField(
                    "payment.cod.minOrderAmount",
                    parseFloat(e.target.value),
                  )
                }
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="codMaxOrder">
                {t("admin.settings.payment.codMaxOrder")}
              </Label>
              <Input
                id="codMaxOrder"
                type="number"
                value={cod?.maxOrderAmount || 0}
                onChange={(e) =>
                  updateNestedField(
                    "payment.cod.maxOrderAmount",
                    parseFloat(e.target.value),
                  )
                }
              />
            </div>
          </div>
        </ProviderCard>
      </div>

      <StickySaveFooter
        label={t("admin.settings.general.save")}
        isSaving={isSaving}
        isDirty={isDirty}
        onSave={onSave}
      />
    </div>
  );
}