import React, { useState, useEffect } from 'react';
import {
  ArrowLeft, Download, RotateCcw, ArrowUpToLine, StopCircle, XCircle,
  Copy, Check, Code, Cpu, Clock, Layers, ShieldAlert, Sparkles, Activity
} from 'lucide-react';
import { fetchJobDetail, prioritizeJob, cancelJob, fetchComfyHistory } from '../api';
import { formatDateTime, formatBytes, thumbUrl, localAsset, h3FileUrl, getH3Base, getJobKind } from '../utils';
import { useToast } from './Toast';
import Modal from './Modal';

export default function TaskDetail({ taskId, onBack, onRerun }) {
  const { addToast } = useToast();
  const [job, setJob] = useState(null);
  const [loading, setLoading] = useState(true);
  const [copiedPrompt, setCopiedPrompt] = useState(false);
  const [comfyHistory, setComfyHistory] = useState(null);
  const [loadingHistory, setLoadingHistory] = useState(false);
  const [showHistory, setShowHistory] = useState(false);
  const [showRawReq, setShowRawReq] = useState(false);

  // 模态弹窗状态
  const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', content: '', isDanger: false, onConfirm: null });

  const loadDetail = async () => {
    try {
      const data = await fetchJobDetail(taskId);
      setJob(data);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadDetail();
    // 轮询：排队或运行中每 2.5 秒刷新一次
    const timer = setInterval(() => {
      if (job && (job.status === 'queued' || job.status === 'running')) {
        loadDetail();
      }
    }, 2500);
    return () => clearInterval(timer);
  }, [taskId, job?.status]);

  if (loading && !job) {
    return (
      <div className="flex-1 flex items-center justify-center text-slate-500 text-sm">
        <div className="flex items-center gap-2">
          <div className="w-5 h-5 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin" />
          <span>正在加载任务详情…</span>
        </div>
      </div>
    );
  }

  if (!job) {
    return (
      <div className="p-8 text-center flex flex-col items-center gap-4 text-slate-500">
        <p>未找到该任务或已被彻底删除</p>
        <button
          onClick={onBack}
          className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-xs rounded-xl text-slate-700 cursor-pointer font-medium"
        >
          返回创建视图
        </button>
      </div>
    );
  }

  const req = job.req || {};
  const isDone = job.status === 'done';
  const isRunning = job.status === 'running';
  const isQueued = job.status === 'queued';
  const isFailed = job.status === 'failed';
  const isCancelled = job.status === 'cancelled';

  // 进度精细计算
  const curStep = job.step || 0;
  const totalSteps = job.total_steps || req.steps || 20;
  const progressPercent = totalSteps > 0
    ? Math.min(100, Math.max(curStep > 0 ? 5 : 2, Math.round((curStep / totalSteps) * 100)))
    : 0;

  // 预估剩余时间 (秒)
  const elapsed = job.elapsed_seconds || 0;
  let estimatedRemaining = null;
  if (curStep > 0 && totalSteps > curStep) {
    const secPerStep = elapsed / curStep;
    const remainSec = Math.round(secPerStep * (totalSteps - curStep));
    estimatedRemaining = remainSec > 60 ? `约 ${Math.round(remainSec / 60)} 分钟` : `约 ${remainSec} 秒`;
  }

  const videoSrc = isDone ? h3FileUrl(`${getH3Base()}/v1/videos/${job.id}/file`) : null;

  const handleCopyPrompt = () => {
    if (!req.prompt) return;
    navigator.clipboard.writeText(req.prompt);
    setCopiedPrompt(true);
    addToast('已复制 Prompt 提示词到剪贴板', 'success');
    setTimeout(() => setCopiedPrompt(false), 2000);
  };

  const handlePrioritize = async () => {
    try {
      const res = await prioritizeJob(job.id);
      addToast(`已成功插队至第 ${res.queue_position} 位`, 'success');
      loadDetail();
    } catch (e) {
      addToast('插队失败: ' + e.message, 'error');
    }
  };

  const handleCancel = (running) => {
    setConfirmModal({
      isOpen: true,
      title: running ? '停止正在运行的任务' : '取消排队任务',
      content: running
        ? '确定停止当前正在运行的任务？\n这会硬重启后台 Raylight 服务以释放 GPU 显存（约耗时 15-20 秒），重启完成前将暂时无法提交新任务。'
        : '确定取消这条排队中的任务？',
      isDanger: running,
      onConfirm: async () => {
        setConfirmModal((prev) => ({ ...prev, isOpen: false }));
        try {
          await cancelJob(job.id);
          addToast(running ? '已发出停止与 GPU 重置指令' : '已取消任务', 'info');
          loadDetail();
        } catch (e) {
          addToast('操作失败: ' + e.message, 'error');
        }
      },
    });
  };

  const handleToggleHistory = async () => {
    if (!showHistory && !comfyHistory) {
      setLoadingHistory(true);
      try {
        const hist = await fetchComfyHistory(job.id);
        setComfyHistory(hist);
      } catch (e) {
        addToast('获取 ComfyUI History 失败: ' + e.message, 'error');
      } finally {
        setLoadingHistory(false);
      }
    }
    setShowHistory(!showHistory);
  };

  return (
    <div className="max-w-5xl mx-auto py-6 px-4 sm:px-8 flex flex-col gap-6">
      {/* 顶栏导航与快捷动作 */}
      <div className="flex flex-wrap items-center justify-between gap-4 pb-4 border-b border-slate-200">
        <div className="flex items-center gap-3">
          <button
            onClick={onBack}
            className="p-2 hover:bg-slate-100 rounded-xl text-slate-500 hover:text-slate-800 transition-colors cursor-pointer"
            title="返回新建"
          >
            <ArrowLeft className="w-5 h-5" />
          </button>
          <div>
            <div className="flex items-center gap-2.5">
              <h2 className="text-base font-mono font-bold text-slate-800">#{job.id}</h2>
              {/* 状态标识 */}
              {isDone && <span className="px-2.5 py-0.5 text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full">已完成</span>}
              {isRunning && (
                <span className="px-2.5 py-0.5 text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-full flex items-center gap-1.5 animate-pulse">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                  正在采样 · {progressPercent}%
                </span>
              )}
              {isQueued && (
                <span className="px-2.5 py-0.5 text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200 rounded-full">
                  排队中 {job.queue_position ? `(第 ${job.queue_position} 位)` : ''}
                </span>
              )}
              {isFailed && <span className="px-2.5 py-0.5 text-xs font-semibold bg-rose-50 text-rose-700 border border-rose-200 rounded-full">执行失败</span>}
              {isCancelled && <span className="px-2.5 py-0.5 text-xs font-semibold bg-slate-100 text-slate-500 border border-slate-200 rounded-full">已取消</span>}
            </div>
            <div className="text-xs text-slate-400 mt-0.5">创建于 {formatDateTime(job.created_at)}</div>
          </div>
        </div>

        {/* 顶部操作条 */}
        <div className="flex items-center gap-2">
          <button
            onClick={() => onRerun(job)}
            className="px-3.5 py-2 bg-slate-50 hover:bg-slate-100 text-slate-700 text-xs font-medium rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer border border-slate-200 shadow-xs"
          >
            <RotateCcw className="w-3.5 h-3.5 text-emerald-600" />
            <span>复用此任务重跑</span>
          </button>

          {isQueued && (
            <>
              <button
                onClick={handlePrioritize}
                className="px-3.5 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 border border-indigo-200 text-xs font-medium rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer"
              >
                <ArrowUpToLine className="w-3.5 h-3.5" />
                <span>优先插队</span>
              </button>
              <button
                onClick={() => handleCancel(false)}
                className="px-3.5 py-2 bg-slate-50 hover:bg-slate-100 text-slate-600 text-xs font-medium rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer border border-slate-200"
              >
                <XCircle className="w-3.5 h-3.5" />
                <span>取消</span>
              </button>
            </>
          )}

          {isRunning && (
            <button
              onClick={() => handleCancel(true)}
              className="px-3.5 py-2 bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 text-xs font-medium rounded-xl flex items-center gap-1.5 transition-colors cursor-pointer shadow-xs"
            >
              <StopCircle className="w-3.5 h-3.5" />
              <span>强行终止任务</span>
            </button>
          )}
        </div>
      </div>

      {/* 核心成果展示区 / 实时可视化进度看板 */}
      <div className="relative bg-slate-900 border border-slate-200 rounded-2xl overflow-hidden shadow-xs flex flex-col items-center justify-center min-h-[360px]">
        {isDone && videoSrc ? (
          <div className="w-full flex flex-col items-center p-4">
            <video
              src={videoSrc}
              controls
              autoPlay
              loop
              playsInline
              className="max-h-[560px] w-auto max-w-full rounded-xl shadow-xl bg-black"
            />
            <div className="w-full flex items-center justify-between mt-3 px-2">
              <span className="text-xs text-slate-400 font-mono">
                规格：{req.width}×{req.height} · {req.frames} 帧 (约 {(req.frames / 24).toFixed(1)}s)
              </span>
              <a
                href={videoSrc}
                download={`h3_${job.id.substring(0, 8)}.mp4`}
                className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-medium rounded-xl flex items-center gap-2 transition-all shadow-sm"
              >
                <Download className="w-4 h-4" />
                <span>下载 MP4 视频 {job.size_bytes ? `(${formatBytes(job.size_bytes)})` : ''}</span>
              </a>
            </div>
          </div>
        ) : isRunning ? (
          /* 🔥 极度直观的全新多维进度看板 */
          <div className="w-full max-w-2xl p-8 flex flex-col items-center gap-6">
            <div className="flex items-center gap-2 text-emerald-400 text-xs font-bold uppercase tracking-wider bg-emerald-950/60 px-3 py-1 rounded-full border border-emerald-500/30">
              <Activity className="w-3.5 h-3.5 animate-spin" />
              <span>GPU 扩散采样中 · 实时推演</span>
            </div>

            {/* 大数字百分比 */}
            <div className="flex flex-col items-center">
              <div className="text-5xl font-extrabold font-mono text-white tracking-tight flex items-baseline gap-1">
                <span>{progressPercent}</span>
                <span className="text-2xl text-emerald-400 font-semibold">%</span>
              </div>
              <p className="text-xs text-slate-400 mt-1">
                正在执行第 <span className="text-white font-mono font-bold">{curStep}</span> 步 / 共 <span className="text-slate-300 font-mono">{totalSteps}</span> 步
              </p>
            </div>

            {/* 真实横向流光进度条 */}
            <div className="w-full flex flex-col gap-2">
              <div className="w-full bg-slate-800/90 h-3.5 rounded-full overflow-hidden p-0.5 border border-slate-700 shadow-inner">
                <div
                  className="bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full transition-all duration-300 relative overflow-hidden"
                  style={{ width: `${progressPercent}%` }}
                >
                  {/* 流光扫光动画 */}
                  <div className="absolute inset-0 bg-white/25 animate-pulse" />
                </div>
              </div>

              {/* 进度条两端时间指示 */}
              <div className="flex items-center justify-between text-xs text-slate-400 px-1 font-mono">
                <span className="flex items-center gap-1 text-slate-300">
                  <Clock className="w-3.5 h-3.5 text-emerald-400" />
                  <span>已耗时: {elapsed} 秒</span>
                </span>
                {estimatedRemaining && (
                  <span className="text-emerald-400 font-medium">
                    预计还需: {estimatedRemaining}
                  </span>
                )}
              </div>
            </div>

            {/* 4 阶段步骤状态指示链 */}
            <div className="grid grid-cols-4 w-full gap-2 pt-4 border-t border-slate-800 text-center">
              <div className="flex flex-col items-center gap-1">
                <div className="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-bold flex items-center justify-center border border-emerald-500/40">✓</div>
                <span className="text-[11px] text-slate-400">1. 排队调度</span>
              </div>
              <div className="flex flex-col items-center gap-1">
                <div className="w-6 h-6 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-bold flex items-center justify-center border border-emerald-500/40">✓</div>
                <span className="text-[11px] text-slate-400">2. 模型装载</span>
              </div>
              <div className="flex flex-col items-center gap-1">
                <div className="w-6 h-6 rounded-full bg-emerald-500 text-white text-xs font-bold flex items-center justify-center shadow-md animate-pulse">3</div>
                <span className="text-[11px] text-white font-semibold">3. 扩散计算</span>
              </div>
              <div className="flex flex-col items-center gap-1 opacity-40">
                <div className="w-6 h-6 rounded-full bg-slate-800 text-slate-400 text-xs font-bold flex items-center justify-center border border-slate-700">4</div>
                <span className="text-[11px] text-slate-400">4. 压制出片</span>
              </div>
            </div>
          </div>
        ) : isQueued ? (
          <div className="p-12 flex flex-col items-center gap-3 text-center">
            <Clock className="w-10 h-10 text-blue-400 animate-pulse" />
            <div>
              <h3 className="text-base font-semibold text-blue-300">正在等待空闲的 {job.partition || 'GPU'} 后端…</h3>
              <p className="text-xs text-slate-400 mt-1">当前排队第 {job.queue_position || 1} 位，空闲节点就绪后将自动调度启动</p>
            </div>
          </div>
        ) : (
          <div className="p-12 flex flex-col items-center gap-3 text-center max-w-lg">
            <ShieldAlert className="w-10 h-10 text-rose-400" />
            <h3 className="text-base font-semibold text-rose-300">{isFailed ? '生成失败' : '任务已取消'}</h3>
            <div className="p-3 bg-rose-950/40 border border-rose-500/30 rounded-xl text-xs text-rose-200/90 font-mono text-left w-full max-h-48 overflow-y-auto whitespace-pre-wrap">
              {job.error || '无详细错误日志'}
            </div>
          </div>
        )}
      </div>

      {/* 仪表盘指标卡片网格 */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3.5">
        <div className="p-4 bg-white border border-slate-200 rounded-xl flex flex-col gap-1 shadow-xs">
          <span className="text-[11px] uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-1.5">
            <Clock className="w-3.5 h-3.5 text-emerald-600" />
            <span>生成耗时</span>
          </span>
          <span className="text-sm font-bold font-mono text-slate-800">
            {job.started_at && job.finished_at ? `${(job.finished_at - job.started_at).toFixed(1)} 秒` : isRunning ? `${job.elapsed_seconds || 0} 秒 (进行中)` : '—'}
          </span>
        </div>

        <div className="p-4 bg-white border border-slate-200 rounded-xl flex flex-col gap-1 shadow-xs">
          <span className="text-[11px] uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-1.5">
            <Cpu className="w-3.5 h-3.5 text-indigo-600" />
            <span>峰值显存</span>
          </span>
          <span className="text-sm font-bold font-mono text-slate-800">
            {job.peak_vram_gb ? `${job.peak_vram_gb} GB` : '—'}
          </span>
        </div>

        <div className="p-4 bg-white border border-slate-200 rounded-xl flex flex-col gap-1 shadow-xs">
          <span className="text-[11px] uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-1.5">
            <Layers className="w-3.5 h-3.5 text-amber-600" />
            <span>分配后端卡</span>
          </span>
          <span className="text-sm font-bold font-mono text-slate-800 truncate">
            {job.backend || '自动弹性调度'}
          </span>
        </div>

        <div className="p-4 bg-white border border-slate-200 rounded-xl flex flex-col gap-1 shadow-xs">
          <span className="text-[11px] uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-1.5">
            <Code className="w-3.5 h-3.5 text-teal-600" />
            <span>采样规格</span>
          </span>
          <span className="text-sm font-bold font-mono text-slate-800">
            {req.turbo === false ? '常规' : 'Turbo'} · {req.steps ?? '?'}步 · seed={req.seed ?? 0}
          </span>
        </div>
      </div>

      {/* Prompt 提示词卡片 */}
      <div className="p-5 bg-white border border-slate-200 rounded-2xl flex flex-col gap-3 shadow-xs">
        <div className="flex items-center justify-between">
          <span className="text-xs font-bold uppercase tracking-wider text-slate-600">Prompt 提示词</span>
          <button
            onClick={handleCopyPrompt}
            className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-emerald-600 transition-colors cursor-pointer"
          >
            {copiedPrompt ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
            <span>{copiedPrompt ? '已复制' : '复制文本'}</span>
          </button>
        </div>
        <p className="text-sm text-slate-800 leading-relaxed font-normal bg-slate-50 p-3.5 rounded-xl border border-slate-200 whitespace-pre-wrap">
          {req.prompt || '(无提示词)'}
        </p>
        {req.negative_prompt && (
          <div className="text-xs text-slate-600 flex flex-col gap-1 pt-1">
            <span className="font-semibold text-slate-500">负面提示词：</span>
            <span className="bg-slate-50 p-2.5 rounded-xl border border-slate-200 text-slate-600">{req.negative_prompt}</span>
          </div>
        )}
      </div>

      {/* 输入素材回显 (首尾帧 / 参考媒体) */}
      {(req.first_frame_url || req.last_frame_url || (req.reference_image_urls || []).length > 0 || (req.reference_video_urls || []).length > 0 || (req.reference_audio_urls || []).length > 0) && (
        <div className="p-5 bg-white border border-slate-200 rounded-2xl flex flex-col gap-3.5 shadow-xs">
          <span className="text-xs font-bold uppercase tracking-wider text-slate-600">输入素材与参考源</span>
          <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-3">
            {req.first_frame_url && (
              <div className="relative group bg-slate-100 rounded-xl overflow-hidden border border-slate-200 shadow-xs">
                <img src={thumbUrl(req.first_frame_url)} alt="首帧" className="w-full aspect-square object-cover" />
                <div className="absolute bottom-0 inset-x-0 bg-slate-900/80 px-2 py-1 text-[10px] text-white font-medium text-center">首帧</div>
              </div>
            )}
            {req.last_frame_url && (
              <div className="relative group bg-slate-100 rounded-xl overflow-hidden border border-slate-200 shadow-xs">
                <img src={thumbUrl(req.last_frame_url)} alt="尾帧" className="w-full aspect-square object-cover" />
                <div className="absolute bottom-0 inset-x-0 bg-slate-900/80 px-2 py-1 text-[10px] text-white font-medium text-center">尾帧</div>
              </div>
            )}
            {(req.reference_image_urls || []).map((u, i) => (
              <div key={i} className="relative group bg-slate-100 rounded-xl overflow-hidden border border-slate-200 shadow-xs">
                <img src={thumbUrl(u)} alt={`参考图${i+1}`} className="w-full aspect-square object-cover" />
                <div className="absolute bottom-0 inset-x-0 bg-slate-900/80 px-2 py-1 text-[10px] text-white font-medium text-center truncate">参考图 {i+1}</div>
              </div>
            ))}
            {(req.reference_video_urls || []).map((u, i) => (
              <div key={i} className="relative group bg-slate-100 rounded-xl overflow-hidden border border-slate-200 shadow-xs">
                <video src={localAsset(u)} controls className="w-full aspect-square object-cover" />
                <div className="absolute bottom-0 inset-x-0 bg-slate-900/80 px-2 py-1 text-[10px] text-white font-medium text-center truncate">参考视频 {i+1}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 底部调试折叠抽屉 */}
      <div className="flex flex-col gap-3 pt-2 pb-12">
        {/* 原始请求 JSON */}
        <div className="border border-slate-200 rounded-xl overflow-hidden bg-slate-50/60">
          <button
            onClick={() => setShowRawReq(!showRawReq)}
            className="w-full px-4 py-3 text-left text-xs font-mono text-slate-600 hover:text-slate-900 hover:bg-slate-100 flex items-center justify-between cursor-pointer"
          >
            <span>用户提交的原始请求参数 (JSON)</span>
            <span className="text-[11px] text-slate-400">{showRawReq ? '收起' : '展开'}</span>
          </button>
          {showRawReq && (
            <pre className="p-4 text-[11px] font-mono text-slate-700 overflow-x-auto border-t border-slate-200 bg-white leading-relaxed">
              {JSON.stringify(req, null, 2)}
            </pre>
          )}
        </div>

        {/* ComfyUI History */}
        {job.comfy_prompt_id && (
          <div className="border border-slate-200 rounded-xl overflow-hidden bg-slate-50/60">
            <button
              onClick={handleToggleHistory}
              className="w-full px-4 py-3 text-left text-xs font-mono text-slate-600 hover:text-slate-900 hover:bg-slate-100 flex items-center justify-between cursor-pointer"
            >
              <span>ComfyUI 执行图谱与日志 (History)</span>
              <span className="text-[11px] text-slate-400">{showHistory ? '收起' : '展开'}</span>
            </button>
            {showHistory && (
              <pre className="p-4 text-[11px] font-mono text-slate-700 overflow-x-auto border-t border-slate-200 bg-white leading-relaxed max-h-96">
                {loadingHistory ? '正在拉取 ComfyUI History…' : comfyHistory ? JSON.stringify(comfyHistory, null, 2) : '无可用数据'}
              </pre>
            )}
          </div>
        )}
      </div>

      {/* 模态弹窗 */}
      <Modal
        isOpen={confirmModal.isOpen}
        title={confirmModal.title}
        content={confirmModal.content}
        isDanger={confirmModal.isDanger}
        onConfirm={confirmModal.onConfirm}
        onCancel={() => setConfirmModal((prev) => ({ ...prev, isOpen: false }))}
      />
    </div>
  );
}