import { useState } from "react";

export default function FiveWhyAnalyzer() {
  const [finding, setFinding] = useState("");
  const [jobContent, setJobContent] = useState("");
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [translating, setTranslating] = useState(false);
  const [error, setError] = useState("");
  const [outputLanguage, setOutputLanguage] = useState("zh-TW");
  const [currentLanguage, setCurrentLanguage] = useState("zh-TW");
  const [showGuide, setShowGuide] = useState(false);

  const languages = [
    { code: "zh-TW", name: "繁體中文", flag: "🇹🇼" },
    { code: "zh-CN", name: "简体中文", flag: "🇨🇳" },
    { code: "en", name: "English", flag: "🇺🇸" },
    { code: "ja", name: "日本語", flag: "🇯🇵" },
    { code: "ko", name: "한국어", flag: "🇰🇷" },
    { code: "vi", name: "Tiếng Việt", flag: "🇻🇳" },
    { code: "th", name: "ภาษาไทย", flag: "🇹🇭" },
  ];

  const guidelines = [
    {
      title: "精準定義問題",
      subtitle: "描述現象，而非結論",
      icon: "🎯",
      color: "bg-rose-50 border-rose-200",
      content: "起點若是錯誤，後續分析皆是枉然。必須客觀描述「發生了什麼事」，包含人、事、時、地、物（5W1H）。",
      example: { bad: "機器壞了", good: "A 機台在下午 2 點運轉時，主軸過熱導致停機" }
    },
    {
      title: "聚焦流程與系統",
      subtitle: "而非責備個人",
      icon: "⚙️",
      color: "bg-amber-50 border-amber-200",
      content: "若分析導向「某人不小心」或「某人忘記了」，這不是根本原因。人本來就會犯錯，應追問：「為什麼系統允許這個疏失發生？」",
      principle: "解決問題的機制，而非責備犯錯的人"
    },
    {
      title: "基於事實與現場",
      subtitle: "拒絕猜測",
      icon: "🔍",
      color: "bg-emerald-50 border-emerald-200",
      content: "每一個「為什麼」的回答都必須是經過查證的事實，不能是「我覺得應該是...」或「可能是...」。",
      principle: "三現主義：現場、現物、現實"
    },
    {
      title: "邏輯雙向檢核",
      subtitle: "因果關係必須嚴謹",
      icon: "🔄",
      color: "bg-blue-50 border-blue-200",
      content: "順向：若原因 X 發生，是否必然導致結果 Y？逆向：若消除原因 X，結果 Y 是否就不會發生？",
      principle: "若無法雙向通過，代表邏輯有斷層"
    },
    {
      title: "止於可執行對策",
      subtitle: "永久性對策，非暫時性",
      icon: "✅",
      color: "bg-violet-50 border-violet-200",
      content: "當追問到可以透過具體行動來根除的層次時，就是停止追問的時刻。對策必須是「永久性」的，而非「重新訓練、加強宣導」等暫時性措施。",
      principle: "目的是解決問題，不是寫報告"
    }
  ];

  const getLanguageName = (code) => {
    const lang = languages.find((l) => l.code === code);
    return lang ? lang.name : code;
  };

  const analyzeWith5Why = async () => {
    if (!finding.trim() || !jobContent.trim()) {
      setError("請填寫所有欄位");
      return;
    }

    setLoading(true);
    setError("");
    setResults([]);

    const langName = getLanguageName(outputLanguage);

    const prompt = `你是一位專精於「5 Why 根因分析法」的資深顧問。請嚴格遵循以下五大執行要項進行分析：

## 五大執行要項

### 1. 精準定義問題（描述現象，而非結論）
- 第一步必須客觀描述「發生了什麼事」，而非直接跳入「我認為是甚麼問題」
- 具體化：包含人、事、時、地、物（5W1H）

### 2. 聚焦於「流程」與「系統」，而非「人」
- 若答案是「人為疏失」，請繼續追問：「為什麼系統允許這個疏失發生？」
- 原則：解決問題的機制，而非責備犯錯的人

### 3. 基於「事實」與「現場」，拒絕「猜測」
- 每一個「為什麼」的回答，都必須是可查證的事實
- 若無法確認，應標註需要驗證的假設

### 4. 邏輯的「雙向檢核」
- 順向檢查：若原因 X 發生，是否必然導致結果 Y？
- 逆向檢查：若消除了原因 X，結果 Y 是否就不會發生？

### 5. 止於「可執行的對策」
- 根本原因必須能對應到一個「永久性對策」（不再發生）
- 不僅是「暫時性對策」（如：重新訓練、加強宣導）

---

## 待分析內容

**Finding（發現的問題/現象）：** ${finding}

**工作內容背景：** ${jobContent}

---

## 輸出要求

請提供 **三個不同角度** 的 5 Why 分析，每個分析從不同的切入點出發（例如：流程面、系統面、管理面、設備面、環境面等）。

注意：
- 5 Why 的目的不是「湊滿五個問題」，而是穿透表面症狀直達根本原因
- 若在第 3 或第 4 個 Why 就已找到真正的根本原因，可以停止（設為 null）
- 每個 Why 必須標註是「已驗證事實」還是「待驗證假設」
- 最終對策必須是「永久性對策」

⚠️ 重要：請使用 **${langName}** 語言回覆所有內容。

請用以下 JSON 格式回覆（不要加任何 markdown 標記）：
{
  "problemRestatement": "根據 5W1H 重新描述的問題定義",
  "analyses": [
    {
      "perspective": "分析角度（如：流程面）",
      "perspectiveIcon": "適合的 emoji",
      "whys": [
        {
          "level": 1,
          "question": "為什麼...?",
          "answer": "因為...",
          "isVerified": true,
          "verificationNote": "已確認/需驗證：說明"
        }
      ],
      "rootCause": "根本原因（系統/流程層面）",
      "logicCheck": {
        "forward": "順向檢核：如果[原因]發生，則[結果]必然發生",
        "backward": "逆向檢核：如果消除[原因]，則[結果]不會發生",
        "isValid": true
      },
      "countermeasure": {
        "permanent": "永久性對策（系統性解決方案）",
        "actionItems": ["具體行動項目1", "具體行動項目2"],
        "avoidList": ["避免的暫時性做法（如：加強宣導）"]
      }
    }
  ]
}`;

    try {
      const response = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 6000,
          messages: [{ role: "user", content: prompt }],
        }),
      });

      const data = await response.json();
      const text = data.content
        .map((item) => (item.type === "text" ? item.text : ""))
        .join("");

      const clean = text.replace(/```json|```/g, "").trim();
      const parsed = JSON.parse(clean);
      setResults(parsed);
      setCurrentLanguage(outputLanguage);
    } catch (err) {
      setError("分析失敗，請稍後再試：" + err.message);
    } finally {
      setLoading(false);
    }
  };

  const translateResults = async (targetLang) => {
    if (!results.analyses || targetLang === currentLanguage) return;

    setTranslating(true);
    setError("");

    const langName = getLanguageName(targetLang);

    const prompt = `請將以下 5 Why 分析結果翻譯成 **${langName}**。

原始內容：
${JSON.stringify(results, null, 2)}

請保持完全相同的 JSON 結構，只翻譯文字內容。
請用以下 JSON 格式回覆（不要加任何 markdown 標記）：
{
  "problemRestatement": "...",
  "analyses": [...]
}`;

    try {
      const response = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 6000,
          messages: [{ role: "user", content: prompt }],
        }),
      });

      const data = await response.json();
      const text = data.content
        .map((item) => (item.type === "text" ? item.text : ""))
        .join("");

      const clean = text.replace(/```json|```/g, "").trim();
      const parsed = JSON.parse(clean);
      setResults(parsed);
      setCurrentLanguage(targetLang);
    } catch (err) {
      setError("翻譯失敗：" + err.message);
    } finally {
      setTranslating(false);
    }
  };

  const cardColors = [
    { header: "bg-blue-500", headerText: "text-white", border: "border-blue-200" },
    { header: "bg-violet-500", headerText: "text-white", border: "border-violet-200" },
    { header: "bg-teal-500", headerText: "text-white", border: "border-teal-200" },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-4 md:p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
            🔍 5 Why 根因分析器
          </h1>
          <p className="text-slate-500 text-sm md:text-base">
            穿透問題表面，直達根本原因，產出永久性對策
          </p>
        </div>

        {/* Guidelines Toggle */}
        <div className="mb-6">
          <button
            onClick={() => setShowGuide(!showGuide)}
            className="w-full py-3 bg-white hover:bg-slate-50 border border-slate-200 rounded-xl text-slate-600 font-medium transition-all flex items-center justify-center gap-2 shadow-sm"
          >
            📚 5 Why 執行要項指南
            <span className={`transition-transform ${showGuide ? "rotate-180" : ""}`}>▼</span>
          </button>
          
          {showGuide && (
            <div className="mt-4 grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {guidelines.map((guide, idx) => (
                <div key={idx} className={`${guide.color} rounded-xl p-4 border shadow-sm`}>
                  <div className="flex items-start gap-3 mb-3">
                    <span className="text-2xl">{guide.icon}</span>
                    <div>
                      <h3 className="text-slate-800 font-bold">{guide.title}</h3>
                      <p className="text-slate-500 text-sm">{guide.subtitle}</p>
                    </div>
                  </div>
                  <p className="text-slate-600 text-sm mb-3">{guide.content}</p>
                  {guide.example && (
                    <div className="bg-white/70 rounded-lg p-3 text-xs">
                      <div className="text-red-600 mb-1">❌ {guide.example.bad}</div>
                      <div className="text-emerald-600">⭕ {guide.example.good}</div>
                    </div>
                  )}
                  {guide.principle && (
                    <div className="bg-white/70 rounded-lg p-2 text-xs text-blue-700 border border-blue-200">
                      💡 {guide.principle}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Input Section */}
        <div className="bg-white rounded-2xl p-6 mb-6 border border-slate-200 shadow-sm">
          <div className="grid md:grid-cols-2 gap-6 mb-6">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">
                📋 我負責的 Finding 是什麼？
              </label>
              <p className="text-xs text-slate-400 mb-2">
                請具體描述現象（5W1H）：何人、何事、何時、何地、如何發生
              </p>
              <textarea
                value={finding}
                onChange={(e) => setFinding(e.target.value)}
                placeholder="範例：A 機台在 12/5 下午 2 點運轉時，主軸溫度達 95°C 觸發過熱保護導致停機，影響當日產能 200 件..."
                className="w-full h-36 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">
                💼 我的工作內容是什麼？
              </label>
              <p className="text-xs text-slate-400 mb-2">
                說明您的職責範圍，幫助分析聚焦在可控因素
              </p>
              <textarea
                value={jobContent}
                onChange={(e) => setJobContent(e.target.value)}
                placeholder="範例：負責生產線設備維護與品質管控，管理 5 台 CNC 機台，需確保 OEE 達 85% 以上..."
                className="w-full h-36 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm"
              />
            </div>
          </div>

          {/* Language Selection */}
          <div className="mb-6">
            <label className="block text-sm font-medium text-slate-700 mb-2">
              🌐 輸出語言
            </label>
            <div className="flex flex-wrap gap-2">
              {languages.map((lang) => (
                <button
                  key={lang.code}
                  onClick={() => setOutputLanguage(lang.code)}
                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
                    outputLanguage === lang.code
                      ? "bg-blue-500 text-white shadow-md"
                      : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                  }`}
                >
                  {lang.flag} {lang.name}
                </button>
              ))}
            </div>
          </div>

          <button
            onClick={analyzeWith5Why}
            disabled={loading}
            className="w-full py-4 bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 disabled:from-slate-300 disabled:to-slate-300 text-white font-bold rounded-xl transition-all duration-300 transform hover:scale-[1.02] disabled:scale-100 disabled:cursor-not-allowed shadow-lg"
          >
            {loading ? (
              <span className="flex items-center justify-center gap-2">
                <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                </svg>
                深度分析中...
              </span>
            ) : (
              "🎯 Find My 5 Why"
            )}
          </button>

          {error && (
            <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm">
              {error}
            </div>
          )}
        </div>

        {/* Problem Restatement */}
        {results.problemRestatement && (
          <div className="bg-indigo-50 rounded-2xl p-5 mb-6 border border-indigo-200 shadow-sm">
            <h3 className="text-indigo-700 font-bold mb-2 flex items-center gap-2">
              📝 問題重新定義（5W1H）
            </h3>
            <p className="text-indigo-900">{results.problemRestatement}</p>
          </div>
        )}

        {/* Translation Bar */}
        {results.analyses && results.analyses.length > 0 && (
          <div className="bg-white rounded-xl p-4 mb-6 border border-slate-200 shadow-sm">
            <div className="flex flex-wrap items-center gap-3">
              <span className="text-slate-600 text-sm font-medium">🔄 翻譯：</span>
              <span className="text-slate-500 text-sm">
                目前：
                <span className="text-blue-600 font-medium ml-1">
                  {languages.find((l) => l.code === currentLanguage)?.flag} {getLanguageName(currentLanguage)}
                </span>
              </span>
              <div className="flex-1" />
              <div className="flex flex-wrap gap-2">
                {languages.filter((l) => l.code !== currentLanguage).map((lang) => (
                  <button
                    key={lang.code}
                    onClick={() => translateResults(lang.code)}
                    disabled={translating}
                    className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 disabled:bg-slate-50 text-slate-600 text-sm rounded-lg transition-all disabled:cursor-not-allowed"
                  >
                    {lang.flag} {lang.name}
                  </button>
                ))}
              </div>
              {translating && (
                <span className="flex items-center gap-2 text-blue-500 text-sm">
                  <svg className="animate-spin h-4 w-4" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  翻譯中...
                </span>
              )}
            </div>
          </div>
        )}

        {/* Results Section */}
        {results.analyses && results.analyses.length > 0 && (
          <div className="grid lg:grid-cols-3 gap-6">
            {results.analyses.map((analysis, idx) => (
              <div key={idx} className={`bg-white rounded-2xl border ${cardColors[idx].border} overflow-hidden shadow-sm`}>
                {/* Card Header */}
                <div className={`p-4 ${cardColors[idx].header}`}>
                  <h3 className={`text-lg font-bold ${cardColors[idx].headerText} flex items-center gap-2`}>
                    <span className="text-2xl">{analysis.perspectiveIcon || "📊"}</span>
                    {analysis.perspective}
                  </h3>
                </div>

                {/* 5 Whys */}
                <div className="p-4 space-y-3">
                  {analysis.whys.filter(w => w !== null).map((why, wIdx) => (
                    <div
                      key={wIdx}
                      className="bg-slate-50 rounded-lg p-3 border-l-4"
                      style={{ borderLeftColor: `hsl(${200 + wIdx * 30}, 70%, 50%)` }}
                    >
                      <div className="flex items-start gap-2">
                        <div className="flex flex-col items-center">
                          <span className="bg-slate-200 text-xs px-2 py-1 rounded font-mono text-slate-600">
                            W{why.level}
                          </span>
                          <span className={`mt-1 text-xs ${why.isVerified ? "text-emerald-500" : "text-amber-500"}`}>
                            {why.isVerified ? "✓" : "?"}
                          </span>
                        </div>
                        <div className="flex-1">
                          <p className="text-slate-700 text-sm font-medium mb-1">{why.question}</p>
                          <p className="text-slate-500 text-sm">{why.answer}</p>
                          {why.verificationNote && (
                            <p className={`text-xs mt-1 ${why.isVerified ? "text-emerald-500" : "text-amber-500"}`}>
                              {why.verificationNote}
                            </p>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}

                  {/* Root Cause */}
                  <div className="mt-4 p-4 bg-amber-50 rounded-xl border border-amber-200">
                    <h4 className="text-amber-700 font-bold text-sm mb-2">🎯 根本原因</h4>
                    <p className="text-amber-900 text-sm">{analysis.rootCause}</p>
                  </div>

                  {/* Logic Check */}
                  {analysis.logicCheck && (
                    <div className="p-4 bg-slate-50 rounded-xl border border-slate-200">
                      <h4 className="text-slate-700 font-bold text-sm mb-2 flex items-center gap-2">
                        🔄 邏輯雙向檢核
                        <span className={`text-xs px-2 py-0.5 rounded text-white ${analysis.logicCheck.isValid ? "bg-emerald-500" : "bg-red-500"}`}>
                          {analysis.logicCheck.isValid ? "通過" : "需檢視"}
                        </span>
                      </h4>
                      <div className="space-y-2 text-xs">
                        <div className="text-slate-600">
                          <span className="text-blue-600 font-medium">順向：</span> {analysis.logicCheck.forward}
                        </div>
                        <div className="text-slate-600">
                          <span className="text-violet-600 font-medium">逆向：</span> {analysis.logicCheck.backward}
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Countermeasure */}
                  {analysis.countermeasure && (
                    <div className="p-4 bg-emerald-50 rounded-xl border border-emerald-200">
                      <h4 className="text-emerald-700 font-bold text-sm mb-2">✅ 永久性對策</h4>
                      <p className="text-emerald-900 text-sm mb-3">{analysis.countermeasure.permanent}</p>
                      
                      {analysis.countermeasure.actionItems && (
                        <div className="mb-3">
                          <p className="text-emerald-700 text-xs font-medium mb-1">行動項目：</p>
                          <ul className="space-y-1">
                            {analysis.countermeasure.actionItems.map((item, i) => (
                              <li key={i} className="text-emerald-800 text-xs flex items-start gap-1">
                                <span>•</span> {item}
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                      
                      {analysis.countermeasure.avoidList && analysis.countermeasure.avoidList.length > 0 && (
                        <div className="bg-red-50 rounded-lg p-2 border border-red-200">
                          <p className="text-red-600 text-xs font-medium mb-1">⚠️ 避免暫時性做法：</p>
                          <ul className="space-y-1">
                            {analysis.countermeasure.avoidList.map((item, i) => (
                              <li key={i} className="text-red-500 text-xs flex items-start gap-1">
                                <span>✗</span> {item}
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Empty State */}
        {(!results.analyses || results.analyses.length === 0) && !loading && (
          <div className="text-center py-16 text-slate-400">
            <div className="text-6xl mb-4">🤔</div>
            <p className="mb-2 text-slate-500">輸入問題現象與工作內容</p>
            <p className="text-sm">系統將依據 5 Why 方法論進行深度根因分析</p>
          </div>
        )}

        {/* Footer */}
        <div className="mt-8 text-center text-slate-400 text-xs">
          💡 5 Why 的目的不是「湊滿五個問題」，而是穿透表面症狀直達根本原因
        </div>
      </div>
    </div>
  );
}
