"use client";

import React, { useState } from "react";
import { Card, CardHeader, CardContent } from "../ui/Card";
import { Button } from "../ui/Button";
import { RAGAnswerGenerator } from "./rag-answer-generator";
import { DocumentUploader } from "./document-uploader";
import { ChunkManager } from "./chunk-manager";
import { ConfigManager } from "./config-manager";

type TabType = "qa" | "upload" | "chunks" | "config";

export function RAGAdminDashboard() {
  const [activeTab, setActiveTab] = useState<TabType>("qa");

  const tabs = [
    { id: "qa" as TabType, label: "Q&A 테스트", icon: "🤖" },
    { id: "upload" as TabType, label: "문서 업로드", icon: "📁" },
    { id: "chunks" as TabType, label: "청크 관리", icon: "📄" },
    { id: "config" as TabType, label: "AI 설정", icon: "⚙️" },
  ];

  const renderContent = () => {
    switch (activeTab) {
      case "qa":
        return <RAGAnswerGenerator />;
      case "upload":
        return <DocumentUploader />;
      case "chunks":
        return <ChunkManager />;
      case "config":
        return <ConfigManager />;
      default:
        return <RAGAnswerGenerator />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 p-4">
      <div className="max-w-7xl mx-auto">
        {/* 헤더 */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            🚀 RAG 관리자 대시보드
          </h1>
          <p className="text-gray-600">
            AI 챗봇의 지식 베이스와 설정을 관리할 수 있습니다.
          </p>
        </div>

        {/* 탭 네비게이션 */}
        <Card className="mb-6">
          <CardContent className="p-4">
            <div className="flex flex-wrap gap-2">
              {tabs.map((tab) => (
                <Button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  variant={activeTab === tab.id ? "primary" : "outline"}
                  size="sm"
                  className="flex items-center gap-2"
                >
                  <span>{tab.icon}</span>
                  {tab.label}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 현재 탭 내용 */}
        <div className="space-y-6">{renderContent()}</div>

        {/* 푸터 정보 */}
        <div className="mt-12 text-center text-sm text-gray-500">
          <p>AgentC RAG System - AI 기반 지식 관리 플랫폼</p>
        </div>
      </div>
    </div>
  );
}