<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lucAI — Luca Ecosystem AI Assistant</title>
    <meta name="description" content="lucAI is the official AI assistant of Luca Ecosystem.">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Manrope:wght@200..800&display=swap" rel="stylesheet">
    
    <!-- lucUI CSS Framework -->
    <link rel="stylesheet" href="/node_modules/lucui-css-framework/lucUI.min.css">
    
    <!-- Custom Styles -->
    <link rel="stylesheet" href="/src/styles/main.css">
    <link rel="stylesheet" href="/src/styles/theme.css">
    <link rel="stylesheet" href="/src/styles/layout.css">
    <link rel="stylesheet" href="/src/styles/auth.css">
    <link rel="stylesheet" href="/src/styles/chat.css">
    
    <!-- Application Script -->
    <script type="module" src="/src/index.js"></script>
</head>
<body>
    <!-- Application Shell -->
    <div id="app">
        <div id="view-container">
            <!-- Loading view -->
            <div id="loading-view" class="view active">
                <div class="loading-state">
                    <div class="loading-spinner"></div>
                    <p>Loading lucAI...</p>
                </div>
            </div>
            
            <!-- Registration view -->
            <div id="registration-view" class="view auth-view">
                <div class="auth-container glass">
                    <div class="auth-logo">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <circle cx="20" cy="20" r="20" fill="url(#gradient)"/>
                            <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                            <defs><linearGradient id="gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                        </svg>
                    </div>
                    <h1 class="auth-title">Create Account</h1>
                    <p class="auth-subtitle">Join the Luca Ecosystem</p>
                    
                    <form id="registration-form" class="auth-form">
                        <div class="form-group">
                            <label class="form-label" for="reg-name">Display Name</label>
                            <input type="text" id="reg-name" class="form-input" placeholder="How you want to be known" maxlength="100">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="reg-email">Email</label>
                            <input type="email" id="reg-email" class="form-input" placeholder="you@example.com" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="reg-password">Password</label>
                            <input type="password" id="reg-password" class="form-input" placeholder="Min. 8 characters" required minlength="8">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="reg-password-confirm">Confirm Password</label>
                            <input type="password" id="reg-password-confirm" class="form-input" placeholder="Re-enter password" required minlength="8">
                        </div>
                        <button type="submit" class="btn btn-primary btn-full" id="reg-submit">Create Account</button>
                    </form>
                    
                    <div class="auth-message" id="registration-message"></div>
                    <div class="auth-footer">
                        <p>Already have an account? <a href="#" onclick="window.lucaiApp.showView('login')">Sign in</a></p>
                    </div>
                </div>
            </div>
            
            <!-- Login view -->
            <div id="login-view" class="view auth-view">
                <div class="auth-container glass">
                    <div class="auth-logo">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <circle cx="20" cy="20" r="20" fill="url(#gradient)"/>
                            <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                            <defs><linearGradient id="gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                        </svg>
                    </div>
                    <h1 class="auth-title">Welcome Back</h1>
                    <p class="auth-subtitle">Sign in to continue to lucAI</p>
                    
                    <form id="login-form" class="auth-form">
                        <div class="form-group">
                            <label class="form-label" for="login-email">Email</label>
                            <input type="email" id="login-email" class="form-input" placeholder="you@example.com" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="login-password">Password</label>
                            <input type="password" id="login-password" class="form-input" placeholder="Enter your password" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-full" id="login-submit">Sign In</button>
                    </form>
                    
                    <div class="auth-message" id="login-message"></div>
                    <div class="auth-footer">
                        <p><a href="#" onclick="window.lucaiApp.showView('forgot-password')">Forgot password?</a></p>
                        <p>Don't have an account? <a href="#" onclick="window.lucaiApp.showView('registration')">Sign up</a></p>
                    </div>
                </div>
            </div>
            
            <!-- Verification view -->
            <div id="verification-view" class="view auth-view">
                <div class="auth-container glass">
                    <div class="auth-logo">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <circle cx="20" cy="20" r="20" fill="url(#gradient)"/>
                            <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                            <defs><linearGradient id="gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                        </svg>
                    </div>
                    <h1 class="auth-title">Verify Your Email</h1>
                    <p class="auth-subtitle">Check your inbox for the verification link</p>
                    
                    <div class="verification-info">
                        <p>We've sent a verification email to <strong id="verify-email-display"></strong></p>
                        <p class="verification-hint">Click the link in the email to activate your account.</p>
                    </div>
                    
                    <div class="verification-actions">
                        <button class="btn btn-outline btn-full" id="verify-resend" onclick="window.lucaiApp.resendVerification()">Resend Email</button>
                        <button class="btn btn-text" onclick="window.lucaiApp.showView('login')">Back to Sign In</button>
                    </div>
                    
                    <div class="auth-message" id="verification-message"></div>
                </div>
            </div>
            
            <!-- Forgot password view -->
            <div id="forgot-password-view" class="view auth-view">
                <div class="auth-container glass">
                    <div class="auth-logo">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <circle cx="20" cy="20" r="20" fill="url(#gradient)"/>
                            <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                            <defs><linearGradient id="gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                        </svg>
                    </div>
                    <h1 class="auth-title">Reset Password</h1>
                    <p class="auth-subtitle">Enter your email to receive a reset link</p>
                    
                    <form id="forgot-password-form" class="auth-form">
                        <div class="form-group">
                            <label class="form-label" for="forgot-email">Email</label>
                            <input type="email" id="forgot-email" class="form-input" placeholder="you@example.com" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-full" id="forgot-submit">Send Reset Link</button>
                    </form>
                    
                    <div class="auth-message" id="forgot-password-message"></div>
                    <div class="auth-footer">
                        <p><a href="#" onclick="window.lucaiApp.showView('login')">Back to Sign In</a></p>
                    </div>
                </div>
            </div>
            
            <!-- Password reset view -->
            <div id="password-reset-view" class="view auth-view">
                <div class="auth-container glass">
                    <div class="auth-logo">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
                            <circle cx="20" cy="20" r="20" fill="url(#gradient)"/>
                            <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                            <defs><linearGradient id="gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                        </svg>
                    </div>
                    <h1 class="auth-title">Set New Password</h1>
                    <p class="auth-subtitle">Enter your new password below</p>
                    
                    <form id="password-reset-form" class="auth-form">
                        <input type="hidden" id="reset-token" value="">
                        <div class="form-group">
                            <label class="form-label" for="new-password">New Password</label>
                            <input type="password" id="new-password" class="form-input" placeholder="Min. 8 characters" required minlength="8">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="new-password-confirm">Confirm New Password</label>
                            <input type="password" id="new-password-confirm" class="form-input" placeholder="Re-enter new password" required minlength="8">
                        </div>
                        <button type="submit" class="btn btn-primary btn-full" id="reset-submit">Reset Password</button>
                    </form>
                    
                    <div class="auth-message" id="password-reset-message"></div>
                    <div class="auth-footer">
                        <p><a href="#" onclick="window.lucaiApp.showView('login')">Back to Sign In</a></p>
                    </div>
                </div>
            </div>
            
            <!-- Chat view -->
            <div id="chat-view" class="view chat-view">
                <div class="chat-layout">
                    <!-- Sidebar -->
                    <aside class="sidebar" id="sidebar">
                        <div class="sidebar-header">
                            <div class="sidebar-logo">
                                <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
                                    <circle cx="20" cy="20" r="20" fill="url(#sidebar-gradient)"/>
                                    <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                                    <defs><linearGradient id="sidebar-gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                                </svg>
                                <span class="sidebar-title">lucAI</span>
                            </div>
                            <button class="theme-toggle-small" aria-label="Toggle theme">
                                <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41 1.41"/></svg>
                                <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
                            </button>
                        </div>
                        
                        <button class="new-chat-btn luc-btn luc-btn-primary" onclick="window.lucaiApp.newChat()">
                            <span class="btn-icon">+</span> New Chat
                        </button>
                        
                        <div class="conversations-list" id="conversations-list">
                            <div class="empty-state"><p>Loading conversations...</p></div>
                        </div>
                        
                        <div class="sidebar-footer">
                            <button class="luc-btn luc-btn-outline luc-btn-full" onclick="window.lucaiApp.logout()">Sign Out</button>
                        </div>
                    </aside>

                    <!-- Main Chat Area -->
                    <main class="main-content">
                        <header class="chat-header">
                            <div class="chat-header-left">
                                <button class="mobile-menu-button" aria-label="Toggle sidebar" onclick="window.lucaiApp.toggleSidebar()">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="3" y1="12" x2="21" y2="12"></line>
                                        <line x1="3" y1="6" x2="21" y2="6"></line>
                                        <line x1="3" y1="18" x2="21" y2="18"></line>
                                    </svg>
                                </button>
                                <div class="chat-header-logo">
                                    <svg width="24" height="24" viewBox="0 0 40 40" fill="none">
                                        <circle cx="20" cy="20" r="20" fill="url(#header-gradient)"/>
                                        <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                                        <defs><linearGradient id="header-gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                                    </svg>
                                </div>
                                <span class="chat-header-title" id="chat-header-title">New Chat</span>
                            </div>
                        </header>

                        <div class="messages-area" id="messages-area">
                            <div class="welcome-screen" id="welcome-screen">
                                <div class="welcome-logo">
                                    <svg width="64" height="64" viewBox="0 0 40 40" fill="none">
                                        <circle cx="20" cy="20" r="20" fill="url(#welcome-gradient)"/>
                                        <text x="20" y="26" text-anchor="middle" fill="white" font-family="Manrope" font-weight="700" font-size="20">l</text>
                                        <defs><linearGradient id="welcome-gradient" x1="0" y1="0" x2="40" y2="40"><stop stop-color="var(--luca-gold)"/><stop offset="1" stop-color="var(--luca-gold-active)"/></linearGradient></defs>
                                    </svg>
                                </div>
                                <h1 class="welcome-title">How can I help you?</h1>
                                <p class="welcome-subtitle">
                                    I'm lucAI, your assistant for the Luca Ecosystem. 
                                    Ask me about lucUI, our products, or how to build with Luca Ecosystem.
                                </p>
                                <div class="suggestion-chips">
                                    <button class="chip" onclick="window.lucaiApp.useSuggestion('What is lucUI?')">What is lucUI?</button>
                                    <button class="chip" onclick="window.lucaiApp.useSuggestion('How do I install lucUI?')">Install lucUI</button>
                                    <button class="chip" onclick="window.lucaiApp.useSuggestion('Help me design a card')">Design a card</button>
                                    <button class="chip" onclick="window.lucaiApp.useSuggestion('About Luca Ecosystem')">About Luca Ecosystem</button>
                                </div>
                            </div>
                            <div id="messages-container"></div>
                        </div>

                        <div class="input-area">
                            <div class="input-container">
                                <textarea 
                                    class="message-input" 
                                    id="message-input"
                                    placeholder="Message lucAI..." 
                                    rows="1"
                                    maxlength="4000"
                                ></textarea>
                                <button 
                                    class="send-button" 
                                    id="send-button"
                                    onclick="window.lucaiApp.sendMessage()"
                                    disabled
                                    aria-label="Send message"
                                >
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="22" y1="2" x2="11" y2="13"></line>
                                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                                    </svg>
                                </button>
                            </div>
                            <div class="input-hint">
                                <span>Press Enter to send, Shift+Enter for new line</span>
                                <span class="message-counter" id="message-counter">0/4000</span>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Theme Toggle -->
    <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
        <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41 1.41"/></svg>
        <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
    </button>
</body>
</html>
