const { useState, useEffect, useRef } = React;

// --- COMPONENTE PRINCIPAL DA APLICAÇÃO REACT ---
function App() {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [token, setToken] = useState(localStorage.getItem('arock_token'));

    useEffect(() => {
        if (!token) {
            setUser(null);
            setLoading(false);
            return;
        }
        fetch('/api/auth/me', {
            headers: { 'Authorization': `Bearer ${token}` }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                setUser(data.user);
            } else {
                logout();
            }
            setLoading(false);
        })
        .catch(() => {
            logout();
            setLoading(false);
        });
    }, [token]);

    const login = (newToken, newUser) => {
        localStorage.setItem('arock_token', newToken);
        setToken(newToken);
        setUser(newUser);
    };

    const logout = () => {
        localStorage.removeItem('arock_token');
        setToken(null);
        setUser(null);
    };

    if (loading) {
        return (
            <div className="auth-overlay">
                <div style={{ textAlign: 'center', color: '#06b6d4' }}>
                    <i className="fa-solid fa-circle-notch fa-spin fa-2x"></i>
                    <p style={{ marginTop: 12 }}>Verificando sessão segura...</p>
                </div>
            </div>
        );
    }

    // GUARDA ESTRITA: SE NÃO ESTIVER LOGADO, RENDERIZA APENAS A TELA DE LOGIN/CADASTRO
    if (!user) {
        return <AuthScreen onLoginSuccess={login} />;
    }

    // USUÁRIO AUTENTICADO: RENDERIZA O STUDIO ENTERPRISE
    return <StudioApp user={user} token={token} onLogout={logout} />;
}

// --- TELA DE AUTENTICAÇÃO (LOGIN / REGISTRO) ---
function AuthScreen({ onLoginSuccess }) {
    const [isRegistering, setIsRegistering] = useState(false);
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [submitting, setSubmitting] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        setSubmitting(true);

        const endpoint = isRegistering ? '/api/auth/register' : '/api/auth/login';
        const body = isRegistering ? { name, email, password } : { email, password };

        try {
            const res = await fetch(endpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });
            const data = await res.json();
            if (data.success) {
                onLoginSuccess(data.token, data.user);
            } else {
                setError(data.error);
            }
        } catch (err) {
            setError("Erro ao conectar com o servidor da Arock IA.");
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <div className="auth-overlay">
            <div className="auth-box">
                <div className="auth-brand">
                    <div className="brand-icon"><i class="fa-solid fa-brain"></i></div>
                    <h2>Arock AI Studio</h2>
                    <p>Plataforma de IA & RAG Agêntico por Projetos</p>
                </div>

                <form onSubmit={handleSubmit} className="auth-form">
                    <h3>{isRegistering ? 'Criar Nova Conta' : 'Acessar a Plataforma'}</h3>

                    {isRegistering && (
                        <div className="form-group">
                            <label>Nome Completo:</label>
                            <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Seu Nome" required />
                        </div>
                    )}

                    <div className="form-group">
                        <label>E-mail:</label>
                        <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="seu@email.com" required />
                    </div>

                    <div className="form-group">
                        <label>Senha:</label>
                        <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••" required />
                    </div>

                    {error && <div className="auth-error">{error}</div>}

                    <button type="submit" className="btn-auth" disabled={submitting}>
                        {submitting ? <i className="fa-solid fa-spinner fa-spin"></i> : (isRegistering ? 'Cadastrar' : 'Entrar')}
                    </button>

                    <div className="auth-toggle-text">
                        {isRegistering ? (
                            <span>Já tem conta? <a href="#" onClick={(e) => { e.preventDefault(); setIsRegistering(false); }}>Faça Login</a></span>
                        ) : (
                            <span>Não tem conta? <a href="#" onClick={(e) => { e.preventDefault(); setIsRegistering(true); }}>Cadastre-se</a></span>
                        )}
                    </div>
                </form>
            </div>
        </div>
    );
}

// --- STUDIO ENTERPRISE APP ---
function StudioApp({ user, token, onLogout }) {
    const [activeTab, setActiveTab] = useState('chat'); // 'chat' ou 'admin'
    const [projects, setProjects] = useState([]);
    const [currentProject, setCurrentProject] = useState('geral');
    const [isRagEnabled, setIsRagEnabled] = useState(false);
    const [model, setModel] = useState('arock-ia');
    const [messages, setMessages] = useState([]);
    const [inputPrompt, setInputPrompt] = useState('');
    const [loadingAI, setLoadingAI] = useState(false);

    // Modais
    const [showProjectModal, setShowProjectModal] = useState(false);
    const [newProjName, setNewProjName] = useState('');
    const [newProjDesc, setNewProjDesc] = useState('');
    const [newProjPrompt, setNewProjPrompt] = useState('');

    const [showIngestModal, setShowIngestModal] = useState(false);
    const [ingestContent, setIngestContent] = useState('');
    const [ingestCategory, setIngestCategory] = useState('');

    const messagesEndRef = useRef(null);

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

    useEffect(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages, loadingAI]);

    const loadProjects = async () => {
        try {
            const res = await fetch('/api/projects', {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            const data = await res.json();
            if (data.success) setProjects(data.projects);
        } catch (e) {}
    };

    const handleSelectProject = (projId) => {
        setCurrentProject(projId);
        if (projId !== 'geral') {
            setIsRagEnabled(true);
        }
    };

    const handleCreateProject = async (e) => {
        e.preventDefault();
        if (!newProjName.trim()) return;

        try {
            const res = await fetch('/api/projects', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                body: JSON.stringify({
                    name: newProjName,
                    description: newProjDesc,
                    system_prompt: newProjPrompt
                })
            });
            const data = await res.json();
            if (data.success) {
                setShowProjectModal(false);
                setNewProjName(''); setNewProjDesc(''); setNewProjPrompt('');
                loadProjects();
                handleSelectProject(data.project.id);
            }
        } catch (e) {}
    };

    const handleConfirmIngest = async (e) => {
        e.preventDefault();
        if (!ingestContent.trim()) return;

        try {
            const res = await fetch(`/api/projects/${currentProject}/ingest`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                body: JSON.stringify({ content: ingestContent, metadata: { categoria: ingestCategory } })
            });
            const data = await res.json();
            if (data.success) {
                alert(`Conhecimento vetorizado no PGVector para o projeto '${currentProject}'!`);
                setShowIngestModal(false);
                setIngestContent(''); setIngestCategory('');
            }
        } catch (e) {}
    };

    const handleSendMessage = async () => {
        if (!inputPrompt.trim() || loadingAI) return;

        const userText = inputPrompt;
        setInputPrompt('');
        setMessages(prev => [...prev, { role: 'user', content: userText }]);
        setLoadingAI(true);

        try {
            const res = await fetch('/api/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                body: JSON.stringify({
                    message: userText,
                    project_id: currentProject,
                    use_rag: isRagEnabled,
                    model
                })
            });

            const data = await res.json();
            if (data.success) {
                setMessages(prev => [...prev, {
                    role: 'assistant',
                    content: data.answer,
                    sources: data.sources,
                    usage: data.usage
                }]);
            } else {
                setMessages(prev => [...prev, { role: 'assistant', content: data.error || "Erro ao consultar a Arock IA." }]);
            }
        } catch (e) {
            setMessages(prev => [...prev, { role: 'assistant', content: `Erro de comunicação com o servidor: ${e.message}` }]);
        } finally {
            setLoadingAI(false);
        }
    };

    return (
        <div className="app-container">
            {/* Sidebar Esquerda */}
            <aside className="sidebar">
                <div className="sidebar-header">
                    <div className="brand">
                        <div className="brand-icon"><i className="fa-solid fa-brain"></i></div>
                        <div className="brand-text">
                            <h2>Arock AI Studio</h2>
                            <span className="status-badge"><i className="fa-solid fa-shield-halved"></i> Enterprise React</span>
                        </div>
                    </div>
                    <button className="btn-new-chat" onClick={() => setMessages([])}>
                        <i className="fa-solid fa-plus"></i> Novo Chat
                    </button>
                </div>

                <div className="sidebar-scroll">
                    <div className="sidebar-section">
                        <ul className="nav-main-list">
                            <li className={`nav-item ${activeTab === 'chat' ? 'active' : ''}`} onClick={() => setActiveTab('chat')}>
                                <i className="fa-solid fa-message"></i> Chat & Projetos
                            </li>
                            {user.role === 'admin' && (
                                <li className={`nav-item ${activeTab === 'admin' ? 'active' : ''}`} onClick={() => setActiveTab('admin')}>
                                    <i className="fa-solid fa-chart-line"></i> Painel Admin
                                </li>
                            )}
                        </ul>
                    </div>

                    <div className="sidebar-section">
                        <div className="section-title">
                            <span>PASTAS DE PROJETOS</span>
                            <button onClick={() => setShowProjectModal(true)} title="Novo Projeto"><i className="fa-solid fa-folder-plus"></i></button>
                        </div>
                        <ul className="project-list">
                            <li className={`project-item ${currentProject === 'geral' ? 'active' : ''}`} onClick={() => handleSelectProject('geral')}>
                                <i className="fa-solid fa-comments"></i> Chat Geral
                            </li>
                            {projects.filter(p => p.id !== 'geral').map(p => (
                                <li key={p.id} className={`project-item ${currentProject === p.id ? 'active' : ''}`} onClick={() => handleSelectProject(p.id)}>
                                    <i className="fa-solid fa-folder"></i> {p.name}
                                </li>
                            ))}
                        </ul>
                    </div>

                    <div className="sidebar-section">
                        <div className="section-title">BASE DE CONHECIMENTO (RAG)</div>
                        <button className="btn-sidebar-action" onClick={() => setShowIngestModal(true)}>
                            <i className="fa-solid fa-database"></i> Add Conhecimento RAG
                        </button>
                    </div>
                </div>

                <div className="sidebar-footer">
                    <div className="user-info">
                        <div className="avatar">{user.name.charAt(0).toUpperCase()}</div>
                        <div className="user-details">
                            <span className="user-name">{user.name}</span>
                            <span className="user-role">{user.role === 'admin' ? 'Administrador' : 'Membro'}</span>
                        </div>
                        <button className="btn-icon" onClick={onLogout} title="Sair"><i className="fa-solid fa-arrow-right-from-bracket"></i></button>
                    </div>
                </div>
            </aside>

            {/* Conteúdo Principal */}
            <main className="chat-main">
                {activeTab === 'chat' ? (
                    <div className="view-pane active">
                        <header className="chat-header">
                            <div className="header-left">
                                <h3><i className="fa-solid fa-folder"></i> Projeto: {projects.find(p => p.id === currentProject)?.name || 'Chat Geral'}</h3>
                            </div>
                            <div className="header-controls">
                                <div className="rag-toggle-container">
                                    <span className="toggle-label"><i className="fa-solid fa-microchip"></i> RAG Agêntico:</span>
                                    <label className="switch">
                                        <input type="checkbox" checked={isRagEnabled} onChange={e => setIsRagEnabled(e.target.checked)} />
                                        <span className="slider round"></span>
                                    </label>
                                </div>
                                <div className="model-selector">
                                    <select value={model} onChange={e => setModel(e.target.value)}>
                                        <option value="arock-ia">Arock IA (Recomendado)</option>
                                        <option value="llama3.2:3b">Llama 3.2 3B</option>
                                    </select>
                                </div>
                            </div>
                        </header>

                        <div className="messages-container">
                            {messages.length === 0 ? (
                                <div className="welcome-screen">
                                    <div className="welcome-icon"><i className="fa-solid fa-wand-magic-sparkles"></i></div>
                                    <h1>Como a Arock IA pode ajudar você hoje?</h1>
                                    <p>IA Local de alta performance com RAG Agêntico, pastas por projeto e controle de tokens.</p>
                                </div>
                            ) : (
                                messages.map((m, idx) => (
                                    <div key={idx} className={`message-item ${m.role}`}>
                                        <div className="message-avatar">
                                            {m.role === 'user' ? user.name.charAt(0).toUpperCase() : <i className="fa-solid fa-brain"></i>}
                                        </div>
                                        <div className="message-content">
                                            <div className="message-text" dangerouslySetInnerHTML={{ __html: m.role === 'assistant' ? marked.parse(m.content) : m.content }} />
                                            {m.sources && m.sources.length > 0 && (
                                                <div className="sources-box">
                                                    <div className="sources-header"><i className="fa-solid fa-database"></i> Fontes RAG Consultadas:</div>
                                                    {m.sources.map((s, i) => (
                                                        <div key={i} className="source-pill"><i className="fa-solid fa-file-text"></i> Doc #{s.id} ({(s.similarity * 100).toFixed(0)}% sim)</div>
                                                    ))}
                                                </div>
                                            )}
                                            {m.usage && (
                                                <div style={{ fontSize: '0.7rem', color: 'var(--text-muted)', marginTop: 8 }}>
                                                    <i className="fa-solid fa-microchip"></i> {m.usage.total_tokens} tokens consumidos
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                ))
                            )}

                            {loadingAI && (
                                <div className="message-item assistant">
                                    <div className="message-avatar"><i className="fa-solid fa-brain"></i></div>
                                    <div className="message-content"><i className="fa-solid fa-circle-notch fa-spin"></i> Processando com a Arock IA...</div>
                                </div>
                            )}
                            <div ref={messagesEndRef} />
                        </div>

                        <footer className="chat-input-wrapper">
                            <div className="chat-input-box">
                                <textarea
                                    value={inputPrompt}
                                    onChange={e => setInputPrompt(e.target.value)}
                                    onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }}
                                    placeholder="Pergunte à Arock IA ou consulte o projeto..."
                                    rows={1}
                                />
                                <div className="input-actions">
                                    <div className="action-left">
                                        <button className="btn-icon" onClick={() => setShowIngestModal(true)} title="Adicionar documento"><i className="fa-solid fa-paperclip"></i></button>
                                        {isRagEnabled && <span className="active-badge"><i className="fa-solid fa-database"></i> RAG Ativo</span>}
                                    </div>
                                    <button className="btn-send" onClick={handleSendMessage}><i className="fa-solid fa-paper-plane"></i></button>
                                </div>
                            </div>
                        </footer>
                    </div>
                ) : (
                    <AdminView token={token} />
                )}
            </main>

            {/* Modal Novo Projeto */}
            {showProjectModal && (
                <div className="modal-backdrop">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h3><i className="fa-solid fa-folder-plus"></i> Novo Projeto / Pasta</h3>
                            <button className="btn-icon" onClick={() => setShowProjectModal(false)}><i className="fa-solid fa-xmark"></i></button>
                        </div>
                        <form onSubmit={handleCreateProject} className="modal-body">
                            <div className="form-group">
                                <label>Nome do Projeto:</label>
                                <input type="text" value={newProjName} onChange={e => setNewProjName(e.target.value)} required />
                            </div>
                            <div className="form-group">
                                <label>Descrição:</label>
                                <input type="text" value={newProjDesc} onChange={e => setNewProjDesc(e.target.value)} />
                            </div>
                            <div className="form-group">
                                <label>System Prompt / Contexto Personalizado (Persona da IA):</label>
                                <textarea value={newProjPrompt} onChange={e => setNewProjPrompt(e.target.value)} rows={4} placeholder="Regras e persona da IA para este projeto..." />
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn-secondary" onClick={() => setShowProjectModal(false)}>Cancelar</button>
                                <button type="submit" className="btn-primary">Salvar Projeto</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* Modal Ingestão RAG */}
            {showIngestModal && (
                <div className="modal-backdrop">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h3><i className="fa-solid fa-database"></i> Add Conhecimento RAG</h3>
                            <button className="btn-icon" onClick={() => setShowIngestModal(false)}><i className="fa-solid fa-xmark"></i></button>
                        </div>
                        <form onSubmit={handleConfirmIngest} className="modal-body">
                            <div className="form-group">
                                <label>Projeto:</label>
                                <input type="text" value={currentProject} readOnly />
                            </div>
                            <div className="form-group">
                                <label>Conteúdo / Texto / FAQ:</label>
                                <textarea value={ingestContent} onChange={e => setIngestContent(e.target.value)} rows={7} placeholder="Cole o texto para a base vetorial PGVector..." required />
                            </div>
                            <div className="form-group">
                                <label>Categoria / Tag:</label>
                                <input type="text" value={ingestCategory} onChange={e => setIngestCategory(e.target.value)} placeholder="Ex: suporte, contrato" />
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn-secondary" onClick={() => setShowIngestModal(false)}>Cancelar</button>
                                <button type="submit" className="btn-primary"><i className="fa-solid fa-brain"></i> Vetorizar no PGVector</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
}

// --- PAINEL ADMIN DASHBOARD COMPONENT ---
function AdminView({ token }) {
    const [stats, setStats] = useState(null);
    const [apiKeys, setApiKeys] = useState([]);
    const [loading, setLoading] = useState(true);

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

    const loadAdminData = async () => {
        try {
            const resStats = await fetch('/api/admin/stats', { headers: { 'Authorization': `Bearer ${token}` } });
            const dataStats = await resStats.json();
            if (dataStats.success) setStats(dataStats);

            const resKeys = await fetch('/api/admin/api-keys', { headers: { 'Authorization': `Bearer ${token}` } });
            const dataKeys = await resKeys.json();
            if (dataKeys.success) setApiKeys(dataKeys.api_keys);
        } catch (e) {} finally {
            setLoading(false);
        }
    };

    const handleCreateKey = async () => {
        const name = prompt("Nome / Finalidade da API Key (ex: Servidor Vendas):");
        if (!name) return;

        try {
            const res = await fetch('/api/admin/api-keys', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
                body: JSON.stringify({ name })
            });
            const data = await res.json();
            if (data.success) {
                alert(`API Key criada com sucesso!\n\n${data.api_key.key_value}\n\nUse no header Authorization: Bearer ${data.api_key.key_value}`);
                loadAdminData();
            }
        } catch (e) {}
    };

    const handleRevokeKey = async (id) => {
        if (!confirm("Revogar esta chave de API?")) return;
        try {
            await fetch(`/api/admin/api-keys/${id}`, {
                method: 'DELETE',
                headers: { 'Authorization': `Bearer ${token}` }
            });
            loadAdminData();
        } catch (e) {}
    };

    if (loading) return <div style={{ padding: 24, color: '#9ca3af' }}><i className="fa-solid fa-spinner fa-spin"></i> Carregando métricas Admin...</div>;

    return (
        <div className="view-pane active">
            <header className="chat-header">
                <h3><i className="fa-solid fa-chart-line"></i> Painel Admin & Métricas de Tokens</h3>
            </header>
            <div className="admin-container">
                <div className="metrics-grid">
                    <div className="metric-card">
                        <div className="metric-icon"><i className="fa-solid fa-coins"></i></div>
                        <div className="metric-data">
                            <h4>{stats?.summary?.total_tokens?.toLocaleString() || 0}</h4>
                            <span>Total Tokens Consumidos</span>
                        </div>
                    </div>
                    <div className="metric-card">
                        <div className="metric-icon"><i className="fa-solid fa-comments"></i></div>
                        <div className="metric-data">
                            <h4>{stats?.summary?.total_requests?.toLocaleString() || 0}</h4>
                            <span>Requisições de IA</span>
                        </div>
                    </div>
                    <div className="metric-card">
                        <div className="metric-icon"><i className="fa-solid fa-users"></i></div>
                        <div className="metric-data">
                            <h4>{stats?.summary?.total_users || 0}</h4>
                            <span>Usuários Cadastrados</span>
                        </div>
                    </div>
                    <div className="metric-card">
                        <div className="metric-icon"><i className="fa-solid fa-folder"></i></div>
                        <div className="metric-data">
                            <h4>{stats?.summary?.total_projects || 0}</h4>
                            <span>Projetos Ativos</span>
                        </div>
                    </div>
                </div>

                <div className="admin-card">
                    <div className="card-header">
                        <h4><i className="fa-solid fa-key"></i> Chaves de API para Consumo Externo</h4>
                        <button className="btn-primary-sm" onClick={handleCreateKey}><i className="fa-solid fa-plus"></i> Gerar API Key</button>
                    </div>
                    <table className="data-table">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>API Key (Authorization: Bearer)</th>
                                <th>Dono</th>
                                <th>Status</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {apiKeys.map(k => (
                                <tr key={k.id}>
                                    <td>{k.name}</td>
                                    <td><span className="key-code">{k.key_value}</span></td>
                                    <td>{k.owner || 'Sistema'}</td>
                                    <td><span className={`status-tag ${k.status}`}>{k.status}</span></td>
                                    <td>
                                        {k.status === 'active' && (
                                            <button className="btn-icon" onClick={() => handleRevokeKey(k.id)}><i className="fa-solid fa-ban"></i></button>
                                        )}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                <div className="admin-card">
                    <div className="card-header">
                        <h4><i className="fa-solid fa-user-gear"></i> Consumo por Usuário</h4>
                    </div>
                    <table className="data-table">
                        <thead>
                            <tr>
                                <th>Usuário</th>
                                <th>E-mail</th>
                                <th>Requisições</th>
                                <th>Total Tokens</th>
                            </tr>
                        </thead>
                        <tbody>
                            {stats?.users?.map((u, i) => (
                                <tr key={i}>
                                    <td><strong>{u.name}</strong></td>
                                    <td>{u.email}</td>
                                    <td>{u.requests || 0}</td>
                                    <td><span className="key-code">{(u.total_tokens || 0).toLocaleString()} tokens</span></td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}

// Renderizar React 18 no elemento #react-root
const root = ReactDOM.createRoot(document.getElementById('react-root'));
root.render(<App />);