import { useLocation } from 'react-router-dom';

const pageTitleMap: Record<string, string> = {
  '/client/send': '短信发送',
  '/client/templates': '模板管理',
  '/client/signatures': '签名与引流信息',
  '/client/billing': '充值套餐',
  '/client/invoices': '账单流水',
  '/client/settings': '账号设置',
  '/admin/monitor': '发送监控',
  '/admin/analytics': '数据统计',
  '/admin/customers': '客户管理',
  '/admin/templates': '模板审核',
  '/admin/signatures': '签名审核',
  '/admin/channels': '通道管理',
  '/admin/billing': '账单流水',
  '/admin/settings': '系统配置',
};

export function PagePlaceholder() {
  const location = useLocation();
  const title = pageTitleMap[location.pathname] ?? '页面建设中';

  return (
    <section className="page-stack">
      <div className="page-heading">
        <div>
          <p className="eyebrow">模块</p>
          <h1>{title}</h1>
        </div>
        <p className="muted">后续步骤会在这里补齐表格、筛选、表单和交互流程。</p>
      </div>
      <div className="surface empty-state">
        <strong>{title}</strong>
        <span>页面骨架已接入，等待业务组件填充。</span>
      </div>
    </section>
  );
}