"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";
import {
  getAstrologerProfile,
  getAstrologerWallet,
} from "@/app/lib/astrologer";

type PaymentMethod = "BANK" | "UPI";
type TransferType = "INSTANT" | "GENERAL";

type BankAccount = {
  id?: string | number;
  bankName?: string;
  accountNumber?: string;
  accountHolderName?: string;
  ifsc?: string;
  upiId?: string;
};

const unwrap = (value: any) => {
  if (value?.data?.data) return value.data.data;
  if (value?.data) return value.data;
  return value ?? {};
};

const money = (value: number) =>
  `₹${Number(value || 0).toLocaleString("en-IN", { maximumFractionDigits: 0 })}`;

function normalizeBank(raw: any): BankAccount {
  return {
    ...raw,

    id: raw?.id ?? raw?.bankId ?? raw?.bank_id,

    bankName:
      raw?.bankName ??
      raw?.bank_name ??
      raw?.nameOfBank ??
      raw?.bank ??
      "",

    accountNumber:
      raw?.accountNumber ??
      raw?.account_number ??
      raw?.accountNo ??
      raw?.account_no ??
      "",

    accountHolderName:
      raw?.accountHolderName ??
      raw?.account_holder_name ??
      raw?.holderName ??
      raw?.accountName ??
      raw?.account_name ??
      "",

    ifsc:
      raw?.ifsc ??
      raw?.ifscCode ??
      raw?.ifsc_code ??
      "",

    upiId:
      raw?.upiId ??
      raw?.upi_id ??
      raw?.upi ??
      "",
  };
}

function getBankArray(root: any): any[] {
  const candidates = [
    // Actual profile API response
    root?.BankAccount,

    // Other possible response formats
    root?.bankDetails,
    root?.bank_details,
    root?.banks,
    root?.bankAccounts,
    root?.bank_accounts,
    root?.accounts,

    // Nested profile
    root?.profile?.BankAccount,
    root?.profile?.bankDetails,
    root?.profile?.bank_details,
    root?.profile?.bankAccounts,
    root?.profile?.bank_accounts,

    // Nested astrologer
    root?.astrologer?.BankAccount,
    root?.astrologer?.bankDetails,
    root?.astrologer?.bank_details,
    root?.astrologer?.bankAccounts,
    root?.astrologer?.bank_accounts,
  ];

  return candidates.find(Array.isArray) ?? [];
}

function maskAccount(value = "") {
  const clean = String(value).replace(/\s+/g, "");
  return clean ? `XXXX XXXX ${clean.slice(-4)}` : "XXXX XXXX XXXX";
}

export default function AstrologerWithdrawPage() {
  const router = useRouter();
  const [balance, setBalance] = useState(0);
  const [userId, setUserId] = useState<number | null>(null);
  const [amount, setAmount] = useState("");
  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("BANK");
  const [transferType, setTransferType] = useState<TransferType>("INSTANT");
  const [banks, setBanks] = useState<BankAccount[]>([]);
  const [selectedBankId, setSelectedBankId] = useState<string | number | null>(
    null,
  );
  const [upiId, setUpiId] = useState("");
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);

  const selectedBank = useMemo(
    () =>
      banks.find((b) => String(b.id) === String(selectedBankId)) ?? banks[0],
    [banks, selectedBankId],
  );

  const load = useCallback(async () => {
    const token = localStorage.getItem("astrologerToken");
    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    setLoading(true);
    try {
      const [walletResponse, profileResponse] = await Promise.all([
        getAstrologerWallet(token),
        getAstrologerProfile(token),
      ]);

      const wallet = unwrap(walletResponse);
      const walletData = wallet?.data ?? wallet;
      setBalance(
        Number(
          walletData?.availableBalance ?? walletData?.available_balance ?? 0,
        ),
      );

      const profile = unwrap(profileResponse);

      const profileRoot =
        profile?.profile ??
        profile?.astrologer ??
        profile;

      const id =
        profileRoot?.user_id ??
        profileRoot?.userId ??
        profileRoot?.id;

      if (id != null) {
        setUserId(Number(id));
      }

      const accountRows = getBankArray(profile).map(normalizeBank);

      setBanks(accountRows);

      if (accountRows.length > 0) {
        setSelectedBankId(accountRows[0].id ?? 0);
      }

      const rootUpi =
        profileRoot?.upiId ??
        profileRoot?.upi_id ??
        profileRoot?.upi ??
        accountRows.find((b) => b.upiId)?.upiId ??
        "";

      setUpiId(String(rootUpi));
      
    } catch (error: any) {
      console.error("Withdraw page load error", error);
      toast.error(error?.message || "Unable to load withdrawal details.");
    } finally {
      setLoading(false);
    }
  }, [router]);

  useEffect(() => {
    load();
  }, [load]);

  const submit = async () => {
    const numericAmount = Number(amount);
    if (!numericAmount || numericAmount < 200) {
      toast.error("Minimum withdrawal amount is ₹200.");
      return;
    }
    if (numericAmount > balance) {
      toast.error("Withdrawal amount cannot exceed your available balance.");
      return;
    }
    if (paymentMethod === "BANK" && !selectedBank) {
      toast.error("No bank account found in your profile.");
      return;
    }
    if (paymentMethod === "UPI" && !upiId.trim()) {
      toast.error("Please enter your UPI ID.");
      return;
    }

    const token = localStorage.getItem("astrologerToken");
    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    if (!userId) {
      toast.error(
        "User ID is missing from your profile. Please sign in again.",
      );
      return;
    }
    if (paymentMethod === "BANK") {
    if (!selectedBank) {
      toast.error("No bank account found in your profile.");
      return;
    }

    if (!selectedBank.accountHolderName?.trim()) {
      toast.error("Account holder name is required.");
      return;
    }

    if (!selectedBank.bankName?.trim()) {
      toast.error("Bank name is required.");
      return;
    }

    if (!selectedBank.accountNumber?.trim()) {
      toast.error("Account number is required.");
      return;
    }

    if (!selectedBank.ifsc?.trim()) {
      toast.error("IFSC code is required.");
      return;
    }
  }
    setSubmitting(true);
    try {
      // Exact backend/Postman contract. Transfer type is UI-only because the
      // supplied endpoint contract does not define a transferType field.
      const body =
        paymentMethod === "BANK"
          ? {
              user_id: userId,
              amount: numericAmount,
              paymentMethod: "BANK",

              accountHolderName: selectedBank?.accountHolderName || "",
              bankName: selectedBank?.bankName || "",
              accountNumber: selectedBank?.accountNumber || "",
              ifscCode: selectedBank?.ifsc || "",
            }
          : {
              user_id: userId,
              amount: numericAmount,
              paymentMethod: "UPI",
              upiId: upiId.trim(),
            };

      console.log("WITHDRAW BODY:", body);

      const response = await fetch("/api/astrologer/wallet/withdraw", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: token,
        },
        body: JSON.stringify(body),
      });

      const text = await response.text();
      let data: any = {};
      if (text.trim()) {
        try {
          data = JSON.parse(text);
        } catch {
          throw new Error("Withdraw API returned invalid JSON.");
        }
      }

      if (!response.ok || data?.status === false || data?.success === false) {
        throw new Error(
          data?.message || `Withdrawal failed with HTTP ${response.status}.`,
        );
      }

      toast.success(
        data?.message || "Withdraw request submitted successfully.",
      );
      setAmount("");
      await load();
    } catch (error: any) {
      console.error("Withdraw request error", error);
      toast.error(error?.message || "Unable to submit withdraw request.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="withdraw-page">
      <DashboardSidebar active="Wallet" />
      <main className="withdraw-main">
        <header className="page-header">
          <div className="breadcrumb">
            <span>Wallet</span>
            <b>›</b>
            <strong>Withdraw</strong>
          </div>
          <h1>Withdraw</h1>
          <p>Transfer your earnings to your bank account or UPI</p>
        </header>

        <div className="withdraw-grid">
          <section>
            <div className="card balance-card">
              <div className="big-icon">▱</div>
              <div>
                <span>Available Balance</span>
                <strong>{loading ? "—" : money(balance)}</strong>
              </div>
            </div>

            <div className="card section-card">
              <h2>1. Enter Withdraw Amount</h2>
              <div className="amount-input">
                <span>₹</span>
                <input
                  type="number"
                  min="200"
                  max={balance}
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  placeholder="Enter amount"
                />
              </div>
              <p>Minimum withdrawal amount is ₹200</p>
            </div>

            <div className="card section-card">
              <h2>2. Select Withdrawal Method</h2>
              <div className="choice-grid">
                <button
                  type="button"
                  className={`choice ${paymentMethod === "BANK" ? "selected" : ""}`}
                  onClick={() => setPaymentMethod("BANK")}
                >
                  <i>♜</i>
                  <div>
                    <b>Bank Account</b>
                    <span>Withdraw to your bank account</span>
                  </div>
                  <em>{paymentMethod === "BANK" ? "●" : "○"}</em>
                </button>
                <button
                  type="button"
                  className={`choice ${paymentMethod === "UPI" ? "selected" : ""}`}
                  onClick={() => setPaymentMethod("UPI")}
                >
                  <i className="upi-logo">UPI</i>
                  <div>
                    <b>UPI</b>
                    <span>Withdraw to your UPI ID</span>
                  </div>
                  <em>{paymentMethod === "UPI" ? "●" : "○"}</em>
                </button>
              </div>
            </div>

            {paymentMethod === "BANK" && (
              <>
                <div className="card section-card">
                  <h2>
                    3. Select Transfer Type <small>(Bank Transfer)</small>
                  </h2>
                  <div className="choice-grid">
                    <button
                      type="button"
                      className={`choice ${transferType === "INSTANT" ? "selected" : ""}`}
                      onClick={() => setTransferType("INSTANT")}
                    >
                      <i>ϟ</i>
                      <div>
                        <b className="instant">INSTANT</b>
                        <span>Service charges will be applied.</span>
                      </div>
                      <em>{transferType === "INSTANT" ? "●" : "○"}</em>
                    </button>
                    <button
                      type="button"
                      className={`choice ${transferType === "GENERAL" ? "selected" : ""}`}
                      onClick={() => setTransferType("GENERAL")}
                    >
                      <i>♜</i>
                      <div>
                        <b>GENERAL</b>
                        <span>Standard transfer (Within 1-24 hours)</span>
                      </div>
                      <em>{transferType === "GENERAL" ? "●" : "○"}</em>
                    </button>
                  </div>
                </div>

                <div className="card section-card">
                  <h2>Select Bank Account</h2>
                  {loading ? (
                    <div className="empty">Loading bank details...</div>
                  ) : banks.length === 0 ? (
                    <div className="empty">
                      No bank account found in your profile.
                    </div>
                  ) : (
                    <div className="bank-row">
                      <span className="bank-radio">●</span>
                      <div className="bank-logo">◉</div>
                      <div className="bank-info">
                        <b>{selectedBank?.bankName || "Bank Account"}</b>
                        <span>{maskAccount(selectedBank?.accountNumber)}</span>
                        <span>{selectedBank?.accountHolderName || ""}</span>
                      </div>
                      {banks.length > 1 && (
                        <select
                          value={String(selectedBank?.id ?? "")}
                          onChange={(e) => setSelectedBankId(e.target.value)}
                        >
                          <option value="">Select</option>
                          {banks.map((b, i) => (
                            <option
                              key={String(b.id ?? i)}
                              value={String(b.id ?? i)}
                            >
                              {b.bankName || `Bank ${i + 1}`}
                            </option>
                          ))}
                        </select>
                      )}
                    </div>
                  )}
                </div>
              </>
            )}

            {paymentMethod === "UPI" && (
              <div className="card section-card">
                <h2>Enter UPI ID</h2>
                <div className="upi-input">
                  <span>UPI</span>
                  <input
                    value={upiId}
                    onChange={(e) => setUpiId(e.target.value)}
                    placeholder="Enter UPI ID"
                  />
                  <button type="button" onClick={() => setUpiId("")}>
                    ×
                  </button>
                </div>
                <div className="verified">
                  <i>✓</i>
                  <div>
                    <b>UPI ID Verified</b>
                    <span>{upiId || "Enter your UPI ID"}</span>
                  </div>
                  <button
                    type="button"
                    onClick={() =>
                      document
                        .querySelector<HTMLInputElement>(".upi-input input")
                        ?.focus()
                    }
                  >
                    Change
                  </button>
                </div>
              </div>
            )}

            <button
              className="submit"
              type="button"
              onClick={submit}
              disabled={loading || submitting}
            >
              {submitting ? "Submitting..." : "➤  Submit Withdraw Request"}
            </button>
          </section>

          <aside>
            <div className="card info-card">
              <h2>
                <i>i</i> Important Information
              </h2>
              <ul>
                <li>Minimum withdrawal amount is ₹200</li>
                <li>
                  Withdrawal requests are processed within 2-3 business days.
                </li>
                <li>
                  Amount will be credited to your selected bank account / UPI
                  ID.
                </li>
                <li>Make sure your bank account / UPI ID is correct.</li>
                <li>
                  If the payment fails, the amount will be refunded to your
                  wallet.
                </li>
                <li>For any issues, contact customer support.</li>
              </ul>
            </div>

            {paymentMethod === "BANK" && (
              <div className="card details-card">
                <h2>Bank Account Details</h2>
                {selectedBank ? (
                  <div className="details">
                    <div>
                      <span>Bank Name</span>
                      <b>{selectedBank.bankName || "—"}</b>
                    </div>
                    <div>
                      <span>Account Number</span>
                      <b>{maskAccount(selectedBank.accountNumber)}</b>
                    </div>
                    <div>
                      <span>Account Holder Name</span>
                      <b>{selectedBank.accountHolderName || "—"}</b>
                    </div>
                    {selectedBank.ifsc && (
                      <div>
                        <span>IFSC</span>
                        <b>{selectedBank.ifsc}</b>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="empty">
                    Bank details are not available in your profile.
                  </div>
                )}
              </div>
            )}

            {paymentMethod === "UPI" && (
              <div className="card details-card">
                <h2>
                  UPI Details <small>(If UPI selected)</small>
                </h2>
                <label>Enter UPI ID</label>
                <div className="upi-input">
                  <span>UPI</span>
                  <input
                    value={upiId}
                    onChange={(e) => setUpiId(e.target.value)}
                    placeholder="Enter UPI ID"
                  />
                </div>
                <div className="verified">
                  <i>✓</i>
                  <div>
                    <b>UPI Verified</b>
                    <span>{upiId || "—"}</span>
                  </div>
                  <button type="button" onClick={() => setUpiId("")}>
                    Change
                  </button>
                </div>
              </div>
            )}
          </aside>
        </div>
      </main>

      <style jsx>{`
        .withdraw-page {
          min-height: 100vh;
          display: flex;
        }
        .withdraw-main {
          flex: 1;
          min-width: 0;
          padding: 28px 32px;
        }
        .page-header {
          margin-bottom: 20px;
        }
        .breadcrumb {
          display: flex;
          gap: 10px;
          align-items: center;
          color: #a69f99;
          font-size: 13px;
          margin-bottom: 7px;
        }
        .breadcrumb strong {
          color: #eee8e1;
        }
        .page-header h1 {
          margin: 0;
          font-size: 28px;
        }
        .page-header p {
          margin: 6px 0 0;
          color: #b7aea7;
          font-size: 14px;
        }
        .withdraw-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(430px, 0.92fr);
          gap: 20px;
          max-width: 1500px;
        }
        .card {
          border: 1px solid rgba(255, 255, 255, 0.12);
          background: linear-gradient(
            135deg,
            rgba(39, 30, 27, 0.96),
            rgba(25, 21, 19, 0.94)
          );
          border-radius: 14px;
          box-sizing: border-box;
        }
        .balance-card {
          min-height: 104px;
          padding: 20px 22px;
          display: flex;
          align-items: center;
          gap: 18px;
          margin-bottom: 14px;
        }
        .big-icon {
          width: 66px;
          height: 66px;
          border-radius: 14px;
          border: 1px solid rgba(255, 210, 0, 0.38);
          background: rgba(255, 204, 0, 0.09);
          display: grid;
          place-items: center;
          color: #ffd200;
          font-size: 34px;
        }
        .balance-card span {
          display: block;
          color: #b3aaa3;
          font-size: 14px;
          margin-bottom: 5px;
        }
        .balance-card strong {
          display: block;
          color: #ffd200;
          font-size: 31px;
          line-height: 1;
        }
        .section-card {
          padding: 15px 17px 17px;
          margin-bottom: 10px;
        }
        .section-card h2,
        .details-card h2,
        .help-card h2,
        .security-card h2 {
          margin: 0 0 12px;
          font-size: 17px;
          color: #ffffff;
        }
        .section-card h2 small,
        .details-card h2 small {
          color: #aaa29b;
          font-weight: 500;
        }
        .amount-input,
        .upi-input {
          height: 51px;
          display: flex;
          align-items: center;
          border: 1px solid rgba(255, 255, 255, 0.12);
          background: #090605;
          border-radius: 10px;
          overflow: hidden;
        }
        .amount-input > span {
          width: 52px;
          height: 100%;
          display: grid;
          place-items: center;
          border-right: 1px solid rgba(255, 255, 255, 0.1);
          font-size: 22px;
          color: #ffffff;
        }
        .amount-input input,
        .upi-input input {
          flex: 1;
          min-width: 0;
          height: 100%;
          border: 0;
          outline: 0;
          background: transparent;
          color: #fff;
          padding: 0 14px;
          font-size: 15px;
        }
        .section-card p {
          color: #aaa19a;
          margin: 9px 0 0;
          font-size: 13px;
        }
        .choice-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        .choice {
          position: relative;
          min-height: 88px;
          border: 1px solid rgba(255, 255, 255, 0.12);
          background: rgba(37, 30, 27, 0.76);
          color: #fff;
          border-radius: 11px;
          padding: 12px 34px 12px 13px;
          display: flex;
          align-items: center;
          gap: 12px;
          text-align: left;
          cursor: pointer;
        }
        .choice.selected {
          border-color: #ffd200;
        }
        .choice i {
          width: 47px;
          height: 47px;
          border-radius: 11px;
          background: rgba(255, 210, 0, 0.09);
          border: 1px solid rgba(255, 210, 0, 0.2);
          display: grid;
          place-items: center;
          color: #ffd200;
          font-style: normal;
          font-size: 26px;
        }
        .choice .upi-logo {
          background: #fff;
          color: #111;
          font-size: 12px;
          font-weight: 800;
        }
        .choice div {
          display: flex;
          flex-direction: column;
          gap: 5px;
        }
        .choice b {
          font-size: 14px;
        }
        .choice b.instant {
          color: #ffb8b1;
        }
        .choice span {
          color: #a9a19a;
          font-size: 12px;
        }
        .choice em {
          position: absolute;
          right: 12px;
          top: 12px;
          color: #ffd200;
          font-style: normal;
          font-size: 18px;
        }
        .bank-row {
          min-height: 76px;
          display: flex;
          align-items: center;
          gap: 11px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 10px;
          padding: 9px 11px;
          background: rgba(255, 255, 255, 0.025);
        }
        .bank-radio {
          color: #ffd200;
        }
        .bank-logo {
          width: 43px;
          height: 43px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: #168ddd;
          color: white;
          font-size: 22px;
        }
        .bank-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .bank-info b {
          font-size: 14px;
          color: #fff;
        }
        .bank-info span {
          color: #aaa29b;
          font-size: 12px;
        }
        .bank-row select {
          margin-left: auto;
          background: #1b1512;
          color: #ddd;
          border: 1px solid #4b4039;
          border-radius: 7px;
          padding: 7px;
        }
        .empty {
          padding: 17px;
          color: #aaa19a;
          border: 1px dashed rgba(255, 255, 255, 0.13);
          border-radius: 10px;
          font-size: 13px;
        }
        .submit {
          width: 100%;
          height: 56px;
          border: 0;
          border-radius: 11px;
          background: linear-gradient(180deg, #ffd800, #ffc900);
          color: #17130d;
          font-size: 16px;
          font-weight: 750;
          cursor: pointer;
        }
        .submit:disabled {
          opacity: 0.55;
          cursor: not-allowed;
        }
        .info-card {
          padding: 20px 21px;
          border-color: rgba(255, 210, 0, 0.45);
          background: linear-gradient(
            135deg,
            rgba(48, 43, 19, 0.8),
            rgba(27, 25, 17, 0.72)
          );
          margin-bottom: 14px;
        }
        .info-card h2 {
          display: flex;
          align-items: center;
          gap: 13px;
          color: #ffd200;
          font-size: 17px;
        }
        .info-card h2 i {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: #ffd200;
          color: #1b170d;
          display: grid;
          place-items: center;
          font-style: normal;
        }
        .info-card ul {
          margin: 13px 0 0 44px;
          padding: 0;
        }
        .info-card li {
          color: #e6dfd7;
          margin: 9px 0;
          font-size: 13px;
        }
        .info-card li::marker {
          color: #ffd200;
        }
        .details-card {
          padding: 19px 20px;
          margin-bottom: 14px;
        }
        .details {
          display: flex;
          flex-direction: column;
        }
        .details div {
          min-height: 43px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.07);
          gap: 18px;
        }
        .details div:last-child {
          border-bottom: 0;
        }
        .details span,
        .details-card label {
          color: #aaa19a;
          font-size: 13px;
        }
        .details b {
          font-size: 13px;
          text-align: right;
          color: #fff;
        }
        .upi-input {
          height: 47px;
        }
        .upi-input > span {
          padding-left: 13px;
          color: #aaa;
          font-size: 10px;
          font-weight: 800;
        }
        .upi-input button {
          width: 42px;
          height: 100%;
          border: 0;
          background: transparent;
          color: #aaa;
          font-size: 18px;
        }
        .verified {
          min-height: 57px;
          margin-top: 10px;
          padding: 8px 10px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 10px;
          display: flex;
          align-items: center;
          gap: 11px;
          background: rgba(255, 255, 255, 0.035);
        }
        .verified i {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          color: #ffd200;
          border: 1px solid rgba(255, 210, 0, 0.35);
          font-style: normal;
        }
        .verified div {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .verified b {
          color: #ffd200;
          font-size: 13px;
        }
        .verified span {
          color: #a9a19a;
          font-size: 12px;
        }
        .verified button {
          margin-left: auto;
          border: 0;
          background: transparent;
          color: #ff6670;
          font-weight: 700;
          cursor: pointer;
        }
        .help-card {
          min-height: 105px;
          padding: 19px 20px;
          display: flex;
          align-items: center;
          gap: 13px;
          margin-bottom: 14px;
        }
        .help-icon {
          color: #ffd200;
          font-size: 30px;
        }
        .help-card p,
        .security-card p {
          margin: 3px 0;
          color: #aaa19a;
          font-size: 13px;
        }
        .help-card > button {
          margin-left: auto;
          min-height: 48px;
          padding: 0 18px;
          border-radius: 9px;
          border: 1px solid rgba(255, 255, 255, 0.18);
          background: transparent;
          color: #f3eee8;
          font-weight: 700;
        }
        .security-card {
          min-height: 76px;
          padding: 15px 20px;
          display: flex;
          align-items: center;
          gap: 13px;
        }
        .security-icon {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: rgba(0, 210, 110, 0.12);
          color: #00d878;
        }
        .security-card h2 {
          margin-bottom: 3px;
        }
        @media (max-width: 1050px) {
          .withdraw-main {
            margin-left: 185px;
            padding: 22px 18px;
          }
          .withdraw-grid {
            grid-template-columns: 1fr;
          }
          aside {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
          }
        }
        @media (max-width: 760px) {
          .withdraw-main {
            margin-left: 0;
            padding: 18px 12px;
          }
          .withdraw-grid,
          .choice-grid,
          aside {
            grid-template-columns: 1fr;
          }
          .help-card {
            flex-wrap: wrap;
            align-items: flex-start;
          }
          .help-card > button {
            width: 100%;
            margin-left: 0;
          }
        }
      `}</style>
    </div>
  );
}