"use client";

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

interface AgentConfig {
  name: string;
  description: string;
  greeting: string;
  personality: string;
}

interface AgentConfigManagerProps {
  onConfigSaved?: (config: AgentConfig) => void;
}

export function AgentConfigManager({ onConfigSaved }: AgentConfigManagerProps) {
  const [config, setConfig] = useState<AgentConfig>({
    name: "",
    description: "",
    greeting: "",
    personality: "",
  });
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState("");

  // 현재 설정 로드
  const loadConfig = async () => {
    try {
      setLoading(true);
      const response = await fetch("/api/rag/agent-config");
      const data = await response.json();

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

  // 설정 저장
  const saveConfig = async () => {
    if (!config.name.trim()) {
      setMessage("에이전트 이름은 필수입니다.");
      return;
    }

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

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

      const data = await response.json();
      if (data.success) {
        setConfig(data.config);
        setMessage("설정이 성공적으로 저장되었습니다!");
        onConfigSaved?.(data.config);

        // 3초 후 메시지 제거
        setTimeout(() => setMessage(""), 3000);
      } else {
        setMessage("설정 저장에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("설정 저장 중 오류:", error);
      setMessage("네트워크 오류가 발생했습니다.");
    } finally {
      setSaving(false);
    }
  };

  // 설정 초기화
  const resetConfig = async () => {
    if (!confirm("설정을 기본값으로 초기화하시겠습니까?")) {
      return;
    }

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

      const response = await fetch("/api/rag/agent-config", {
        method: "DELETE",
      });

      const data = await response.json();
      if (data.success) {
        setConfig(data.config);
        setMessage("설정이 기본값으로 초기화되었습니다!");
        onConfigSaved?.(data.config);

        // 3초 후 메시지 제거
        setTimeout(() => setMessage(""), 3000);
      } else {
        setMessage("설정 초기화에 실패했습니다: " + data.error);
      }
    } catch (error) {
      console.error("설정 초기화 중 오류:", error);
      setMessage("네트워크 오류가 발생했습니다.");
    } finally {
      setSaving(false);
    }
  };

  // 컴포넌트 마운트 시 설정 로드
  useEffect(() => {
    loadConfig();
  }, []);

  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-white p-6 rounded-lg shadow">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-bold">채팅 에이전트 설정</h3>
          <div className="flex gap-2">
            <button
              onClick={loadConfig}
              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={resetConfig}
              disabled={saving}
              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50"
            >
              초기화
            </button>
          </div>
        </div>

        <div className="space-y-4">
          {/* 에이전트 이름 */}
          <div>
            <label className="block text-sm font-medium mb-2">
              에이전트 이름 <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={config.name}
              onChange={(e) => setConfig({ ...config, name: e.target.value })}
              placeholder="예: RAG 어시스턴트"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <p className="text-xs text-gray-500 mt-1">
              채팅 화면에 표시될 에이전트의 이름입니다.
            </p>
          </div>

          {/* 에이전트 설명 */}
          <div>
            <label className="block text-sm font-medium mb-2">설명</label>
            <input
              type="text"
              value={config.description}
              onChange={(e) =>
                setConfig({ ...config, description: e.target.value })
              }
              placeholder="예: 문서 기반 질문 답변 AI 어시스턴트"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <p className="text-xs text-gray-500 mt-1">
              에이전트에 대한 간단한 설명입니다.
            </p>
          </div>

          {/* 인사말 */}
          <div>
            <label className="block text-sm font-medium mb-2">인사말</label>
            <textarea
              rows={3}
              value={config.greeting}
              onChange={(e) =>
                setConfig({ ...config, greeting: 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"
            />
            <p className="text-xs text-gray-500 mt-1">
              채팅 시작 시 표시될 인사말입니다.
            </p>
          </div>

          {/* 성격/톤 */}
          <div>
            <label className="block text-sm font-medium mb-2">성격/톤</label>
            <input
              type="text"
              value={config.personality}
              onChange={(e) =>
                setConfig({ ...config, personality: 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"
            />
            <p className="text-xs text-gray-500 mt-1">
              에이전트의 대화 스타일을 설명합니다.
            </p>
          </div>

          {/* 저장 버튼 */}
          <div className="pt-4">
            <button
              onClick={saveConfig}
              disabled={saving || !config.name.trim()}
              className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {saving ? "저장 중..." : "설정 저장"}
            </button>
          </div>
        </div>
      </div>

      {/* 현재 설정 미리보기 */}
      {config.name && (
        <div className="bg-gray-50 p-6 rounded-lg">
          <h4 className="text-lg font-semibold mb-4">설정 미리보기</h4>
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
              <span className="font-medium">{config.name}</span>
              {config.description && (
                <span className="text-gray-600">- {config.description}</span>
              )}
            </div>
            {config.greeting && (
              <div className="bg-white p-3 rounded border-l-4 border-blue-500">
                <p className="text-gray-800">{config.greeting}</p>
              </div>
            )}
            {config.personality && (
              <div className="text-sm text-gray-600">
                <strong>성격:</strong> {config.personality}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}