/**
 * VikingPanel - ZCLAW Semantic Memory UI
 *
 * Provides interface for semantic search and knowledge base management.
 * Uses native Rust SqliteStorage with TF-IDF semantic search.
 */
import { useState, useEffect } from 'react';
import {
  Search,
  RefreshCw,
  AlertCircle,
  CheckCircle,
  FileText,
  Database,
  Sparkles,
} from 'lucide-react';
import {
  getVikingStatus,
  findVikingResources,
  listVikingResources,
  readVikingResource,
  storeWithSummaries,
} from '../lib/viking-client';
import type { VikingStatus, VikingFindResult } from '../lib/viking-client';

export function VikingPanel() {
  const [status, setStatus] = useState<VikingStatus | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<VikingFindResult[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [memoryCount, setMemoryCount] = useState<number | null>(null);
  const [expandedUri, setExpandedUri] = useState<string | null>(null);
  const [expandedContent, setExpandedContent] = useState<string | null>(null);
  const [isLoadingL2, setIsLoadingL2] = useState(false);
  const [isGeneratingSummary, setIsGeneratingSummary] = useState(false);
  const [summaryUri, setSummaryUri] = useState('');
  const [summaryContent, setSummaryContent] = useState('');

  const loadStatus = async () => {
    setIsLoading(true);
    setMessage(null);
    try {
      const vikingStatus = await getVikingStatus();
      setStatus(vikingStatus);

      if (vikingStatus.available) {
        // Load memory count (use empty path — viking_ls('') returns all, viking_ls('/') returns 0)
        try {
          const resources = await listVikingResources('');
          setMemoryCount(resources.length);
        } catch (e) {
          console.warn('[VikingPanel] Failed to list resources:', e);
          setMemoryCount(null);
        }
      }
    } catch (error) {
      console.error('Failed to load Viking status:', error);
      setStatus({ available: false, error: String(error) });
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    loadStatus();
  }, []);

  const handleSearch = async () => {
    if (!searchQuery.trim()) return;

    setIsSearching(true);
    setMessage(null);
    try {
      const results = await findVikingResources(searchQuery, undefined, 10);
      setSearchResults(results);
      if (results.length === 0) {
        setMessage({ type: 'error', text: '未找到匹配的资源' });
      }
    } catch (error) {
      setMessage({
        type: 'error',
        text: `搜索失败: ${error instanceof Error ? error.message : '未知错误'}`,
      });
    } finally {
      setIsSearching(false);
    }
  };

  const handleExpandL2 = async (uri: string) => {
    if (expandedUri === uri) {
      setExpandedUri(null);
      setExpandedContent(null);
      return;
    }

    setExpandedUri(uri);
    setIsLoadingL2(true);
    try {
      const fullContent = await readVikingResource(uri, 'L2');
      setExpandedContent(fullContent);
    } catch (e) {
      console.warn('[VikingPanel] Failed to read resource:', e);
      setExpandedContent(null);
    } finally {
      setIsLoadingL2(false);
    }
  };

  return (
    <div className="max-w-4xl">
      {/* Header */}
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-xl font-bold text-gray-900 dark:text-white">语义记忆</h1>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            ZCLAW 语义记忆搜索引擎
          </p>
        </div>
        <div className="flex gap-2 items-center">
          {status?.available && (
            <span className="text-xs flex items-center gap-1 text-green-600">
              <CheckCircle className="w-3 h-3" /> 可用
            </span>
          )}
          <button
            onClick={loadStatus}
            disabled={isLoading}
            className="text-xs text-white bg-orange-500 hover:bg-orange-600 px-3 py-1.5 rounded-lg flex items-center gap-1 transition-colors disabled:opacity-50"
          >
            <RefreshCw className={`w-3 h-3 ${isLoading ? 'animate-spin' : ''}`} /> 刷新
          </button>
        </div>
      </div>

      {/* Status Banner */}
      {!status?.available && (
        <div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
          <div className="flex items-start gap-2">
            <AlertCircle className="w-4 h-4 text-amber-500 mt-0.5" />
            <div className="text-xs text-amber-700 dark:text-amber-300">
              <p className="font-medium">语义记忆存储不可用</p>
              <p className="mt-1">
                本地 SQLite 存储初始化失败。请检查数据目录权限后重启应用。
              </p>
              {status?.error && (
                <p className="mt-1 text-amber-600 dark:text-amber-400 font-mono text-xs">
                  {status.error}
                </p>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Message */}
      {message && (
        <div
          className={`mb-4 p-3 rounded-lg flex items-center gap-2 ${
            message.type === 'success'
              ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300'
              : 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300'
          }`}
        >
          {message.type === 'success' ? (
            <CheckCircle className="w-4 h-4" />
          ) : (
            <AlertCircle className="w-4 h-4" />
          )}
          {message.text}
        </div>
      )}

      {/* Storage Info */}
      {status?.available && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 mb-6 shadow-sm">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center">
              <Database className="w-4 h-4 text-white" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-900 dark:text-white">
                本地存储
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400">
                {status.version || 'Native'} · {status.dataDir || '默认路径'}
              </div>
            </div>
          </div>
          <div className="flex gap-4 text-xs">
            <div className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300">
              <CheckCircle className="w-3.5 h-3.5 text-green-500" />
              <span>SQLite + FTS5</span>
            </div>
            <div className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300">
              <CheckCircle className="w-3.5 h-3.5 text-green-500" />
              <span>TF-IDF 语义评分</span>
            </div>
            {memoryCount !== null && (
              <div className="flex items-center gap-1.5 text-gray-600 dark:text-gray-300">
                <CheckCircle className="w-3.5 h-3.5 text-green-500" />
                <span>{memoryCount} 条记忆</span>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Search Box */}
      {status?.available && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 mb-6 shadow-sm">
          <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-3">语义搜索</h3>
          <div className="flex gap-2">
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              placeholder="输入自然语言查询..."
              className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <button
              onClick={handleSearch}
              disabled={isSearching || !searchQuery.trim()}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2 text-sm"
            >
              {isSearching ? (
                <RefreshCw className="w-4 h-4 animate-spin" />
              ) : (
                <Search className="w-4 h-4" />
              )}
              搜索
            </button>
          </div>
        </div>
      )}

      {/* Search Results */}
      {searchResults.length > 0 && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-700">
          <div className="p-3 border-b border-gray-200 dark:border-gray-700">
            <span className="text-xs text-gray-500">
              找到 {searchResults.length} 个结果
            </span>
          </div>
          {searchResults.map((result, index) => (
            <div key={`${result.uri}-${index}`} className="p-4">
              <div className="flex items-start gap-3">
                <div className="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                  <FileText className="w-4 h-4 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-gray-900 dark:text-white truncate">
                      {result.uri}
                    </span>
                    <span className={`text-xs px-2 py-0.5 rounded ${
                      result.level === 'L1'
                        ? 'text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-400'
                        : 'text-gray-400 bg-gray-100 dark:bg-gray-700'
                    }`}>
                      {result.level}
                    </span>
                    <span className="text-xs text-blue-600 dark:text-blue-400">
                      {Math.round(result.score * 100)}%
                    </span>
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-300 mt-2 line-clamp-3">
                    {result.content}
                  </p>
                  {result.level === 'L1' && (
                    <button
                      onClick={() => handleExpandL2(result.uri)}
                      className="mt-1.5 text-xs text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
                    >
                      {expandedUri === result.uri ? '收起全文' : '展开全文'}
                    </button>
                  )}
                  {expandedUri === result.uri && (
                    <div className="mt-2 p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
                      {isLoadingL2 ? (
                        <div className="flex items-center gap-2 text-xs text-gray-400">
                          <RefreshCw className="w-3 h-3 animate-spin" /> 加载中...
                        </div>
                      ) : expandedContent ? (
                        <p className="text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap font-mono">
                          {expandedContent}
                        </p>
                      ) : (
                        <p className="text-xs text-gray-400">加载失败</p>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Summary Generation */}
      {status?.available && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 mb-6 shadow-sm">
          <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-3">智能摘要</h3>
          <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
            存储资源并自动通过 LLM 生成 L0/L1 多级摘要（需配置摘要驱动）
          </p>
          <div className="space-y-2">
            <input
              type="text"
              value={summaryUri}
              onChange={(e) => setSummaryUri(e.target.value)}
              placeholder="资源 URI (如: notes/project-plan)"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <textarea
              value={summaryContent}
              onChange={(e) => setSummaryContent(e.target.value)}
              placeholder="资源内容..."
              rows={3}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
            />
            <button
              onClick={async () => {
                if (!summaryUri.trim() || !summaryContent.trim()) return;
                setIsGeneratingSummary(true);
                setMessage(null);
                try {
                  await storeWithSummaries(summaryUri, summaryContent);
                  setMessage({ type: 'success', text: `摘要生成完成: ${summaryUri}` });
                  setSummaryUri('');
                  setSummaryContent('');
                } catch (error) {
                  setMessage({
                    type: 'error',
                    text: `摘要生成失败: ${error instanceof Error ? error.message : '未知错误'}`,
                  });
                } finally {
                  setIsGeneratingSummary(false);
                }
              }}
              disabled={isGeneratingSummary || !summaryUri.trim() || !summaryContent.trim()}
              className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 flex items-center gap-2 text-sm"
            >
              {isGeneratingSummary ? (
                <RefreshCw className="w-4 h-4 animate-spin" />
              ) : (
                <Sparkles className="w-4 h-4" />
              )}
              生成摘要并存储
            </button>
          </div>
        </div>
      )}

      {/* Info Section */}
      <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
        <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-2">关于语义记忆</h3>
        <ul className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
          <li>• 基于本地 SQLite + TF-IDF 的语义搜索引擎</li>
          <li>• 自动提取和索引对话中的知识资源</li>
          <li>• 支持自然语言查询知识库</li>
          <li>• 可作为本地知识库增强 AI 对话</li>
        </ul>
      </div>
    </div>
  );
}