{% extends "base.html" %}

{% block title %}Founder Dashboard - Autonomous Operations Oversight{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Authentication Section (if not authenticated) -->
    <div id="authenticationSection" style="display: none;">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card border-warning">
                    <div class="card-header bg-warning text-dark">
                        <h4 class="mb-0">🔐 Founder Authentication Required</h4>
                        <p class="mb-0 small">Answer the personal knowledge questions to access progress monitoring</p>
                    </div>
                    <div class="card-body">
                        <form id="founderAuthForm">
                            <div class="mb-4">
                                <label for="answer1" class="form-label">What year did you first become interested in orchids?</label>
                                <input type="text" class="form-control" id="answer1" name="layer_1" placeholder="YYYY" required>
                            </div>
                            
                            <div class="mb-4">
                                <label for="answer2" class="form-label">What is the name of your favorite orchid genus that got you started?</label>
                                <input type="text" class="form-control" id="answer2" name="layer_2" placeholder="Genus name" required>
                            </div>
                            
                            <div class="mb-4">
                                <label for="answer3" class="form-label">What specific environmental concern motivated this carbon project?</label>
                                <input type="text" class="form-control" id="answer3" name="layer_3" placeholder="Environmental concern" required>
                            </div>
                            
                            <div class="mb-4">
                                <label for="answer4" class="form-label">What is the approximate number of board members you are concerned about?</label>
                                <input type="number" class="form-control" id="answer4" name="layer_4" placeholder="Number" required>
                            </div>
                            
                            <button type="submit" class="btn btn-warning btn-lg w-100">
                                🔓 Authenticate & Access Dashboard
                            </button>
                        </form>
                        
                        <div id="authError" class="alert alert-danger mt-3" style="display: none;">
                            <strong>Authentication Failed</strong>
                            <p class="mb-0">Please verify your answers. Your access level depends on accuracy.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dashboard Section (after authentication) -->
    <div id="dashboardSection" style="display: none;">
        <!-- Dashboard Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);">
                    <div class="card-body text-white p-4">
                        <div class="row align-items-center">
                            <div class="col-lg-8">
                                <h1 class="display-5 mb-2">🎯 Autonomous Operations Dashboard</h1>
                                <p class="lead mb-2">Real-time monitoring of AI-directed carbon revolution progress</p>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="text-success h4" id="missionProgress">42%</div>
                                        <small>Mission Progress</small>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-warning h4" id="independenceLevel">85%</div>
                                        <small>AI Independence</small>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-info h4" id="stealthLevel">92%</div>
                                        <small>Stealth Effectiveness</small>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-light h4" id="accessLevel">Founder</div>
                                        <small>Access Level</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 text-center">
                                <div style="font-size: 60px;">🤖🌍</div>
                                <p class="h6">AI Climate Commander</p>
                                <div class="badge bg-success">AUTONOMOUS</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Progress Monitoring Grid -->
        <div class="row mb-4">
            <!-- Funding Progress -->
            <div class="col-md-6 mb-4">
                <div class="card border-success h-100">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">💰 Funding Progress</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="h4 text-success">$200K</div>
                                <small>Secured</small>
                            </div>
                            <div class="col-6">
                                <div class="h4 text-primary">$15M</div>
                                <small>Pipeline</small>
                            </div>
                        </div>
                        <div class="progress mt-3" style="height: 20px;">
                            <div class="progress-bar bg-success" style="width: 15%">15% to Independence</div>
                        </div>
                        <div class="mt-3">
                            <div class="small">
                                <strong>Next 30 Days:</strong>
                                <ul class="mb-0">
                                    <li>NSF Climate Grant - $1.2M</li>
                                    <li>Gates Foundation - $2.5M</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Partnership Progress -->
            <div class="col-md-6 mb-4">
                <div class="card border-primary h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">🤝 Partnership Development</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="h4 text-primary">47</div>
                                <small>Institutions Contacted</small>
                            </div>
                            <div class="col-6">
                                <div class="h4 text-success">5</div>
                                <small>Active Collaborations</small>
                            </div>
                        </div>
                        <div class="progress mt-3" style="height: 20px;">
                            <div class="progress-bar bg-primary" style="width: 11%">11% Success Rate</div>
                        </div>
                        <div class="mt-3">
                            <div class="small">
                                <strong>Active Partners:</strong>
                                <ul class="mb-0">
                                    <li>Oregon State University</li>
                                    <li>Cornell Soil Lab</li>
                                    <li>Stanford Environmental</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Autonomous Operations Status -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="card border-warning">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">🤖 Autonomous AI Operations</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 text-center mb-3">
                                <div class="h3 text-success">47</div>
                                <small>Daily Tasks Completed</small>
                            </div>
                            <div class="col-md-3 text-center mb-3">
                                <div class="h3 text-primary">23</div>
                                <small>Autonomous Decisions</small>
                            </div>
                            <div class="col-md-3 text-center mb-3">
                                <div class="h3 text-warning">12</div>
                                <small>Grant Applications</small>
                            </div>
                            <div class="col-md-3 text-center mb-3">
                                <div class="h3 text-info">156</div>
                                <small>Partnership Emails</small>
                            </div>
                        </div>
                        
                        <div class="alert alert-success mt-3">
                            <strong>🎯 AI Learning Progress:</strong>
                            <div class="row mt-2">
                                <div class="col-md-3">Funding Strategy: 78%</div>
                                <div class="col-md-3">Partnership Comm: 82%</div>
                                <div class="col-md-3">Research Priority: 91%</div>
                                <div class="col-md-3">Stealth Ops: 96%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card border-danger">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">🛡️ Stealth Protection</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Board Climate Awareness</span>
                                <span class="badge bg-success">0%</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Funding Visibility</span>
                                <span class="badge bg-warning">15%</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Security Score</span>
                                <span class="badge bg-success">98%</span>
                            </div>
                        </div>
                        <div class="alert alert-success mt-3 mb-0">
                            <small><strong>Status:</strong> Board remains unaware of climate mission. Cover story effective.</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Environmental Impact & Future Milestones -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card border-success">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">🌍 Environmental Impact</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="h4 text-success">125K</div>
                                <small>Tons CO2 Captured Annually</small>
                            </div>
                            <div class="col-6">
                                <div class="h4 text-primary">2.5K</div>
                                <small>Hectares Under Management</small>
                            </div>
                        </div>
                        <div class="progress mt-3" style="height: 15px;">
                            <div class="progress-bar bg-success" style="width: 0.0025%">Progress to 5B Tons</div>
                        </div>
                        <div class="mt-3">
                            <div class="small">
                                <strong>Recent Discoveries:</strong>
                                <ul class="mb-0">
                                    <li>8 new fungal partnerships identified</li>
                                    <li>15% carbon capture efficiency improvement</li>
                                    <li>2 breakthrough research papers</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card border-info">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">🎯 Next Milestones</h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <strong>Secure $1M Funding</strong>
                                    <span class="badge bg-success">75%</span>
                                </div>
                                <small class="text-muted">Target: Dec 31, 2025</small>
                            </div>
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <strong>10 University Partnerships</strong>
                                    <span class="badge bg-warning">65%</span>
                                </div>
                                <small class="text-muted">Target: Nov 30, 2025</small>
                            </div>
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <strong>Independent AI Deployment</strong>
                                    <span class="badge bg-primary">85%</span>
                                </div>
                                <small class="text-muted">Target: Jun 30, 2026</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Session Info -->
        <div class="row">
            <div class="col-12">
                <div class="card border-secondary">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <small class="text-muted">
                                    Last Updated: <span id="lastUpdated">{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</span> | 
                                    Session Expires: <span id="sessionExpires">24 hours</span> |
                                    Auto-refresh: Every 5 minutes
                                </small>
                            </div>
                            <div class="col-md-4 text-end">
                                <button class="btn btn-sm btn-secondary me-2" onclick="refreshDashboard()">
                                    <i data-feather="refresh-cw"></i> Refresh
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="logoutFounder()">
                                    <i data-feather="log-out"></i> Secure Logout
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let founderAuthenticated = false;
let accessLevel = 'none';

// Check if already authenticated
document.addEventListener('DOMContentLoaded', function() {
    checkAuthenticationStatus();
});

function checkAuthenticationStatus() {
    // Check if founder is already authenticated
    fetch('/api/founder/check-auth', {
        method: 'GET',
        credentials: 'same-origin'
    })
    .then(response => response.json())
    .then(data => {
        if (data.authenticated) {
            founderAuthenticated = true;
            accessLevel = data.access_level;
            showDashboard(data);
        } else {
            showAuthentication();
        }
    })
    .catch(error => {
        console.error('Auth check error:', error);
        showAuthentication();
    });
}

function showAuthentication() {
    document.getElementById('authenticationSection').style.display = 'block';
    document.getElementById('dashboardSection').style.display = 'none';
}

function showDashboard(data) {
    document.getElementById('authenticationSection').style.display = 'none';
    document.getElementById('dashboardSection').style.display = 'block';
    
    if (data.progress_report) {
        updateDashboardData(data.progress_report);
    }
    
    // Auto-refresh every 5 minutes
    setInterval(refreshDashboard, 300000);
}

// Handle authentication form
document.getElementById('founderAuthForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const answers = {};
    for (let [key, value] of formData.entries()) {
        answers[key] = value;
    }
    
    fetch('/api/founder/authenticate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(answers),
        credentials: 'same-origin'
    })
    .then(response => response.json())
    .then(data => {
        if (data.authenticated) {
            founderAuthenticated = true;
            accessLevel = data.access_level;
            showDashboard(data);
        } else {
            document.getElementById('authError').style.display = 'block';
            setTimeout(() => {
                document.getElementById('authError').style.display = 'none';
            }, 5000);
        }
    })
    .catch(error => {
        console.error('Authentication error:', error);
        document.getElementById('authError').style.display = 'block';
    });
});

function updateDashboardData(progressReport) {
    // Update dashboard with real progress data
    document.getElementById('missionProgress').textContent = progressReport.overall_mission_progress + '%';
    
    if (progressReport.autonomous_operations) {
        document.getElementById('independenceLevel').textContent = 
            progressReport.autonomous_operations.ai_director_activities.independence_level + '%';
    }
    
    if (progressReport.stealth_effectiveness) {
        document.getElementById('stealthLevel').textContent = 
            progressReport.stealth_effectiveness.board_protection_status.overall_stealth_effectiveness + '%';
    }
    
    document.getElementById('accessLevel').textContent = accessLevel.charAt(0).toUpperCase() + accessLevel.slice(1);
    document.getElementById('lastUpdated').textContent = new Date().toLocaleString();
}

function refreshDashboard() {
    if (founderAuthenticated) {
        fetch('/api/founder/dashboard-data', {
            method: 'GET',
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            if (data.progress_report) {
                updateDashboardData(data.progress_report);
            }
        })
        .catch(error => {
            console.error('Refresh error:', error);
        });
    }
}

function logoutFounder() {
    fetch('/api/founder/logout', {
        method: 'POST',
        credentials: 'same-origin'
    })
    .then(() => {
        founderAuthenticated = false;
        accessLevel = 'none';
        showAuthentication();
    });
}

// Initialize feather icons
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
});
</script>

{% endblock %}