import Link from "next/link";
import { Download, Send } from "lucide-react";

interface Task {
  task_id: string;
  status: string;
  progress: number;
  message: string;
}

interface PreviewPanelProps {
  currentTask: Task | null;
  isGenerating: boolean;
  generatedVideo: string | null;
  embedded?: boolean;
}

export function PreviewPanel({
  currentTask,
  isGenerating,
  generatedVideo,
  embedded = false,
}: PreviewPanelProps) {
  const content = (
    <>
      {currentTask && isGenerating && (
        <div className={embedded ? "mb-4" : "bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm"}>
          {!embedded && <h2 className="text-lg font-semibold text-white mb-4">生成进度</h2>}
          <div className="space-y-3">
            <div className="h-3 bg-black/30 rounded-full overflow-hidden">
              <div
                className="h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-300"
                style={{ width: `${currentTask.progress}%` }}
              />
            </div>
            <p className="text-gray-300">正在AI生成中...</p>
          </div>
        </div>
      )}

      <div className={embedded ? "" : "bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm"}>
        {!embedded && <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">作品预览</h2>}
        <div className="aspect-video bg-black/50 rounded-xl overflow-hidden flex items-center justify-center">
          {generatedVideo ? (
            <video src={generatedVideo} controls preload="metadata" className="w-full h-full object-contain" />
          ) : (
            <div className="text-gray-500 text-center">
              <div className="text-5xl mb-4">📹</div>
              <p>生成的作品将在这里预览</p>
            </div>
          )}
        </div>

        {generatedVideo && (
          <>
            <a
              href={generatedVideo}
              download
              className="mt-4 w-full py-3 rounded-xl bg-green-600 hover:bg-green-700 text-white font-medium flex items-center justify-center gap-2 transition-colors"
            >
              <Download className="h-4 w-4" />
              下载视频
            </a>
            <Link
              href="/publish"
              className="mt-3 w-full py-3 rounded-xl bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-medium flex items-center justify-center gap-2 transition-colors"
            >
              <Send className="h-4 w-4" />
              发布到社交平台
            </Link>
          </>
        )}
      </div>
    </>
  );

  return content;
}
