"use client";

import { useTask } from "@/contexts/TaskContext";
import Link from "next/link";

export default function GlobalTaskIndicator() {
  const { currentTask, isGenerating } = useTask();

  if (!isGenerating) return null;

  return (
    <div className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg">
      <div className="max-w-6xl mx-auto px-6 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
            <span className="font-medium">
              视频生成中... {currentTask?.progress || 0}%
            </span>
            {currentTask?.message && (
              <span className="text-white/80 text-sm">
                {currentTask.message}
              </span>
            )}
          </div>
          <Link
            href="/"
            className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded transition-colors text-sm"
          >
            查看详情
          </Link>
        </div>
        <div className="mt-2 w-full bg-white/20 rounded-full h-1.5 overflow-hidden">
          <div
            className="bg-white h-full transition-all duration-300 ease-out"
            style={{ width: `${currentTask?.progress || 0}%` }}
          ></div>
        </div>
      </div>
    </div>
  );
}