"use client";

import { BookOpen, Sparkles } from "lucide-react";
import { AppModal, AppModalHeader } from "@/shared/ui/AppModal";
import { useScriptLearning } from "./script-learning/useScriptLearning";

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

const WORD_COUNT_MIN = 80;
const WORD_COUNT_MAX = 1000;

export default function ScriptLearningModal({ isOpen, onClose, onApply }: ScriptLearningModalProps) {
  const {
    step,
    inputUrl,
    setInputUrl,
    topics,
    selectedTopic,
    setSelectedTopic,
    wordCount,
    setWordCount,
    generatedScript,
    error,
    analysisId,
    handleAnalyze,
    handleGenerate,
    handleRegenerate,
    backToInput,
    backToTopics,
    copyToClipboard,
  } = useScriptLearning({ isOpen });

  if (!isOpen) return null;

  const wordCountNum = Number(wordCount);
  const wordCountValid = Number.isInteger(wordCountNum)
    && wordCountNum >= WORD_COUNT_MIN
    && wordCountNum <= WORD_COUNT_MAX;
  const canGenerate = !!analysisId && !!selectedTopic && wordCountValid;

  const handleApplyAndClose = () => {
    if (!generatedScript.trim()) return;
    onApply?.(generatedScript);
    onClose();
  };

  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}
      closeOnEsc={false}
    >
      <AppModalHeader
        title="文案深度学习"
        icon={<BookOpen className="h-5 w-5 text-cyan-300" />}
        subtitle="分析博主近期选题风格并快速生成文案"
        onClose={onClose}
      />

      <div className="flex-1 overflow-y-auto p-6">
        {step === "input" && (
          <div className="space-y-5">
            <div className="space-y-2">
              <label className="text-sm text-gray-300">博主主页链接</label>
              <input
                type="text"
                value={inputUrl}
                onChange={(event) => setInputUrl(event.target.value)}
                placeholder="请粘贴抖音或B站博主主页链接..."
                className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 transition-colors"
              />
              <p className="text-xs text-gray-500">仅支持 https 链接，建议使用主页地址（非单条视频链接）</p>
            </div>

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

            <div className="flex gap-3 pt-1">
              <button
                type="button"
                onClick={() => setInputUrl("")}
                className="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-colors"
              >
                清空
              </button>
              <button
                type="button"
                onClick={() => void handleAnalyze()}
                disabled={!inputUrl.trim()}
                className="flex-1 py-3 px-4 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-500 hover:to-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl transition-all font-medium shadow-lg"
              >
                开始分析
              </button>
            </div>
          </div>
        )}

        {(step === "analyzing" || step === "generating") && (
          <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-cyan-500/30 rounded-full" />
              <div className="absolute inset-0 border-4 border-t-cyan-500 rounded-full animate-spin" />
            </div>
            <h4 className="text-xl font-medium text-white mb-2">
              {step === "analyzing" ? "正在分析中..." : "正在生成中..."}
            </h4>
          </div>
        )}

        {step === "topics" && (
          <div className="space-y-5">
            <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-xl p-3">
              <p className="text-cyan-200 text-sm">已完成深度学习，请选择热门话题。</p>
            </div>

            <div className="space-y-2">
              <p className="text-sm text-gray-300">请选择一个话题</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                {topics.map((topic) => {
                  const active = selectedTopic === topic;
                  return (
                    <button
                      key={topic}
                      type="button"
                      onClick={() => setSelectedTopic(topic)}
                      className={`text-left rounded-lg border px-3 py-2.5 text-sm transition-colors ${
                        active
                          ? "border-cyan-400 bg-cyan-500/20 text-cyan-100"
                          : "border-white/10 bg-white/5 text-gray-200 hover:border-white/20 hover:bg-white/10"
                      }`}
                    >
                      {topic}
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="space-y-2">
              <label className="text-sm text-gray-300">目标字数</label>
              <input
                type="number"
                min={WORD_COUNT_MIN}
                max={WORD_COUNT_MAX}
                value={wordCount}
                onChange={(event) => setWordCount(event.target.value)}
                placeholder="请输入目标字数（80-1000），如 300"
                className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 transition-colors"
              />
            </div>

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

            <div className="flex gap-3 pt-1">
              <button
                type="button"
                onClick={backToInput}
                className="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-colors"
              >
                返回
              </button>
              <button
                type="button"
                onClick={() => void handleGenerate()}
                disabled={!canGenerate}
                className="flex-1 py-3 px-4 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-500 hover:to-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl transition-all font-medium shadow-lg"
              >
                生成文案
              </button>
            </div>
          </div>
        )}

        {step === "result" && (
          <div className="space-y-5">
            <div className="flex justify-between items-center">
              <h4 className="font-semibold text-cyan-200 flex items-center gap-2">
                <Sparkles className="h-4 w-4" />
                生成结果
              </h4>
              <span className="text-xs text-gray-400">{generatedScript.length} 字</span>
            </div>

            <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-72 overflow-y-auto hide-scrollbar">
              <p className="text-gray-200 text-sm leading-relaxed whitespace-pre-wrap">{generatedScript}</p>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
              <button
                type="button"
                onClick={handleApplyAndClose}
                className="py-2.5 px-3 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-500 hover:to-cyan-500 text-white rounded-lg transition-colors text-sm"
              >
                填入文案
              </button>
              <button
                type="button"
                onClick={() => copyToClipboard(generatedScript)}
                className="py-2.5 px-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors text-sm"
              >
                复制
              </button>
              <button
                type="button"
                onClick={() => void handleRegenerate()}
                className="py-2.5 px-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors text-sm"
              >
                重新生成
              </button>
              <button
                type="button"
                onClick={backToTopics}
                className="py-2.5 px-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors text-sm"
              >
                换个话题
              </button>
            </div>

            {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>
            )}
          </div>
        )}
      </div>
    </AppModal>
  );
}