import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useAuth } from '../context/useAuth';
import WalletTab from '../components/wallet/WalletTab';
import AssetsTab from '../components/wallet/AssetsTab';
import InventoryTab from '../components/wallet/InventoryTab';
import MarketTab from '../components/wallet/MarketTab';
import './WalletPage.css';

const TABS = [
  { key: 'wallet', label: '지갑' },
  { key: 'assets', label: '자산' },
  { key: 'inventory', label: '인벤토리' },
  { key: 'market', label: '마켓' },
];

export default function WalletPage() {
  const { user, logout } = useAuth();
  const [tab, setTab] = useState('wallet');

  return (
    <div className="wallet-page">
      <header className="wallet-header">
        <div className="wallet-header-left">
          <Link to="/" className="wallet-home-link">← 메인으로</Link>
          <h1 className="wallet-title">지갑</h1>
        </div>
        <div className="wallet-header-right">
          <span className="wallet-username">{user?.username}</span>
          <button className="btn-wallet-logout" onClick={logout}>로그아웃</button>
        </div>
      </header>

      <div className="wallet-tabs" role="tablist">
        {TABS.map((t) => (
          <button
            key={t.key}
            role="tab"
            id={`tab-${t.key}`}
            aria-selected={tab === t.key}
            aria-controls={`tabpanel-${t.key}`}
            className={`wallet-tab${tab === t.key ? ' active' : ''}`}
            onClick={() => setTab(t.key)}
          >
            {t.label}
          </button>
        ))}
      </div>

      <main className="wallet-main" role="tabpanel" id={`tabpanel-${tab}`} aria-labelledby={`tab-${tab}`}>
        {tab === 'wallet' && <WalletTab />}
        {tab === 'assets' && <AssetsTab />}
        {tab === 'inventory' && <InventoryTab />}
        {tab === 'market' && <MarketTab />}
      </main>
    </div>
  );
}