"use client";

import { useState, useEffect, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
import { Button } from "@/components/ui";
import { Input } from "@/components/ui";
import { RAGEngine } from "@/rag";

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

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

export function RSSManager({
  ragEngine,
  onFeedAdded,
  onFeedRemoved,
  onFeedRefreshed,
}: RSSManagerProps) {
  const [feeds, setFeeds] = useState<RSSFeedInfo[]>([]);
  const [newFeedUrl, setNewFeedUrl] = useState("");
  const [customFeedName, setCustomFeedName] = useState("");
  const [maxItems, setMaxItems] = useState("20");
  const [isLoading, setIsLoading] = useState(false);
  const [refreshingFeeds, setRefreshingFeeds] = useState<Set<string>>(
    new Set()
  );
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  // Load existing feeds on component mount
  useEffect(() => {
    loadExistingFeeds();
  }, [ragEngine]);

  const loadExistingFeeds = useCallback(() => {
    try {
      const feedNames = ragEngine.getRSSFeedNames();
      const feedInfos: RSSFeedInfo[] = feedNames.map((name) => {
        const info = ragEngine.getRSSFeedInfo(name);
        return {
          name,
          type: info.type || "generic",
          url: info.rssUrl,
          blogId: info.blogId,
        };
      });
      setFeeds(feedInfos);
    } catch (err) {
      console.error("Failed to load existing feeds:", err);
    }
  }, [ragEngine]);

  const clearMessages = () => {
    setError(null);
    setSuccess(null);
  };

  const detectFeedType = (
    url: string
  ): { type: "naver" | "generic"; blogId?: string } => {
    const blogId = RAGEngine.extractNaverBlogId(url);
    if (blogId) {
      return { type: "naver", blogId };
    }
    return { type: "generic" };
  };

  const addFeed = async () => {
    if (!newFeedUrl.trim()) {
      setError("RSS URL을 입력해주세요.");
      return;
    }

    setIsLoading(true);
    clearMessages();

    try {
      const { type, blogId } = detectFeedType(newFeedUrl);
      const feedName =
        customFeedName.trim() ||
        (type === "naver" ? `네이버블로그_${blogId}` : `RSS피드_${Date.now()}`);

      const config = {
        maxItems: parseInt(maxItems) || 20,
        includeContent: true,
      };

      let result;

      if (type === "naver" && blogId) {
        result = await ragEngine.addNaverBlogRSS(blogId, feedName, config);
      } else {
        result = await ragEngine.addRSSFeed(newFeedUrl, feedName, config);
      }

      const newFeedInfo: RSSFeedInfo = {
        name: result.feedName,
        type,
        url:
          type === "naver"
            ? `https://rss.blog.naver.com/${blogId}`
            : newFeedUrl,
        blogId: type === "naver" ? blogId : undefined,
        itemCount: result.itemCount,
        lastUpdated: new Date(),
      };

      setFeeds((prev) => [...prev, newFeedInfo]);
      setNewFeedUrl("");
      setCustomFeedName("");
      setSuccess(
        `RSS 피드가 성공적으로 추가되었습니다! ${result.itemCount}개의 문서를 학습했습니다.`
      );

      onFeedAdded?.(newFeedInfo);
    } catch (err) {
      setError(
        `RSS 피드 추가 실패: ${
          err instanceof Error ? err.message : "알 수 없는 오류"
        }`
      );
    } finally {
      setIsLoading(false);
    }
  };

  const removeFeed = async (feedName: string) => {
    try {
      const success = ragEngine.removeRSSFeed(feedName);
      if (success) {
        setFeeds((prev) => prev.filter((feed) => feed.name !== feedName));
        setSuccess(`RSS 피드 "${feedName}"가 제거되었습니다.`);
        onFeedRemoved?.(feedName);
      } else {
        setError(`RSS 피드 "${feedName}" 제거에 실패했습니다.`);
      }
    } catch (err) {
      setError(
        `RSS 피드 제거 실패: ${
          err instanceof Error ? err.message : "알 수 없는 오류"
        }`
      );
    }
  };

  const refreshFeed = async (feedName: string) => {
    setRefreshingFeeds((prev) => new Set([...prev, feedName]));
    clearMessages();

    try {
      const result = await ragEngine.refreshRSSFeed(feedName);

      setFeeds((prev) =>
        prev.map((feed) =>
          feed.name === feedName
            ? { ...feed, itemCount: result.itemCount, lastUpdated: new Date() }
            : feed
        )
      );

      setSuccess(
        `RSS 피드 "${feedName}"가 새로고침되었습니다! ${result.itemCount}개의 문서를 처리했습니다.`
      );
      onFeedRefreshed?.(feedName, result.itemCount);
    } catch (err) {
      setError(
        `RSS 피드 새로고침 실패: ${
          err instanceof Error ? err.message : "알 수 없는 오류"
        }`
      );
    } finally {
      setRefreshingFeeds((prev) => {
        const next = new Set(prev);
        next.delete(feedName);
        return next;
      });
    }
  };

  return (
    <div className="space-y-6">
      {/* Add New Feed */}
      <Card>
        <CardHeader>
          <CardTitle>RSS 피드 추가</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="rss-url" className="block text-sm font-medium mb-1">
              RSS URL 또는 네이버 블로그 ID
            </label>
            <Input
              type="text"
              placeholder="https://rss.blog.naver.com/blogid 또는 blogid"
              value={newFeedUrl}
              onChange={(e) => setNewFeedUrl(e.target.value)}
              className="w-full"
            />
            <p className="text-xs text-gray-500 mt-1">
              네이버 블로그: https://rss.blog.naver.com/블로그ID 또는 블로그ID만
              입력
            </p>
          </div>

          <div>
            <label
              htmlFor="feed-name"
              className="block text-sm font-medium mb-1"
            >
              피드 이름 (선택사항)
            </label>
            <Input
              type="text"
              placeholder="커스텀 피드 이름"
              value={customFeedName}
              onChange={(e) => setCustomFeedName(e.target.value)}
              className="w-full"
            />
          </div>

          <div>
            <label
              htmlFor="max-items"
              className="block text-sm font-medium mb-1"
            >
              최대 문서 수
            </label>
            <input
              type="number"
              min="1"
              max="100"
              value={maxItems}
              onChange={(e) => setMaxItems(e.target.value)}
              className="w-full h-10 px-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <Button onClick={addFeed} disabled={isLoading} className="w-full">
            {isLoading ? "추가 중..." : "RSS 피드 추가"}
          </Button>
        </CardContent>
      </Card>

      {/* Existing Feeds */}
      <Card>
        <CardHeader>
          <CardTitle>등록된 RSS 피드 ({feeds.length}개)</CardTitle>
        </CardHeader>
        <CardContent>
          {feeds.length === 0 ? (
            <p className="text-gray-500 text-center py-4">
              등록된 RSS 피드가 없습니다.
            </p>
          ) : (
            <div className="space-y-3">
              {feeds.map((feed) => (
                <div
                  key={feed.name}
                  className="flex items-center justify-between p-3 border rounded-lg"
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-medium">{feed.name}</h4>
                      <span
                        className={`px-2 py-1 text-xs rounded ${
                          feed.type === "naver"
                            ? "bg-blue-100 text-blue-800"
                            : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {feed.type === "naver" ? "네이버" : "RSS"}
                      </span>
                    </div>
                    <div className="text-sm text-gray-600 space-y-1">
                      {feed.url && (
                        <div>
                          <a
                            href={feed.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="hover:underline"
                          >
                            {feed.blogId
                              ? `네이버 블로그: ${feed.blogId}`
                              : feed.url}
                          </a>
                        </div>
                      )}
                      {feed.itemCount !== undefined && (
                        <p>문서 수: {feed.itemCount}개</p>
                      )}
                      {feed.lastUpdated && (
                        <p>
                          마지막 업데이트: {feed.lastUpdated.toLocaleString()}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => refreshFeed(feed.name)}
                      disabled={refreshingFeeds.has(feed.name)}
                    >
                      {refreshingFeeds.has(feed.name)
                        ? "새로고침 중..."
                        : "새로고침"}
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => removeFeed(feed.name)}
                    >
                      제거
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Status Messages */}
      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-800">{error}</p>
        </div>
      )}

      {success && (
        <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
          <p className="text-green-800">{success}</p>
        </div>
      )}
    </div>
  );
}