aiops/frontend/src/components/automation/Automation.tsx

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  PlayCircle,
  Plus,
  Search,
  Clock,
  Play,
  Pause,
  RotateCw,
  FileCode,
  History,
  Eye,
  Edit,
  Copy,
  Download,
} from 'lucide-react';
import { cronJobs, scripts } from '@/mocks/data';
import type { CronJob, Script } from '@/types';

export function AutomationManager() {
  const [activeTab, setActiveTab] = useState('cronjobs');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedScript, setSelectedScript] = useState<Script | null>(null);
  const [isExecuteDialogOpen, setIsExecuteDialogOpen] = useState(false);

  const filteredJobs = cronJobs.filter(
    (job) =>
      job.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      job.description.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const filteredScripts = scripts.filter(
    (script) =>
      script.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      script.description.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const getJobStatusBadge = (status: CronJob['status']) => {
    return status === 'running' ? (
      <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
        <Play className="h-3 w-3 mr-1" />
        运行中
      </Badge>
    ) : (
      <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
        <Pause className="h-3 w-3 mr-1" />
        已暂停
      </Badge>
    );
  };

  const getLanguageBadge = (language: Script['language']) => {
    const colors = {
      bash: 'border-green-500/30 text-green-400 bg-green-500/10',
      python: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
      powershell: 'border-cyan-500/30 text-cyan-400 bg-cyan-500/10',
    };
    return (
      <Badge variant="outline" className={colors[language]}>
        {language.toUpperCase()}
      </Badge>
    );
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-100">自动化运维</h1>
          <p className="text-sm text-slate-500 mt-1">定时任务与脚本管理</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
            <History className="h-4 w-4 mr-2" />
            执行历史
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700 text-white">
            <Plus className="h-4 w-4 mr-2" />
            新建任务
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">定时任务</p>
                <p className="text-2xl font-bold text-slate-100">{cronJobs.length}</p>
              </div>
              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                <Clock className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">运行中</p>
                <p className="text-2xl font-bold text-emerald-400">
                  {cronJobs.filter((j) => j.status === 'running').length}
                </p>
              </div>
              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
                <Play className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">脚本数量</p>
                <p className="text-2xl font-bold text-slate-100">{scripts.length}</p>
              </div>
              <div className="p-3 rounded-lg bg-purple-500/10 text-purple-400">
                <FileCode className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-slate-900 border-slate-800">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">今日执行</p>
                <p className="text-2xl font-bold text-blue-400">156</p>
              </div>
              <div className="p-3 rounded-lg bg-cyan-500/10 text-cyan-400">
                <RotateCw className="h-5 w-5" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-3">
        <div className="relative w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
          <Input
            placeholder="搜索任务或脚本..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
          />
        </div>
      </div>

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="bg-slate-800 border border-slate-700">
          <TabsTrigger value="cronjobs" className="data-[state=active]:bg-slate-700">
            <Clock className="h-4 w-4 mr-2" />
            定时任务
          </TabsTrigger>
          <TabsTrigger value="scripts" className="data-[state=active]:bg-slate-700">
            <FileCode className="h-4 w-4 mr-2" />
            脚本库
          </TabsTrigger>
          <TabsTrigger value="playbooks" className="data-[state=active]:bg-slate-700">
            <PlayCircle className="h-4 w-4 mr-2" />
            任务编排
          </TabsTrigger>
        </TabsList>

        <TabsContent value="cronjobs" className="mt-4">
          <Card className="bg-slate-900 border-slate-800">
            <CardContent className="p-0">
              <div className="border-t border-slate-800">
                <Table>
                  <TableHeader>
                    <TableRow className="border-slate-800 hover:bg-transparent">
                      <TableHead className="text-slate-400">任务名称</TableHead>
                      <TableHead className="text-slate-400">状态</TableHead>
                      <TableHead className="text-slate-400">Cron表达式</TableHead>
                      <TableHead className="text-slate-400">上次执行</TableHead>
                      <TableHead className="text-slate-400">下次执行</TableHead>
                      <TableHead className="text-slate-400">执行统计</TableHead>
                      <TableHead className="text-slate-400 text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredJobs.map((job) => (
                      <TableRow key={job.id} className="border-slate-800 hover:bg-slate-800/50">
                        <TableCell>
                          <div>
                            <div className="flex items-center gap-2">
                              <Clock className="h-4 w-4 text-slate-500" />
                              <span className="text-sm font-medium text-slate-200">{job.name}</span>
                            </div>
                            <p className="text-xs text-slate-500 mt-0.5">{job.description}</p>
                          </div>
                        </TableCell>
                        <TableCell>{getJobStatusBadge(job.status)}</TableCell>
                        <TableCell>
                          <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
                            {job.cron}
                          </code>
                        </TableCell>
                        <TableCell>
                          <span className="text-sm text-slate-400">
                            {job.lastRunAt ? new Date(job.lastRunAt).toLocaleString() : '--'}
                          </span>
                        </TableCell>
                        <TableCell>
                          <span className="text-sm text-slate-400">
                            {job.nextRunAt ? new Date(job.nextRunAt).toLocaleString() : '--'}
                          </span>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">
                            <span className="text-emerald-400">{job.successCount}</span>
                            <span className="text-slate-500 mx-1">/</span>
                            <span className="text-red-400">{job.failCount}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-1">
                            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
                              <Play className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
                              <Edit className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="scripts" className="mt-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            {filteredScripts.map((script) => (
              <Card key={script.id} className="bg-slate-900 border-slate-800">
                <CardHeader className="pb-2">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center">
                        <FileCode className="h-5 w-5 text-purple-400" />
                      </div>
                      <div>
                        <CardTitle className="text-base text-slate-100">{script.name}</CardTitle>
                        <p className="text-slate-500 text-sm">{script.description}</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-1">
                      {getLanguageBadge(script.language)}
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="bg-slate-950 rounded-lg p-3 font-mono text-xs text-slate-400 overflow-x-auto">
                    <pre className="whitespace-pre-wrap">{script.content.slice(0, 200)}...</pre>
                  </div>
                  <div className="flex items-center justify-between mt-4">
                    <div className="flex gap-2">
                      {script.params.map((param) => (
                        <Badge key={param.name} variant="outline" className="border-slate-700 text-slate-400 text-xs">
                          {param.name}
                          {param.required && <span className="text-red-400 ml-0.5">*</span>}
                        </Badge>
                      ))}
                    </div>
                    <div className="flex items-center gap-1">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 text-slate-400 hover:text-slate-100"
                        onClick={() => setSelectedScript(script)}
                      >
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-8 text-blue-400 hover:text-blue-400"
                        onClick={() => {
                          setSelectedScript(script);
                          setIsExecuteDialogOpen(true);
                        }}
                      >
                        <Play className="h-4 w-4 mr-1" />
                        执行
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

        <TabsContent value="playbooks" className="mt-4">
          <Card className="bg-slate-900 border-slate-800">
            <CardContent className="p-8">
              <div className="text-center">
                <PlayCircle className="h-12 w-12 mx-auto text-slate-500 mb-4" />
                <h3 className="text-lg font-medium text-slate-300 mb-2">任务编排</h3>
                <p className="text-sm text-slate-500 mb-4">可视化编排复杂运维任务流程</p>
                <Button className="bg-blue-600 hover:bg-blue-700 text-white">
                  <Plus className="h-4 w-4 mr-2" />
                  创建编排
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Script Detail Dialog */}
      <Dialog open={!!selectedScript && !isExecuteDialogOpen} onOpenChange={() => setSelectedScript(null)}>
        <DialogContent className="max-w-3xl bg-slate-900 border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-slate-100 flex items-center gap-2">
              <FileCode className="h-5 w-5 text-purple-400" />
              {selectedScript?.name}
            </DialogTitle>
            <DialogDescription className="text-slate-500">
              {selectedScript?.description}
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="flex items-center gap-2">
              {selectedScript && getLanguageBadge(selectedScript.language)}
              <span className="text-sm text-slate-500">
                更新于 {selectedScript && new Date(selectedScript.updatedAt).toLocaleDateString()}
              </span>
            </div>

            <div className="bg-slate-950 rounded-lg p-4 font-mono text-sm text-slate-300 overflow-x-auto max-h-80">
              <pre className="whitespace-pre">{selectedScript?.content}</pre>
            </div>

            {selectedScript && selectedScript.params.length > 0 && (
              <div>
                <h4 className="text-sm font-medium text-slate-300 mb-2">参数</h4>
                <div className="space-y-2">
                  {selectedScript.params.map((param) => (
                    <div key={param.name} className="flex items-center gap-2 p-2 rounded-lg bg-slate-800/50">
                      <code className="text-sm text-slate-300">{param.name}</code>
                      <Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">
                        {param.type}
                      </Badge>
                      {param.required && (
                        <Badge variant="outline" className="border-red-700 text-red-400 text-xs">
                          必填
                        </Badge>
                      )}
                      <span className="text-sm text-slate-500">{param.description}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          <DialogFooter>
            <Button variant="outline" className="border-slate-700 text-slate-300">
              <Copy className="h-4 w-4 mr-2" />
              复制
            </Button>
            <Button variant="outline" className="border-slate-700 text-slate-300">
              <Download className="h-4 w-4 mr-2" />
              下载
            </Button>
            <Button
              className="bg-blue-600 hover:bg-blue-700 text-white"
              onClick={() => setIsExecuteDialogOpen(true)}
            >
              <Play className="h-4 w-4 mr-2" />
              执行
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Execute Script Dialog */}
      <Dialog open={isExecuteDialogOpen} onOpenChange={setIsExecuteDialogOpen}>
        <DialogContent className="bg-slate-900 border-slate-800">
          <DialogHeader>
            <DialogTitle className="text-slate-100">执行脚本</DialogTitle>
            <DialogDescription className="text-slate-500">
              {selectedScript?.name}
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div>
              <label className="text-sm font-medium text-slate-300">目标服务器</label>
              <Select>
                <SelectTrigger className="mt-1 bg-slate-800 border-slate-700 text-slate-200">
                  <SelectValue placeholder="选择服务器" />
                </SelectTrigger>
                <SelectContent className="bg-slate-800 border-slate-700">
                  <SelectItem value="all">全部服务器</SelectItem>
                  <SelectItem value="web">Web服务器组</SelectItem>
                  <SelectItem value="app">应用服务器组</SelectItem>
                  <SelectItem value="db">数据库服务器组</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {selectedScript?.params.map((param) => (
              <div key={param.name}>
                <label className="text-sm font-medium text-slate-300">
                  {param.name}
                  {param.required && <span className="text-red-400">*</span>}
                </label>
                <Input
                  placeholder={param.description}
                  defaultValue={param.default}
                  className="mt-1 bg-slate-800 border-slate-700 text-slate-200"
                />
              </div>
            ))}
          </div>

          <DialogFooter>
            <Button variant="outline" className="border-slate-700 text-slate-300" onClick={() => setIsExecuteDialogOpen(false)}>
              取消
            </Button>
            <Button className="bg-blue-600 hover:bg-blue-700 text-white">
              <Play className="h-4 w-4 mr-2" />
              开始执行
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}