App.tsx

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { BrainCircuit, Github, Loader2, Paperclip, X, FileText, Send } from 'lucide-react';
import TopicMap from './components/TopicMap';
import ChatPanel from './components/ChatPanel';
import { generateKnowledgeMap, generateNodeExplanation } from './services/geminiService';
import { GraphData, KnowledgeNode, ChatMessage } from './types';

function App() {
  const [inputTopic, setInputTopic] = useState('');
  const [graphData, setGraphData] = useState<GraphData | null>(null);
  const [loadingMap, setLoadingMap] = useState(false);
  const [loadingChat, setLoadingChat] = useState(false);
  const [selectedNode, setSelectedNode] = useState<KnowledgeNode | null>(null);
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [attachedFile, setAttachedFile] = useState<File | null>(null);
  
  const fileInputRef = useRef<HTMLInputElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // Auto-resize textarea
  useEffect(() => {
    if (textareaRef.current) {
        textareaRef.current.style.height = 'auto';
        textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + 'px';
    }
  }, [inputTopic]);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files && e.target.files[0]) {
          const file = e.target.files[0];
          // Basic validation (e.g. max 10MB)
          if (file.size > 10 * 1024 * 1024) {
              alert("File is too large. Please upload files under 10MB.");
              return;
          }
          setAttachedFile(file);
      }
  };

  const clearFile = () => {
      setAttachedFile(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
  };

  const fileToBase64 = (file: File): Promise<{ mimeType: string; data: string }> => {
      return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
              const result = reader.result as string;
              // Remove the "data:mime/type;base64," prefix
              const data = result.split(',')[1];
              resolve({ mimeType: file.type, data });
          };
          reader.onerror = error => reject(error);
      });
  };

  const handleGenerate = async (e?: React.FormEvent) => {
    if (e) e.preventDefault();
    if (!inputTopic.trim() && !attachedFile) return;

    setLoadingMap(true);
    setError(null);
    setGraphData(null);
    setMessages([]);
    setSelectedNode(null);

    try {
      let fileData = null;
      if (attachedFile) {
          fileData = await fileToBase64(attachedFile);
      }

      const data = await generateKnowledgeMap(inputTopic, fileData);
      
      if (data && data.root) {
        setGraphData(data);
        // Initial welcome message
        const sourceText = attachedFile ? `Document "${attachedFile.name}"` : `"${inputTopic}"`;
        setMessages([{
            id: 'init',
            role: 'model',
            text: `### ${data.root.label}\n\nAnalysis complete. I've mapped out the structure of ${sourceText}. Click any node to explore details!`
        }]);
      } else {
        setError("Could not structure this content. Try a different topic or document.");
      }
    } catch (err) {
      console.error(err);
      setError("Failed to generate map. Please check your API Key or input.");
    } finally {
      setLoadingMap(false);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          handleGenerate();
      }
  };

  const handleNodeClick = useCallback(async (node: KnowledgeNode) => {
    if (selectedNode?.id === node.id && loadingChat) return;
    
    setSelectedNode(node);
    setLoadingChat(true);

    const newUserMsg: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      text: node.label
    };
    setMessages(prev => [...prev, newUserMsg]);

    try {
      const context = messages.slice(-2).map(m => m.text).join(" ");
      
      const explanation = await generateNodeExplanation(
          graphData?.root.label || "the topic",
          node.label,
          node.description,
          context
      );

      setMessages(prev => [...prev, {
          id: (Date.now() + 1).toString(),
          role: 'model',
          text: `### ${node.label}\n\n${explanation}` 
      }]);
    } catch (err) {
        console.error(err);
        setMessages(prev => [...prev, {
            id: (Date.now() + 1).toString(),
            role: 'model',
            text: "Sorry, I couldn't fetch the explanation for this node. Please try again."
        }]);
    } finally {
        setLoadingChat(false);
    }
  }, [selectedNode, loadingChat, graphData, messages]);

  return (
    <div className="flex flex-col h-screen overflow-hidden bg-[#0b0f19]">
      {/* Header */}
      <header className="border-b border-white/10 bg-slate-900/50 backdrop-blur-md flex items-center justify-between px-6 py-3 flex-shrink-0 z-20 relative">
        <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-transparent to-transparent pointer-events-none" />
        
        <div className="flex items-center gap-3 relative z-10 mr-4">
          <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg shadow-lg shadow-indigo-500/20">
            <BrainCircuit className="text-white w-5 h-5" />
          </div>
          <h1 className="text-xl font-bold text-white tracking-tight hidden sm:block">
            InsightMap <span className="text-indigo-400 font-light">AI</span>
          </h1>
        </div>

        <div className="flex-1 max-w-2xl mx-auto relative group z-10">
          <div className="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl opacity-30 group-hover:opacity-60 transition duration-500 blur"></div>
          
          <div className="relative flex flex-col bg-slate-900 border border-slate-700/50 rounded-2xl shadow-inner overflow-hidden">
             {/* File Badge Area - Inside Input Container */}
             {attachedFile && (
                <div className="px-3 pt-2 pb-0 flex animate-fade-in">
                    <div className="bg-indigo-500/10 text-indigo-300 text-xs px-2 py-1 rounded-md flex items-center gap-2 border border-indigo-500/30">
                        <FileText size={12} />
                        <span className="max-w-[200px] truncate font-medium">{attachedFile.name}</span>
                        <button 
                            onClick={clearFile} 
                            className="text-indigo-400 hover:text-white hover:bg-indigo-500/20 rounded-full p-0.5 transition-colors"
                            title="Remove file"
                        >
                            <X size={12}/>
                        </button>
                    </div>
                </div>
             )}

             <div className="flex items-end">
                {/* Text Area */}
                <textarea 
                    ref={textareaRef}
                    value={inputTopic}
                    onChange={(e) => setInputTopic(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder={attachedFile ? "Add specific instructions (optional)..." : "Enter a topic, paste an article, or attach a file..."}
                    rows={1}
                    className="w-full bg-transparent py-3 pl-4 pr-24 text-sm text-slate-200 placeholder-slate-500 focus:outline-none resize-none custom-scrollbar"
                    style={{ minHeight: '46px', maxHeight: '120px' }}
                />
                
                {/* Actions */}
                <div className="absolute right-2 bottom-1.5 flex items-center gap-1">
                    <input 
                        type="file" 
                        ref={fileInputRef}
                        onChange={handleFileSelect}
                        className="hidden"
                        accept=".pdf,.txt,.md,.csv,.json,image/*" 
                    />
                    <button 
                        type="button"
                        onClick={() => fileInputRef.current?.click()}
                        className={`p-2 rounded-full transition-colors ${attachedFile ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800'}`}
                        title="Attach file (PDF, TXT, MD...)"
                    >
                        <Paperclip size={18} />
                    </button>
                    <button 
                        onClick={() => handleGenerate()}
                        disabled={loadingMap || (!inputTopic.trim() && !attachedFile)}
                        className="p-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-500 transition-all disabled:opacity-50 disabled:hover:bg-indigo-600 shadow-lg"
                    >
                        {loadingMap ? <Loader2 className="animate-spin w-4 h-4"/> : <Send size={16} />}
                    </button>
                </div>
            </div>
          </div>
        </div>

        <div className="ml-4 z-10 hidden sm:block">
            <a href="#" className="text-slate-500 hover:text-white transition-colors">
            <Github className="w-6 h-6" />
            </a>
        </div>
      </header>

      {/* Main Content */}
      <div className="flex-1 flex overflow-hidden relative">
        {/* Map Area */}
        <div className="flex-1 relative">
            {error && (
                <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
                    <div className="bg-red-900/80 border border-red-500/50 text-red-100 px-6 py-4 rounded-xl backdrop-blur-md shadow-2xl flex items-center gap-3">
                        <X size={20} /> {error}
                    </div>
                </div>
            )}
            
            {loadingMap && (
                 <div className="absolute inset-0 flex flex-col items-center justify-center z-10 bg-[#0b0f19]/80 backdrop-blur-sm transition-all duration-500">
                    <div className="relative">
                        <div className="absolute inset-0 bg-indigo-500 blur-xl opacity-20 animate-pulse"></div>
                        <Loader2 className="relative animate-spin w-12 h-12 text-indigo-400 mb-4" />
                    </div>
                    <p className="text-slate-200 font-medium tracking-wide animate-pulse">
                        {attachedFile ? "Analyzing document structure..." : "Synthesizing knowledge graph..."}
                    </p>
                    <p className="text-xs text-slate-500 mt-2">
                        {attachedFile ? "Extracting key concepts from file" : "Connecting related nodes"}
                    </p>
                </div>
            )}

            <TopicMap 
                data={graphData} 
                onNodeClick={handleNodeClick}
                selectedNodeId={selectedNode?.id || null}
            />
        </div>

        {/* Chat Area */}
        <ChatPanel 
            messages={messages} 
            loading={loadingChat}
            currentNode={selectedNode}
        />
      </div>
    </div>
  );
}

export default App;