ANTOOZA-FRONTEND/app/(main)/paper/_components/PaperDepositWithdrawModal.tsx

'use client';

import { useCallback, useEffect, useState } from 'react';
import { fetchApi } from '@/lib/utils/client';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { formatTokenNumber } from '@/lib/utils/paper';
import type { PaperAccountResponse, PaperDepositResponse, PaperWithdrawResponse } from '@/types/paper';

// 지갑 토큰(Reward+Airdrop) 합산용 최소 타입 — GET /api/wallet
interface WalletBalanceRow {
	type: string;
	amount: number;
}
interface WalletResponse {
	balances: WalletBalanceRow[];
}

type Props = {
	mode: 'deposit'|'withdraw';
	account: PaperAccountResponse|null;
	onClose: () => void;
	onDone: () => void;
};

const TOKEN_TYPES = ['Reward', 'Airdrop'];

export default function PaperDepositWithdrawModal({ mode, account, onClose, onDone }: Props)
{
	const isDeposit = mode === 'deposit';
	const [amount, setAmount] = useState('');
	const [all, setAll] = useState(false);
	const [walletToken, setWalletToken] = useState<number|null>(null);
	const [busy, setBusy] = useState(false);
	const [error, setError] = useState<string|null>(null);

	// 입금 모드: 지갑 가용 토큰 조회
	useEffect(() => {
		if (!isDeposit) {
			return;
		}

		let cancelled = false;

		(async () => {
			const res = await fetchApi<WalletResponse>('/api/wallet', { silent: true });
			if (cancelled) {
				return;
			}

			if (res.success && res.data) {
				const sum = res.data.balances
					.filter(c => TOKEN_TYPES.includes(c.type))
					.reduce((acc, c) => acc + c.amount, 0);
				setWalletToken(sum);
			}
			else {
				setWalletToken(null);
			}
		})();

		return () => {
			cancelled = true;
		};
	}, [isDeposit]);

	const submit = useCallback(async () => {
		setError(null);

		const numeric = Number(amount);

		if (!isDeposit && all) {
			// 전액 출금 — 금액 불필요
		}
		else if (!Number.isInteger(numeric) || numeric <= 0) {
			setError('1 이상의 정수 토큰 금액을 입력해 주세요.');
			return;
		}

		setBusy(true);

		const endpoint = isDeposit ? '/api/paper/account/deposit' : '/api/paper/account/withdraw';
		const body = isDeposit
			? { tokenAmount: numeric }
			: (all ? { all: true } : { tokenAmount: numeric });

		const res = await fetchApi<PaperDepositResponse|PaperWithdrawResponse>(endpoint, {
			method: 'POST',
			body,
			silent: true
		});

		setBusy(false);

		if (res.success && res.data) {
			onDone();
		}
		else {
			setError(res.message || `${isDeposit ? '입금' : '출금'}에 실패했습니다.`);
		}
	}, [amount, all, isDeposit, onDone]);

	return (
		<Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
			<DialogContent>
				<DialogHeader>
					<DialogTitle>{isDeposit ? '토큰 입금' : '토큰 출금'}</DialogTitle>
				</DialogHeader>

				<div className='paper-modal__body'>
					{isDeposit ? (
						<p className='paper-modal__balance'>
							지갑 가용 토큰 <strong>{walletToken === null ? '—' : formatTokenNumber(walletToken)}</strong>
						</p>
					) : (
						<p className='paper-modal__balance'>
							계좌 가용 토큰 <strong>{formatTokenNumber(account?.token ?? 0)}</strong>
						</p>
					)}

					{!isDeposit && (
						<label className='paper-modal__all'>
							<input
								type='checkbox'
								checked={all}
								onChange={e => setAll(e.target.checked)}
							/>
							가용 토큰 전액 출금
						</label>
					)}

					{!(!isDeposit && all) && (
						<div className='paper-modal__field'>
							<span className='paper-modal__label'>{isDeposit ? '입금' : '출금'} 토큰</span>
							<input
								className='paper-modal__input'
								type='number'
								min={1}
								step={1}
								inputMode='numeric'
								value={amount}
								onChange={e => setAmount(e.target.value)}
								placeholder='토큰 수량'
								autoFocus
							/>
						</div>
					)}

					<p className='paper-modal__hint'>
						{isDeposit
							? '입금한 토큰만큼 좌수가 발행되며, 지갑 토큰이 차감됩니다.'
							: '출금한 토큰만큼 좌수가 소각되며, 지갑 토큰으로 환급됩니다.'}
					</p>

					{error && <p className='paper-modal__error' role='alert'>{error}</p>}

					<div className='paper-modal__footer'>
						<button type='button' className='paper__btn' onClick={onClose} disabled={busy}>
							취소
						</button>
						<button type='button' className='paper__btn paper__btn--primary' onClick={submit} disabled={busy}>
							{busy ? '처리 중...' : (isDeposit ? '입금' : '출금')}
						</button>
					</div>
				</div>
			</DialogContent>
		</Dialog>
	);
}