"use client";

import React, { useState, useEffect } from "react";

export interface RSSFeedInfo {
  name: string;
  type: "naver" | "generic";
  url?: string;
  blogId?: string;
  itemCount?: number;
  lastUpdated?: Date;
}

export interface RSSManagerProps {
  ragEngine?: any;
  onFeedAdded?: (feedInfo: RSSFeedInfo) => void;
  onFeedRemoved?: (feedName: string) => void;
  onFeedRefreshed?: (feedName: string, itemCount: number) => void;
}

// RSS 통합 관리 컴포넌트
export function RSSManager({
  ragEngine,
  onFeedAdded,
  onFeedRemoved,
  onFeedRefreshed,
}: RSSManagerProps) {
  // 탭 상태 관리
  const [activeRSSTab, setActiveRSSTab] = useState("manual");

  const rssTabs = [
    { id: "manual", label: "수동 학습", icon: "📖" },
    { id: "auto", label: "자동화 관리", icon: "🤖" },
  ];

  return (
    <div className="space-y-6">
      {/* RSS 서브 탭 */}
      <div className="bg-white rounded-lg shadow">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {rssTabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveRSSTab(tab.id)}
                className={`py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${
                  activeRSSTab === tab.id
                    ? "border-blue-500 text-blue-600"
                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                }`}
              >
                <span>{tab.icon}</span>
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {activeRSSTab === "manual" && <ManualRSSManager />}
          {activeRSSTab === "auto" && <AutoRSSManager />}
        </div>
      </div>
    </div>
  );
}

// 수동 RSS 학습 컴포넌트
function ManualRSSManager() {
  const [rssUrl, setRssUrl] = useState("");
  const [rssFeeds, setRssFeeds] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [processing, setProcessing] = useState(false);
  const [savedFeeds, setSavedFeeds] = useState<string[]>([]);

  // 저장된 RSS 피드 목록 로드
  useEffect(() => {
    const saved = localStorage.getItem("naverRssFeeds");
    if (saved) {
      setSavedFeeds(JSON.parse(saved));
    }
  }, []);

  // RSS 피드 가져오기
  const fetchRSSFeed = async () => {
    if (!rssUrl.trim()) return;

    try {
      setLoading(true);
      setRssFeeds([]);

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

      const data = await response.json();
      if (data.success) {
        setRssFeeds(data.items || []);
      } else {
        console.error("RSS 피드 가져오기 실패:", data.error);
        alert("RSS 피드를 가져오는데 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("RSS 피드 가져오기 중 오류:", error);
      alert("네트워크 오류가 발생했습니다.");
    } finally {
      setLoading(false);
    }
  };

  // RSS 피드를 RAG 시스템에 학습
  const processRSSFeed = async (items: any[]) => {
    if (items.length === 0) return;

    try {
      setProcessing(true);

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

      const data = await response.json();
      if (data.success) {
        alert(
          `${data.processedCount}개의 RSS 아이템이 성공적으로 학습되었습니다.`
        );

        // RSS URL을 저장된 목록에 추가
        if (!savedFeeds.includes(rssUrl)) {
          const newSavedFeeds = [...savedFeeds, rssUrl];
          setSavedFeeds(newSavedFeeds);
          localStorage.setItem("naverRssFeeds", JSON.stringify(newSavedFeeds));
        }
      } else {
        console.error("RSS 학습 실패:", data.error);
        alert("RSS 학습에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("RSS 학습 중 오류:", error);
      alert("네트워크 오류가 발생했습니다.");
    } finally {
      setProcessing(false);
    }
  };

  // 저장된 RSS 피드 삭제
  const removeSavedFeed = (feedUrl: string) => {
    const newSavedFeeds = savedFeeds.filter((url) => url !== feedUrl);
    setSavedFeeds(newSavedFeeds);
    localStorage.setItem("naverRssFeeds", JSON.stringify(newSavedFeeds));
  };

  return (
    <div className="space-y-6">
      {/* RSS URL 입력 */}
      <div className="bg-white p-6 rounded-lg shadow">
        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
          <span>📖</span>
          RSS 피드 수동 학습
        </h3>
        <p className="text-gray-600 mb-4">
          네이버 블로그 RSS 피드를 직접 가져와서 RAG 시스템에 즉시 학습시킵니다.
        </p>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">RSS URL</label>
            <div className="flex gap-2">
              <input
                type="url"
                value={rssUrl}
                onChange={(e) => setRssUrl(e.target.value)}
                placeholder="https://rss.blog.naver.com/{블로그아이디}"
                className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              <button
                onClick={fetchRSSFeed}
                disabled={loading || !rssUrl.trim()}
                className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loading ? "가져오는 중..." : "RSS 가져오기"}
              </button>
            </div>
          </div>

          {/* 네이버 블로그 RSS 예제 */}
          <div className="text-sm text-gray-600">
            <p className="font-medium mb-2">네이버 블로그 RSS 예제:</p>
            <div className="space-y-1">
              <div className="text-gray-500 mb-2">
                https://rss.blog.naver.com/{"{블로그아이디}"}
              </div>
              <div className="text-xs text-gray-400">
                예: https://rss.blog.naver.com/myblog123
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 저장된 RSS 피드 목록 */}
      {savedFeeds.length > 0 && (
        <div className="bg-white p-6 rounded-lg border">
          <h4 className="text-lg font-medium mb-4">저장된 RSS 피드</h4>
          <div className="space-y-2">
            {savedFeeds.map((feedUrl, index) => (
              <div
                key={index}
                className="flex items-center justify-between p-3 bg-gray-50 rounded-md"
              >
                <span className="text-sm text-gray-700 truncate flex-1">
                  {feedUrl}
                </span>
                <div className="flex gap-2 ml-4">
                  <button
                    onClick={() => {
                      setRssUrl(feedUrl);
                      fetchRSSFeed();
                    }}
                    className="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
                  >
                    다시 가져오기
                  </button>
                  <button
                    onClick={() => removeSavedFeed(feedUrl)}
                    className="px-3 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700"
                  >
                    삭제
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* RSS 피드 결과 */}
      {rssFeeds.length > 0 && (
        <div className="bg-white p-6 rounded-lg border">
          <div className="flex items-center justify-between mb-4">
            <h4 className="text-lg font-medium">
              RSS 피드 결과 ({rssFeeds.length}개 아이템)
            </h4>
            <button
              onClick={() => processRSSFeed(rssFeeds)}
              disabled={processing}
              className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {processing ? "학습 중..." : "RAG 시스템에 학습"}
            </button>
          </div>

          <div className="space-y-4 max-h-96 overflow-y-auto">
            {rssFeeds.map((item, index) => (
              <div
                key={index}
                className="p-4 border border-gray-200 rounded-md"
              >
                <h5 className="font-medium text-gray-900 mb-2">{item.title}</h5>
                <p className="text-sm text-gray-600 mb-2">{item.description}</p>
                <div className="flex items-center gap-4 text-xs text-gray-500">
                  <span>
                    발행일: {new Date(item.pubDate).toLocaleString("ko-KR")}
                  </span>
                  <a
                    href={item.link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:text-blue-800 underline"
                  >
                    원문 보기
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// 자동 RSS 관리 컴포넌트
function AutoRSSManager() {
  const [registeredUrls, setRegisteredUrls] = useState<string[]>([]);
  const [newUrl, setNewUrl] = useState("");
  const [loading, setLoading] = useState(false);
  const [updating, setUpdating] = useState(false);
  const [message, setMessage] = useState("");
  const [updateResults, setUpdateResults] = useState<any[]>([]);

  // 등록된 RSS URL 목록 로드
  const loadRegisteredUrls = async () => {
    try {
      setLoading(true);
      const response = await fetch("/api/rag/rss/auto-update");
      const data = await response.json();

      if (data.success) {
        setRegisteredUrls(data.urls);
      } else {
        console.error("RSS URL 목록 로드 실패:", data.error);
        setMessage("RSS URL 목록을 불러오는데 실패했습니다.");
      }
    } catch (error) {
      console.error("RSS URL 목록 로드 중 오류:", error);
      setMessage("네트워크 오류가 발생했습니다.");
    } finally {
      setLoading(false);
    }
  };

  // RSS URL 등록
  const registerUrl = async () => {
    if (!newUrl.trim()) {
      setMessage("RSS URL을 입력해주세요.");
      return;
    }

    try {
      setLoading(true);
      setMessage("");

      const response = await fetch("/api/rag/rss/auto-update", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "register", url: newUrl.trim() }),
      });

      const data = await response.json();
      if (data.success) {
        setRegisteredUrls(data.urls);
        setNewUrl("");
        setMessage("RSS URL이 자동 업데이트 목록에 등록되었습니다!");
        setTimeout(() => setMessage(""), 3000);
      } else {
        setMessage("RSS URL 등록에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("RSS URL 등록 중 오류:", error);
      setMessage("네트워크 오류가 발생했습니다.");
    } finally {
      setLoading(false);
    }
  };

  // RSS URL 등록 해제
  const unregisterUrl = async (url: string) => {
    if (
      !confirm(`이 RSS URL을 자동 업데이트 목록에서 제거하시겠습니까?\n${url}`)
    ) {
      return;
    }

    try {
      setLoading(true);
      setMessage("");

      const response = await fetch("/api/rag/rss/auto-update", {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ url }),
      });

      const data = await response.json();
      if (data.success) {
        setRegisteredUrls(data.urls);
        setMessage("RSS URL이 자동 업데이트 목록에서 제거되었습니다!");
        setTimeout(() => setMessage(""), 3000);
      } else {
        setMessage("RSS URL 제거에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("RSS URL 제거 중 오류:", error);
      setMessage("네트워크 오류가 발생했습니다.");
    } finally {
      setLoading(false);
    }
  };

  // 수동 업데이트 실행
  const runManualUpdate = async () => {
    if (registeredUrls.length === 0) {
      setMessage("등록된 RSS URL이 없습니다.");
      return;
    }

    if (!confirm("등록된 모든 RSS를 지금 업데이트하시겠습니까?")) {
      return;
    }

    try {
      setUpdating(true);
      setMessage("");
      setUpdateResults([]);

      const response = await fetch("/api/rag/rss/auto-update", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "update-all" }),
      });

      const data = await response.json();
      if (data.success) {
        setUpdateResults(data.results);
        setMessage(
          `RSS 업데이트 완료: ${data.summary.success}/${data.summary.total} 성공`
        );
      } else {
        setMessage("RSS 업데이트에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("RSS 업데이트 중 오류:", error);
      setMessage("네트워크 오류가 발생했습니다.");
    } finally {
      setUpdating(false);
    }
  };

  // 컴포넌트 마운트 시 등록된 URL 목록 로드
  useEffect(() => {
    loadRegisteredUrls();
  }, []);

  return (
    <div className="space-y-6">
      {/* 메시지 표시 */}
      {message && (
        <div
          className={`p-4 rounded-md ${
            message.includes("성공") || message.includes("완료")
              ? "bg-green-50 border border-green-200 text-green-800"
              : "bg-red-50 border border-red-200 text-red-800"
          }`}
        >
          {message}
        </div>
      )}

      {/* 자동 업데이트 설명 */}
      <div className="bg-blue-50 border border-blue-200 p-4 rounded-md">
        <h4 className="font-medium text-blue-900 mb-2">
          📅 자동 업데이트 스케줄
        </h4>
        <p className="text-blue-800 text-sm">
          등록된 RSS 피드는 매일 새벽 1시에 자동으로 최신 내용을 학습합니다.
          <br />
          수동으로 즉시 업데이트하려면 아래 "지금 업데이트" 버튼을 사용하세요.
        </p>
      </div>

      {/* RSS URL 등록 */}
      <div className="bg-gray-50 p-6 rounded-lg border">
        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
          <span>🤖</span>
          RSS 자동화 관리
        </h3>
        <div className="flex gap-2">
          <input
            type="url"
            value={newUrl}
            onChange={(e) => setNewUrl(e.target.value)}
            placeholder="https://rss.blog.naver.com/{블로그아이디}"
            className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
          <button
            onClick={registerUrl}
            disabled={loading}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
          >
            {loading ? "등록 중..." : "등록"}
          </button>
        </div>
        <p className="text-xs text-gray-500 mt-2">
          네이버 블로그 RSS URL을 등록하면 매일 자동으로 최신 포스트를
          학습합니다.
        </p>
      </div>

      {/* 등록된 RSS URL 목록 */}
      <div className="bg-white p-6 rounded-lg border">
        <div className="flex items-center justify-between mb-4">
          <h4 className="text-lg font-medium">등록된 RSS 목록</h4>
          <div className="flex gap-2">
            <button
              onClick={loadRegisteredUrls}
              disabled={loading}
              className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 disabled:opacity-50"
            >
              {loading ? "로딩 중..." : "새로고침"}
            </button>
            <button
              onClick={runManualUpdate}
              disabled={updating || registeredUrls.length === 0}
              className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
            >
              {updating ? "업데이트 중..." : "지금 업데이트"}
            </button>
          </div>
        </div>

        {registeredUrls.length === 0 ? (
          <div className="text-center py-8 text-gray-500">
            등록된 RSS URL이 없습니다.
          </div>
        ) : (
          <div className="space-y-3">
            {registeredUrls.map((url, index) => (
              <div
                key={index}
                className="flex items-center justify-between p-3 border border-gray-200 rounded-md"
              >
                <div className="flex-1">
                  <div className="font-medium">{url}</div>
                  <div className="text-sm text-gray-500">
                    매일 새벽 1시 자동 업데이트
                  </div>
                </div>
                <button
                  onClick={() => unregisterUrl(url)}
                  disabled={loading}
                  className="px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 text-sm"
                >
                  제거
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 업데이트 결과 */}
      {updateResults.length > 0 && (
        <div className="bg-white p-6 rounded-lg border">
          <h4 className="text-lg font-medium mb-4">최근 업데이트 결과</h4>
          <div className="space-y-3">
            {updateResults.map((result, index) => (
              <div
                key={index}
                className={`p-3 rounded-md border ${
                  result.success
                    ? "bg-green-50 border-green-200"
                    : "bg-red-50 border-red-200"
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="font-medium">{result.url}</div>
                  <div
                    className={`text-sm ${
                      result.success ? "text-green-600" : "text-red-600"
                    }`}
                  >
                    {result.success ? "✅ 성공" : "❌ 실패"}
                  </div>
                </div>
                <div className="text-sm text-gray-600 mt-1">
                  {result.success ? result.message : result.error}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}