// 记账启动引导页 - 选择个人/企业记账类型

const { useState } = React;

function AccountingOnboardingPage() {
  let navigate = () => {};
  let requireLogin = (cb) => {
    if (window.showToast) window.showToast('请先登录');
    return false;
  };
  let showToast = (msg) => console.log('[toast]', msg);

  try {
    const app = window.useApp ? window.useApp() : {};
    navigate = app.navigate || (() => {});
    requireLogin = app.requireLogin || requireLogin;
    showToast = app.showToast || showToast;
  } catch (e) {
    console.error('[AccountingOnboarding] useApp error:', e);
  }

  const handleSelect = (type) => {
    const target = type === 'personal' ? 'accounting-personal' : 'accounting-enterprise';
    const label = type === 'personal' ? '个人记账' : '企业记账';
    requireLogin(() => navigate(target), 'login');
  };

  return (
    <PageWrapper>
      <div style={{
        minHeight: '100%',
        padding: '60px 24px 40px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        background: 'var(--bg-page)',
      }}>
        {/* Logo / 图标区 */}
        <div style={{
          width: 72,
          height: 72,
          borderRadius: 20,
          background: 'linear-gradient(135deg, #00B578, #34D399)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 36,
          marginBottom: 24,
          boxShadow: '0 8px 24px rgba(0, 181, 120, 0.25)',
        }}>
          💰
        </div>

        {/* 标题 */}
        <div style={{
          fontSize: 24,
          fontWeight: 700,
          color: 'var(--text-primary)',
          marginBottom: 8,
          textAlign: 'center',
        }}>
          选择记账类型
        </div>
        <div style={{
          fontSize: 13,
          color: 'var(--text-secondary)',
          marginBottom: 40,
          textAlign: 'center',
        }}>
          选一个适合你的记账方式
        </div>

        {/* 选项卡片 */}
        <div style={{
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
          maxWidth: 400,
        }}>
          {/* 个人记账卡片 */}
          <div
            onClick={() => handleSelect('personal')}
            style={{
              background: 'var(--bg-card)',
              borderRadius: 16,
              padding: 24,
              border: '2px solid #E6FFED',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 16,
              transition: 'all 0.2s ease',
            }}
          >
            <div style={{
              width: 56,
              height: 56,
              borderRadius: 14,
              background: 'linear-gradient(135deg, #00B578, #34D399)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 28,
              flexShrink: 0,
            }}>
              👤
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: 17,
                fontWeight: 700,
                color: 'var(--text-primary)',
                marginBottom: 4,
              }}>
                个人记账
              </div>
              <div style={{
                fontSize: 12,
                color: 'var(--text-secondary)',
                lineHeight: 1.5,
              }}>
                记录日常收支、往来、预算
              </div>
            </div>
            <div style={{
              color: '#00B578',
              fontSize: 18,
              flexShrink: 0,
            }}>
              ›
            </div>
          </div>

          {/* 企业记账卡片 */}
          <div
            onClick={() => handleSelect('enterprise')}
            style={{
              background: 'var(--bg-card)',
              borderRadius: 16,
              padding: 24,
              border: '2px solid #EFF6FF',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: 16,
              transition: 'all 0.2s ease',
            }}
          >
            <div style={{
              width: 56,
              height: 56,
              borderRadius: 14,
              background: 'linear-gradient(135deg, #165DFF, #4080FF)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 28,
              flexShrink: 0,
            }}>
              🏢
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: 17,
                fontWeight: 700,
                color: 'var(--text-primary)',
                marginBottom: 4,
              }}>
                企业/机构记账
              </div>
              <div style={{
                fontSize: 12,
                color: 'var(--text-secondary)',
                lineHeight: 1.5,
              }}>
                公司收支、项目账、往来管理
              </div>
            </div>
            <div style={{
              color: '#165DFF',
              fontSize: 18,
              flexShrink: 0,
            }}>
              ›
            </div>
          </div>
        </div>

        {/* 底部提示 */}
        <div style={{
          marginTop: 'auto',
          paddingTop: 40,
          fontSize: 11,
          color: 'var(--text-tertiary)',
          textAlign: 'center',
        }}>
          登录后即可开始记账，数据安全存储
        </div>
      </div>
    </PageWrapper>
  );
}

Object.assign(window, { AccountingOnboardingPage });