"use client";

import { useEffect, useCallback } from "react";
import { Loader2 } from "lucide-react";
import { useScriptExtraction } from "./script-extraction/useScriptExtraction";

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

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

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

    const handleKeyDown = useCallback((e: KeyboardEvent) => {
        if (e.key === "Escape") {
            onClose();
        } else if (e.key === "Enter" && !e.shiftKey && step === "config" && canExtract && !isLoading) {
            e.preventDefault();
            handleExtract();
        }
    }, [onClose, 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 (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 animate-in fade-in duration-200">
            <div className="bg-[#1a1a1a] border border-white/10 rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl">
                {/* Header */}
                <div className="flex items-center justify-between p-4 border-b border-white/10 bg-white/5">
                    <h3 className="text-lg font-semibold text-white flex items-center gap-2">
                        📜 文案提取助手
                    </h3>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-white transition-colors text-2xl leading-none"
                    >
                        &times;
                    </button>
                </div>

                {/* 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>
                            )}

                            {/* Options */}
                            <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
                                <div className="flex items-center justify-between p-4">
                                    <label className="flex items-center gap-2 cursor-pointer">
                                        <input
                                            type="checkbox"
                                            checked={doRewrite}
                                            onChange={(e) => setDoRewrite(e.target.checked)}
                                            className="w-4 h-4 rounded bg-white/10 border-white/20 text-purple-500 focus:ring-purple-500"
                                        />
                                        <span className="text-sm text-gray-300">
                                            AI 智能改写
                                        </span>
                                    </label>
                                    {doRewrite && (
                                        <button
                                            type="button"
                                            onClick={() => setShowCustomPrompt(!showCustomPrompt)}
                                            className="text-xs text-purple-400 hover:text-purple-300 transition-colors flex items-center gap-1"
                                        >
                                            自定义提示词 {showCustomPrompt ? "▲" : "▼"}
                                        </button>
                                    )}
                                </div>
                                {doRewrite && showCustomPrompt && (
                                    <div className="px-4 pb-4 space-y-2">
                                        <textarea
                                            value={customPrompt}
                                            onChange={(e) => setCustomPrompt(e.target.value)}
                                            placeholder="输入自定义改写提示词..."
                                            rows={3}
                                            className="w-full bg-black/20 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition-colors resize-none"
                                        />
                                        <p className="text-xs text-gray-500">
                                            留空则使用默认提示词
                                        </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 />
                                {doRewrite
                                    ? "正在进行语音识别和 AI 智能改写..."
                                    : "正在进行语音识别..."}
                                <br />
                                <span className="opacity-75">
                                    大文件可能需要几分钟，请不要关闭窗口
                                </span>
                            </p>
                        </div>
                    )}

                    {step === "result" && (
                        <div className="space-y-6">
                            {rewrittenScript && (
                                <div className="space-y-2">
                                    <div className="flex justify-between items-center">
                                        <h4 className="font-semibold text-purple-300 flex items-center gap-2">
                                            ✨ AI 改写结果{" "}
                                            <span className="text-xs font-normal text-purple-400/70">
                                                (推荐)
                                            </span>
                                        </h4>
                                        {onApply && (
                                            <button
                                                onClick={() => handleApplyAndClose(rewrittenScript)}
                                                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(rewrittenScript)}
                                            className="text-xs bg-purple-600 hover:bg-purple-500 text-white px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1"
                                        >
                                            📋 复制内容
                                        </button>
                                    </div>
                                    <div className="bg-purple-900/10 border border-purple-500/20 rounded-xl p-4 max-h-60 overflow-y-auto hide-scrollbar">
                                        <p className="text-gray-200 text-sm leading-relaxed whitespace-pre-wrap">
                                            {rewrittenScript}
                                        </p>
                                    </div>
                                </div>
                            )}

                            <div className="space-y-2">
                                <div className="flex justify-between items-center">
                                    <h4 className="font-semibold text-gray-400 flex items-center gap-2">
                                        🎙️ 原始识别结果
                                    </h4>
                                    {onApply && (
                                        <button
                                            onClick={() => handleApplyAndClose(script)}
                                            className="text-xs bg-white/10 hover:bg-white/20 text-white px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1"
                                        >
                                            📥 填入
                                        </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 className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-40 overflow-y-auto hide-scrollbar">
                                    <p className="text-gray-400 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>
            </div>
        </div>
    );
}