"use client";

import React, { useState } from "react";
import { RAGManager } from "./rag-manager";
import { DocumentUploader } from "./document-uploader";
import { RSSManager } from "./rss-manager";
import { QALearningManager } from "./qa-learning-manager";
import { AgentConfigManager } from "./agent-config-manager";
import { ChunkManager } from "../../../../components/admin/chunk-manager";

interface RAGAdminIntegratedProps {
  title?: string;
  subtitle?: string;
  showNavigation?: boolean;
  defaultTab?: string;
  className?: string;
}

export function RAGAdminIntegrated({
  title = "RAG 관리 시스템",
  subtitle = "문서 업로드, 검색 테스트, 청크 관리",
  showNavigation = true,
  defaultTab = "search",
  className = "",
}: RAGAdminIntegratedProps) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const tabs = [
    { id: "search", label: "검색 테스트" },
    { id: "upload", label: "문서 업로드" },
    { id: "rss", label: "RSS 관리" },
    { id: "qa", label: "Q&A 학습" },
    { id: "chunks", label: "청크 관리" },
    { id: "agent", label: "에이전트 설정" },
  ];

  return (
    <div className={`min-h-screen bg-gray-50 ${className}`}>
      {showNavigation && (
        <>
          <header className="bg-white shadow-sm border-b">
            <div className="max-w-7xl mx-auto px-4 py-6">
              <div className="flex justify-between items-center">
                <div>
                  <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
                  <p className="mt-1 text-sm text-gray-600">{subtitle}</p>
                </div>
              </div>
            </div>
          </header>

          <nav className="bg-white border-b">
            <div className="max-w-7xl mx-auto px-4">
              <div className="flex space-x-8">
                {tabs.map((tab) => (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`py-4 px-1 border-b-2 font-medium text-sm ${
                      activeTab === tab.id
                        ? "border-blue-500 text-blue-600"
                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
                    }`}
                  >
                    {tab.label}
                  </button>
                ))}
              </div>
            </div>
          </nav>
        </>
      )}

      <main className="max-w-7xl mx-auto py-6 px-4">
        {activeTab === "search" && (
          <div>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                RAG 검색 테스트
              </h2>
              <p className="text-gray-600">
                업로드된 문서들을 대상으로 검색을 테스트해보세요.
              </p>
            </div>
            <RAGManager ragEngine={null} />
          </div>
        )}

        {activeTab === "upload" && (
          <div>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                문서 업로더
              </h2>
              <p className="text-gray-600">
                PDF, 텍스트 파일 등을 업로드하여 RAG 시스템에 추가합니다.
              </p>
            </div>
            <DocumentUploader />
          </div>
        )}

        {activeTab === "rss" && (
          <div>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                RSS 관리 시스템
              </h2>
              <p className="text-gray-600">
                네이버 블로그 RSS 피드를 수동으로 학습하거나, 자동화 설정을 통해
                매일 새벽 1시에 자동으로 최신 내용을 학습하도록 관리합니다.
              </p>
            </div>
            <RSSManager />
          </div>
        )}

        {activeTab === "qa" && (
          <div>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                Q&A 학습 관리
              </h2>
              <p className="text-gray-600">
                관리자가 직접 질문과 답변을 입력하여 RAG 시스템에 학습시킵니다.
                개별 입력 모드와 벌크 입력 모드를 지원합니다.
              </p>
            </div>
            <QALearningManager />
          </div>
        )}

        {activeTab === "chunks" && (
          <div>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                청크 관리
              </h2>
              <p className="text-gray-600">
                현재 저장된 청크들을 확인하고 관리합니다.
              </p>
            </div>
            <ChunkManager />
          </div>
        )}

        {activeTab === "agent" && (
          <div>
            <div className="mb-6">
              <h2 className="text-2xl font-bold text-gray-900 mb-2">
                에이전트 설정
              </h2>
              <p className="text-gray-600">
                채팅 에이전트의 이름, 성격, 인사말 등을 설정합니다.
              </p>
            </div>
            <AgentConfigManager />
          </div>
        )}
      </main>
    </div>
  );
}