// Sitemap Page

function SitemapPage({ activeTab = 'home', setActiveTab, showDirect = false, onCloseDirect }) {
  const { navigate, showToast } = useApp();

  const personalModules = [
    { name: '心情动态', icon: '💭', action: 'feed' },
    { name: '爱情空间', icon: '💕', action: 'love' },
    { name: '记账模块', icon: '💰', action: 'accounting' },
    { name: '久聊IM', icon: '💬', action: 'im' },
    { name: '视频广场', icon: '🎬', action: 'video' },
    { name: '会员中心', icon: '👑', action: 'member' },
    { name: '云存储', icon: '☁️', action: null },
    { name: '个人主页', icon: '👤', action: null },
  ];

  const enterpriseModules = [
    { name: '企业黄页', icon: '🏢', action: 'yellowpages' },
    { name: '企业主页', icon: '🏛️', action: 'yellowpages' },
    { name: '订单中心', icon: '📋', action: 'orders' },
    { name: '分销中心', icon: '💰', action: 'distribution' },
    { name: '客户管理', icon: '👥', action: null },
    { name: '数据统计', icon: '📊', action: null },
  ];

  const contentModules = [
    { name: '文章发布', icon: '📝', action: 'feed' },
    { name: '图片分享', icon: '🖼️', action: 'feed' },
    { name: '视频上传', icon: '🎥', action: 'video' },
    { name: '文档管理', icon: '📄', action: null },
    { name: '云祭祀', icon: '🕯️', action: 'memorial' },
    { name: '留言板', icon: '📮', action: null },
  ];

  const adminModules = [
    { name: '网站地图', icon: '🗺️', action: 'sitemap' },
    { name: '应用中心', icon: '📱', action: 'apps' },
    { name: 'SEO设置', icon: '🔍', action: 'admin-seo' },
    { name: '百科审核', icon: '📖', action: 'admin-wiki' },
    { name: '个人设置', icon: '⚙️', action: null },
    { name: '安全中心', icon: '🔒', action: null },
    { name: '权限管理', icon: '🛡️', action: null },
    { name: '帮助中心', icon: '❓', action: null },
  ];

  const handleModuleClick = (module) => {
    if (module.action) {
      navigate(module.action);
    } else {
      showToast('功能开发中，敬请期待');
    }
  };

  const renderHome = () => (
    <div style={{ padding: 16 }}>
      <div className="card card-shadow" style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>网站地图</div>
        <div style={{ fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.6 }}>
          全站功能入口汇总，快速找到您需要的功能。<br/>
          四川久存网科技有限公司 · 云端永久存储平台
        </div>
      </div>

      {/* Quick Jump */}
      <div className="grid-4">
        {[
          { name: '首页', icon: '🏠', action: 'home' },
          { name: '应用中心', icon: '📱', action: 'apps' },
          { name: '会员', icon: '👑', action: 'member' },
          { name: '我的', icon: '👤', action: 'apps' },
        ].map(item => (
          <div
            key={item.name}
            className="card card-shadow"
            style={{ textAlign: 'center', cursor: 'pointer', padding: 12 }}
            onClick={() => navigate(item.action)}
          >
            <div style={{ fontSize: 24, marginBottom: 4 }}>{item.icon}</div>
            <div style={{ fontSize: 11 }}>{item.name}</div>
          </div>
        ))}
      </div>
    </div>
  );

  const renderModules = () => (
    <div style={{ padding: 16 }}>
      {/* Personal */}
      <div className="section-title">
        <span>个人功能</span>
      </div>
      <div className="card card-shadow" style={{ marginBottom: 16 }}>
        <div className="grid-4">
          {personalModules.map(mod => (
            <div
              key={mod.name}
              className="publish-item"
              onClick={() => handleModuleClick(mod)}
            >
              <div className="publish-icon" style={{ background: '#3B82F622', color: '#3B82F6' }}>
                {mod.icon}
              </div>
              <span className="publish-label">{mod.name}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Enterprise */}
      <div className="section-title">
        <span>企业功能</span>
      </div>
      <div className="card card-shadow" style={{ marginBottom: 16 }}>
        <div className="grid-4">
          {enterpriseModules.map(mod => (
            <div
              key={mod.name}
              className="publish-item"
              onClick={() => handleModuleClick(mod)}
            >
              <div className="publish-icon" style={{ background: '#D2691E22', color: '#D2691E' }}>
                {mod.icon}
              </div>
              <span className="publish-label">{mod.name}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Content */}
      <div className="section-title">
        <span>内容功能</span>
      </div>
      <div className="card card-shadow" style={{ marginBottom: 16 }}>
        <div className="grid-4">
          {contentModules.map(mod => (
            <div
              key={mod.name}
              className="publish-item"
              onClick={() => handleModuleClick(mod)}
            >
              <div className="publish-icon" style={{ background: '#8B5CF622', color: '#8B5CF6' }}>
                {mod.icon}
              </div>
              <span className="publish-label">{mod.name}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Admin */}
      <div className="section-title">
        <span>管理功能</span>
      </div>
      <div className="card card-shadow">
        <div className="grid-4">
          {adminModules.map(mod => (
            <div
              key={mod.name}
              className="publish-item"
              onClick={() => handleModuleClick(mod)}
            >
              <div className="publish-icon" style={{ background: '#86909C22', color: '#86909C' }}>
                {mod.icon}
              </div>
              <span className="publish-label">{mod.name}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderPerms = () => (
    <div style={{ padding: 16 }}>
      <div className="card card-shadow">
        <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 12 }}>权限说明</div>
        {[
          { level: '普通用户', color: '#86909C', features: ['基础内容浏览', '部分功能受限', '有限存储空间'] },
          { level: 'VIP会员', color: '#B8860B', features: ['全部功能解锁', '100GB存储空间', '专属客服支持'] },
          { level: '企业用户', color: '#D2691E', features: ['企业黄页入驻', '团队协作功能', '数据统计分析'] },
          { level: '合作伙伴', color: '#8B5CF6', features: ['分销佣金体系', '专属推广物料', '多级分销收益'] },
        ].map((item, idx) => (
          <div key={idx} style={{
            padding: '12px 0',
            borderBottom: idx < 3 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: item.color, marginBottom: 6 }}>
              {item.level}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {item.features.map((f, i) => (
                <span key={i} style={{
                  fontSize: 11, padding: '2px 8px',
                  background: item.color + '15',
                  color: item.color,
                  borderRadius: 4,
                }}>{f}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const renderMine = () => (
    <div style={{ padding: 16 }}>
      <div className="card card-shadow">
        <div className="list-item" style={{ padding: '12px 0' }} onClick={() => navigate('apps')}>
          <span style={{ fontSize: 20, marginRight: 12 }}>📱</span>
          <span className="flex-1">应用中心</span>
          <span style={{ color: 'var(--text-tertiary)' }}>→</span>
        </div>
        <div className="list-item" style={{ padding: '12px 0' }} onClick={() => navigate('member')}>
          <span style={{ fontSize: 20, marginRight: 12 }}>👑</span>
          <span className="flex-1">会员中心</span>
          <span style={{ color: 'var(--text-tertiary)' }}>→</span>
        </div>
        <div className="list-item" style={{ padding: '12px 0' }} onClick={() => navigate('orders')}>
          <span style={{ fontSize: 20, marginRight: 12 }}>📋</span>
          <span className="flex-1">我的订单</span>
          <span style={{ color: 'var(--text-tertiary)' }}>→</span>
        </div>
        <div className="list-item" style={{ padding: '12px 0' }} onClick={() => navigate('distribution')}>
          <span style={{ fontSize: 20, marginRight: 12 }}>💰</span>
          <span className="flex-1">分销中心</span>
          <span style={{ color: 'var(--text-tertiary)' }}>→</span>
        </div>
        <div className="list-item" style={{ padding: '12px 0', borderBottom: 'none' }} onClick={() => navigate('home')}>
          <span style={{ fontSize: 20, marginRight: 12 }}>🏠</span>
          <span className="flex-1">返回首页</span>
          <span style={{ color: 'var(--text-tertiary)' }}>→</span>
        </div>
      </div>
    </div>
  );

  return (
    <PageWrapper>
      <AppHeader title="网站地图" subtitle="功能导航" showBack />
      {activeTab === 'home' && renderHome()}
      {activeTab === 'modules' && renderModules()}
      {activeTab === 'perms' && renderPerms()}
      {activeTab === 'mine' && renderMine()}
    </PageWrapper>
  );
}

Object.assign(window, { SitemapPage });