{% extends "layout.html" %}

{% block content %}
<div class="admin-container">
    <div class="admin-header">
        <h1>Company Management</h1>
        <div class="admin-actions">
            <a href="{{ url_for('setup_company') }}" class="btn btn-md btn-success">Create New Company</a>
            <a href="{{ url_for('edit_company') }}" class="btn btn-md btn-primary">Edit Company</a>
        </div>
    </div>
    
    <!-- Company Information Section -->
    <div class="admin-section">
        <h2>Company Information</h2>
        <div class="company-info-grid">
            <div class="info-card">
                <div class="info-header">
                    <h3>{{ company.name }}</h3>
                    <span class="status-badge {% if company.is_active %}status-active{% else %}status-blocked{% endif %}">
                        {{ 'Active' if company.is_active else 'Inactive' }}
                    </span>
                </div>
                <div class="info-details">
                    <div class="detail-row">
                        <span class="detail-label">Company Code:</span>
                        <span class="detail-value">{{ company.slug }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Created:</span>
                        <span class="detail-value">{{ company.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Max Users:</span>
                        <span class="detail-value">{{ company.max_users or 'Unlimited' }}</span>
                    </div>
                    {% if company.description %}
                    <div class="detail-row">
                        <span class="detail-label">Description:</span>
                        <span class="detail-value">{{ company.description }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Section -->
    <div class="stats-section">
        <h2>Company Statistics</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <h3>{{ stats.total_users }}</h3>
                <p>Total Users</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.total_teams }}</h3>
                <p>Teams</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.total_projects }}</h3>
                <p>Total Projects</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.active_projects }}</h3>
                <p>Active Projects</p>
            </div>
        </div>
    </div>

    <!-- Management Actions -->
    <div class="admin-section">
        <h2>Management</h2>
        <div class="admin-panel">
            <div class="admin-card">
                <h3>Users</h3>
                <p>Manage user accounts, roles, and permissions within your company.</p>
                <a href="{{ url_for('company_users') }}" class="btn btn-secondary">Manage Users</a>
            </div>
            
            <div class="admin-card">
                <h3>Teams</h3>
                <p>Create and manage teams to organize your company structure.</p>
                <a href="{{ url_for('admin_teams') }}" class="btn btn-secondary">Manage Teams</a>
            </div>
            
            <div class="admin-card">
                <h3>Projects</h3>
                <p>Set up and manage projects for time tracking and organization.</p>
                <a href="{{ url_for('admin_projects') }}" class="btn btn-secondary">Manage Projects</a>
            </div>
            
            <div class="admin-card">
                <h3>Settings</h3>
                <p>Configure system-wide settings and preferences.</p>
                <a href="{{ url_for('admin_settings') }}" class="btn btn-secondary">System Settings</a>
            </div>
        </div>
    </div>

    <!-- Company Code Section -->
    <div class="admin-section">
        <h2>User Registration</h2>
        <div class="registration-info">
            <p>Share this company code with new users for registration:</p>
            <div class="code-display">
                <input type="text" value="{{ company.slug }}" readonly id="companyCode" class="code-input">
                <button class="btn btn-primary" onclick="copyToClipboard()">Copy Code</button>
            </div>
            <p class="help-text">New users will need this code when registering for your company.</p>
        </div>
    </div>
</div>

<script>
function copyToClipboard() {
    const codeInput = document.getElementById('companyCode');
    codeInput.select();
    codeInput.setSelectionRange(0, 99999);
    document.execCommand('copy');
    
    // Show feedback
    const button = event.target;
    const originalText = button.textContent;
    button.textContent = 'Copied!';
    button.classList.add('btn-success');
    button.classList.remove('btn-primary');
    
    setTimeout(() => {
        button.textContent = originalText;
        button.classList.remove('btn-success');
        button.classList.add('btn-primary');
    }, 2000);
}
</script>

<style>
.company-info-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.info-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}

.info-header h3 {
    margin: 0;
    color: #333;
}

.info-details {
    display: grid;
    gap: 8px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
}

.detail-label {
    font-weight: 600;
    color: #666;
}

.detail-value {
    color: #333;
}

.registration-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.code-display {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.code-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-family: monospace;
    font-size: 14px;
}

.help-text {
    margin: 0;
    color: #666;
    font-size: 14px;
}
</style>
{% endblock %}