"use client";

import { useEffect, useMemo, useState } from "react";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import toast from "react-hot-toast";
import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";

type Kind = "WITHDRAWAL" | "CHAT" | "CALL" | "VIDEO" | "OTHER";

type Tx = {
  id: number | string;
  transactionId?: string;
  referenceId?: number | string;
  referenceNo?: string;
  source?: string;
  category?: string;
  transactionType?: string;
  title?: string;
  description?: string;
  amount?: number | string;
  creditAmount?: number | string;
  debitAmount?: number | string;
  balanceAfter?: number | string;
  isCredit?: boolean;
  status?: string;
  statusCode?: string;
  settlementStatus?: string;
  settlementLabel?: string;
  customerName?: string;
  durationMinutes?: number | string;
  icon?: string;
  transactionDate?: string;
  transactionTime?: string;
  remarks?: string;
  [key: string]: any;
};

type Withdrawal = {
  id: number | string;
  requestNo?: string;
  amount?: number | string;
  withdrawType?: string;
  status?: string;
  statusLabel?: string;
  paymentMethod?: string;
  tdsPercent?: number | string;
  tdsAmount?: number | string;
  instantCharge?: number | string;
  netAmount?: number | string;
  payoutTo?: string;
  isInstant?: boolean;
  requestDate?: string;
  [key: string]: any;
};

const money = (v: any) => {
  const n = Number(v ?? 0);
  return Number.isFinite(n)
    ? `₹${Math.round(n).toLocaleString("en-IN")}`
    : "₹0";
};
const statusOf = (v?: string) =>
  String(v || "Pending")
    .trim()
    .toUpperCase();

function kindOf(tx?: Tx, forced?: string): Kind {
  // `forced` is the page's own `?type=earning|withdrawal` routing param
  // (which endpoint to call), not a medium — only ever useful here to
  // force WITHDRAWAL. Letting it fall through to the generic string check
  // meant "earning" (matches none of VIDEO/CALL/CHAT) silently overrode
  // the real transactionType from the API and always rendered "OTHER".
  if (String(forced || "").toUpperCase().includes("WITHDRAW")) {
    return "WITHDRAWAL";
  }
  const s = String(tx?.transactionType || tx?.icon || "").toUpperCase();
  if (s.includes("WITHDRAW")) return "WITHDRAWAL";
  if (s.includes("VIDEO")) return "VIDEO";
  if (s.includes("CALL")) return "CALL";
  if (s.includes("CHAT")) return "CHAT";
  return "OTHER";
}

function parseDate(value?: string) {
  if (!value) return null;
  const d = new Date(value);
  if (!Number.isNaN(d.getTime())) return d;
  const m = value.match(
    /^(\d{1,2})\s+([A-Za-z]{3,9})\s+(\d{4})(?:\s+(\d{1,2}):(\d{2})\s*(AM|PM))?$/i,
  );
  if (!m) return null;
  const months = [
    "jan",
    "feb",
    "mar",
    "apr",
    "may",
    "jun",
    "jul",
    "aug",
    "sep",
    "oct",
    "nov",
    "dec",
  ];
  const month = months.findIndex((x) => m[2].toLowerCase().startsWith(x));
  if (month < 0) return null;
  let hour = Number(m[4] || 0);
  if (m[6]) {
    if (m[6].toUpperCase() === "PM" && hour !== 12) hour += 12;
    if (m[6].toUpperCase() === "AM" && hour === 12) hour = 0;
  }
  return new Date(Number(m[3]), month, Number(m[1]), hour, Number(m[5] || 0));
}
const dateText = (d?: string, t?: string) => {
  const raw = [d, t].filter(Boolean).join(" ");
  const x = parseDate(raw);
  if (!x) return raw || "--";
  return x.toLocaleString("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};

function Icon({ name, size = 22 }: { name: string; size?: number }) {
  const p: any = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.9,
    strokeLinecap: "round",
    strokeLinejoin: "round",
  };
  const map: any = {
    check: (
      <>
        <path d="m5 12 4 4L19 6" />
      </>
    ),
    x: (
      <>
        <path d="m7 7 10 10M17 7 7 17" />
      </>
    ),
    clock: (
      <>
        <circle cx="12" cy="12" r="9" />
        <path d="M12 7v5l3 2" />
      </>
    ),
    file: (
      <>
        <path d="M6 3h8l4 4v14H6z" />
        <path d="M14 3v5h5M9 13h6M9 17h6" />
      </>
    ),
    calendar: (
      <>
        <rect x="3" y="4" width="18" height="17" rx="2" />
        <path d="M7 2v4M17 2v4M3 9h18" />
      </>
    ),
    rupee: (
      <>
        <path d="M7 5h10M7 9h8M9 5c4 0 6 2 6 4s-2 4-6 4l6 6" />
      </>
    ),
    bank: (
      <>
        <path d="m3 9 9-5 9 5M5 10v7M9 10v7M15 10v7M19 10v7M3 19h18M2 21h20" />
      </>
    ),
    wallet: (
      <>
        <path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h14A1.5 1.5 0 0 1 21 6.5V18a2 2 0 0 1-2 2H5.5A2.5 2.5 0 0 1 3 17.5v-10Z" />
        <path d="M3 8h15.5A2.5 2.5 0 0 1 21 10.5V14h-5.5a2.5 2.5 0 0 1 0-5H21" />
      </>
    ),
    chat: (
      <>
        <path d="M20 11a8 8 0 0 1-8 8H7l-4 3v-6a8 8 0 1 1 17-5Z" />
        <path d="M8 11h.01M12 11h.01M16 11h.01" />
      </>
    ),
    call: (
      <>
        <path d="M7 4h3l1.5 4-2 1.5a13 13 0 0 0 5 5L16 12.5l4 1.5v3c0 1-1 2-2 2C10 19 5 14 5 6c0-1 1-2 2-2Z" />
      </>
    ),
    video: (
      <>
        <rect x="3" y="6" width="13" height="12" rx="2" />
        <path d="m16 10 5-3v10l-5-3" />
      </>
    ),
    info: (
      <>
        <circle cx="12" cy="12" r="9" />
        <path d="M12 11v5M12 8h.01" />
      </>
    ),
    user: (
      <>
        <circle cx="12" cy="8" r="4" />
        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
      </>
    ),
  };
  return <svg {...p}>{map[name] || map.file}</svg>;
}
function Row({
  icon,
  label,
  value,
}: {
  icon: string;
  label: string;
  value: React.ReactNode;
}) {
  return (
    <div className="d-flex border-bottom align-items-center justify-content-between py-3 px-3 border-dark">
      <div className="label">
        <span className="iconbox">
          <Icon name={icon} size={20} />
        </span>
        {label}
      </div>
      <div className="value">{value}</div>
    </div>
  );
}

export default function TransactionDetailsPage() {
  const router = useRouter();
  const params = useParams<{ id: string }>();
  const search = useSearchParams();
  const id = String(params?.id || "");
  const forced = search.get("type") || "";
  const [tx, setTx] = useState<Tx | null>(null);
  const [wd, setWd] = useState<Withdrawal | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = localStorage.getItem("astrologerToken");
    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }
    const load = async () => {
      try {
        if (forced.toUpperCase() === "WITHDRAWAL") {
          const r = await fetch("/api/astrologer/wallet/withdraw-history", {
            headers: { Accept: "application/json", Authorization: token },
            cache: "no-store",
          });
          const body = await r.json();
          if (!r.ok)
            throw new Error(
              body?.message || "Unable to load withdrawal details.",
            );
          const found = (Array.isArray(body?.data) ? body.data : []).find(
            (x: Withdrawal) => String(x.id) === id,
          );
          if (!found) throw new Error("Withdrawal request not found.");
          setWd(found);
          setTx(null);
        } else {
          // The dedicated per-id endpoint predates the richer
          // /wallet/transactions list (which is the only place
          // customerName/durationMinutes/settlementStatus/settlementLabel
          // for a CHAT/CALL/AUDIO_CALL/VIDEO_CALL session actually live —
          // per-id has no equivalent fields). Fetch both and merge, list
          // row wins for anything it provides, per-id fills the rest
          // (creditAmount/debitAmount/balanceAfter etc. aren't in the
          // list row), same "no per-id endpoint, find it in the list"
          // pattern already used by settlement-history/[id] and
          // consultation-history/[id].
          const [detailResult, listResult] = await Promise.allSettled([
            fetch(
              `/api/astrologer/wallet/transaction/${encodeURIComponent(id)}`,
              {
                headers: { Accept: "application/json", Authorization: token },
                cache: "no-store",
              },
            ).then(async (r) => {
              const body = await r.json();
              if (!r.ok)
                throw new Error(
                  body?.message || "Unable to load transaction details.",
                );
              return body?.data?.data ?? body?.data ?? body;
            }),
            fetch(
              "/api/astrologer/wallet/transactions?page=1&limit=100&type=ALL",
              {
                headers: { Accept: "application/json", Authorization: token },
                cache: "no-store",
              },
            ).then(async (r) => {
              const body = await r.json();
              if (!r.ok) throw new Error(body?.message || "list failed");
              const data = body?.data?.data ?? body?.data ?? body;
              const rows =
                data?.transactions ??
                data?.recordList ??
                data?.records ??
                data?.items ??
                [];
              const list = Array.isArray(rows) ? rows : [];
              return list.find((x: Tx) => String(x.id) === id) || null;
            }),
          ]);

          const detail =
            detailResult.status === "fulfilled" ? detailResult.value : null;
          const listRow =
            listResult.status === "fulfilled" ? listResult.value : null;

          if (!detail && !listRow) {
            throw detailResult.status === "rejected"
              ? detailResult.reason
              : new Error("Transaction not found.");
          }

          const merged: Tx = { ...(detail || {}) };
          if (listRow) {
            for (const key of Object.keys(listRow)) {
              if (listRow[key] !== undefined && listRow[key] !== null) {
                merged[key] = listRow[key];
              }
            }
          }
          if (merged.id === undefined) merged.id = id;

          setTx(merged);
          setWd(null);
        }
      } catch (e: any) {
        console.error(e);
        toast.error(e?.message || "Unable to load transaction details.");
      } finally {
        setLoading(false);
      }
    };
    if (id) void load();
  }, [id, forced, router]);

  const kind = useMemo(
    () => (wd ? "WITHDRAWAL" : kindOf(tx || undefined, forced)),
    [wd, tx, forced],
  );
  if (loading)
    return (
      <Shell>
        <div className="loading">Loading transaction details...</div>
      </Shell>
    );
  if (!tx && !wd)
    return (
      <Shell>
        <div className="loading">
          <h1>Transaction not found</h1>
          <p>The requested wallet transaction could not be loaded.</p>
          <Link className="back" href="/astrologer/wallet">
            ← Back to Wallet
          </Link>
        </div>
      </Shell>
    );
  return (
    <Shell>
      <div className="head">
        <div>
          <div className="crumb">
            Wallet <span>›</span> Transaction Details
          </div>
          <h1>Transaction Details</h1>
          <p>
            {kind === "WITHDRAWAL"
              ? "View complete information about your withdrawal request"
              : `View complete information about this ${kind.toLowerCase()} transaction`}
          </p>
        </div>
        <Link className="back" href="/astrologer/wallet">
          ← Back to Wallet
        </Link>
      </div>
      {kind === "WITHDRAWAL" ? (
        <WithdrawalView data={wd!} />
      ) : (
        <EarningView data={tx!} kind={kind} />
      )}
    </Shell>
  );
}
function Shell({ children }: { children: React.ReactNode }) {
  return (
    <div className="shell">
      <DashboardSidebar active="Wallet" />
      <main className="main">
        {children}
        <style jsx>{css}</style>
      </main>
    </div>
  );
}

function WithdrawalView({ data }: { data: Withdrawal }) {
  const s = statusOf(data.statusLabel || data.status),
    rejected = s === "REJECTED" || s === "FAILED",
    success = ["SUCCESS", "COMPLETED", "SUCCESSFUL", "COMPLETE"].includes(s);
  return (
    <>
      <section
        className={`banner ${rejected ? "red" : success ? "green" : "yellow"}`}
      >
        <span className="banner-icon">
          <Icon name={rejected ? "x" : success ? "check" : "clock"} size={35} />
        </span>
        <div>
          <h2>
            {rejected
              ? "Withdrawal Rejected"
              : success
                ? "Withdrawal Successful"
                : "Withdrawal Request In Progress"}
          </h2>
          <p>
            {rejected
              ? "Your withdrawal request has been rejected."
              : success
                ? "Your withdrawal request has been completed successfully."
                : "Your withdrawal request is being processed."}
          </p>
          <p>
            {rejected
              ? "Please check the withdrawal information and submit a new request."
              : success
                ? "The amount has been credited according to the backend status."
                : "We will notify you once the amount is transferred."}
          </p>
        </div>
      </section>
      <div className="withdraw-grid">
        <section className="panel">
          <h2>Transaction Details</h2>
          <Row
            icon="file"
            label="Request ID"
            value={data.requestNo || `WD${data.id}`}
          />
          <Row
            icon="calendar"
            label="Date & Time"
            value={data.requestDate || "--"}
          />
          <Row
            icon="rupee"
            label="Withdrawal Amount"
            value={<strong className="big">{money(data.amount)}</strong>}
          />
          <Row
            icon="bank"
            label="Withdrawal Method"
            value={data.paymentMethod || "--"}
          />
          <Row icon="wallet" label="Payout To" value={data.payoutTo || "--"} />
          <Row icon="rupee" label="TDS" value={money(data.tdsAmount)} />
          <Row
            icon="rupee"
            label="Instant Charge"
            value={money(data.instantCharge)}
          />
          <Row
            icon="rupee"
            label="Net Amount"
            value={
              <strong className="green-text">
                {money(data.netAmount ?? data.amount)}
              </strong>
            }
          />
          <Row
            icon="clock"
            label="Status"
            value={
              <span
                className={`pill ${rejected ? "red-pill" : success ? "green-pill" : "yellow-pill"}`}
              >
                {data.statusLabel || data.status || "Pending"}
              </span>
            }
          />
        </section>
        <div className="stack">
          {rejected && (
            <section className="panel rejection">
              <h2>
                <span className="mini-red">
                  <Icon name="info" size={18} />
                </span>{" "}
                Rejection Details
              </h2>
              <div className="eyebrow">STATUS</div>
              <strong>Your withdrawal request was rejected.</strong>
              <p>
                The supplied withdrawal-history API does not contain a
                rejection-reason field, so no reason is fabricated.
              </p>
            </section>
          )}
          {success && (
            <section className="panel">
              <h2>Amount Details</h2>
              <div className="amount">
                <span>Withdrawal Amount</span>
                <b>{money(data.amount)}</b>
              </div>
              <div className="amount">
                <span>TDS</span>
                <b>{money(data.tdsAmount)}</b>
              </div>
              <div className="amount">
                <span>Instant Charge</span>
                <b>{money(data.instantCharge)}</b>
              </div>
              <div className="total">
                <span>Total Amount</span>
                <b>{money(data.netAmount ?? data.amount)}</b>
              </div>
            </section>
          )}
          <section className="panel">
            <h2>Transaction Timeline</h2>
            <Timeline
              title="Request Submitted"
              date={data.requestDate || "--"}
              state="done"
              right="Completed"
            />
            {rejected ? (
              <Timeline
                title="Rejected"
                date={data.requestDate || "--"}
                state="rejected"
                right="Rejected"
                last
              />
            ) : success ? (
              <>
                <Timeline
                  title="Processed"
                  date={data.requestDate || "--"}
                  state="done"
                  right="Completed"
                />
                <Timeline
                  title="Amount Credited"
                  date={data.requestDate || "--"}
                  state="done"
                  right="Completed"
                  last
                />
              </>
            ) : (
              <Timeline
                title="Processing"
                date={data.requestDate || "--"}
                state="progress"
                right="In Progress"
                last
              />
            )}
            <p className="small-note">
              The supplied API exposes only requestDate. Separate review,
              processing and credited timestamps are not available.
            </p>
          </section>
          <section className="note">
            <span>
              <Icon name="info" size={21} />
            </span>
            <div>
              <h3>Please Note</h3>
              <p>
                Withdrawal status, payout method, deductions and net amount
                shown here are taken directly from the withdrawal-history API.
              </p>
            </div>
          </section>
        </div>
      </div>
    </>
  );
}
function Timeline({
  title,
  date,
  state,
  right,
  last,
}: {
  title: string;
  date: string;
  state: "done" | "progress" | "rejected";
  right: string;
  last?: boolean;
}) {
  return (
    <div className={`timeline ${last ? "last" : ""}`}>
      <span className={`dot ${state}`}>
        <Icon
          name={
            state === "rejected"
              ? "x"
              : state === "progress"
                ? "clock"
                : "check"
          }
          size={18}
        />
      </span>
      <div>
        <strong className={state === "rejected" ? "red-text" : ""}>
          {title}
        </strong>
        <small>{date}</small>
      </div>
      <b
        className={
          state === "rejected"
            ? "red-text"
            : state === "progress"
              ? "yellow-text"
              : "green-text"
        }
      >
        {right}
      </b>
    </div>
  );
}

function EarningView({ data, kind }: { data: Tx; kind: Kind }) {
  const type =
    kind === "CHAT"
      ? "Chat"
      : kind === "CALL"
        ? "Call"
        : kind === "VIDEO"
          ? "Video Call"
          : "Transaction";
  const icon =
    kind === "CHAT"
      ? "chat"
      : kind === "CALL"
        ? "call"
        : kind === "VIDEO"
          ? "video"
          : "wallet";
  const s = statusOf(data.status);
  const completed = ["SUCCESS", "COMPLETED", "SUCCESSFUL", "COMPLETE"].includes(
    s,
  );
  return (
    <>
      <section className="earning-hero">
        <span className="hero-check">
          <Icon name={completed ? "check" : "clock"} size={39} />
        </span>
        <div>
          <h2>
            {data.title ||
              (kind === "CHAT"
                ? "Chat Completed!"
                : kind === "CALL"
                  ? "Call completed"
                  : kind === "VIDEO"
                    ? "Video Call completed"
                    : "Transaction")}
          </h2>
          <strong>{money(data.amount)}</strong>
          <p>
            {completed
              ? "Payable amount will be credited in wallet after settlements..!"
              : `Transaction status: ${data.status || "Pending"}`}
          </p>
        </div>
      </section>
      <div className="earning-grid">
        <section className="panel">
          <h2>
            <span className="section-icon">
              <Icon name={icon} size={21} />
            </span>
            {type} Session
          </h2>
          <div className="session-card">
            <div className="session-title">
              <span className="session-avatar">
                <Icon name={icon} size={25} />
              </span>
              <div>
                <strong>{data.title || `${type} Earnings`}</strong>
                <span>
                  {dateText(data.transactionDate, data.transactionTime)}
                </span>
                <em>
                  {data.description || data.remarks || `${type} earnings`}
                </em>
              </div>
            </div>
            {data.customerName && (
              <Row icon="user" label="Customer" value={data.customerName} />
            )}
            {data.durationMinutes != null && (
              <Row
                icon="clock"
                label="Duration"
                value={`${data.durationMinutes} min`}
              />
            )}
            <Row
              icon="file"
              label="Transaction ID"
              value={data.transactionId || `#${data.id}`}
            />
            <Row
              icon="calendar"
              label="Date & Time"
              value={dateText(data.transactionDate, data.transactionTime)}
            />
            <Row
              icon="wallet"
              label="Reference ID"
              value={data.referenceNo || data.referenceId || "--"}
            />
            {(data.settlementLabel || data.settlementStatus) && (
              <Row
                icon="clock"
                label="Settlement"
                value={
                  <span className="pill yellow-pill">
                    {data.settlementLabel || data.settlementStatus}
                  </span>
                }
              />
            )}
          </div>
        </section>
        <section className="panel">
          <h2>
            <span className="section-icon">
              <Icon name="rupee" size={21} />
            </span>
            Earnings breakdown
          </h2>
          <div className="breakdown">
            <div className="amount">
              <span>Transaction amount</span>
              <b>{money(data.amount)}</b>
            </div>
            <div className="amount">
              <span>Credit amount</span>
              <b className="green-text">{money(data.creditAmount)}</b>
            </div>
            <div className="amount">
              <span>Debit amount</span>
              <b className="muted">{money(data.debitAmount)}</b>
            </div>
            <div className="total">
              <span>Balance after transaction</span>
              <b>{money(data.balanceAfter)}</b>
            </div>
          </div>
        </section>
      </div>
      {!(data.customerName && data.durationMinutes != null) && (
        <div className="api-note">
          <Icon name="info" size={19} />
          <span>
            {data.customerName || data.durationMinutes != null
              ? "Rating and platform-fee are not exposed by the wallet APIs, so they're intentionally not fabricated here."
              : "The supplied earning detail API does not provide customer name, consultation duration, rating or platform-fee fields. Those values are intentionally not fabricated."}
          </span>
        </div>
      )}
    </>
  );
}

const css = `
.shell{min-height:100vh;display:flex;background:radial-gradient(circle at 72% 0%,rgba(125,76,28,.18),transparent 35%),#0d0d0d;color:#f4eee8}.main{flex:1;min-width:0;padding:28px 32px 40px;background:radial-gradient(circle at 72% 20%,rgba(164,99,40,.08),transparent 30%)}.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.crumb{color:#aaa19a;font-size:14px;margin-bottom:7px}.crumb span{margin:0 9px;color:#6d665f}h1{margin:0;font-size:30px}.head p{margin:6px 0 0;color:#b8afa8;font-size:15px}.back,.yellow-back{min-height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;color:#f5eee8;border:1px solid rgba(183,163,149,.6);background:rgba(25,21,19,.82);font-weight:600;white-space:nowrap}.yellow-back{width:100%;min-height:60px;background:#ffd600;border-color:#ffd600;color:#16120c;font-size:17px}.banner,.panel,.earning-hero,.note,.api-note{border:1px solid rgba(125,105,92,.35);border-radius:14px;background:linear-gradient(135deg,rgba(43,34,30,.94),rgba(27,23,21,.94));box-shadow:0 14px 35px rgba(0,0,0,.18)}.banner{min-height:118px;display:flex;align-items:center;gap:25px;padding:20px 23px;margin-bottom:16px}.banner.yellow{border-color:rgba(210,174,0,.28)}.banner.green{border-color:rgba(0,210,150,.35);background:linear-gradient(135deg,rgba(17,50,39,.7),rgba(27,32,27,.94))}.banner.red{border-color:rgba(255,75,90,.48);background:linear-gradient(135deg,rgba(74,25,30,.74),rgba(34,25,24,.94))}.banner-icon{width:70px;height:70px;display:grid;place-items:center;border-radius:14px;color:#ffd600;border:1px solid rgba(255,214,0,.55);background:rgba(111,87,0,.23)}.green .banner-icon{color:#00dca6;border-color:rgba(0,220,166,.5)}.red .banner-icon{color:#ff5360;border-color:rgba(255,83,96,.5)}.banner h2{margin:0 0 7px;color:#ffd600;font-size:19px}.green h2{color:#00dca6}.red h2{color:#ff5360}.banner p{margin:3px 0;color:#c9c0ba;font-size:14px}.withdraw-grid,.earning-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.panel{padding:20px 23px}.panel h2{margin:0 0 15px;font-size:20px}.row{min-height:59px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(116,98,88,.23)}.row:last-child{border-bottom:0}.label{display:flex;align-items:center;gap:13px;color:#bcb3ac;font-size:14px}.iconbox,.section-icon{width:37px;height:37px;display:grid;place-items:center;flex:0 0 37px;border-radius:9px;color:#ffd600;border:1px solid rgba(255,214,0,.45);background:rgba(109,85,0,.2)}.value{text-align:right;font-size:14px;font-weight:600;color:#eee8e2}.big{font-size:21px}.stack{display:flex;flex-direction:column;gap:16px}.pill{display:inline-flex;align-items:center;min-height:31px;padding:0 12px;border-radius:7px;font-size:12px}.yellow-pill{color:#ffd600;border:1px solid rgba(255,214,0,.45);background:rgba(126,98,0,.15)}.green-pill{color:#00dca6;border:1px solid rgba(0,220,166,.45);background:rgba(0,145,105,.13)}.red-pill{color:#ff5360;border:1px solid rgba(255,83,96,.45);background:rgba(155,27,39,.13)}.green-text{color:#00dca6!important}.yellow-text{color:#ffd600!important}.red-text{color:#ff5360!important}.muted{color:#9c948e!important}.rejection h2{display:flex;gap:10px;align-items:center;color:#ff5360}.mini-red{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:rgba(160,25,40,.17);border:1px solid rgba(255,83,96,.4)}.eyebrow{color:#9f968f;font-size:12px;letter-spacing:1.2px;margin:8px 0 6px}.rejection p{color:#aaa19a;line-height:1.55}.amount{min-height:43px;display:flex;justify-content:space-between;align-items:center;color:#c0b8b2;border-bottom:1px solid rgba(116,98,88,.23)}.amount b{color:#eee8e2}.total{display:flex;justify-content:space-between;padding-top:15px;font-weight:700;font-size:17px}.total b{color:#00dca6;font-size:20px}.timeline{position:relative;min-height:74px;display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center}.timeline:not(.last)::after{content:"";position:absolute;left:17px;top:25px;bottom:-20px;border-left:2px solid rgba(0,220,166,.55)}.dot{width:36px;height:36px;z-index:1;display:grid;place-items:center;border-radius:50%;background:#181817;border:2px solid}.dot.done{color:#00dca6;border-color:#00dca6}.dot.progress{color:#ffd600;border-color:#ffd600}.dot.rejected{color:#ff5360;border-color:#ff5360}.timeline strong,.timeline small{display:block}.timeline small{margin-top:5px;color:#9f9690;font-size:13px}.timeline>b{font-size:13px}.small-note{margin:10px 0 0 58px;color:#817972;font-size:11px;line-height:1.45}.note{display:flex;gap:15px;padding:17px;border-color:rgba(255,214,0,.32);background:linear-gradient(135deg,rgba(61,48,4,.35),rgba(30,27,21,.94))}.note>span{width:43px;height:43px;display:grid;place-items:center;color:#ffd600;border-radius:10px;border:1px solid rgba(255,214,0,.45);background:rgba(109,85,0,.2)}.note h3{margin:0 0 7px;color:#ffd600}.note p{margin:0;color:#c5bcb5;line-height:1.55;font-size:13px}.bottom{margin-top:18px}.earning-hero{min-height:132px;display:flex;align-items:center;padding:20px;gap:27px;margin-bottom:17px}.hero-check{width:80px;height:80px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#00d77d}.earning-hero h2{margin:0;font-size:20px}.earning-hero strong{display:block;margin-top:5px;color:#ffd600;font-size:38px}.earning-hero p{margin:4px 0 0;color:#a99e96;font-size:14px}.section-icon{display:inline-grid;vertical-align:middle;margin-right:10px}.session-card,.breakdown{border:1px solid rgba(116,98,88,.23);border-radius:12px;overflow:hidden;background:rgba(39,32,29,.58)}.session-title{min-height:122px;display:flex;align-items:center;gap:15px;padding:18px}.session-avatar{width:61px;height:61px;display:grid;place-items:center;flex:0 0 61px;border-radius:50%;color:#ffd600;border:1px solid rgba(0,220,166,.5);background:rgba(0,120,100,.15)}.session-title strong,.session-title span,.session-title em{display:block}.session-title strong{font-size:18px}.session-title span{margin-top:5px;color:#9f968f;font-size:13px}.session-title em{margin-top:6px;color:#ff4e59;font-style:italic;font-size:13px}.session-card .row{padding:0 17px}.breakdown{padding:7px 18px}.api-note{display:flex;align-items:flex-start;gap:10px;margin-top:17px;padding:13px 16px;color:#9f9690;font-size:12px;line-height:1.5}.api-note svg{color:#ffd600}.loading{margin-top:70px;min-height:180px;display:grid;place-items:center;text-align:center;border:1px solid rgba(125,105,92,.35);border-radius:14px;background:rgba(34,29,26,.9);color:#aaa19a;padding:30px}.loading h1{color:#f4eee8}.loading p{margin:8px 0 20px}@media(max-width:1050px){.withdraw-grid,.earning-grid{grid-template-columns:1fr}}@media(max-width:760px){.main{padding:18px 12px 30px}.head{flex-direction:column;align-items:flex-start}.head>.back{width:100%}.banner{align-items:flex-start;padding:16px}.banner-icon{width:55px;height:55px;flex-basis:55px}.row{align-items:flex-start;flex-direction:column;justify-content:center;gap:6px;padding:11px 0}.value{text-align:left}.earning-hero{padding:20px}.earning-hero strong{font-size:31px}.timeline{grid-template-columns:40px 1fr}.timeline>b{grid-column:2}}
`;