"use client";

import { useState, useEffect } from "react";

// 动态获取 API 地址：服务端使用 localhost，客户端使用当前域名
const API_BASE = typeof window !== 'undefined'
  ? `http://${window.location.hostname}:8006`
  : 'http://localhost:8006';

// 类型定义
interface Material {
  id: string;
  name: string;
  scene: string;
  size_mb: number;
  path: string;
}

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

export default function Home() {
  const [materials, setMaterials] = useState<Material[]>([]);
  const [selectedMaterial, setSelectedMaterial] = useState<string>("");
  const [text, setText] = useState<string>(
    "大家好，欢迎来到我的频道，今天给大家分享一些有趣的内容。"
  );
  const [voice, setVoice] = useState<string>("zh-CN-YunxiNeural");
  const [isGenerating, setIsGenerating] = useState(false);
  const [currentTask, setCurrentTask] = useState<Task | null>(null);
  const [generatedVideo, setGeneratedVideo] = useState<string | null>(null);
  const [fetchError, setFetchError] = useState<string | null>(null);
  const [debugData, setDebugData] = useState<string>("");
  const [isUploading, setIsUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadError, setUploadError] = useState<string | null>(null);

  // 可选音色
  const voices = [
    { id: "zh-CN-YunxiNeural", name: "云溪 (男声-年轻)" },
    { id: "zh-CN-YunjianNeural", name: "云健 (男声-新闻)" },
    { id: "zh-CN-YunyangNeural", name: "云扬 (男声-专业)" },
    { id: "zh-CN-XiaoxiaoNeural", name: "晓晓 (女声-活泼)" },
    { id: "zh-CN-XiaoyiNeural", name: "晓伊 (女声-温柔)" },
  ];

  // 加载素材列表
  useEffect(() => {
    fetchMaterials();
  }, []);

  const fetchMaterials = async () => {
    try {
      setFetchError(null);
      setDebugData("Loading...");

      // Add timestamp to prevent caching
      const url = `${API_BASE}/api/materials/?t=${new Date().getTime()}`;
      const res = await fetch(url);

      if (!res.ok) {
        throw new Error(`HTTP ${res.status} ${res.statusText}`);
      }

      const text = await res.text(); // Get raw text first
      setDebugData(text.substring(0, 200) + (text.length > 200 ? "..." : "")); // Show preview

      const data = JSON.parse(text);
      setMaterials(data.materials || []);

      if (data.materials?.length > 0) {
        if (!selectedMaterial) {
          setSelectedMaterial(data.materials[0].id);
        }
      }
    } catch (error) {
      console.error("获取素材失败:", error);
      setFetchError(String(error));
      setDebugData(`Error: ${String(error)}`);
    }
  };

  // 上传视频
  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    // 验证文件类型
    const validTypes = ['.mp4', '.mov', '.avi'];
    const ext = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
    if (!validTypes.includes(ext)) {
      setUploadError('仅支持 MP4、MOV、AVI 格式');
      return;
    }

    setIsUploading(true);
    setUploadProgress(0);
    setUploadError(null);

    const formData = new FormData();
    formData.append('file', file);

    // 使用 XMLHttpRequest 以获取上传进度
    const xhr = new XMLHttpRequest();

    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        const progress = Math.round((event.loaded / event.total) * 100);
        setUploadProgress(progress);
      }
    };

    xhr.onload = () => {
      setIsUploading(false);
      if (xhr.status >= 200 && xhr.status < 300) {
        fetchMaterials(); // 刷新素材列表
        setUploadProgress(100);
      } else {
        setUploadError(`上传失败: ${xhr.statusText}`);
      }
    };

    xhr.onerror = () => {
      setIsUploading(false);
      setUploadError('网络错误，上传失败');
    };

    xhr.open('POST', `${API_BASE}/api/materials/`);
    xhr.send(formData);

    // 清空 input 以便可以再次选择同一文件
    e.target.value = '';
  };

  // 生成视频
  const handleGenerate = async () => {
    if (!selectedMaterial || !text.trim()) {
      alert("请选择素材并输入文案");
      return;
    }

    setIsGenerating(true);
    setGeneratedVideo(null);

    try {
      // 查找选中的素材对象以获取路径
      const materialObj = materials.find(m => m.id === selectedMaterial);
      if (!materialObj) {
        alert("素材数据异常");
        return;
      }

      // 创建生成任务
      const res = await fetch(`${API_BASE}/api/videos/generate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          material_path: materialObj.path,
          text: text,
          voice: voice,
          add_subtitle: true,
        }),
      });

      const data = await res.json();
      const taskId = data.task_id;

      // 轮询任务状态
      const pollTask = async () => {
        const taskRes = await fetch(`${API_BASE}/api/videos/tasks/${taskId}`);
        const taskData: Task = await taskRes.json();
        setCurrentTask(taskData);

        if (taskData.status === "completed") {
          setGeneratedVideo(`${API_BASE}${taskData.download_url}`);
          setIsGenerating(false);
        } else if (taskData.status === "failed") {
          alert("视频生成失败: " + taskData.message);
          setIsGenerating(false);
        } else {
          setTimeout(pollTask, 1000);
        }
      };

      pollTask();
    } catch (error) {
      console.error("生成失败:", error);
      setIsGenerating(false);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      {/* Header */}
      <header className="border-b border-white/10 bg-black/20 backdrop-blur-sm">
        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-white flex items-center gap-3">
            <span className="text-3xl">🎬</span>
            ViGent
          </h1>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* 左侧: 输入区域 */}
          <div className="space-y-6">
            {/* 素材选择 */}
            <div className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm">
              <div className="flex justify-between items-center mb-4">
                <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                  📹 选择素材视频
                </h2>
                <div className="flex gap-2">
                  {/* 隐藏的文件输入 */}
                  <input
                    type="file"
                    id="video-upload"
                    accept=".mp4,.mov,.avi"
                    onChange={handleUpload}
                    className="hidden"
                  />
                  <label
                    htmlFor="video-upload"
                    className={`px-3 py-1 text-xs rounded cursor-pointer transition-all ${isUploading
                      ? "bg-gray-600 cursor-not-allowed text-gray-400"
                      : "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
                      }`}
                  >
                    📤 上传视频
                  </label>
                  <button
                    onClick={fetchMaterials}
                    className="px-3 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300"
                  >
                    🔄 刷新
                  </button>
                </div>
              </div>

              {/* 上传进度条 */}
              {isUploading && (
                <div className="mb-4 p-4 bg-purple-500/10 rounded-xl border border-purple-500/30">
                  <div className="flex justify-between text-sm text-purple-300 mb-2">
                    <span>📤 上传中...</span>
                    <span>{uploadProgress}%</span>
                  </div>
                  <div className="h-2 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: `${uploadProgress}%` }}
                    />
                  </div>
                </div>
              )}

              {/* 上传错误提示 */}
              {uploadError && (
                <div className="mb-4 p-4 bg-red-500/20 text-red-200 rounded-xl text-sm flex justify-between items-center">
                  <span>❌ {uploadError}</span>
                  <button
                    onClick={() => setUploadError(null)}
                    className="text-red-300 hover:text-white"
                  >
                    ✕
                  </button>
                </div>
              )}

              {fetchError ? (
                <div className="p-4 bg-red-500/20 text-red-200 rounded-xl text-sm mb-4">
                  获取素材失败: {fetchError}
                  <br />
                  API: {API_BASE}/api/materials/
                </div>
              ) : materials.length === 0 ? (
                <div className="text-center py-8 text-gray-400">
                  <div className="text-5xl mb-4">📁</div>
                  <p>暂无素材视频</p>
                  <p className="text-sm mt-2">
                    点击上方「📤 上传视频」按钮添加素材
                  </p>
                </div>
              ) : (
                <div className="grid grid-cols-2 gap-3">
                  {materials.map((m) => (
                    <button
                      key={m.id}
                      onClick={() => setSelectedMaterial(m.id)}
                      className={`p-4 rounded-xl border-2 transition-all text-left ${selectedMaterial === m.id
                        ? "border-purple-500 bg-purple-500/20"
                        : "border-white/10 bg-white/5 hover:border-white/30"
                        }`}
                    >
                      <div className="text-white font-medium truncate">
                        {m.scene || m.name}
                      </div>
                      <div className="text-gray-400 text-sm mt-1">
                        {m.size_mb.toFixed(1)} MB
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* 文案输入 */}
            <div className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm">
              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                ✍️ 输入口播文案
              </h2>
              <textarea
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="请输入你想说的话..."
                className="w-full h-40 bg-black/30 border border-white/10 rounded-xl p-4 text-white placeholder-gray-500 resize-none focus:outline-none focus:border-purple-500 transition-colors"
              />
              <div className="flex justify-between mt-2 text-sm text-gray-400">
                <span>{text.length} 字</span>
                <span>预计时长: ~{Math.ceil(text.length / 4)} 秒</span>
              </div>
            </div>

            {/* 音色选择 */}
            <div className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm">
              <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                🎙️ 选择配音音色
              </h2>
              <div className="grid grid-cols-2 gap-3">
                {voices.map((v) => (
                  <button
                    key={v.id}
                    onClick={() => setVoice(v.id)}
                    className={`p-3 rounded-xl border-2 transition-all text-left ${voice === v.id
                      ? "border-purple-500 bg-purple-500/20"
                      : "border-white/10 bg-white/5 hover:border-white/30"
                      }`}
                  >
                    <span className="text-white text-sm">{v.name}</span>
                  </button>
                ))}
              </div>
            </div>

            {/* 生成按钮 */}
            <button
              onClick={handleGenerate}
              disabled={isGenerating || !selectedMaterial}
              className={`w-full py-4 rounded-xl font-bold text-lg transition-all ${isGenerating || !selectedMaterial
                ? "bg-gray-600 cursor-not-allowed text-gray-400"
                : "bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-purple-500/25"
                }`}
            >
              {isGenerating ? (
                <span className="flex items-center justify-center gap-3">
                  <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                      fill="none"
                    />
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                    />
                  </svg>
                  生成中... {currentTask?.progress || 0}%
                </span>
              ) : (
                "🚀 生成视频"
              )}
            </button>
          </div>

          {/* 右侧: 预览区域 */}
          <div className="space-y-6">
            {/* 进度显示 */}
            {currentTask && isGenerating && (
              <div className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm">
                <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">{currentTask.message}</p>
                </div>
              </div>
            )}

            {/* 视频预览 */}
            <div className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm">
              <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
                    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"
                >
                  ⬇️ 下载视频
                </a>
              )}
            </div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-white/10 mt-12">
        <div className="max-w-6xl mx-auto px-6 py-4 text-center text-gray-500 text-sm">
          ViGent - 基于 MuseTalk + EdgeTTS
        </div>
      </footer>
    </div>
  );
}