"use client";

import { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { sanitizeInput } from "@/core/security/sanitize";
import {
  Mail,
  CreditCard,
  Percent,
  Wallet,
  Eye,
  EyeOff,
  Save,
  CheckCircle2,
  AlertCircle,
  Send,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { useToastEnhanced } from "@/hooks/use-toast-enhanced";
import {
  smtpSettingsSchema,
  cashfreeSettingsSchema,
  agentCommissionSchema,
  withdrawSettingsSchema,
  type SMTPSettingsInput,
  type CashfreeSettingsInput,
  type AgentCommissionInput,
  type WithdrawSettingsInput,
} from "@/lib/validations/settings";
import {
  settingsDataStore,
  type AdminSettings,
  type WithdrawMethod,
} from "@/roles/admin/services/settings.service";
import {
  getPaymentGatewayAction,
  savePaymentGatewayAction,
} from "@/features/settings/actions/payment-gateway-actions";

export function AdminSettingsClient() {
  const [settings, setSettings] = useState<AdminSettings>(() =>
    settingsDataStore.getSettings()
  );
  const [activeTab, setActiveTab] = useState("smtp");
  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
  const [isPaymentGatewayLoading, setIsPaymentGatewayLoading] = useState(false);
  const [paymentGatewayName, setPaymentGatewayName] = useState("Razorpay");
  const paymentGatewayFetchedRef = useRef(false);
  const toast = useToastEnhanced();

  const toggleSecret = (key: string) => {
    setShowSecrets((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const mapGatewayEnvironmentToFormValue = (
    environment?: string
  ): "sandbox" | "production" => {
    const normalizedEnvironment = environment?.trim().toLowerCase();

    if (
      normalizedEnvironment === "live" ||
      normalizedEnvironment === "production"
    ) {
      return "production";
    }

    if (
      normalizedEnvironment === "test" ||
      normalizedEnvironment === "sandbox"
    ) {
      return "sandbox";
    }

    return "sandbox";
  };

  // SMTP Form
  const smtpForm = useForm<SMTPSettingsInput>({
    resolver: zodResolver(smtpSettingsSchema),
    defaultValues: settings.smtp,
  });

  // Cashfree Form
  const cashfreeForm = useForm<CashfreeSettingsInput>({
    resolver: zodResolver(cashfreeSettingsSchema),
    defaultValues: settings.cashfree,
  });

  // Commission Form
  const commissionForm = useForm<AgentCommissionInput>({
    resolver: zodResolver(agentCommissionSchema),
    defaultValues: settings.agentCommission,
  });

  // Withdraw Form
  const withdrawForm = useForm<WithdrawSettingsInput>({
    resolver: zodResolver(withdrawSettingsSchema),
    defaultValues: settings.withdraw,
  });

  useEffect(() => {
    if (paymentGatewayFetchedRef.current) return;

    paymentGatewayFetchedRef.current = true;
    setIsPaymentGatewayLoading(true);

    let isMounted = true;

    const loadPaymentGateway = async () => {
      try {
        const result = await getPaymentGatewayAction();
        if (!isMounted || !result.success || !result.data) {
          if (isMounted && !result.success) {
            toast.error({
              title: "Failed to load payment gateway",
              description:
                result.error ?? "Unable to fetch payment gateway settings.",
            });
          }
          return;
        }

        const gateway = result.data as {
          key?: string;
          secret?: string;
          environment?: string;
          name?: string;
          status?: number;
          webhook_secret?: string;
        };

        setPaymentGatewayName(gateway.name?.trim() || "Razorpay");

        const cashfreeSettings: CashfreeSettingsInput = {
          appId: gateway.key ?? "",
          secretKey: gateway.secret ?? "",
          environment: mapGatewayEnvironmentToFormValue(gateway.environment),
          webhookSecret: gateway.webhook_secret ?? "",
        };

        settingsDataStore.updateCashfree(cashfreeSettings);
        const nextSettings = settingsDataStore.getSettings();
        setSettings(nextSettings);
        cashfreeForm.reset(cashfreeSettings);
      } catch (error) {
        if (!isMounted) return;

        toast.error({
          title: "Failed to load payment gateway",
          description:
            error instanceof Error
              ? error.message
              : "Unable to fetch payment gateway settings.",
        });
      } finally {
        if (isMounted) {
          setIsPaymentGatewayLoading(false);
        }
      }
    };

    void loadPaymentGateway();

    return () => {
      isMounted = false;
    };
  }, [cashfreeForm, toast]);

  const onSMTPSubmit = (data: SMTPSettingsInput) => {
    const sanitized = {
      host: sanitizeInput(data.host),
      port: data.port,
      username: sanitizeInput(data.username),
      password: data.password,
      encryption: data.encryption,
      fromEmail: sanitizeInput(data.fromEmail),
      fromName: sanitizeInput(data.fromName),
    };
    settingsDataStore.updateSMTP(sanitized);
    setSettings(settingsDataStore.getSettings());
    toast.success({
      title: "SMTP settings saved",
      description: "Your email configuration has been updated.",
    });
  };

  const onCashfreeSubmit = async (data: CashfreeSettingsInput) => {
    const payload = {
      name: sanitizeInput(paymentGatewayName || "Razorpay"),
      key: sanitizeInput(data.appId),
      secret: data.secretKey,
      environment:
        data.environment === "production"
          ? ("live" as const)
          : ("test" as const),
    };

    const result = await savePaymentGatewayAction(payload);
    if (!result.success) {
      toast.error({
        title: "Failed to save payment gateway",
        description: result.error ?? "Unable to save payment gateway settings.",
      });
      return;
    }

    settingsDataStore.updateCashfree(data);
    setSettings(settingsDataStore.getSettings());
    toast.success({
      title: "Payment gateway saved",
      description: "Payment gateway settings have been updated.",
    });
  };

  const onCommissionSubmit = (data: AgentCommissionInput) => {
    settingsDataStore.updateAgentCommission(data);
    setSettings(settingsDataStore.getSettings());
    toast.success({
      title: "Commission settings saved",
      description: "Agent commission configuration updated.",
    });
  };

  const onWithdrawSubmit = (data: WithdrawSettingsInput) => {
    settingsDataStore.updateWithdraw(data);
    setSettings(settingsDataStore.getSettings());
    toast.success({
      title: "Withdraw settings saved",
      description: "Withdrawal configuration updated.",
    });
  };

  const toggleWithdrawMethod = (method: WithdrawMethod) => {
    settingsDataStore.updateWithdrawMethod(method.id, {
      isActive: !method.isActive,
    });
    setSettings(settingsDataStore.getSettings());
    toast.info({
      title: method.isActive ? "Method disabled" : "Method enabled",
      description: `${method.name} has been ${method.isActive ? "disabled" : "enabled"}.`,
    });
  };

  return (
    <section aria-labelledby="settings-title" className="admin-section">
      <header className="admin-page-header">
        <h1 id="settings-title" className="admin-page-title">
          Admin Settings
        </h1>
        <p className="admin-page-description">
          Configure platform settings including email, payments, commissions,
          and withdrawals.
        </p>
      </header>

      <Tabs
        value={activeTab}
        onValueChange={setActiveTab}
        className="space-y-6"
      >
        <TabsList className="inline-flex h-auto p-1 bg-muted/50 rounded-xl flex-wrap gap-1">
          <TabsTrigger
            value="smtp"
            className="rounded-lg data-[state=active]:shadow-md px-4 py-2.5 gap-2"
          >
            <Mail className="h-4 w-4" aria-hidden="true" />
            <span className="hidden sm:inline">SMTP</span>
          </TabsTrigger>
          <TabsTrigger
            value="payment"
            className="rounded-lg data-[state=active]:shadow-md px-4 py-2.5 gap-2"
          >
            <CreditCard className="h-4 w-4" aria-hidden="true" />
            <span className="hidden sm:inline">Payment Gateway</span>
          </TabsTrigger>
          <TabsTrigger
            value="commission"
            className="rounded-lg data-[state=active]:shadow-md px-4 py-2.5 gap-2"
          >
            <Percent className="h-4 w-4" aria-hidden="true" />
            <span className="hidden sm:inline">Agent Commission</span>
          </TabsTrigger>
          <TabsTrigger
            value="withdraw"
            className="rounded-lg data-[state=active]:shadow-md px-4 py-2.5 gap-2"
          >
            <Wallet className="h-4 w-4" aria-hidden="true" />
            <span className="hidden sm:inline">Withdrawals</span>
          </TabsTrigger>
        </TabsList>

        {/* SMTP Settings */}
        <TabsContent value="smtp" className="space-y-6">
          <Card className="admin-card rounded-xl border-0">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg">
                  <Mail className="h-5 w-5 text-white" aria-hidden="true" />
                </div>
                <div>
                  <CardTitle>SMTP Configuration</CardTitle>
                  <CardDescription>
                    Configure email delivery settings for notifications and
                    alerts.
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={smtpForm.handleSubmit(onSMTPSubmit)}
                className="space-y-6"
              >
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="smtp-host">SMTP Host</Label>
                    <Input
                      id="smtp-host"
                      placeholder="smtp.gmail.com"
                      {...smtpForm.register("host")}
                      className="rounded-xl"
                    />
                    {smtpForm.formState.errors.host && (
                      <p className="text-sm text-destructive">
                        {smtpForm.formState.errors.host.message}
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="smtp-port">Port</Label>
                    <Input
                      id="smtp-port"
                      type="number"
                      placeholder="587"
                      {...smtpForm.register("port")}
                      className="rounded-xl"
                    />
                    {smtpForm.formState.errors.port && (
                      <p className="text-sm text-destructive">
                        {smtpForm.formState.errors.port.message}
                      </p>
                    )}
                  </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="smtp-username">Username</Label>
                    <Input
                      id="smtp-username"
                      placeholder="your@email.com"
                      {...smtpForm.register("username")}
                      className="rounded-xl"
                    />
                    {smtpForm.formState.errors.username && (
                      <p className="text-sm text-destructive">
                        {smtpForm.formState.errors.username.message}
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="smtp-password">Password</Label>
                    <div className="relative">
                      <Input
                        id="smtp-password"
                        type={showSecrets.smtpPassword ? "text" : "password"}
                        placeholder="••••••••"
                        {...smtpForm.register("password")}
                        className="rounded-xl pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
                        onClick={() => toggleSecret("smtpPassword")}
                        aria-label={
                          showSecrets.smtpPassword
                            ? "Hide password"
                            : "Show password"
                        }
                      >
                        {showSecrets.smtpPassword ? (
                          <EyeOff className="h-4 w-4" />
                        ) : (
                          <Eye className="h-4 w-4" />
                        )}
                      </Button>
                    </div>
                    {smtpForm.formState.errors.password && (
                      <p className="text-sm text-destructive">
                        {smtpForm.formState.errors.password.message}
                      </p>
                    )}
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="smtp-encryption">Encryption</Label>
                  <Select
                    value={smtpForm.watch("encryption")}
                    onValueChange={(v) =>
                      smtpForm.setValue(
                        "encryption",
                        v as "none" | "ssl" | "tls"
                      )
                    }
                  >
                    <SelectTrigger id="smtp-encryption" className="rounded-xl">
                      <SelectValue placeholder="Select encryption" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">None</SelectItem>
                      <SelectItem value="ssl">SSL</SelectItem>
                      <SelectItem value="tls">TLS</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="smtp-from-email">From Email</Label>
                    <Input
                      id="smtp-from-email"
                      type="email"
                      placeholder="noreply@teertham.com"
                      {...smtpForm.register("fromEmail")}
                      className="rounded-xl"
                    />
                    {smtpForm.formState.errors.fromEmail && (
                      <p className="text-sm text-destructive">
                        {smtpForm.formState.errors.fromEmail.message}
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="smtp-from-name">From Name</Label>
                    <Input
                      id="smtp-from-name"
                      placeholder="Ameera Holidays"
                      {...smtpForm.register("fromName")}
                      className="rounded-xl"
                    />
                    {smtpForm.formState.errors.fromName && (
                      <p className="text-sm text-destructive">
                        {smtpForm.formState.errors.fromName.message}
                      </p>
                    )}
                  </div>
                </div>

                <div className="flex items-center gap-3 pt-4">
                  <Button
                    type="submit"
                    className="rounded-xl shadow-lg shadow-primary/25"
                    disabled={smtpForm.formState.isSubmitting}
                  >
                    <Save className="h-4 w-4 mr-2" aria-hidden="true" />
                    Save SMTP Settings
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    className="rounded-xl bg-transparent"
                  >
                    <Send className="h-4 w-4 mr-2" aria-hidden="true" />
                    Send Test Email
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Payment Gateway Settings */}
        <TabsContent value="payment" className="space-y-6">
          <Card className="admin-card rounded-xl border-0">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center shadow-lg">
                  <CreditCard
                    className="h-5 w-5 text-white"
                    aria-hidden="true"
                  />
                </div>
                <div>
                  <CardTitle>Razorpay Payment Gateway</CardTitle>
                  <CardDescription>
                    Configure Razorpay API credentials for payment processing.
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={cashfreeForm.handleSubmit(onCashfreeSubmit)}
                className="space-y-6"
              >
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="cf-app-id">App ID</Label>
                    <Input
                      id="cf-app-id"
                      placeholder="Enter Razorpay App ID"
                      {...cashfreeForm.register("appId")}
                      className="rounded-xl"
                    />
                    {cashfreeForm.formState.errors.appId && (
                      <p className="text-sm text-destructive">
                        {cashfreeForm.formState.errors.appId.message}
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cf-secret">Secret Key</Label>
                    <div className="relative">
                      <Input
                        id="cf-secret"
                        type={showSecrets.cfSecret ? "text" : "password"}
                        placeholder="••••••••••••••••"
                        {...cashfreeForm.register("secretKey")}
                        className="rounded-xl pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
                        onClick={() => toggleSecret("cfSecret")}
                        aria-label={
                          showSecrets.cfSecret ? "Hide secret" : "Show secret"
                        }
                      >
                        {showSecrets.cfSecret ? (
                          <EyeOff className="h-4 w-4" />
                        ) : (
                          <Eye className="h-4 w-4" />
                        )}
                      </Button>
                    </div>
                    {cashfreeForm.formState.errors.secretKey && (
                      <p className="text-sm text-destructive">
                        {cashfreeForm.formState.errors.secretKey.message}
                      </p>
                    )}
                  </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="cf-env">Environment</Label>
                    <Select
                      value={cashfreeForm.watch("environment")}
                      onValueChange={(v) =>
                        cashfreeForm.setValue(
                          "environment",
                          v as "sandbox" | "production"
                        )
                      }
                    >
                      <SelectTrigger id="cf-env" className="rounded-xl">
                        <SelectValue placeholder="Select environment" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="sandbox">
                          <div className="flex items-center gap-2">
                            <AlertCircle className="h-4 w-4 text-amber-500" />
                            Test
                          </div>
                        </SelectItem>
                        <SelectItem value="production">
                          <div className="flex items-center gap-2">
                            <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                            Live
                          </div>
                        </SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cf-webhook">
                      Webhook Secret (Optional)
                    </Label>
                    <Input
                      id="cf-webhook"
                      placeholder="Enter webhook secret"
                      {...cashfreeForm.register("webhookSecret")}
                      className="rounded-xl"
                    />
                  </div>
                </div>

                {isPaymentGatewayLoading ? (
                  <p className="text-sm text-muted-foreground">
                    Loading payment gateway settings...
                  </p>
                ) : null}

                <div className="flex items-center gap-3 pt-4">
                  <Button
                    type="submit"
                    className="rounded-xl shadow-lg shadow-primary/25"
                    disabled={cashfreeForm.formState.isSubmitting}
                  >
                    <Save className="h-4 w-4 mr-2" aria-hidden="true" />
                    Save Payment Settings
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Agent Commission Settings */}
        <TabsContent value="commission" className="space-y-6">
          <Card className="admin-card rounded-xl border-0">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-lg">
                  <Percent className="h-5 w-5 text-white" aria-hidden="true" />
                </div>
                <div>
                  <CardTitle>Agent Commission Settings</CardTitle>
                  <CardDescription>
                    Configure commission rates and payout schedules for agents.
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={commissionForm.handleSubmit(onCommissionSubmit)}
                className="space-y-6"
              >
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="commission-rate">
                      Default Commission Rate (%)
                    </Label>
                    <Input
                      id="commission-rate"
                      type="number"
                      min="0"
                      max="100"
                      step="0.1"
                      {...commissionForm.register("defaultCommissionRate")}
                      className="rounded-xl"
                    />
                    {commissionForm.formState.errors.defaultCommissionRate && (
                      <p className="text-sm text-destructive">
                        {
                          commissionForm.formState.errors.defaultCommissionRate
                            .message
                        }
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="min-booking">
                      Minimum Booking Value (₹)
                    </Label>
                    <Input
                      id="min-booking"
                      type="number"
                      min="0"
                      {...commissionForm.register("minimumBookingValue")}
                      className="rounded-xl"
                    />
                    {commissionForm.formState.errors.minimumBookingValue && (
                      <p className="text-sm text-destructive">
                        {
                          commissionForm.formState.errors.minimumBookingValue
                            .message
                        }
                      </p>
                    )}
                  </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="payout-schedule">Payout Schedule</Label>
                    <Select
                      value={commissionForm.watch("payoutSchedule")}
                      onValueChange={(v) =>
                        commissionForm.setValue(
                          "payoutSchedule",
                          v as "weekly" | "biweekly" | "monthly"
                        )
                      }
                    >
                      <SelectTrigger
                        id="payout-schedule"
                        className="rounded-xl"
                      >
                        <SelectValue placeholder="Select schedule" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="weekly">Weekly</SelectItem>
                        <SelectItem value="biweekly">Bi-Weekly</SelectItem>
                        <SelectItem value="monthly">Monthly</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="min-payout">Minimum Payout (₹)</Label>
                    <Input
                      id="min-payout"
                      type="number"
                      min="0"
                      {...commissionForm.register("minimumPayout")}
                      className="rounded-xl"
                    />
                    {commissionForm.formState.errors.minimumPayout && (
                      <p className="text-sm text-destructive">
                        {commissionForm.formState.errors.minimumPayout.message}
                      </p>
                    )}
                  </div>
                </div>

                <div className="flex items-center gap-3 pt-4">
                  <Button
                    type="submit"
                    className="rounded-xl shadow-lg shadow-primary/25"
                    disabled={commissionForm.formState.isSubmitting}
                  >
                    <Save className="h-4 w-4 mr-2" aria-hidden="true" />
                    Save Commission Settings
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Withdraw Settings */}
        <TabsContent value="withdraw" className="space-y-6">
          <Card className="admin-card rounded-xl border-0">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shadow-lg">
                  <Wallet className="h-5 w-5 text-white" aria-hidden="true" />
                </div>
                <div>
                  <CardTitle>Withdrawal Settings</CardTitle>
                  <CardDescription>
                    Configure withdrawal limits and available methods.
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <form
                onSubmit={withdrawForm.handleSubmit(onWithdrawSubmit)}
                className="space-y-6"
              >
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="min-withdraw">
                      Minimum Withdrawal (₹)
                    </Label>
                    <Input
                      id="min-withdraw"
                      type="number"
                      min="0"
                      {...withdrawForm.register("minimumWithdrawal")}
                      className="rounded-xl"
                    />
                    {withdrawForm.formState.errors.minimumWithdrawal && (
                      <p className="text-sm text-destructive">
                        {
                          withdrawForm.formState.errors.minimumWithdrawal
                            .message
                        }
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="max-withdraw">
                      Maximum Withdrawal (₹)
                    </Label>
                    <Input
                      id="max-withdraw"
                      type="number"
                      min="0"
                      {...withdrawForm.register("maximumWithdrawal")}
                      className="rounded-xl"
                    />
                    {withdrawForm.formState.errors.maximumWithdrawal && (
                      <p className="text-sm text-destructive">
                        {
                          withdrawForm.formState.errors.maximumWithdrawal
                            .message
                        }
                      </p>
                    )}
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="processing-time">
                    Processing Time (Days)
                  </Label>
                  <Input
                    id="processing-time"
                    type="number"
                    min="1"
                    max="30"
                    {...withdrawForm.register("processingTime")}
                    className="rounded-xl"
                  />
                  {withdrawForm.formState.errors.processingTime && (
                    <p className="text-sm text-destructive">
                      {withdrawForm.formState.errors.processingTime.message}
                    </p>
                  )}
                </div>

                <div className="flex items-center gap-3 pt-4">
                  <Button
                    type="submit"
                    className="rounded-xl shadow-lg shadow-primary/25"
                    disabled={withdrawForm.formState.isSubmitting}
                  >
                    <Save className="h-4 w-4 mr-2" aria-hidden="true" />
                    Save Withdrawal Settings
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>

          {/* Withdraw Methods */}
          <Card className="admin-card rounded-xl border-0">
            <CardHeader>
              <CardTitle>Withdrawal Methods</CardTitle>
              <CardDescription>
                Enable or disable withdrawal methods for agents.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {settings.withdrawMethods.map((method) => (
                <div
                  key={method.id}
                  className="flex items-center justify-between p-4 rounded-xl bg-muted/50 border border-border/50"
                >
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <p className="font-medium">{method.name}</p>
                      <Badge
                        variant={method.isActive ? "default" : "secondary"}
                        className="rounded-lg text-xs"
                      >
                        {method.isActive ? "Active" : "Disabled"}
                      </Badge>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {method.description}
                    </p>
                  </div>
                  <Switch
                    checked={method.isActive}
                    onCheckedChange={() => toggleWithdrawMethod(method)}
                    aria-label={`Toggle ${method.name}`}
                  />
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </section>
  );
}