import { useState, useEffect, useCallback } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { StatStrip } from '@/components/ui/stat-strip';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Play,
  Plus,
  Search,
  Clock,
  Pause,
  Edit,
  Trash2,
  History,
  Loader2,
  Terminal,
  FileCode,
  RefreshCw,
  PackageOpen,
} from 'lucide-react';
import { toast } from 'sonner';
import { cronJobApi } from '@/services/api';
import { useConfirm } from '@/components/ui/confirm-dialog';
import { getStatusBadge, parseCron } from './cronJobHelpers';
import { CronJobFormDialog } from './CronJobFormDialog';
import { ExecutionHistoryDialog } from './ExecutionHistoryDialog';

export function CronJobManager() {
  const [searchQuery, setSearchQuery] = useState('');
  const [jobs, setJobs] = useState<any[]>([]);
  const [initialLoading, setInitialLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [isFormDialogOpen, setIsFormDialogOpen] = useState(false);
  const [isLogDialogOpen, setIsLogDialogOpen] = useState(false);
  const [executingId, setExecutingId] = useState<number | null>(null);
  // editJob=null 表示新建模式；非 null 表示编辑已有任务 // Logan.Li
  const [editJob, setEditJob] = useState<any | null>(null);
  // 批量选择（批量删除） // Logan.Li
  const [selectedIds, setSelectedIds] = useState<number[]>([]);

  const _confirm = useConfirm();

  const openCreate = () => {
    setEditJob(null);
    setIsFormDialogOpen(true);
  };

  const openEdit = ( job: any) => {
    setEditJob(job);
    setIsFormDialogOpen(true);
  };

  // 加载任务列表（双 loading state：首次全屏 spinner，手动刷新只 spin icon） // Logan.Li
  const refreshData = useCallback(async () => {
    setRefreshing(true);
    try {
      const data = await cronJobApi.getJobs();
      setJobs(data.list || []);
    } catch (error) {
      console.error('Failed to load cron jobs:', error);
      toast.error('加载失败');
    } finally {
      setRefreshing(false);
      setInitialLoading(false);
    }
  }, []);

  useEffect(() => {
    refreshData();
  }, [refreshData]);

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

  const handleToggleJob = async ( id: any) => {
    try {
      await cronJobApi.toggleJob(id);
      toast.success('状态已切换');
      refreshData();
    } catch (error) {
      console.error('Failed to toggle job:', error);
      toast.error('操作失败');
    }
  };

  const handleExecuteJob = async ( id: any) => {
    setExecutingId(id);
    try {
      const result = await cronJobApi.executeJob(id);
      const status = result?.status || 'success';
      if (status === 'success') {
        toast.success('执行成功', { description: `耗时 ${result?.duration || 0}ms` });
      } else {
        toast.error('执行失败', { description: (result?.output || '').slice(0, 100) });
      }
      refreshData();
    } catch (error) {
      console.error('Failed to execute job:', error);
      toast.error('执行失败');
    } finally {
      setExecutingId(null);
    }
  };

  // 删除任务（带确认框） // Logan.Li
  const handleDeleteJob = async ( job: any) => {
    const ok = await _confirm({
      title: '删除定时任务',
      description: `确定删除「${job.name}」吗？此操作不可恢复。`,
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await cronJobApi.deleteJob(job.id);
      toast.success('任务已删除');
      refreshData();
    } catch (error) {
      console.error('Failed to delete job:', error);
      toast.error('删除失败');
    }
  };

  // 批量选择相关 // Logan.Li
  const toggleSelect = (id: number) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
    );
  };

  const toggleSelectAll = () => {
    if (selectedIds.length === filteredJobs.length && filteredJobs.length > 0) {
      setSelectedIds([]);
    } else {
      setSelectedIds(filteredJobs.map((j) => j.id));
    }
  };

  // 批量删除任务（带确认框） // Logan.Li
  const handleBatchDelete = async () => {
    if (selectedIds.length === 0) return;
    const ok = await _confirm({
      title: '批量删除定时任务',
      description: `确定删除选中的 ${selectedIds.length} 个任务吗？此操作不可恢复。`,
      confirmText: '批量删除',
      variant: 'destructive',
    });
    if (!ok) return;
    try {
      await cronJobApi.batchDelete(selectedIds);
      toast.success(`已删除 ${selectedIds.length} 个任务`);
      setSelectedIds([]);
      refreshData();
    } catch (error) {
      console.error('Failed to batch delete jobs:', error);
      toast.error('批量删除失败');
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">定时任务</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">Cron 任务管理与执行</p>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
            onClick={() => setIsLogDialogOpen(true)}
          >
            <History className="h-4 w-4 mr-2" />
            执行历史
          </Button>
          <Button
            variant="outline"
            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
            onClick={() => refreshData()}
            disabled={refreshing}
          >
            <RefreshCw className={`h-4 w-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
            刷新
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700" onClick={openCreate}>
            <Plus className="h-4 w-4 mr-2" />
            新建任务
          </Button>
        </div>
      </div>

      {/* Stats */}
      <StatStrip
        items={[
          { label: '任务总数', value: jobs.length, color: 'blue' },
          { label: '已启用', value: jobs.filter((j) => j.enabled).length, color: 'emerald' },
          { label: '累计成功', value: jobs.reduce((sum, j) => sum + (j.success_count || 0), 0), color: 'emerald' },
          { label: '累计失败', value: jobs.reduce((sum, j) => sum + (j.fail_count || 0), 0), color: 'red' },
        ]}
      />

      {/* Filters */}
      <div className="flex items-center justify-between flex-wrap gap-4">
        <div className="flex items-center gap-3 flex-wrap">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
            <Input
              placeholder="搜索任务..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
            />
          </div>
          {filteredJobs.length > 0 && (
            <label className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)] cursor-pointer select-none">
              <Checkbox
                checked={
                  selectedIds.length === filteredJobs.length && filteredJobs.length > 0
                }
                onCheckedChange={toggleSelectAll}
                className="border-[var(--dg-border)]"
              />
              全选
            </label>
          )}
        </div>
        {selectedIds.length > 0 && (
          <div className="flex items-center gap-2">
            <span className="text-sm text-[var(--dg-text-secondary)]">已选择 {selectedIds.length} 项</span>
            <Button
              variant="outline"
              size="sm"
              className="border-red-500/30 text-red-400 hover:bg-red-500/10"
              onClick={handleBatchDelete}
            >
              <Trash2 className="h-4 w-4 mr-2" />
              批量删除
            </Button>
          </div>
        )}
      </div>

      {initialLoading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
        </div>
      ) : filteredJobs.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
          <PackageOpen className="h-12 w-12 mb-3 opacity-40" />
          <p className="text-sm">暂无定时任务</p>
        </div>
      ) : null}

      {/* Job List */}
      <div className="space-y-3">
        {filteredJobs.map((job) => (
          <Card key={job.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
            <CardContent className="p-4">
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-center pt-1">
                  <Checkbox
                    checked={selectedIds.includes(job.id)}
                    onCheckedChange={() => toggleSelect(job.id)}
                    className="border-[var(--dg-border)]"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 flex-wrap">
                    <h3 className="font-medium text-[var(--dg-text-primary)]">{job.name}</h3>
                    <Badge
                      variant="outline"
                      className={
                        job.enabled
                          ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
                          : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'
                      }
                    >
                      {job.enabled ? '已启用' : '已禁用'}
                    </Badge>
                    {getStatusBadge(job.last_status)}
                    <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
                      {job.type === 'shell' ? 'Shell' : job.type === 'python' ? 'Python' : '命令'}
                    </Badge>
                  </div>
                  <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{job.description || '—'}</p>
                  <div className="flex items-center gap-4 mt-2 text-sm">
                    <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
                      <Clock className="h-3 w-3" />
                      {parseCron(job.cron_expr)}
                    </span>
                    {(job.type === 'shell' || job.type === 'python') && job.script?.name ? (
                      <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
                        <FileCode className="h-3 w-3" />
                        <span className="text-xs">{job.script.name}</span>
                      </span>
                    ) : job.content && (
                      <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
                        <Terminal className="h-3 w-3" />
                        <code className="text-xs bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded truncate max-w-xs">
                          {job.content}
                        </code>
                      </span>
                    )}
                  </div>
                  <div className="flex items-center gap-4 mt-2 text-xs text-[var(--dg-text-muted)]">
                    <span>上次执行: {job.last_run_at ? new Date(job.last_run_at).toLocaleString() : '--'}</span>
                    <span>成功: {job.success_count || 0} / 失败: {job.fail_count || 0}</span>
                    <span>累计: {job.run_count || 0} 次</span>
                  </div>
                </div>

                <div className="flex items-center gap-2 shrink-0">
                  <Button
                    variant="outline"
                    size="sm"
                    className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
                    disabled={executingId === job.id}
                    onClick={() => handleExecuteJob(job.id)}
                  >
                    {executingId === job.id ? (
                      <Loader2 className="h-4 w-4 mr-1 animate-spin" />
                    ) : (
                      <Play className="h-4 w-4 mr-1" />
                    )}
                    立即执行
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-blue-400"
                    title={job.enabled ? '禁用' : '启用'}
                    onClick={() => handleToggleJob(job.id)}
                  >
                    {job.enabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-blue-400"
                    title="编辑"
                    onClick={() => openEdit(job)}
                  >
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-red-400"
                    title="删除"
                    onClick={() => handleDeleteJob(job)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 新建/编辑定时任务弹窗 */}
      <CronJobFormDialog
        open={isFormDialogOpen}
        onOpenChange={setIsFormDialogOpen}
        editJob={editJob}
        onSuccess={refreshData}
      />

      {/* 执行历史弹窗 */}
      <ExecutionHistoryDialog
        open={isLogDialogOpen}
        onOpenChange={setIsLogDialogOpen}
      />
    </div>
  );
}