/* === Data Freshness Page === */
function PageOperationData() {
  const [activeTab, setActiveTab] = React.useState("sync");

  const tabs = [
    { id: "sync", label: "数据同步" },
    { id: "fetch", label: "数据获取" },
    { id: "storage", label: "数据入库" },
    { id: "import", label: "数据导入" },
    { id: "template", label: "模板管理" }
  ];

  const renderTabContent = () => {
    switch (activeTab) {
      case "sync":
        return (
          <div className="coming-soon">
            <div className="coming-soon-icon">🔄</div>
            <h3>敬请期待...</h3>
            <p>数据同步功能正在开发中</p>
          </div>
        );
      case "fetch":
        return (
          <div className="coming-soon">
            <div className="coming-soon-icon">📥</div>
            <h3>敬请期待...</h3>
            <p>数据获取功能正在开发中</p>
          </div>
        );
      case "storage":
        return (
          <div className="coming-soon">
            <div className="coming-soon-icon">💾</div>
            <h3>敬请期待...</h3>
            <p>数据入库功能正在开发中</p>
          </div>
        );
      case "import":
        return <PageOperationDataImport />;
      case "template":
        return <PageOperationDataTemplate />;
      default:
        return null;
    }
  };

  return (
    <div className="page-operation">
      <div className="card operation-header-card">
        <div className="tab-container">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`tab-btn ${activeTab === tab.id ? "active" : ""}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.label}
            </button>
          ))}
        </div>
        <div className="tab-content">
          {renderTabContent()}
        </div>
      </div>
    </div>
  );
}