// 企业记账占位页 - 后续完善功能

const { useState } = React;

function AccountingEnterprisePage() {
  let navigate = () => {};
  let showToast = (msg) => console.log('[toast]', msg);

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

  const features = [
    { icon: '📊', title: '公司收支', desc: '多账户统一管理' },
    { icon: '📋', title: '项目台账', desc: '按项目归集成本收入' },
    { icon: '🤝', title: '往来管理', desc: '客户/供应商对账' },
    { icon: '📈', title: '财务报表', desc: '利润表/资产负债表' },
  ];

  return (
    <PageWrapper>
      {/* 顶部导航 */}
      <div style={{
        position: 'sticky',
        top: 0,
        zIndex: 20,
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
        padding: '14px 16px',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
      }}>
        <div
          onClick={() => navigate('accounting')}
          style={{
            fontSize: 18,
            color: 'var(--text-primary)',
            cursor: 'pointer',
            width: 28,
            height: 28,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          ‹
        </div>
        <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>
          企业记账
        </div>
        <div style={{ flex: 1 }}></div>
      </div>

      {/* 占位内容 */}
      <div style={{
        padding: '40px 24px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
      }}>
        <div style={{
          width: 80,
          height: 80,
          borderRadius: 20,
          background: 'linear-gradient(135deg, #165DFF, #4080FF)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 40,
          marginBottom: 20,
          boxShadow: '0 8px 24px rgba(22, 93, 255, 0.25)',
        }}>
          🏢
        </div>

        <div style={{
          fontSize: 20,
          fontWeight: 700,
          color: 'var(--text-primary)',
          marginBottom: 8,
        }}>
          企业记账
        </div>
        <div style={{
          fontSize: 13,
          color: 'var(--text-secondary)',
          marginBottom: 32,
          maxWidth: 280,
          lineHeight: 1.6,
        }}>
          专为中小企业和机构打造的专业记账功能，正在紧锣密鼓开发中
        </div>

        {/* 功能预告 */}
        <div style={{
          width: '100%',
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 12,
          maxWidth: 400,
          marginBottom: 32,
        }}>
          {features.map((f, i) => (
            <div
              key={i}
              style={{
                background: 'var(--bg-card)',
                borderRadius: 12,
                padding: '20px 16px',
                border: '1px solid var(--border)',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: 8,
              }}
            >
              <div style={{ fontSize: 28 }}>{f.icon}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
                {f.title}
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
                {f.desc}
              </div>
            </div>
          ))}
        </div>

        <button
          onClick={() => showToast('功能开发中，敬请期待')}
          style={{
            padding: '12px 32px',
            background: 'linear-gradient(135deg, #165DFF, #4080FF)',
            color: '#fff',
            border: 'none',
            borderRadius: 24,
            fontSize: 14,
            fontWeight: 500,
            cursor: 'pointer',
          }}
        >
          预约通知我
        </button>
      </div>
    </PageWrapper>
  );
}

Object.assign(window, { AccountingEnterprisePage });