aiops/frontend/src/components/task/CronJobFormDialog.tsx

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { toast } from 'sonner';
import { cronJobApi, scriptApi } from '@/api';
import type { JsonData } from '@/types/common';
import i18n from '@/i18n';

// 定时任务类型定义 // Logan.Li
const jobTypes = [
  { value: 'shell',       label: 'Shell',       desc: i18n.t('关联脚本库中的 Shell 脚本') },
  { value: 'python',      label: 'Python',      desc: i18n.t('关联脚本库中的 Python 脚本') },
  { value: 'powershell',  label: 'PowerShell',  desc: i18n.t('关联脚本库中的 PowerShell 脚本') },
  { value: 'command',     label: i18n.t('自定义命令'),   desc: i18n.t('手动输入命令或脚本路径') },
];

const scriptJobTypes = ['shell', 'python', 'powershell'];

function scriptTypeLabel(type: string) {
  if (type === 'python') return 'Python';
  if (type === 'powershell') return 'PowerShell';
  return 'Shell';
}

export function CronJobFormDialog({
  open,
  onOpenChange,
  editJob,
  onSuccess,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  editJob: JsonData | null;
  onSuccess: () => void;
}) {
  const [form, setForm] = useState({
    name: '',
    description: '',
    cron_expr: '',
    type: 'shell',
    content: '',
    script_id: null as number | null,
  });
  const [scripts, setScripts] = useState<JsonData[]>([]);
  const [selectedScript, setSelectedScript] = useState<JsonData>(null);
  const [submitting, setSubmitting] = useState(false);

  // 弹窗打开时：加载脚本库 + 初始化表单 // Logan.Li
  useEffect(() => {
    if (!open) return;
    // 拉取脚本库
    scriptApi.getScripts({ page_size: 200 }).then((res: JsonData) => {
      setScripts(res?.list || []);
    }).catch(() => setScripts([]));

    if (editJob) {
      setForm({
        name: editJob.name || '',
        description: editJob.description || '',
        cron_expr: editJob.cron_expr || '',
        type: editJob.type || 'shell',
        content: editJob.content || '',
        script_id: editJob.script_id || null,
      });
      // 如果关联了脚本，拉取脚本详情
      if (editJob.script_id) {
        scriptApi.getScript(editJob.script_id).then((res: JsonData) => {
          setSelectedScript(res);
        }).catch(() => setSelectedScript(null));
      } else {
        setSelectedScript(null);
      }
    } else {
      setForm({ name: '', description: '', cron_expr: '', type: 'shell', content: '', script_id: null });
      setSelectedScript(null);
    }
  }, [open, editJob]);

  // 按类型过滤脚本库 // Logan.Li
  const filteredScripts = scriptJobTypes.includes(form.type)
    ? scripts.filter(s => s.type === form.type)
    : [];

  // 选中脚本时更新关联
  const handleSelectScript = (scriptId: string) => {
    const sc = scripts.find(s => String(s.id) === scriptId);
    if (sc) {
      setSelectedScript(sc);
      setForm(prev => ({ ...prev, script_id: sc.id, content: sc.content }));
    }
  };

  // 切换类型时重置脚本关联
  const handleTypeChange = (type: string) => {
    setForm(prev => ({
      ...prev,
      type,
      script_id: null,
      content: type === 'command' ? prev.content : '',
    }));
    setSelectedScript(null);
  };

  const handleSave = async () => {
    if (!form.name || !form.cron_expr) {
      toast.error(i18n.t('请填写任务名称和 Cron 表达式'));
      return;
    }
    // 脚本类型必须选关联脚本 // Logan.Li
    if (scriptJobTypes.includes(form.type) && !form.script_id) {
      toast.error(i18n.t('请填写任务名称和 Cron 表达式'));
      return;
    }
    try {
      setSubmitting(true);
      const payload: Record<string, unknown> = {
        name: form.name,
        description: form.description,
        cron_expr: form.cron_expr,
        type: form.type,
        content: form.content,
        script_id: form.script_id,
      };
      if (editJob) {
        await cronJobApi.updateJob(editJob.id, payload);
        toast.success(i18n.t('任务更新成功'));
      } else {
        await cronJobApi.createJob(payload);
        toast.success(i18n.t('任务更新成功'));
      }
      onOpenChange(false);
      onSuccess();
    } catch (error) {
      console.error('Failed to save cron job:', error);
      toast.error(editJob ? i18n.t('kubernetes.deployment.imageUpdateFailed') : i18n.t('monitor.dashboard.custom.toastCreateFailed'));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
        <DialogHeader>
          <DialogTitle>{editJob ? i18n.t('automation.editCronJob') : i18n.t('编辑定时任务')}</DialogTitle>
          <DialogDescription className="text-[var(--dg-text-secondary)]"> {i18n.t('task.cronjobformdial.s2e10ee70')} </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto pr-1">
          {/* 任务名称 */}
          <div>
            <Label className="text-[var(--dg-text-primary)]"> {i18n.t('automation.cronJobName')} </Label>
            <Input
              value={form.name}
              onChange={(e) => setForm({ ...form, name: e.target.value })}
              placeholder={i18n.t('例如: 数据库备份')}
              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
            />
          </div>

          {/* 描述 */}
          <div>
            <Label className="text-[var(--dg-text-primary)]"> {i18n.t('aiops.llmModelDesc')} </Label>
            <Textarea
              value={form.description}
              onChange={(e) => setForm({ ...form, description: e.target.value })}
              placeholder={i18n.t('例如: 数据库备份')}
              rows={2}
              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
            />
          </div>

          {/* Cron 表达式 */}
          <div>
            <Label className="text-[var(--dg-text-primary)]">Cron 表达式</Label>
            <div className="flex gap-2">
              <Input
                value={form.cron_expr}
                onChange={(e) => setForm({ ...form, cron_expr: e.target.value })}
                placeholder="0 2 * * *"
                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
              />
              <Select onValueChange={(v) => setForm({ ...form, cron_expr: v })}>
                <SelectTrigger className="w-48 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
                  <SelectValue placeholder={i18n.t('快速选择')} />
                </SelectTrigger>
                <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
                  <SelectItem value="*/5 * * * *" className="text-[var(--dg-text-primary)]"> {i18n.t('task.cronJob.cron.every5min')} </SelectItem>
                  <SelectItem value="0 * * * *" className="text-[var(--dg-text-primary)]"> {i18n.t('task.cronJob.cron.everyHour')} </SelectItem>
                  <SelectItem value="0 2 * * *" className="text-[var(--dg-text-primary)]"> {i18n.t('task.cronJob.cron.daily2')} </SelectItem>
                  <SelectItem value="0 3 * * 0" className="text-[var(--dg-text-primary)]"> {i18n.t('task.cronJob.cron.weeklySun3')} </SelectItem>
                  <SelectItem value="0 9 * * 1" className="text-[var(--dg-text-primary)]"> {i18n.t('task.cronJob.cron.weeklyMon9')} </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <p className="text-xs text-[var(--dg-text-muted)] mt-1"> {i18n.t('task.cronjobformdial.s3b56b1f9')} </p>
          </div>

          {/* 执行类型 */}
          <div>
            <Label className="text-[var(--dg-text-primary)]"> {i18n.t('task.cronjobformdial.s15d864c1')} </Label>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-1">
              {jobTypes.map(t => (
                <button
                  key={t.value}
                  type="button"
                  onClick={() => handleTypeChange(t.value)}
                  className={`px-3 py-2 rounded-md border text-sm transition-colors text-left ${
                    form.type === t.value
                      ? 'border-[var(--dg-blue)] bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]'
                      : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]'
                  }`}
                >
                  <div className="font-medium">{t.label}</div>
                </button>
              ))}
            </div>
            <p className="text-xs text-[var(--dg-text-muted)] mt-1">
              {jobTypes.find(t => t.value === form.type)?.desc}
            </p>
          </div>

          {/* 脚本选择 (shell/python/powershell) 或 命令输入 (command) */}
          {scriptJobTypes.includes(form.type) ? (
            <div className="space-y-3">
              <div>
                <Label className="text-[var(--dg-text-primary)]">
                  选择脚本 <span className="dg-text-red">*</span>
                </Label>
                {filteredScripts.length === 0 ? (
                  <div className="mt-1 px-3 py-4 rounded-md border border-dashed border-[var(--dg-border)] text-center">
                    <p className="text-sm text-[var(--dg-text-muted)]">
                      脚本库中没有 {scriptTypeLabel(form.type)} 脚本
                    </p>
                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">
                      请先到「脚本库」创建 {scriptTypeLabel(form.type)} 脚本
                    </p>
                  </div>
                ) : (
                  <Select
                    value={form.script_id ? String(form.script_id) : ''}
                    onValueChange={handleSelectScript}
                  >
                    <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
                      <SelectValue placeholder={i18n.t('选择脚本库中的脚本...')} />
                    </SelectTrigger>
                    <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
                      {filteredScripts.map(sc => (
                        <SelectItem key={sc.id} value={String(sc.id)} className="text-[var(--dg-text-primary)]">
                          {sc.name}
                          {sc.description ? ` — ${sc.description}` : ''}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              </div>
              {/* 脚本预览 */}
              {selectedScript && (
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)]">
                      {scriptTypeLabel(selectedScript.type || form.type)}
                    </Badge>
                    <span className="text-xs text-[var(--dg-text-muted)]">
                      {(selectedScript.content || '').split('\n').length} 行
                    </span>
                  </div>
                  <pre className="max-h-48 overflow-auto rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] p-3 text-xs font-mono text-[var(--dg-text-secondary)] whitespace-pre-wrap break-all">
                    {selectedScript.content || i18n.t('(空脚本)')}
                  </pre>
                </div>
              )}
            </div>
          ) : (
            <div>
              <Label className="text-[var(--dg-text-primary)]"> {i18n.t('aiops.assistantCommand')} </Label>
              <Textarea
                value={form.content}
                onChange={(e) => setForm({ ...form, content: e.target.value })}
                placeholder="/scripts/backup.sh arg1 arg2"
                rows={4}
                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1 font-mono"
              />
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
            取消
          </Button>
          <Button
            className="bg-blue-600 hover:bg-blue-700"
            onClick={handleSave}
            disabled={submitting}
          >
            {submitting ? i18n.t('system.savingDot') : editJob ? i18n.t('cloud.saveChanges') : i18n.t('保存中...')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}