"use client";

import React, { useState } from "react";

interface QAItem {
  question: string;
  answer: string;
  category: string;
  tags: string;
}

interface QALearningManagerProps {
  onQALearned?: (qaItems: QAItem[]) => void;
}

export function QALearningManager({ onQALearned }: QALearningManagerProps) {
  const [qaMode, setQaMode] = useState<"individual" | "bulk">("individual");
  const [qaItems, setQaItems] = useState<QAItem[]>([
    { question: "", answer: "", category: "", tags: "" },
  ]);
  const [bulkText, setBulkText] = useState("");
  const [loading, setLoading] = useState(false);

  // Q&A 아이템 추가
  const addQAItem = () => {
    setQaItems([
      ...qaItems,
      { question: "", answer: "", category: "", tags: "" },
    ]);
  };

  // Q&A 아이템 제거
  const removeQAItem = (index: number) => {
    if (qaItems.length > 1) {
      setQaItems(qaItems.filter((_, i) => i !== index));
    }
  };

  // Q&A 아이템 업데이트
  const updateQAItem = (index: number, field: string, value: string) => {
    const updated = [...qaItems];
    (updated[index] as any)[field] = value;
    setQaItems(updated);
  };

  // Q&A 제출
  const submitQA = async () => {
    let processItems: QAItem[] = [];

    if (qaMode === "individual") {
      processItems = qaItems.filter(
        (item) => item.question.trim() && item.answer.trim()
      );
    } else {
      // 벌크 모드 처리
      const lines = bulkText
        .split("\n")
        .map((line) => line.trim())
        .filter((line) => line);

      for (let i = 0; i < lines.length; i += 2) {
        if (i + 1 < lines.length) {
          processItems.push({
            question: lines[i],
            answer: lines[i + 1],
            category: "",
            tags: "",
          });
        }
      }
    }

    if (processItems.length === 0) {
      alert("학습할 Q&A 데이터가 없습니다.");
      return;
    }

    try {
      setLoading(true);

      const response = await fetch("/api/rag/qa", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ qaItems: processItems }),
      });

      const data = await response.json();
      if (data.success) {
        alert(`${processItems.length}개의 Q&A가 성공적으로 학습되었습니다!`);
        onQALearned?.(processItems);

        // 성공 후 폼 초기화
        if (qaMode === "individual") {
          setQaItems([{ question: "", answer: "", category: "", tags: "" }]);
        } else {
          setBulkText("");
        }
      } else {
        console.error("Q&A 학습 실패:", data.error);
        alert("Q&A 학습에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("Q&A 학습 중 오류:", error);
      alert("네트워크 오류가 발생했습니다.");
    } finally {
      setLoading(false);
    }
  };

  // 예제 데이터 로드
  const loadExampleData = () => {
    const examples = [
      {
        question: "서비스 이용 시간은 어떻게 되나요?",
        answer: "저희 서비스는 24시간 365일 이용 가능합니다.",
        category: "서비스 소개",
        tags: "이용시간, 운영시간",
      },
      {
        question: "회원가입은 어떻게 하나요?",
        answer:
          "홈페이지 우측 상단의 '회원가입' 버튼을 클릭하여 필요한 정보를 입력하시면 됩니다.",
        category: "회원 관리",
        tags: "회원가입, 가입방법",
      },
      {
        question: "비밀번호를 잊어버렸어요.",
        answer:
          "로그인 페이지에서 '비밀번호 찾기'를 클릭하여 가입하신 이메일로 재설정 링크를 받으실 수 있습니다.",
        category: "회원 관리",
        tags: "비밀번호, 찾기, 재설정",
      },
    ];
    setQaItems(examples);
  };

  return (
    <div className="space-y-6">
      {/* 모드 선택 */}
      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
          <span>💡</span>
          Q&A 학습 모드 선택
        </h3>
        <div className="flex gap-4">
          <button
            onClick={() => setQaMode("individual")}
            className={`px-4 py-2 rounded-md border ${
              qaMode === "individual"
                ? "bg-blue-600 text-white border-blue-600"
                : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
            }`}
          >
            개별 입력 모드
          </button>
          <button
            onClick={() => setQaMode("bulk")}
            className={`px-4 py-2 rounded-md border ${
              qaMode === "bulk"
                ? "bg-blue-600 text-white border-blue-600"
                : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
            }`}
          >
            벌크 입력 모드
          </button>
        </div>
      </div>

      {/* 개별 입력 모드 */}
      {qaMode === "individual" && (
        <div className="bg-white p-6 rounded-lg border">
          <div className="flex items-center justify-between mb-4">
            <h4 className="text-lg font-medium">개별 Q&A 입력</h4>
            <div className="flex gap-2">
              <button
                onClick={loadExampleData}
                className="px-3 py-1 text-sm bg-gray-600 text-white rounded hover:bg-gray-700"
              >
                예제 데이터 로드
              </button>
              <button
                onClick={addQAItem}
                className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
              >
                Q&A 추가
              </button>
            </div>
          </div>

          <div className="space-y-6">
            {qaItems.map((item, index) => (
              <div
                key={index}
                className="p-4 border border-gray-200 rounded-lg"
              >
                <div className="flex items-center justify-between mb-4">
                  <h5 className="font-medium text-gray-900">
                    Q&A #{index + 1}
                  </h5>
                  {qaItems.length > 1 && (
                    <button
                      onClick={() => removeQAItem(index)}
                      className="px-2 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700"
                    >
                      삭제
                    </button>
                  )}
                </div>

                <div className="space-y-4">
                  {/* 질문 */}
                  <div>
                    <label className="block text-sm font-medium mb-1">
                      질문 <span className="text-red-500">*</span>
                    </label>
                    <textarea
                      rows={2}
                      value={item.question}
                      onChange={(e) =>
                        updateQAItem(index, "question", e.target.value)
                      }
                      placeholder="질문을 입력하세요..."
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    />
                  </div>

                  {/* 답변 */}
                  <div>
                    <label className="block text-sm font-medium mb-1">
                      답변 <span className="text-red-500">*</span>
                    </label>
                    <textarea
                      rows={3}
                      value={item.answer}
                      onChange={(e) =>
                        updateQAItem(index, "answer", e.target.value)
                      }
                      placeholder="답변을 입력하세요..."
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    />
                  </div>

                  {/* 카테고리와 태그 */}
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-1">
                        카테고리
                      </label>
                      <input
                        type="text"
                        value={item.category}
                        onChange={(e) =>
                          updateQAItem(index, "category", e.target.value)
                        }
                        placeholder="예: 서비스 소개"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-1">
                        태그
                      </label>
                      <input
                        type="text"
                        value={item.tags}
                        onChange={(e) =>
                          updateQAItem(index, "tags", e.target.value)
                        }
                        placeholder="태그1, 태그2, 태그3"
                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6">
            <button
              onClick={submitQA}
              disabled={
                loading ||
                qaItems.every(
                  (item) => !item.question.trim() || !item.answer.trim()
                )
              }
              className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
            >
              {loading
                ? "학습 중..."
                : `${
                    qaItems.filter(
                      (item) => item.question.trim() && item.answer.trim()
                    ).length
                  }개 Q&A 학습 시작`}
            </button>
          </div>
        </div>
      )}

      {/* 벌크 입력 모드 */}
      {qaMode === "bulk" && (
        <div className="bg-white p-6 rounded-lg border">
          <h4 className="text-lg font-medium mb-4">벌크 Q&A 입력</h4>
          <p className="text-gray-600 mb-4">
            질문과 답변을 한 줄씩 번갈아 입력하세요. 빈 줄은 무시됩니다.
          </p>

          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-2">
                Q&A 텍스트 (질문-답변 순서로 한 줄씩)
              </label>
              <textarea
                rows={15}
                value={bulkText}
                onChange={(e) => setBulkText(e.target.value)}
                placeholder={
                  "서비스 이용 시간은 어떻게 되나요?\n저희 서비스는 24시간 365일 이용 가능합니다.\n회원가입은 어떻게 하나요?\n홈페이지 우측 상단의 '회원가입' 버튼을 클릭하여 필요한 정보를 입력하시면 됩니다.\n비밀번호를 잊어버렸어요.\n로그인 페이지에서 '비밀번호 찾기'를 클릭하여 가입하신 이메일로 재설정 링크를 받으실 수 있습니다."
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
              />
            </div>

            <div className="text-sm text-gray-600">
              <div className="bg-gray-50 p-3 rounded-md">
                <p className="font-medium mb-2">입력 형식:</p>
                <div className="space-y-1 text-xs">
                  <p>• 첫 번째 줄: 질문</p>
                  <p>• 두 번째 줄: 답변</p>
                  <p>• 세 번째 줄: 질문</p>
                  <p>• 네 번째 줄: 답변</p>
                  <p>• ...</p>
                </div>
              </div>
            </div>

            <button
              onClick={submitQA}
              disabled={loading || !bulkText.trim()}
              className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
            >
              {loading
                ? "학습 중..."
                : `${Math.floor(
                    bulkText.split("\n").filter((line) => line.trim()).length /
                      2
                  )}개 Q&A 학습 시작`}
            </button>
          </div>
        </div>
      )}

      {/* 사용 가이드 */}
      <div className="bg-blue-50 border border-blue-200 p-4 rounded-md">
        <h4 className="font-medium text-blue-900 mb-2">💡 Q&A 학습 가이드</h4>
        <ul className="text-blue-800 text-sm space-y-1">
          <li>
            • <strong>개별 모드</strong>: 질문과 답변을 하나씩 정확히 입력하고
            카테고리/태그 추가 가능
          </li>
          <li>
            • <strong>벌크 모드</strong>: 여러 Q&A를 한 번에 입력, 질문과 답변을
            번갈아 입력
          </li>
          <li>
            • 학습된 Q&A는 즉시 검색 가능하며, 관련 질문에 대한 답변 품질이
            향상됩니다
          </li>
          <li>• 카테고리와 태그는 검색 정확도를 높이는 데 도움이 됩니다</li>
        </ul>
      </div>
    </div>
  );
}