App.tsx

import React, { useState, useEffect, useRef } from 'react';
import { 
  Send, 
  Plus, 
  Download, 
  Copy, 
  Check, 
  Sparkles,
  Zap,
  Layout,
  BookOpen,
  Info,
  Trash2,
  Menu,
  X,
  RefreshCw,
  ChevronLeft
} from 'lucide-react';
import { generateDiagram } from './services/geminiService';
import { DiagramData } from './types';
import Mermaid from './components/Mermaid';

const App: React.FC = () => {
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [currentDiagram, setCurrentDiagram] = useState<DiagramData | null>(null);
  const [history, setHistory] = useState<DiagramData[]>([]);
  const [isSidebarOpen, setIsSidebarOpen] = useState(window.innerWidth > 1024);
  const [copyStatus, setCopyStatus] = useState(false);
  
  const scrollRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);

  // Persistence
  useEffect(() => {
    const saved = localStorage.getItem('flowit_history');
    if (saved) {
      try {
        setHistory(JSON.parse(saved));
      } catch (e) {
        console.error("History parse error", e);
      }
    }
  }, []);

  const saveToHistory = (data: DiagramData) => {
    const newHistory = [data, ...history.filter(h => h.id !== data.id)].slice(0, 50);
    setHistory(newHistory);
    localStorage.setItem('flowit_history', JSON.stringify(newHistory));
  };

  const deleteFromHistory = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    const newHistory = history.filter(h => h.id !== id);
    setHistory(newHistory);
    localStorage.setItem('flowit_history', JSON.stringify(newHistory));
    if (currentDiagram?.id === id) setCurrentDiagram(null);
  };

  const handleSubmit = async (e?: React.FormEvent) => {
    if (e) e.preventDefault();
    if (!input.trim() || isLoading) return;

    const currentPrompt = input;
    setIsLoading(true);
    
    try {
      // If we have a current diagram, pass it as context for refinement
      const context = currentDiagram ? {
        previousCode: currentDiagram.code,
        previousExplanation: currentDiagram.explanation
      } : undefined;

      const response = await generateDiagram(currentPrompt, context);
      
      const newDiagram: DiagramData = {
        ...response,
        id: crypto.randomUUID(),
        timestamp: Date.now(),
        prompt: currentPrompt
      };

      setCurrentDiagram(newDiagram);
      saveToHistory(newDiagram);
      setInput('');
      
      if (window.innerWidth < 1024) setIsSidebarOpen(false);
      
      setTimeout(() => {
        scrollRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 300);
    } catch (error: any) {
      console.error(error);
      alert(error.message || 'Something went wrong while generating the diagram.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleCopy = () => {
    if (currentDiagram) {
      navigator.clipboard.writeText(currentDiagram.code);
      setCopyStatus(true);
      setTimeout(() => setCopyStatus(false), 2000);
    }
  };

  const handleDownload = () => {
    if (currentDiagram) {
      const blob = new Blob([currentDiagram.code], { type: 'text/plain' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${currentDiagram.title.toLowerCase().replace(/\s+/g, '-')}.mermaid`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  const loadingMessages = [
    "Architecting your logic...",
    "Drafting the layout...",
    "Validating Mermaid syntax...",
    "Connecting the dots...",
    "Rendering visuals..."
  ];
  const [loadingMsgIdx, setLoadingMsgIdx] = useState(0);

  useEffect(() => {
    let interval: any;
    if (isLoading) {
      interval = setInterval(() => {
        setLoadingMsgIdx(prev => (prev + 1) % loadingMessages.length);
      }, 2000);
    }
    return () => clearInterval(interval);
  }, [isLoading]);

  return (
    <div className="flex h-screen bg-slate-50 text-slate-900 overflow-hidden selection:bg-indigo-100">
      {/* Mobile Header */}
      <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-white border-b border-slate-200 flex items-center px-4 z-50 justify-between">
        <button onClick={() => setIsSidebarOpen(true)} className="p-2 -ml-2 text-slate-600">
          <Menu size={20} />
        </button>
        <div className="flex items-center gap-2">
          <div className="w-7 h-7 bg-indigo-600 rounded flex items-center justify-center text-white">
            <Sparkles size={14} />
          </div>
          <span className="font-bold text-sm uppercase tracking-wider">FLOWIT</span>
        </div>
        <button onClick={() => { setCurrentDiagram(null); setInput(''); }} className="p-2 -mr-2 text-indigo-600">
          <Plus size={20} />
        </button>
      </div>

      {/* Sidebar - Projects & History */}
      <aside 
        className={`fixed inset-0 lg:relative z-[60] lg:z-30 transition-transform duration-300 transform ${
          isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
        } lg:translate-x-0 w-full md:w-80 lg:w-72 bg-white border-r border-slate-200 flex flex-col shadow-2xl lg:shadow-none`}
      >
        <div className="h-16 border-b border-slate-100 flex items-center justify-between px-6 shrink-0">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white shadow-lg shadow-indigo-100">
              <Sparkles size={18} />
            </div>
            <span className="font-bold text-lg tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-600">FLOWIT</span>
          </div>
          <button onClick={() => setIsSidebarOpen(false)} className="lg:hidden p-2 text-slate-400 hover:text-slate-600">
            <X size={20} />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-4 space-y-6">
          <div className="space-y-1">
            <button 
              onClick={() => {
                setCurrentDiagram(null);
                setInput('');
                if (window.innerWidth < 1024) setIsSidebarOpen(false);
              }}
              className="w-full flex items-center gap-3 px-4 py-3 bg-indigo-600 text-white rounded-xl font-medium shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95 group"
            >
              <Plus size={18} className="group-hover:rotate-90 transition-transform duration-300" />
              <span>New Diagram</span>
            </button>
          </div>

          <div className="space-y-4">
            <div className="px-2 flex items-center justify-between text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em]">
              <span>History</span>
              <span className="bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full">{history.length}</span>
            </div>
            
            {history.length === 0 ? (
              <div className="text-center py-10 px-4 border-2 border-dashed border-slate-100 rounded-2xl">
                <p className="text-sm text-slate-400">Your visual logic history will appear here.</p>
              </div>
            ) : (
              <div className="space-y-1">
                {history.map((item) => (
                  <div
                    key={item.id}
                    onClick={() => {
                      setCurrentDiagram(item);
                      if (window.innerWidth < 1024) setIsSidebarOpen(false);
                    }}
                    className={`group flex items-center gap-3 w-full p-3 rounded-xl transition-all cursor-pointer border ${
                      currentDiagram?.id === item.id 
                        ? 'bg-indigo-50 border-indigo-100 text-indigo-700 shadow-sm' 
                        : 'hover:bg-slate-50 border-transparent text-slate-600 hover:text-slate-900'
                    }`}
                  >
                    <div className="shrink-0 w-8 h-8 rounded-lg bg-white border border-slate-100 flex items-center justify-center text-slate-400 group-hover:text-indigo-500 transition-colors">
                      <Layout size={14} />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-semibold truncate leading-none mb-1">{item.title}</div>
                      <div className="text-[10px] opacity-60 flex items-center gap-1.5">
                        <span>{new Date(item.timestamp).toLocaleDateString()}</span>
                      </div>
                    </div>
                    <button 
                      onClick={(e) => deleteFromHistory(e, item.id)}
                      className="p-1.5 text-slate-300 hover:text-red-500 hover:bg-red-50 rounded-md transition-all opacity-0 group-hover:opacity-100"
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="p-4 border-t border-slate-100 bg-slate-50/50">
          <div className="p-3 bg-white rounded-xl border border-slate-200 text-[11px] text-slate-500 leading-relaxed italic">
            "Design is not just what it looks like and feels like. Design is how it works."
          </div>
        </div>
      </aside>

      {/* Main Workspace */}
      <main className="flex-1 flex flex-col relative overflow-hidden pt-14 lg:pt-0">
        {/* Header Bar */}
        <header className="hidden lg:flex h-16 border-b border-slate-200 bg-white/80 backdrop-blur-xl items-center px-8 justify-between shrink-0 z-20 sticky top-0">
          <div className="flex items-center gap-4">
            {!isSidebarOpen && (
              <button 
                onClick={() => setIsSidebarOpen(true)}
                className="p-2 hover:bg-slate-100 rounded-lg text-slate-500"
              >
                <ChevronLeft size={20} className="rotate-180" />
              </button>
            )}
            <div className="h-4 w-[1px] bg-slate-200 hidden md:block"></div>
            <h1 className="font-bold text-slate-800 tracking-tight truncate max-w-[200px] xl:max-w-md">
              {currentDiagram ? currentDiagram.title : 'Quick Diagrammer'}
            </h1>
          </div>
          
          <div className="flex items-center gap-3">
            {currentDiagram && (
              <>
                <button 
                  onClick={handleCopy}
                  className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-xl transition-all border border-slate-200 bg-white shadow-sm active:scale-95"
                >
                  {copyStatus ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
                  <span>{copyStatus ? 'Copied' : 'Copy Code'}</span>
                </button>
                <button 
                  onClick={handleDownload}
                  className="flex items-center gap-2 px-4 py-2 text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-all shadow-lg shadow-indigo-100 active:scale-95"
                >
                  <Download size={16} />
                  <span>Export</span>
                </button>
              </>
            )}
          </div>
        </header>

        {/* Scrollable Workspace Content */}
        <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-8 xl:p-12">
          {!currentDiagram && !isLoading ? (
            <div className="max-w-3xl mx-auto h-full flex flex-col items-center justify-center text-center space-y-8 py-10">
              <div className="relative">
                <div className="w-24 h-24 bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-[2rem] flex items-center justify-center shadow-2xl shadow-indigo-200 rotate-6 transform hover:rotate-0 transition-transform duration-500">
                  <Sparkles size={48} />
                </div>
                <div className="absolute -bottom-2 -right-2 w-10 h-10 bg-white rounded-full flex items-center justify-center text-indigo-600 shadow-lg border border-indigo-50 animate-bounce">
                  <Zap size={20} />
                </div>
              </div>
              
              <div className="space-y-3">
                <h2 className="text-4xl font-extrabold text-slate-900 tracking-tight">Visualize your logic in seconds.</h2>
                <p className="text-slate-500 text-lg max-w-lg mx-auto leading-relaxed">
                  Turn your ideas, system architectures, and flows into professional diagrams with FLOWIT.
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-2xl pt-4">
                {[
                  { icon: <Zap size={20} />, label: "User Auth Flow", prompt: "Create a flowchart for user login with 2FA, password reset, and session management." },
                  { icon: <Layout size={20} />, label: "Microservices Architecture", prompt: "Sequence diagram showing an order service communicating with inventory, payment, and notification services via RabbitMQ." },
                  { icon: <BookOpen size={20} />, label: "Educational System", prompt: "Class diagram for a Learning Management System with Students, Teachers, Courses, and Lessons." },
                  { icon: <Info size={20} />, label: "State Transitions", prompt: "State diagram for an Order status: Pending -> Paid -> Shipped -> Delivered, including cancellations." },
                ].map((item, idx) => (
                  <button 
                    key={idx}
                    onClick={() => {
                      setInput(item.prompt);
                      inputRef.current?.focus();
                    }}
                    className="group p-5 bg-white border border-slate-200 rounded-2xl hover:border-indigo-400 hover:shadow-xl hover:shadow-indigo-50/50 transition-all text-left flex flex-col gap-3"
                  >
                    <div className="w-10 h-10 rounded-xl bg-slate-50 text-indigo-600 flex items-center justify-center group-hover:bg-indigo-50 transition-colors shadow-sm">{item.icon}</div>
                    <div>
                      <div className="font-bold text-slate-800 mb-1">{item.label}</div>
                      <div className="text-xs text-slate-400 line-clamp-2 leading-relaxed">{item.prompt}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <div ref={scrollRef} className="max-w-6xl mx-auto space-y-12 pb-32 animate-in fade-in slide-in-from-bottom-6 duration-700">
              {currentDiagram && (
                <>
                  {/* Diagram Result Section */}
                  <section className="space-y-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-indigo-100 text-indigo-600 rounded-lg">
                          <Layout size={20} />
                        </div>
                        <h2 className="text-xl font-bold text-slate-800">Visual Blueprint</h2>
                      </div>
                      <div className="flex items-center gap-2 text-xs font-mono bg-slate-100 text-slate-500 px-3 py-1 rounded-full border border-slate-200">
                        <RefreshCw size={12} className={isLoading ? 'animate-spin' : ''} />
                        {isLoading ? 'Updating...' : 'Live Render'}
                      </div>
                    </div>
                    
                    <Mermaid chart={currentDiagram.code} />
                  </section>

                  {/* Context Info Grid */}
                  <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
                    {/* Explanation */}
                    <div className="lg:col-span-3 space-y-6">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-indigo-100 text-indigo-600 rounded-lg">
                          <BookOpen size={20} />
                        </div>
                        <h2 className="text-xl font-bold text-slate-800">Logic Breakdown</h2>
                      </div>
                      <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-200 relative overflow-hidden">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-50/30 rounded-full -mr-16 -mt-16 blur-3xl"></div>
                        <div className="prose prose-slate max-w-none text-slate-700 leading-relaxed text-lg">
                          {currentDiagram.explanation}
                        </div>
                      </div>
                    </div>

                    {/* Suggestions */}
                    <div className="lg:col-span-2 space-y-6">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-amber-100 text-amber-600 rounded-lg">
                          <Sparkles size={20} />
                        </div>
                        <h2 className="text-xl font-bold text-slate-800">Architecture Insights</h2>
                      </div>
                      <div className="space-y-4">
                        {currentDiagram.suggestions.map((s, i) => (
                          <div 
                            key={i} 
                            onClick={() => {
                              setInput(`Refine this: ${s}`);
                              inputRef.current?.focus();
                            }}
                            className="group flex gap-4 p-5 bg-white border border-slate-200 rounded-2xl shadow-sm hover:border-indigo-300 hover:shadow-md transition-all cursor-pointer relative overflow-hidden"
                          >
                            <div className="absolute left-0 top-0 bottom-0 w-1 bg-amber-200 group-hover:bg-indigo-400 transition-colors"></div>
                            <div className="w-8 h-8 rounded-full bg-slate-50 text-slate-600 flex items-center justify-center text-xs font-bold shrink-0 mt-0.5 group-hover:bg-indigo-600 group-hover:text-white transition-all">
                              {i + 1}
                            </div>
                            <p className="text-sm font-medium text-slate-700 leading-relaxed group-hover:text-indigo-900">{s}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* Code View */}
                  <section className="space-y-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-slate-800 text-slate-100 rounded-lg">
                          <Info size={18} />
                        </div>
                        <h2 className="text-xl font-bold text-slate-800">Mermaid Syntax</h2>
                      </div>
                      <button 
                        onClick={handleCopy}
                        className="text-xs font-bold text-indigo-600 hover:text-indigo-700 bg-indigo-50 px-3 py-1 rounded-lg border border-indigo-100"
                      >
                        {copyStatus ? 'Copied' : 'Copy Snippet'}
                      </button>
                    </div>
                    <div className="relative group">
                      <div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-3xl blur opacity-30 group-hover:opacity-100 transition duration-1000"></div>
                      <pre className="relative p-8 bg-slate-900 text-indigo-300 rounded-[1.5rem] font-mono text-sm overflow-x-auto shadow-2xl leading-relaxed selection:bg-indigo-500/30">
                        <code>{currentDiagram.code}</code>
                      </pre>
                    </div>
                  </section>
                </>
              )}
              
              {isLoading && (
                <div className="py-24 flex flex-col items-center justify-center gap-6 text-slate-400 max-w-sm mx-auto text-center">
                  <div className="relative">
                    <div className="w-16 h-16 border-4 border-slate-100 border-t-indigo-600 rounded-full animate-spin"></div>
                    <div className="absolute inset-0 flex items-center justify-center">
                      <Zap size={20} className="text-indigo-600 animate-pulse" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <p className="text-slate-800 font-bold text-xl">{loadingMessages[loadingMsgIdx]}</p>
                    <p className="text-sm text-slate-500">Processing complex architectural logic with Gemini Pro...</p>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Floating AI Input Area */}
        <div className="fixed bottom-0 left-0 right-0 lg:left-72 p-4 md:p-8 pointer-events-none z-40">
          <div className="max-w-4xl mx-auto pointer-events-auto">
            <form 
              onSubmit={handleSubmit}
              className="relative group transition-all duration-500"
            >
              {/* Refinement Indicator */}
              {currentDiagram && !isLoading && (
                <div className="absolute -top-10 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-indigo-600 text-white text-[11px] font-bold uppercase tracking-widest rounded-t-xl shadow-xl border-x border-t border-indigo-500 flex items-center gap-2">
                  <RefreshCw size={12} className="animate-spin-slow" />
                  Refinement Mode Active
                </div>
              )}

              {/* Input Glow */}
              <div className={`absolute -inset-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-[2rem] blur-xl opacity-20 group-focus-within:opacity-40 transition-opacity ${isLoading ? 'animate-pulse opacity-50' : ''}`}></div>
              
              <div className="relative flex items-end gap-3 bg-white/90 backdrop-blur-2xl p-4 rounded-[1.8rem] shadow-2xl border border-white/50 ring-1 ring-slate-200">
                <textarea
                  ref={inputRef}
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  disabled={isLoading}
                  placeholder={currentDiagram ? "Add a step, rename nodes, or change the flow..." : "Describe your system or process flow..."}
                  className="flex-1 min-h-[56px] max-h-[200px] p-3 focus:outline-none text-slate-800 bg-transparent resize-none leading-relaxed text-lg disabled:opacity-50"
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                      e.preventDefault();
                      handleSubmit();
                    }
                  }}
                />
                <button
                  type="submit"
                  disabled={!input.trim() || isLoading}
                  className={`flex items-center justify-center w-14 h-14 rounded-2xl transition-all shadow-xl active:scale-90 shrink-0 ${
                    isLoading 
                    ? 'bg-slate-100 text-slate-400 cursor-not-allowed' 
                    : 'bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-indigo-200'
                  }`}
                >
                  {isLoading ? <RefreshCw size={24} className="animate-spin" /> : <Send size={24} />}
                </button>
              </div>
            </form>
          </div>
        </div>
      </main>
      
      <style>{`
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
          animation: spin-slow 4s linear infinite;
        }
        textarea::-webkit-scrollbar {
          width: 4px;
        }
        textarea::-webkit-scrollbar-thumb {
          background: #e2e8f0;
          border-radius: 10px;
        }
      `}</style>
    </div>
  );
};

export default App;