'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { LogOut } from 'lucide-react';
import { fetchApi, getDateTime } from '@/lib/utils/client';
import type { WalletBalanceResponse } from '@/types/response/wallet/balance';
import { TRANSACTION_TYPE_MAP } from '../constants';
import Loading from '@/app/component/Loading';

export default function WalletBalancePage() {
	const [loading, setLoading] = useState(true);
	const [data, setData] = useState<WalletBalanceResponse|null>(null);

	useEffect(() => {
		fetchApi<WalletBalanceResponse>('/api/studio/wallet/balance')
			.then(res => {
				if (res.data) {
					setData(res.data);
				}
			})
			.catch(() => {})
			.finally(() => setLoading(false));
	}, []);

	if (loading || !data) {
		return <Loading />;
	}

	return (
		<div className="studio-page wallet">
			<div className="studio-page__header">
				<h1 className="studio-page__title">잔액 현황</h1>
			</div>

			{/* Summary Cards */}
			<div className="wallet__cards">
				<div className="wallet__card">
					<span className="wallet__card-label">출금 가능 잔액 (M)</span>
					<div className="wallet__card-value wallet__card-value--money">
						{data.withdrawableBalance.toLocaleString()}원
					</div>
				</div>
				<div className="wallet__card">
					<span className="wallet__card-label">누적 수익</span>
					<div className="wallet__card-value">
						{data.totalEarned.toLocaleString()}원
					</div>
				</div>
				<div className="wallet__card">
					<span className="wallet__card-label">누적 출금</span>
					<div className="wallet__card-value">
						{data.totalWithdrawn.toLocaleString()}원
					</div>
				</div>
			</div>

			{/* Actions */}
			<div className="wallet__actions">
				<Link href="/studio/wallet/withdraw" className="wallet__action-btn wallet__action-btn--primary">
					<LogOut className="size-4" />
					출금하기
				</Link>
			</div>

			{/* Recent Transactions */}
			<h2 className="wallet__section-title">최근 거래 내역</h2>

			<div className="wallet__table-wrap">
				<table className="wallet__table">
					<thead>
						<tr>
							<th>일시</th>
							<th>유형</th>
							<th>내용</th>
							<th style={{ textAlign: 'right' }}>금액</th>
							<th style={{ textAlign: 'right' }}>잔액</th>
						</tr>
					</thead>
					<tbody>
						{data.recentTransactions.length > 0 ? (
							data.recentTransactions.map((tx) => (
								<tr key={tx.id}>
									<td>{getDateTime(tx.createdAt)}</td>
									<td>{TRANSACTION_TYPE_MAP[tx.type] ?? tx.type}</td>
									<td>{tx.description}</td>
									<td style={{ textAlign: 'right' }}>
										<span className={tx.amount >= 0 ? 'wallet__amount--plus' : 'wallet__amount--minus'}>
											{tx.amount >= 0 ? '+' : ''}{tx.amount.toLocaleString()}원
										</span>
									</td>
									<td style={{ textAlign: 'right' }}>{tx.balance.toLocaleString()}원</td>
								</tr>
							))
						) : (
							<tr>
								<td colSpan={5} className="wallet__empty">거래 내역이 없습니다.</td>
							</tr>
						)}
					</tbody>
				</table>
			</div>
		</div>
	);
}