"use client";

import { useEffect, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { useScriptExtraction } from "./script-extraction/useScriptExtraction";
import { AppModal, AppModalHeader } from "@/shared/ui/AppModal";

interface ScriptExtractionModalProps {
    isOpen: boolean;
    onClose: () => void;
    onApply?: (text: string) => void;
}

export default function ScriptExtractionModal({
    isOpen,
    onClose,
    onApply,
}: ScriptExtractionModalProps) {
    const {
        isLoading,
        script,
        error,
        step,
        dragActive,
        selectedFile,
        activeTab,
        inputUrl,
        setActiveTab,
        setInputUrl,
        handleDrag,
        handleDrop,
        handleFileChange,
        handleExtract,
        copyToClipboard,
        resetToConfig,
        clearSelectedFile,
        clearInputUrl,
    } = useScriptExtraction({ isOpen });

    // 快捷键：Enter 提交（仅在 config 步骤）
    const canExtract = (activeTab === "file" && selectedFile) || (activeTab === "url" && inputUrl.trim());

    const handleKeyDown = useCallback((e: KeyboardEvent) => {
        if (e.key === "Enter" && !e.shiftKey && step === "config" && canExtract && !isLoading) {
            e.preventDefault();
            handleExtract();
        }
    }, [step, canExtract, isLoading, handleExtract]);

    useEffect(() => {
        if (!isOpen) return;
        document.addEventListener("keydown", handleKeyDown);
        return () => document.removeEventListener("keydown", handleKeyDown);
    }, [isOpen, handleKeyDown]);

    if (!isOpen) return null;

    const handleApplyAndClose = (text: string) => {
        onApply?.(text);
        onClose();
    };

    const handleExtractNext = () => {
        resetToConfig();
        clearSelectedFile();
        clearInputUrl();
    };

    return (
        <AppModal
            isOpen={isOpen}
            onClose={onClose}
            panelClassName="w-full max-w-2xl max-h-[90vh] rounded-2xl border border-white/10 bg-[#171821]/95 shadow-[0_24px_80px_rgba(0,0,0,0.55)] overflow-hidden flex flex-col"
            closeOnOverlay={false}
        >
            <AppModalHeader title="📜 文案提取助手" onClose={onClose} />

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-6">
                    {step === "config" && (
                        <div className="space-y-6">
                            {/* Tabs */}
                            <div className="flex p-1 bg-white/5 rounded-xl border border-white/10">
                                <button
                                    onClick={() => setActiveTab("url")}
                                    className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "url"
                                        ? "bg-purple-600 text-white shadow-lg"
                                        : "text-gray-400 hover:text-white hover:bg-white/5"
                                        }`}
                                >
                                    🔗 粘贴链接
                                </button>
                                <button
                                    onClick={() => setActiveTab("file")}
                                    className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "file"
                                        ? "bg-purple-600 text-white shadow-lg"
                                        : "text-gray-400 hover:text-white hover:bg-white/5"
                                        }`}
                                >
                                    📂 上传文件
                                </button>
                            </div>

                            {/* URL Input Area */}
                            {activeTab === "url" && (
                                <div className="space-y-2 py-4">
                                    <div className="relative">
                                        <input
                                            type="text"
                                            value={inputUrl}
                                            onChange={(e) => setInputUrl(e.target.value)}
                                            placeholder="请粘贴抖音、B站等主流平台视频链接..."
                                            className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-4 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition-colors"
                                        />
                                        {inputUrl && (
                                            <button
                                                onClick={clearInputUrl}
                                                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white"
                                            >
                                                ✕
                                            </button>
                                        )}
                                    </div>
                                    <p className="text-xs text-gray-500 pl-1">
                                        支持抖音、B站、微博、小红书等主流平台视频链接
                                    </p>
                                </div>
                            )}

                            {/* File Upload Area */}
                            {activeTab === "file" && (
                                <div
                                    className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${dragActive
                                        ? "border-purple-500 bg-purple-500/10"
                                        : "border-white/10 hover:border-white/20"
                                        }`}
                                    onDragEnter={handleDrag}
                                    onDragLeave={handleDrag}
                                    onDragOver={handleDrag}
                                    onDrop={handleDrop}
                                >
                                    {selectedFile ? (
                                        <div className="space-y-2">
                                            <p className="text-white">{selectedFile.name}</p>
                                            <p className="text-sm text-gray-400">
                                                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
                                            </p>
                                            <button
                                                onClick={clearSelectedFile}
                                                className="text-xs text-purple-400 hover:text-purple-300"
                                            >
                                                重新选择
                                            </button>
                                        </div>
                                    ) : (
                                        <div className="space-y-4">
                                            <div className="text-4xl">📁</div>
                                            <p className="text-gray-400">
                                                拖放视频/音频文件到此处，或
                                                <label className="text-purple-400 hover:text-purple-300 cursor-pointer">
                                                    点击选择
                                                    <input
                                                        type="file"
                                                        accept=".mp4,.mov,.avi,.mp3,.wav,.m4a"
                                                        onChange={handleFileChange}
                                                        className="hidden"
                                                    />
                                                </label>
                                            </p>
                                            <p className="text-xs text-gray-500">
                                                支持 MP4, MOV, AVI, MP3, WAV, M4A
                                            </p>
                                        </div>
                                    )}
                                </div>
                            )}

                            {/* Error */}
                            {error && (
                                <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4">
                                    <p className="text-red-400 text-sm">{error}</p>
                                </div>
                            )}

                            {/* Action Button */}
                            <div className="flex gap-3 pt-2">
                                <button
                                    onClick={onClose}
                                    className="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-colors"
                                >
                                    取消
                                </button>
                                <button
                                    onClick={handleExtract}
                                    disabled={
                                        (activeTab === "file" && !selectedFile) ||
                                        (activeTab === "url" && !inputUrl.trim()) ||
                                        isLoading
                                    }
                                    className="flex-1 py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl transition-all font-medium shadow-lg flex items-center justify-center gap-2"
                                >
                                    {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : null}
                                    开始提取
                                </button>
                            </div>
                        </div>
                    )}

                    {step === "processing" && (
                        <div className="flex flex-col items-center justify-center py-20">
                            <div className="relative w-20 h-20 mb-6">
                                <div className="absolute inset-0 border-4 border-purple-500/30 rounded-full"></div>
                                <div className="absolute inset-0 border-4 border-t-purple-500 rounded-full animate-spin"></div>
                            </div>
                            <h4 className="text-xl font-medium text-white mb-2">
                                正在处理中...
                            </h4>
                            <p className="text-sm text-gray-400 text-center max-w-sm px-4">
                                {activeTab === "url" && "正在下载视频..."}
                                <br />
                                正在进行语音识别...
                                <br />
                                <span className="opacity-75">
                                    大文件可能需要几分钟，请不要关闭窗口
                                </span>
                            </p>
                        </div>
                    )}

                    {step === "result" && (
                        <div className="space-y-6">
                            <div className="space-y-2">
                                <div className="flex justify-between items-center">
                                    <h4 className="font-semibold text-gray-300 flex items-center gap-2">
                                        🎙️ 识别结果
                                    </h4>
                                    <div className="flex items-center gap-2">
                                        {onApply && (
                                            <button
                                                onClick={() => handleApplyAndClose(script)}
                                                className="text-xs bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1 shadow-sm"
                                            >
                                                📥 填入
                                            </button>
                                        )}
                                        <button
                                            onClick={() => copyToClipboard(script)}
                                            className="text-xs bg-white/10 hover:bg-white/20 text-white px-3 py-1.5 rounded-lg transition-colors"
                                        >
                                            复制
                                        </button>
                                    </div>
                                </div>
                                <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-60 overflow-y-auto hide-scrollbar">
                                    <p className="text-gray-200 text-sm leading-relaxed whitespace-pre-wrap">
                                        {script}
                                    </p>
                                </div>
                            </div>

                            <div className="flex justify-center pt-4">
                                <button
                                    onClick={handleExtractNext}
                                    className="px-6 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
                                >
                                    提取下一个
                                </button>
                            </div>
                        </div>
                    )}
                </div>
        </AppModal>
    );
}
