import Add from "@mui/icons-material/Add";
import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
import ArrowUpwardOutlined from "@mui/icons-material/ArrowUpwardOutlined";
import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
import EditOutlined from "@mui/icons-material/EditOutlined";
import MonetizationOnOutlined from "@mui/icons-material/MonetizationOnOutlined";
import RemoveCircleOutlineOutlined from "@mui/icons-material/RemoveCircleOutlineOutlined";
import ReceiptLongOutlined from "@mui/icons-material/ReceiptLongOutlined";
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
import SwapVertOutlined from "@mui/icons-material/SwapVertOutlined";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import TextField from "@mui/material/TextField";
import {
    AdminFormAmountField,
    AdminFormFieldGrid,
    AdminFormReadOnlyField,
    AdminFormSection,
    AdminFormSwitchField,
} from "@/shared/ui/AdminFormDialog.jsx";
import { formatMillis } from "@/shared/utils/time.js";
import { DataState } from "@/shared/ui/DataState.jsx";
import { AdminActionIconButton, AdminRowActions } from "@/shared/ui/AdminListLayout.jsx";
import { AdminUserIdentity } from "@/shared/ui/AdminUserIdentity.jsx";
import { InlineEditableCell } from "@/shared/ui/InlineEditableCell.jsx";
import { SideDrawer } from "@/shared/ui/SideDrawer.jsx";
import { coinSellerStatusFilters } from "@/features/host-org/constants.js";
import { HostOrgActionModal } from "@/features/host-org/components/HostOrgActionModal.jsx";
import { HostOrgTable } from "@/features/host-org/components/HostOrgTable.jsx";
import { HostOrgToolbar } from "@/features/host-org/components/HostOrgToolbar.jsx";
import { useHostCoinSellersPage } from "@/features/host-org/hooks/useHostCoinSellersPage.js";
import { CoinSellerLedgerTable } from "@/features/operations/components/CoinSellerLedgerTable.jsx";
import { createRegionColumnFilter } from "@/shared/ui/RegionFilterControl.jsx";
import { createOptionsColumnFilter, createUserIdentityColumnFilter } from "@/shared/ui/tableFilters.js";
import styles from "@/features/host-org/host-org.module.css";

const baseColumns = [
    {
        key: "seller",
        label: "币商",
        render: (item) => <SellerIdentity item={item} />,
        width: "minmax(220px, 1.3fr)",
    },
    {
        key: "regionId",
        label: "区域",
        render: (item, _index, context) => regionName(item, context?.regionOptions),
        width: "minmax(140px, 0.8fr)",
    },
    {
        key: "contact",
        label: "联系方式",
        render: (item, _index, context) => <SellerContact item={item} page={context?.page} />,
        width: "minmax(170px, 1fr)",
    },
    {
        key: "merchantBalance",
        label: "币商余额",
        sortable: true,
        sortField: "merchant_balance",
        render: (item) => formatNumber(item.merchantBalance),
        width: "minmax(120px, 0.8fr)",
    },
    {
        key: "totalRechargeUsdt",
        label: "累充USDT",
        sortable: true,
        sortField: "total_recharge_usdt",
        render: (item) => formatUSDTMicro(item.totalRechargeUsdtMicro),
        width: "minmax(130px, 0.8fr)",
    },
    {
        key: "updatedAtMs",
        label: "更新时间",
        render: (item) => formatMillis(item.updatedAtMs),
        width: "minmax(170px, 1fr)",
    },
];

const subSellerColumns = [
    {
        key: "seller",
        label: "子币商",
        render: (item) => <SellerIdentity item={item} />,
        width: "minmax(220px, 1.3fr)",
    },
    {
        key: "regionId",
        label: "区域",
        render: (item, _index, context) => regionName(item, context?.regionOptions),
        width: "minmax(140px, 0.8fr)",
    },
    {
        key: "status",
        label: "状态",
        render: (item) => item.status || "-",
        width: "minmax(90px, 0.5fr)",
    },
    {
        key: "merchantBalance",
        label: "币商余额",
        render: (item) => formatNumber(item.merchantBalance),
        width: "minmax(120px, 0.8fr)",
    },
    {
        key: "updatedAtMs",
        label: "更新时间",
        render: (item) => formatMillis(item.updatedAtMs),
        width: "minmax(170px, 1fr)",
    },
];

export function HostCoinSellersPage() {
    const page = useHostCoinSellersPage();
    const items = page.data.items || [];
    const total = page.data.total || 0;
    const stockDebitForm = page.stockDebitForm || { coinAmount: "", reason: "" };
    const createDisabled = !page.abilities.canCreate;
    const updateDisabled = !page.abilities.canUpdate;
    const columns = [
        ...baseColumns.slice(0, 2),
        {
            key: "status",
            label: "状态",
            render: (item) => <SellerStatusSwitch item={item} page={page} />,
            width: "minmax(90px, 0.6fr)",
        },
        {
            key: "canManageSubCoinSellers",
            label: "子币商权限",
            render: (item) => <SubCoinSellerPermissionSwitch item={item} page={page} />,
            width: "minmax(120px, 0.7fr)",
        },
        {
            key: "subCoinSellerCount",
            label: "子币商数量",
            render: (item) => <SubCoinSellerCountButton item={item} page={page} />,
            width: "minmax(120px, 0.7fr)",
        },
        ...baseColumns.slice(2),
        page.abilities.canUpdate || page.abilities.canStockCredit || page.abilities.canLedger
            ? {
                  key: "actions",
                  label: "操作",
                  render: (item) => <SellerActions item={item} page={page} />,
                  width: "minmax(160px, 0.75fr)",
              }
            : null,
    ]
        .filter(Boolean)
        .map((column) => {
            if (column.key === "seller") {
                return {
                    ...column,
                    filter: createUserIdentityColumnFilter({
                        value: page.userFilter,
                        onChange: page.changeUserFilter,
                    }),
                };
            }
            if (column.key === "status") {
                return {
                    ...column,
                    filter: createOptionsColumnFilter({
                        options: coinSellerStatusFilters,
                        placeholder: "搜索状态",
                        value: page.status,
                        onChange: page.changeStatus,
                    }),
                };
            }
            if (column.sortable) {
                return {
                    ...column,
                    header: (
                        <SortHeader
                            field={column.sortField}
                            label={column.label}
                            sortBy={page.sortBy}
                            sortDirection={page.sortDirection}
                            onToggle={page.changeSort}
                        />
                    ),
                };
            }
            return column;
        });
    const regionFilter = createRegionColumnFilter({
        loading: page.loadingRegions,
        options: page.regionOptions,
        value: page.regionId,
        onChange: page.changeRegionId,
    });
    const leadingActions = [
        page.abilities.canExchangeRate
            ? { icon: <SettingsOutlined fontSize="small" />, label: "工资兑换比例", onClick: page.openRateSettings }
            : null,
    ].filter(Boolean);
    const toolbarActions = [
        page.abilities.canCreate
            ? { icon: <Add fontSize="small" />, label: "添加币商", onClick: page.openCreateSeller, variant: "primary" }
            : null,
    ].filter(Boolean);

    return (
        <section className={styles.root}>
            <div className={styles.contentPanel}>
                <HostOrgToolbar actions={toolbarActions} leadingActions={leadingActions} />

                <DataState error={page.error} loading={page.loading} onRetry={page.reload}>
                    <div className={styles.listBlock}>
                        <HostOrgTable
                            columns={columns}
                            context={{ page, regionOptions: page.regionOptions }}
                            items={items}
                            minWidth="1080px"
                            pagination={
                                total > 0
                                    ? {
                                          page: page.page,
                                          pageSize: page.data.pageSize || 50,
                                          total,
                                          onPageChange: page.setPage,
                                      }
                                    : undefined
                            }
                            regionFilter={regionFilter}
                            rowKey={(item) => item.userId}
                        />
                    </div>
                </DataState>
            </div>

            <HostOrgActionModal
                disabled={createDisabled}
                loading={page.loadingAction === "coin-seller-create"}
                open={page.activeAction === "create"}
                sectionTitle="币商信息"
                onClose={page.closeAction}
                onSubmit={page.submitCreateSeller}
                title="添加币商"
            >
                <TextField
                    disabled={createDisabled}
                    label="用户短 ID"
                    required
                    type="number"
                    value={page.createForm.targetUserId}
                    onChange={(event) => page.setCreateForm({ ...page.createForm, targetUserId: event.target.value })}
                />
                <TextField
                    disabled={createDisabled}
                    label="联系方式"
                    value={page.createForm.contact}
                    onChange={(event) => page.setCreateForm({ ...page.createForm, contact: event.target.value })}
                />
                <AdminFormSwitchField
                    checked={page.createForm.canManageSubCoinSellers !== false}
                    disabled={createDisabled}
                    label="子币商权限"
                    onChange={(checked) => page.setCreateForm({ ...page.createForm, canManageSubCoinSellers: checked })}
                />
            </HostOrgActionModal>

            <HostOrgActionModal
                disabled={updateDisabled}
                loading={String(page.loadingAction).startsWith("coin-seller-edit")}
                open={page.activeAction === "edit"}
                sectionTitle="联系方式"
                onClose={page.closeAction}
                onSubmit={page.submitEditSeller}
                title="编辑联系方式"
            >
                <TextField disabled label="用户 ID" required value={page.editForm.targetUserId} />
                <TextField
                    disabled={updateDisabled}
                    label="联系方式"
                    value={page.editForm.contact}
                    onChange={(event) => page.setEditForm({ ...page.editForm, contact: event.target.value })}
                />
                <AdminFormSwitchField
                    checked={page.editForm.canManageSubCoinSellers === true}
                    disabled={updateDisabled}
                    label="子币商权限"
                    onChange={(checked) => page.setEditForm({ ...page.editForm, canManageSubCoinSellers: checked })}
                />
            </HostOrgActionModal>

            <HostOrgActionModal
                disabled={!page.abilities.canStockCredit}
                loading={String(page.loadingAction).startsWith("coin-seller-stock")}
                open={page.activeAction === "stock"}
                sectioned={false}
                size="standard"
                submitLabel="确认入账"
                onClose={page.closeAction}
                onSubmit={page.submitStockCredit}
                title="币商进货"
            >
                <AdminFormSection title="基础信息">
                    <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                        <AdminFormReadOnlyField label="币商用户 ID" value={page.selectedSeller?.userId || ""} />
                        <AdminFormReadOnlyField
                            label="当前库存余额"
                            value={formatNumber(page.selectedSeller?.merchantBalance)}
                        />
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="充值信息">
                    <TextField
                        disabled={!page.abilities.canStockCredit}
                        label="类型"
                        required
                        select
                        value={page.stockForm.type}
                        onChange={(event) =>
                            page.setStockForm({
                                ...page.stockForm,
                                type: event.target.value,
                                rechargeAmount: "",
                            })
                        }
                    >
                        <MenuItem value="usdt_purchase">USDT进货</MenuItem>
                        <MenuItem value="coin_compensation">金币补偿</MenuItem>
                    </TextField>
                    <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                        <AdminFormAmountField
                            disabled={!page.abilities.canStockCredit}
                            inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                            label="充值金币"
                            required
                            unit="金币"
                            value={page.stockForm.coinAmount}
                            onChange={(event) =>
                                page.setStockForm({ ...page.stockForm, coinAmount: event.target.value })
                            }
                        />
                        {page.stockForm.type === "usdt_purchase" ? (
                            <AdminFormAmountField
                                disabled={!page.abilities.canStockCredit}
                                label="充值金额"
                                required
                                unit="USDT"
                                value={page.stockForm.rechargeAmount}
                                onChange={(event) =>
                                    page.setStockForm({ ...page.stockForm, rechargeAmount: event.target.value })
                                }
                            />
                        ) : null}
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="备注信息">
                    <TextField
                        disabled={!page.abilities.canStockCredit}
                        label="原因"
                        multiline
                        minRows={2}
                        value={page.stockForm.reason}
                        onChange={(event) => page.setStockForm({ ...page.stockForm, reason: event.target.value })}
                    />
                </AdminFormSection>
            </HostOrgActionModal>

            <HostOrgActionModal
                disabled={!page.abilities.canStockCredit}
                loading={String(page.loadingAction).startsWith("coin-seller-stock-debit")}
                open={page.activeAction === "stock-debit"}
                sectioned={false}
                size="standard"
                submitLabel="确认扣除"
                onClose={page.closeAction}
                onSubmit={page.submitStockDebit}
                title="币商金币扣除"
            >
                <AdminFormSection title="基础信息">
                    <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                        <AdminFormReadOnlyField label="币商用户 ID" value={page.selectedSeller?.userId || ""} />
                        <AdminFormReadOnlyField
                            label="当前库存余额"
                            value={formatNumber(page.selectedSeller?.merchantBalance)}
                        />
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="扣除信息">
                    <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
                        <AdminFormAmountField
                            disabled={!page.abilities.canStockCredit}
                            inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                            label="扣除金币"
                            required
                            unit="金币"
                            value={stockDebitForm.coinAmount}
                            onChange={(event) =>
                                page.setStockDebitForm?.({ ...stockDebitForm, coinAmount: event.target.value })
                            }
                        />
                        <AdminFormAmountField
                            disabled={!page.abilities.canStockCredit}
                            inputProps={{ inputMode: "decimal" }}
                            label="扣除USDT数量"
                            required
                            unit="USDT"
                            value={stockDebitForm.rechargeAmount}
                            onChange={(event) =>
                                page.setStockDebitForm?.({ ...stockDebitForm, rechargeAmount: event.target.value })
                            }
                        />
                    </AdminFormFieldGrid>
                </AdminFormSection>
                <AdminFormSection title="备注信息">
                    <TextField
                        disabled={!page.abilities.canStockCredit}
                        label="原因"
                        multiline
                        required
                        minRows={2}
                        value={stockDebitForm.reason}
                        onChange={(event) =>
                            page.setStockDebitForm?.({ ...stockDebitForm, reason: event.target.value })
                        }
                    />
                </AdminFormSection>
            </HostOrgActionModal>

            <SideDrawer
                className={styles.ledgerDrawer}
                contentClassName={styles.ledgerDrawerBody}
                open={page.activeAction === "ledger"}
                title={`币商流水 - ${sellerDrawerTitle(page.selectedSeller)}`}
                width="wide"
                onClose={page.closeAction}
            >
                {page.selectedSeller ? (
                    <CoinSellerLedgerTable
                        lockedSeller={page.selectedSeller}
                        sellerUserId={page.selectedSeller.userId}
                    />
                ) : null}
            </SideDrawer>

            <SideDrawer
                className={styles.ledgerDrawer}
                contentClassName={styles.ledgerDrawerBody}
                open={page.activeAction === "sub-sellers"}
                title={`子币商列表 - ${sellerDrawerTitle(page.selectedSeller)}`}
                width="wide"
                onClose={page.closeAction}
            >
                <DataState loading={page.loadingSubSellers}>
                    <HostOrgTable
                        columns={subSellerColumns}
                        context={{ regionOptions: page.regionOptions }}
                        items={page.subSellerData.items || []}
                        minWidth="860px"
                        pagination={
                            Number(page.subSellerData.total || 0) > 0
                                ? {
                                      page: page.subSellerPage,
                                      pageSize: page.subSellerData.pageSize || 50,
                                      total: page.subSellerData.total,
                                      onPageChange: page.setSubSellerPage,
                                  }
                                : undefined
                        }
                        rowKey={(item) => item.userId}
                    />
                </DataState>
            </SideDrawer>

            <SideDrawer
                actions={
                    <>
                        <Button onClick={page.closeAction}>取消</Button>
                        <Button
                            disabled={!page.abilities.canExchangeRate || page.loadingAction === "coin-seller-rates"}
                            variant="contained"
                            onClick={page.submitRateSettings}
                        >
                            保存
                        </Button>
                    </>
                }
                open={page.activeAction === "rates"}
                title="币商工资兑换比例"
                width="wide"
                onClose={page.closeAction}
            >
                <form className={styles.rateDrawerForm} onSubmit={page.submitRateSettings}>
                    <TextField
                        disabled={page.loadingRegions || page.loadingRates}
                        label="区域"
                        required
                        select
                        value={page.rateRegionId}
                        onChange={(event) => page.changeRateRegionId(event.target.value)}
                    >
                        {page.regionOptions.map((region) => (
                            <MenuItem key={region.value} value={region.value}>
                                {region.label}
                            </MenuItem>
                        ))}
                    </TextField>
                    <div className={styles.rateTierHeader}>
                        <span>区间配置</span>
                        <Button size="small" variant="outlined" onClick={page.addRateTier}>
                            添加区间
                        </Button>
                    </div>
                    <div className={styles.rateTierList}>
                        {page.rateTiers.map((tier, index) => (
                            <div className={styles.rateTierRow} key={`${index}-${tier.sortOrder}`}>
                                <TextField
                                    label="min USD"
                                    required
                                    value={tier.minUsd}
                                    onChange={(event) => page.updateRateTier(index, { minUsd: event.target.value })}
                                />
                                <TextField
                                    label="max USD"
                                    required
                                    value={tier.maxUsd}
                                    onChange={(event) => page.updateRateTier(index, { maxUsd: event.target.value })}
                                />
                                <TextField
                                    inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                                    label="coin per USD"
                                    required
                                    value={tier.coinPerUsd}
                                    onChange={(event) => page.updateRateTier(index, { coinPerUsd: event.target.value })}
                                />
                                <div className={styles.rateTierSwitch}>
                                    <AdminSwitch
                                        checked={tier.enabled !== false}
                                        checkedLabel="启用"
                                        label="状态"
                                        uncheckedLabel="停用"
                                        onChange={(event) =>
                                            page.updateRateTier(index, { enabled: event.target.checked })
                                        }
                                    />
                                </div>
                                <AdminActionIconButton
                                    disabled={page.rateTiers.length <= 1}
                                    label="删除区间"
                                    onClick={() => page.removeRateTier(index)}
                                >
                                    <DeleteOutlineOutlined fontSize="small" />
                                </AdminActionIconButton>
                            </div>
                        ))}
                    </div>
                </form>
            </SideDrawer>
        </section>
    );
}

function SellerIdentity({ item }) {
    return <AdminUserIdentity openInAppUserDetail user={item} />;
}

function SellerStatusSwitch({ item, page }) {
    return (
        <AdminSwitch
            checked={item.status === "active"}
            disabled={!page.abilities.canUpdate || page.loadingAction === `coin-seller-status-${item.userId}`}
            inputProps={{ "aria-label": item.status === "active" ? "停用币商" : "启用币商" }}
            onChange={(event) => page.toggleSeller(item, event.target.checked)}
        />
    );
}

function SubCoinSellerPermissionSwitch({ item, page }) {
    return (
        <AdminSwitch
            checked={item.canManageSubCoinSellers === true}
            checkedLabel="开"
            disabled={!page.abilities.canUpdate || page.loadingAction === `coin-seller-sub-permission-${item.userId}`}
            inputProps={{ "aria-label": item.canManageSubCoinSellers === true ? "关闭子币商权限" : "开启子币商权限" }}
            uncheckedLabel="关"
            onChange={(event) => page.toggleSubCoinSellerPermission(item, event.target.checked)}
        />
    );
}

function SubCoinSellerCountButton({ item, page }) {
    const count = Number(item.subCoinSellerCount || 0);
    return (
        <Button
            disabled={!page.abilities.canView || page.loadingSubSellers}
            size="small"
            variant="text"
            onClick={() => page.openSubSellerList(item)}
        >
            {formatNumber(count)}
        </Button>
    );
}

function SellerContact({ item, page }) {
    const contact = String(item.contact || "").trim();
    return (
        <InlineEditableCell
            buttonTitle="点击编辑联系方式"
            displayValue={contact || (page?.abilities.canUpdate ? "填写联系方式" : "未填写")}
            editable={Boolean(page?.abilities.canUpdate)}
            emptyLabel={page?.abilities.canUpdate ? "填写联系方式" : "未填写"}
            inputProps={{ maxLength: 128 }}
            maxWidth="170px"
            normalizeValue={(value) => String(value ?? "").trim()}
            saving={Boolean(page?.contactSavingIds?.[item.userId])}
            value={contact}
            variant="link"
            width="100%"
            onSave={(nextValue) => page.saveSellerContact(item, nextValue)}
        />
    );
}

function SellerActions({ item, page }) {
    return (
        <AdminRowActions>
            {page.abilities.canUpdate ? (
                <AdminActionIconButton
                    disabled={page.loadingAction === `coin-seller-edit-${item.userId}`}
                    label="编辑币商"
                    onClick={() => page.openEditSeller(item)}
                >
                    <EditOutlined fontSize="small" />
                </AdminActionIconButton>
            ) : null}
            {page.abilities.canLedger ? (
                <AdminActionIconButton
                    label="币商流水"
                    sx={coinLedgerActionSx}
                    onClick={() => page.openSellerLedger(item)}
                >
                    <ReceiptLongOutlined fontSize="small" />
                </AdminActionIconButton>
            ) : null}
            {page.abilities.canStockCredit ? (
                <AdminActionIconButton
                    disabled={page.loadingAction === `coin-seller-stock-${item.userId}`}
                    label="加金币"
                    sx={coinCreditActionSx}
                    onClick={() => page.openStockCredit(item)}
                >
                    <MonetizationOnOutlined fontSize="small" />
                </AdminActionIconButton>
            ) : null}
            {page.abilities.canStockCredit ? (
                <AdminActionIconButton
                    disabled={page.loadingAction === `coin-seller-stock-debit-${item.userId}`}
                    label="扣金币"
                    sx={coinDebitActionSx}
                    onClick={() => page.openStockDebit(item)}
                >
                    <RemoveCircleOutlineOutlined fontSize="small" />
                </AdminActionIconButton>
            ) : null}
        </AdminRowActions>
    );
}

function sellerDrawerTitle(seller) {
    if (!seller) {
        return "";
    }
    const name = seller.username || "-";
    const displayId = seller.displayUserId || seller.userId || "";
    return displayId ? `${name} / ${displayId}` : name;
}

function regionName(item, regionOptions = []) {
    if (item.regionName) {
        return item.regionName;
    }
    const option = regionOptions.find((region) => String(region.value) === String(item.regionId));
    return option?.name || item.regionId || "-";
}

function formatNumber(value) {
    return Number(value || 0).toLocaleString("zh-CN");
}

function formatUSDTMicro(value) {
    const amount = Number(value || 0);
    if (!Number.isFinite(amount) || amount <= 0) {
        return "0";
    }
    const whole = Math.trunc(amount / 1_000_000);
    const fraction = Math.trunc(Math.abs(amount % 1_000_000));
    const trimmedFraction = String(fraction).padStart(6, "0").replace(/0+$/, "");
    return trimmedFraction ? `${whole}.${trimmedFraction}` : String(whole);
}

function SortHeader({ field, label, onToggle, sortBy, sortDirection }) {
    const active = sortBy === field;
    const SortIcon =
        active && sortDirection === "asc"
            ? ArrowUpwardOutlined
            : active && sortDirection === "desc"
              ? ArrowDownwardOutlined
              : SwapVertOutlined;
    const directionLabel = sortDirection === "asc" ? "升序" : "降序";
    const nextDirectionLabel = active && sortDirection === "desc" ? "升序" : "降序";
    return (
        <button
            aria-label={`按${label}${nextDirectionLabel}排序`}
            className={["admin-cell__head-trigger", active ? "admin-cell__head-trigger--active" : ""]
                .filter(Boolean)
                .join(" ")}
            type="button"
            onClick={() => onToggle(field)}
        >
            <SortIcon className="admin-cell__head-icon" fontSize="inherit" />
            <span className="admin-cell__head-label">
                {label}
                {active ? <span className="admin-cell__head-filter">({directionLabel})</span> : null}
            </span>
        </button>
    );
}

const coinLedgerActionSx = {
    borderColor: "rgba(37, 99, 235, 0.28)",
    backgroundColor: "rgba(37, 99, 235, 0.08)",
    color: "#1d4ed8",
    "&:hover": {
        borderColor: "rgba(37, 99, 235, 0.48)",
        backgroundColor: "rgba(37, 99, 235, 0.14)",
        color: "#1e40af",
    },
    "& .MuiSvgIcon-root": {
        color: "#2563eb",
    },
};

const coinCreditActionSx = {
    borderColor: "rgba(245, 158, 11, 0.45)",
    backgroundColor: "rgba(251, 191, 36, 0.16)",
    color: "#b45309",
    "&:hover": {
        borderColor: "rgba(245, 158, 11, 0.72)",
        backgroundColor: "rgba(251, 191, 36, 0.24)",
        color: "#92400e",
    },
    "& .MuiSvgIcon-root": {
        color: "#f59e0b",
    },
};

const coinDebitActionSx = {
    borderColor: "rgba(220, 38, 38, 0.34)",
    backgroundColor: "rgba(254, 226, 226, 0.65)",
    color: "#b91c1c",
    "&:hover": {
        borderColor: "rgba(220, 38, 38, 0.58)",
        backgroundColor: "rgba(254, 202, 202, 0.75)",
        color: "#991b1b",
    },
    "& .MuiSvgIcon-root": {
        color: "#dc2626",
    },
};