aiops/frontend/src/components/kubernetes/deployment-workload/EditModeContainer.tsx

// EditModeContainer.tsx — 编辑模式 Tab 容器，共享 manifest 状态 // Logan.Li
import { useState, useEffect } from 'react';
import { Container, Settings, Database, Network } from 'lucide-react';
import { DeploymentEditBasic } from '../DeploymentEditBasic';
import { DeploymentEditContainers } from '../DeploymentEditContainers';
import { DeploymentEditStorage } from '../DeploymentEditStorage';
import { DeploymentEditAdvanced } from '../DeploymentEditAdvanced';
import { DeploymentEditService } from '../DeploymentEditService';

export interface EditModeContainerProps {
  clusterCode: string;
  namespace: string;
  deploymentName: string;
  manifest: any | null;
  onSaved: (updated?: any) => void;
  onCancel: () => void;
  /** 新建模式：名称可编辑，保存走 apply // Logan.Li */
  isCreate?: boolean;
}

export function EditModeContainer({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel, isCreate = false }: EditModeContainerProps) {
  type EditTab = 'basic' | 'containers' | 'storage' | 'advanced' | 'service';
  const [activeTab, setActiveTab] = useState<EditTab>('basic');
  const [editManifest, setEditManifest] = useState<any>(manifest);

  useEffect(() => {
    if (manifest) setEditManifest(manifest);
  }, [manifest]);

  const handleSaved = (updated?: any) => {
    if (updated) setEditManifest(updated);
    onSaved(updated);
  };

  const tabs: Array<{ key: EditTab; label: string; icon: typeof Settings }> = [
    { key: 'basic', label: '基本信息', icon: Settings },
    { key: 'containers', label: '容器信息', icon: Container },
    { key: 'storage', label: '存储挂载', icon: Database },
    { key: 'advanced', label: '高级设置', icon: Settings },
    { key: 'service', label: '服务/应用路由', icon: Network },
  ];

  const commonProps = {
    clusterCode,
    namespace,
    deploymentName,
    manifest: editManifest,
    onSaved: handleSaved,
    onCancel,
    isCreate,
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-1 border-b border-slate-800 pb-px overflow-x-auto">
        {tabs.map((tab) => {
          const active = activeTab === tab.key;
          const Icon = tab.icon;
          return (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap ${
                active ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-slate-200'
              }`}
            >
              <Icon className="h-3.5 w-3.5" />
              {tab.label}
            </button>
          );
        })}
      </div>

      {activeTab === 'basic' && <DeploymentEditBasic {...commonProps} />}
      {activeTab === 'containers' && <DeploymentEditContainers {...commonProps} />}
      {activeTab === 'storage' && <DeploymentEditStorage {...commonProps} />}
      {activeTab === 'advanced' && <DeploymentEditAdvanced {...commonProps} />}
      {activeTab === 'service' && <DeploymentEditService {...commonProps} />}
    </div>
  );
}