// UpdateStrategyCard.tsx — 更新策略 + 历史版本/进度 卡片 (Q21 提取)
// 受控展示组件，接收 state 片段 + setter 回调。
import { RefreshCw, Clock } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import i18n from '@/i18n';

interface UpdateStrategyCardProps {
  strategyType: 'RollingUpdate' | 'Recreate';
  onStrategyTypeChange: (t: 'RollingUpdate' | 'Recreate') => void;
  maxSurge: string;
  onMaxSurgeChange: (v: string) => void;
  maxUnavailable: string;
  onMaxUnavailableChange: (v: string) => void;
  revisionHistoryLimit: string;
  onRevisionHistoryLimitChange: (v: string) => void;
  progressDeadlineSeconds: string;
  onProgressDeadlineSecondsChange: (v: string) => void;
}

export function UpdateStrategyCard({
  strategyType, onStrategyTypeChange,
  maxSurge, onMaxSurgeChange,
  maxUnavailable, onMaxUnavailableChange,
  revisionHistoryLimit, onRevisionHistoryLimitChange,
  progressDeadlineSeconds, onProgressDeadlineSecondsChange,
}: UpdateStrategyCardProps) {
  return (
    <>
      {/* 更新策略 */}
      <Card className="dg-card">
        <CardHeader className="pb-3">
          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
            <RefreshCw className="h-4 w-4 dg-text-blue" />{i18n.t('k8s.editAdvanced.updateStrategy')}
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-0 space-y-3">
          <div className="flex items-center gap-4">
            <label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
              <input type="radio" checked={strategyType === 'RollingUpdate'} onChange={() => onStrategyTypeChange('RollingUpdate')}
                className="accent-blue-500" />
              RollingUpdate（滚动更新）
            </label>
            <label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
              <input type="radio" checked={strategyType === 'Recreate'} onChange={() => onStrategyTypeChange('Recreate')}
                className="accent-blue-500" />
              Recreate（重建）
            </label>
          </div>
          {strategyType === 'RollingUpdate' && (
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label className="dg-text-muted text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
                <Input value={maxSurge} onChange={e => onMaxSurgeChange(e.target.value)}
                  placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
              </div>
              <div>
                <Label className="dg-text-muted text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
                <Input value={maxUnavailable} onChange={e => onMaxUnavailableChange(e.target.value)}
                  placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 历史版本 / 进度 */}
      <Card className="dg-card">
        <CardHeader className="pb-3">
          <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
            <Clock className="h-4 w-4 dg-text-yellow" />{i18n.t("common.historyVersion")}
          </CardTitle>
        </CardHeader>
        <CardContent className="pt-0 grid grid-cols-2 gap-3">
          <div>
            <Label className="dg-text-muted text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
            <Input type="number" value={revisionHistoryLimit} onChange={e => onRevisionHistoryLimitChange(e.target.value)}
              className="h-8 mt-1 dg-input text-sm font-mono" />
          </div>
          <div>
            <Label className="dg-text-muted text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
            <Input type="number" value={progressDeadlineSeconds} onChange={e => onProgressDeadlineSecondsChange(e.target.value)}
              className="h-8 mt-1 dg-input text-sm font-mono" />
          </div>
        </CardContent>
      </Card>
    </>
  );
}