{% extends "layouts/base.html" %}
{% block title %}Company Dashboard{% endblock %}
{% block extra_css %}
<style>
    .widget-installation {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
    }

    .code-container {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
        margin-top: 10px;
        position: relative;
    }

    .code-container pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .code-container code {
        color: #333;
        font-family: monospace;
    }

    .copy-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 6px 12px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
    }

    .copy-btn:hover {
        background: #0056b3;
    }

    .copy-btn.copied {
        background: #28a745;
    }

    .help-text {
        color: #666;
        font-size: 0.9em;
        margin: 5px 0 15px 0;
    }

    .file-upload-container {
        border: 2px dashed #ccc;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
        background: #f8f9fa;
    }

    .file-input {
        margin-bottom: 10px;
    }

    .uploaded-files {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 15px;
        justify-content: center;
    }

    .file-item {
        background: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #dee2e6;
    }

    .file-item span {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .delete-file {
        background: none;
        border: none;
        color: #dc3545;
        cursor: pointer;
        padding: 0 5px;
        font-size: 1.2em;
        line-height: 1;
    }

    .delete-file:hover {
        color: #bd2130;
    }
</style>
{% endblock %}
{% block content %}
<div class="stats-grid">
    <!-- <div class="stat-card">
        <div class="stat-icon bg-primary">
            <i class="fa-light fa-message-dots"></i>
        </div>
        <div class="stat-info">
            <h4>{{ total_chats }}</h4>
            <p>Total Chats</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon bg-success">
            <i class="fa-light fa-calendar-check"></i>
        </div>
        <div class="stat-info">
            <h4>{{ total_meetings }}</h4>
            <p>Scheduled Meetings</p>
        </div>
    </div> -->
    <!-- <div class="stat-card">
        <div class="stat-icon bg-warning">
            <i class="fa-light fa-users"></i>
        </div>
        <div class="stat-info">
            <h4>{{ total_users }}</h4>
            <p>Active Users</p>
        </div>
    </div> -->
    <!-- <div class="stat-card">
        <div class="stat-icon bg-info">
            <i class="fa-light fa-chart-line"></i>
        </div>
        <div class="stat-info">
            <h4>{{ response_rate }}%</h4>
            <p>Response Rate</p>
        </div>
    </div> -->
</div>

<!-- Company Profile Section -->
<div class="table-section">
    <div class="table-header">
        <h2>Company Information</h2>
    </div>

    <div class="table-container">
        <form id="profileForm" class="profile-form" enctype="multipart/form-data">
            <div class="form-group">
                <label>Instructions for AI</label>
                <textarea name="instructions" rows="15"
                    placeholder="Provide comprehensive instructions...">{{ company.instructions or '' }}</textarea>
            </div>
            <!-- <div class="form-group">
                <label>Additional Company Documents (PDF, Docx)</label>
                <div class="file-upload-container">
                    <input type="file" name="documents[]" id="company-docs" multiple accept=".pdf" class="file-input">
                    <p class="help-text">Upload PDFs, Docx containing additional company information, policies, or
                        documentation</p>
                    <div class="uploaded-files">
                        {% for doc in company_documents %}
                        <div class="file-item">
                            <span>{{ doc.file_name }}</span>
                            <button type="button" class="delete-file" data-id="{{ doc.id }}">×</button>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div> -->
            <div class="form-group">
                <label>Company's Email Address</label>
                <input type="email" name="email" id="company-email" value="{{ company.email or '' }}"
                    placeholder="example@gmail.com">
            </div>
            <div class="form-group">
                <label>Welcome Message</label>
                <input type="text" name="message" id="company-message" value="{{ company.welcome_message or '' }}">
            </div>
            <div class="table-actions">
                <button type="submit" class="action-button primary">
                    <i class="fa-light fa-save"></i>
                    <span>Save Changes</span>
                </button>
            </div>
        </form>
    </div>

    <div class="form-group" style="padding: 20px;">
        <label>Website URL</label>
        <input type="url" name="websiteUrl" id="websiteUrl-input" value="{{ company.website or '' }}"
            placeholder="https://example.com">
        <input type="hidden" value="{{ company.id }}" id="companyId">
        <button type="button" id="crawlUrlsBtn" class="action-button primary">
            <i class="fa-light fa-spider-web"></i>
            <span>Crawl URLs</span>
        </button>

        <!-- Widget Installation Section -->
        <div class="widget-installation mt-4" style="margin-top: 20px;">
            <h5>Chat Widget Installation</h5>
            <div class="code-container position-relative">
                <pre>
                    <code id="widgetCode"> 
                        &lt;script src="{{ request.url_root.replace('http://', 'https://') }}static/js/chat-widget.js">&lt;/script>
                        &lt;script>
                            document.addEventListener('DOMContentLoaded', function() {
                                new RonnieGPTWidget('{{ company[0] }}');
                            });
                        &lt;/script>
                    </code>
                </pre>
                <button type="button" class="copy-btn" onclick="copyWidgetCode()">
                    <i class="fas fa-copy"></i> Copy Code
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function copyWidgetCode() {
        const codeElement = document.getElementById('widgetCode');
        const textArea = document.createElement('textarea');
        textArea.value = codeElement.textContent.trim();
        document.body.appendChild(textArea);
        textArea.select();

        try {
            document.execCommand('copy');
            const copyBtn = document.querySelector('.copy-btn');
            copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
            copyBtn.classList.add('copied');

            // Reset button after 2 seconds
            setTimeout(() => {
                copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy Code';
                copyBtn.classList.remove('copied');
            }, 2000);
        } catch (err) {
            console.error('Failed to copy text: ', err);
        }

        document.body.removeChild(textArea);
    }
</script>
{% endblock %}