import { useState, useEffect } from 'react';
import api from '../lib/api';
import { Upload, FileText, Trash2, Database, BookOpen, Search } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

interface KnowledgeDoc {
  id: string;
  original_filename: string;
  status: string;
  chunk_count: number;
  preview?: string;
}

const KnowledgeBase = () => {
  const [documents, setDocuments] = useState<KnowledgeDoc[]>([]);
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<string[]>([]);
  const [searching, setSearching] = useState(false);

  const loadDocuments = async () => {
    try {
      const res = await api.get<KnowledgeDoc[]>('/knowledge-base');
      setDocuments(res.data);
    } catch (error) {
      console.error('Failed to fetch documents', error);
    }
  };

  useEffect(() => {
    let active = true;
    api
      .get<KnowledgeDoc[]>('/knowledge-base')
      .then((res) => {
        if (active) setDocuments(res.data);
      })
      .catch((error) => console.error('Failed to fetch documents', error));
    return () => {
      active = false;
    };
  }, []);

  const handleUpload = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) return;

    setUploading(true);
    try {
      const formData = new FormData();
      formData.append('file', file);
      await api.post('/knowledge-base/upload', formData);
      setFile(null);
      await loadDocuments();
    } catch (error) {
      console.error('Failed to upload document', error);
    } finally {
      setUploading(false);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await api.delete(`/knowledge-base/${id}`);
      await loadDocuments();
    } catch (error) {
      console.error('Failed to delete document', error);
    }
  };

  const handleSemanticSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!searchQuery.trim()) return;
    setSearching(true);
    try {
      const res = await api.post<{ results: string[] }>('/knowledge-base/search', {
        query: searchQuery,
      });
      setSearchResults(res.data.results);
    } catch (error) {
      console.error('Failed to search knowledge base', error);
    } finally {
      setSearching(false);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="space-y-8 max-w-5xl pb-12"
    >
      <div>
        <h2 className="text-2xl font-bold text-slate-800 dark:text-white flex items-center gap-2">
          <Database className="w-6 h-6 text-blue-500" />
          RAG Knowledge Base
        </h2>
        <p className="text-slate-500 dark:text-slate-400 mt-1">
          Upload documents to expand your AI agent's vector memory and test semantic retrieval.
        </p>
      </div>

      {/* Upload Section */}
      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700/50 p-8 relative overflow-hidden">
        <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-6 relative z-10">
          Upload New Document
        </h3>
        <form onSubmit={handleUpload} className="relative z-10">
          <div className="flex flex-col md:flex-row items-start md:items-end gap-6">
            <div className="flex-1 w-full relative">
              <div className="border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl p-8 text-center hover:border-blue-500 dark:hover:border-blue-400 hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-all cursor-pointer group">
                <input
                  type="file"
                  accept=".pdf,.txt"
                  onChange={(e) => setFile(e.target.files ? e.target.files[0] : null)}
                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                />
                <div className="flex flex-col items-center justify-center space-y-3 pointer-events-none">
                  <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Upload className="w-6 h-6" />
                  </div>
                  <div className="text-slate-600 dark:text-slate-300 font-medium">
                    {file ? file.name : 'Click to browse or drag and drop'}
                  </div>
                  <p className="text-xs text-slate-500">PDF or TXT up to 10MB</p>
                </div>
              </div>
            </div>

            <button
              type="submit"
              disabled={!file || uploading}
              className={`w-full md:w-auto flex justify-center items-center px-6 py-3 rounded-xl shadow-md text-sm font-semibold text-white transition-all active:scale-95 ${
                !file || uploading
                  ? 'bg-slate-400 cursor-not-allowed shadow-none'
                  : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 shadow-blue-500/25'
              }`}
            >
              {uploading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                  Chunking & Embedding...
                </>
              ) : (
                <>
                  <Upload className="w-4 h-4 mr-2" />
                  Upload & Index
                </>
              )}
            </button>
          </div>
        </form>
      </div>

      {/* Live Semantic Search Tester */}
      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700/50 p-6">
        <h3 className="text-base font-semibold text-slate-900 dark:text-white mb-3 flex items-center gap-2">
          <Search className="w-4 h-4 text-indigo-400" />
          Test Vector Retrieval (Cosine Similarity + Keyword Hybrid)
        </h3>
        <form onSubmit={handleSemanticSearch} className="flex gap-3">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Ask a question to see which knowledge chunks the AI retrieves..."
            className="flex-1 px-4 py-2.5 bg-slate-900 border border-slate-700 rounded-xl text-sm text-white outline-none focus:ring-2 focus:ring-indigo-500"
          />
          <button
            type="submit"
            disabled={searching}
            className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-medium"
          >
            {searching ? 'Searching...' : 'Test Retrieval'}
          </button>
        </form>
        {searchResults.length > 0 && (
          <div className="mt-4 space-y-2">
            {searchResults.map((chunk, i) => (
              <div
                key={i}
                className="p-3 rounded-xl bg-slate-900/80 border border-slate-700 text-xs text-slate-300 whitespace-pre-wrap"
              >
                <span className="text-indigo-400 font-bold mr-2">Match #{i + 1}:</span>
                {chunk}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Active Corpus List */}
      <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700/50 overflow-hidden">
        <div className="px-8 py-5 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-indigo-500" />
            Active Vector Corpus
          </h3>
          <span className="bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300 px-3 py-1 rounded-full text-xs font-semibold">
            {documents.length} Indexed Documents
          </span>
        </div>

        <ul className="divide-y divide-slate-100 dark:divide-slate-700/50">
          <AnimatePresence>
            {documents.map((doc, i) => (
              <motion.li
                key={doc.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, height: 0 }}
                transition={{ delay: i * 0.05 }}
                className="px-8 py-6 flex flex-col sm:flex-row sm:items-center justify-between hover:bg-slate-50/50 dark:hover:bg-slate-700/30 transition-colors gap-4"
              >
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 rounded-xl flex items-center justify-center">
                    <FileText className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="font-semibold text-slate-900 dark:text-slate-100 text-base">
                      {doc.original_filename}
                    </p>
                    <div className="flex items-center gap-3 mt-1">
                      <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400">
                        {doc.status}
                      </span>
                      <span className="text-xs text-slate-500 font-medium">
                        {doc.chunk_count} vector chunks
                      </span>
                    </div>
                  </div>
                </div>

                <button
                  onClick={() => handleDelete(doc.id)}
                  className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all hover:scale-105 active:scale-95"
                  title="Delete Document"
                >
                  <Trash2 className="w-5 h-5" />
                </button>
              </motion.li>
            ))}
          </AnimatePresence>

          {documents.length === 0 && (
            <li className="p-12 text-center text-slate-500 dark:text-slate-400 flex flex-col items-center">
              <Database className="w-12 h-12 mb-4 opacity-20" />
              <p>Your knowledge base is currently empty. Upload a PDF/TXT above or register a company.</p>
            </li>
          )}
        </ul>
      </div>
    </motion.div>
  );
};

export default KnowledgeBase;