import React, { useState, useEffect, useMemo } from 'react';
import { ThemeProvider } from '@mui/material/styles';
import {
Box,
Typography,
IconButton,
Skeleton,
Divider,
} from '@mui/material';
import toast, { Toaster } from 'react-hot-toast';
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
import WalletOutlinedIcon from '@mui/icons-material/AccountBalanceWalletOutlined';
import HistoryToggleOffIcon from '@mui/icons-material/HistoryToggleOff';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useAdminTheme } from '../../../../src/shared/adminTheme/AdminThemeProvider';
import { getSettingsTheme } from '../../../../src/pages/Settings/theme';
import SidebarPromoCard from '../../../../src/shared/components/SidebarPromoCard';
import GatewayDetailView from './GatewayDetailView';
import { App as PendingPaymentsApp } from '../pending/App.jsx';
import {
ADMIN_CONTENT_MAX_WIDTH,
ADMIN_CONTENT_PADDING,
ADMIN_CARD_PADDING,
ADMIN_CARD_GAP,
ADMIN_SHELL_SX,
ADMIN_SIDEBAR_SX,
ADMIN_SIDEBAR_NAV_SX,
ADMIN_SIDEBAR_PROMO_SX,
ADMIN_CONTENT_COLUMN_SX,
ADMIN_SCROLL_AREA_SX,
} from '../../../../src/shared/adminShell/layout';
const NavCard = ({
colors, icon, title, description, onClick, index = 0, isUpsell = false, badge,
}) => (
{icon || }
{title}
{badge && (
{badge}
)}
{description && (
{description}
)}
{isUpsell ? (
) : (
)}
);
const SidebarItem = ({ colors, active, label, onClick, icon: Icon = SettingsOutlinedIcon }) => (
{label}
);
const DashboardSkeleton = ({ colors }) => (
{[1, 2, 3, 4, 5].map((i) => (
))}
);
export default function App({ config }) {
const { colors } = useAdminTheme();
const theme = useMemo(() => getSettingsTheme(), []);
const [activeCategory, setActiveCategory] = useState('gateways');
const [activeView, setActiveView] = useState('main');
const [gateways, setGateways] = useState([]);
const [upsellGateways, setUpsellGateways] = useState([]);
const [loading, setLoading] = useState(true);
const [navDirection, setNavDirection] = useState('forward');
const [settingsNonce, setSettingsNonce] = useState('');
useEffect(() => {
fetchGateways();
}, []);
const fetchGateways = async () => {
setLoading(true);
try {
const res = await fetch(config.apiUrl, {
headers: { 'X-WP-Nonce': config.apiNonce }
});
const data = await res.json();
setGateways(data.gateways || []);
setUpsellGateways([...(data.upsell_gateways || []), ...(data.more_gateways || [])]);
setSettingsNonce(data.settings_nonce || '');
} catch (err) {
console.error('Failed to load gateways', err);
toast.error('Failed to load gateway settings.');
} finally {
setLoading(false);
}
};
const handleNavigate = (view, category, direction = 'forward') => {
setNavDirection(direction);
if (category) setActiveCategory(category);
setActiveView(view);
};
const toastOptions = useMemo(() => ({
style: {
background: colors.paper,
color: colors.textPrimary,
border: `1px solid ${colors.border}`,
fontFamily: '"Figtree", sans-serif',
fontWeight: 500,
},
}), [colors]);
const activeGateway = useMemo(() => {
if (activeView === 'main') return null;
return gateways.find(g => g.id === activeView);
}, [activeView, gateways]);
const activeCount = gateways.filter(g => g.is_active).length;
return (
{/* Form wrapper for option saving */}
);
}