{% extends "common/base.html" %}
{% from "components/header.html" import header %}

{% block title %}{{ instance.name }} - DocuPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}?v={{ 'css/settings.css'|asset_version }}">
{% endblock %}

{% block content %}
{{ header(
    title="Instance Details",
    description=instance.name + " for " + instance.company,
    icon="fa-server",
    buttons=[
        {
            'text': 'Back to Instances',
            'url': '/instances',
            'icon': 'fa-arrow-left',
            'class': 'btn-secondary'
        }
    ]
) }}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="row mb-4">
                <!-- Activity Status Card -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="status-icon-wrapper">
                                        <i class="fas fa-circle-notch fa-spin {% if instance.status == 'active' %}text-success{% else %}text-danger{% endif %} fa-2x"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title mb-1">Activity Status</h5>
                                    <p class="card-text mb-0">
                                        <span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}">
                                            {{ instance.status|title }}
                                        </span>
                                        {% if instance.status_details %}
                                        <small class="text-muted d-block mt-1">{{ instance.status_details }}</small>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Authentication Status Card -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="status-icon-wrapper">
                                        <i class="fas fa-shield-alt {% if instance.connection_token %}text-success{% else %}text-warning{% endif %} fa-2x"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title mb-1">Authentication Status</h5>
                                    <p class="card-text mb-0">
                                        <span class="badge bg-{{ 'success' if instance.connection_token else 'warning' }}">
                                            {{ 'Authenticated' if instance.connection_token else 'Not Authenticated' }}
                                        </span>
                                        {% if not instance.connection_token %}
                                        <small class="text-muted d-block mt-1">This instance needs to be authenticated</small>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabs Section -->
            <div class="card">
                <div class="card-header bg-white">
                    <ul class="nav nav-tabs card-header-tabs" id="instanceTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
                                <i class="fas fa-building me-2"></i>Company Information
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">
                                <i class="fas fa-users me-2"></i>Contacts
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs" type="button" role="tab" aria-controls="logs" aria-selected="false">
                                <i class="fas fa-history me-2"></i>Activity Logs
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="mails-tab" data-bs-toggle="tab" data-bs-target="#mails" type="button" role="tab" aria-controls="mails" aria-selected="false">
                                <i class="fas fa-envelope me-2"></i>Mail Logs
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="instanceTabsContent">
                        <!-- Overview Tab -->
                        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5 class="mb-3">Company Details</h5>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;" id="company-name-label">Company Name:</div>
                                            <div class="company-value" id="company-name-value">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Industry:</div>
                                            <div class="company-value" id="company-industry">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Description:</div>
                                            <div class="company-value" id="company-description">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Version:</div>
                                            <div class="company-value" id="instance-version-value">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Payment Plan:</div>
                                            <div class="company-value" id="instance-payment-plan-value">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Portainer Stack:</div>
                                            <div class="company-value">
                                                {% if instance.portainer_stack_name %}
                                                    <span class="badge bg-primary">{{ instance.portainer_stack_name }}</span>
                                                    {% if instance.portainer_stack_id %}
                                                        <small class="text-muted d-block mt-1">ID: {{ instance.portainer_stack_id }}</small>
                                                    {% endif %}
                                                {% else %}
                                                    <span class="text-muted">Not set</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5 class="mb-3">Contact Information</h5>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Email:</div>
                                            <div class="company-value" id="company-email">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Phone:</div>
                                            <div class="company-value" id="company-phone">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Website:</div>
                                            <div class="company-value" id="company-website">Loading...</div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex">
                                            <div class="text-muted me-2" style="min-width: 120px;">Address:</div>
                                            <div class="company-value" id="company-address">Loading...</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contacts Tab -->
                        <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="mb-0">Contact List</h5>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addContactModal">
                                    <i class="fas fa-plus me-2"></i>Add Contact
                                </button>
                            </div>
                            
                            <!-- Contacts Table -->
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Company</th>
                                            <th>Position</th>
                                            <th>Role</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="contactsTableBody">
                                        <tr>
                                            <td colspan="7" class="text-center">Loading contacts...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Logs Tab -->
                        <div class="tab-pane fade" id="logs" role="tabpanel" aria-labelledby="logs-tab">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card shadow-sm">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                <h5 class="card-title mb-0">Activity Log</h5>
                                                <div class="d-flex gap-2">
                                                    <select class="form-select form-select-sm" id="logCategory">
                                                        <option value="">All Categories</option>
                                                        <option value="AUTH">Authentication</option>
                                                        <option value="FILE">File Operations</option>
                                                        <option value="USER">User Management</option>
                                                        <option value="SYSTEM">System</option>
                                                    </select>
                                                    <select class="form-select form-select-sm" id="dateRangeFilter">
                                                        <option value="24h">Last 24 Hours</option>
                                                        <option value="7d" selected>Last 7 Days</option>
                                                        <option value="30d">Last 30 Days</option>
                                                        <option value="all">All Time</option>
                                                    </select>
                                                    <button class="btn btn-secondary btn-sm" id="clearLogFiltersBtn">
                                                        <i class="fas fa-times me-1"></i>Clear Filters
                                                    </button>
                                                </div>
                                            </div>

                                            <!-- Logs Table -->
                                            <div class="table-responsive">
                                                <table class="table table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th>Timestamp</th>
                                                            <th>Event Type</th>
                                                            <th>User</th>
                                                            <th>IP Address</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="logsTableBody">
                                                        <!-- Logs will be loaded here via JavaScript -->
                                                    </tbody>
                                                </table>
                                            </div>
                                            
                                            <!-- Pagination -->
                                            <nav aria-label="Logs pagination" class="mt-4">
                                                <ul class="pagination justify-content-center" id="logsPagination">
                                                    <!-- Pagination will be loaded here via JavaScript -->
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Mails Tab -->
                        <div class="tab-pane fade" id="mails" role="tabpanel" aria-labelledby="mails-tab">
                            <div class="card shadow-sm">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-4">
                                        <h5 class="card-title mb-0">Mail Log</h5>
                                        <div class="d-flex gap-2">
                                            <select class="form-select form-select-sm" id="statusFilter">
                                                <option value="">All Statuses</option>
                                                <option value="pending">Pending</option>
                                                <option value="sent">Sent</option>
                                                <option value="failed">Failed</option>
                                            </select>
                                            <select class="form-select form-select-sm" id="dateRangeFilter">
                                                <option value="24h">Last 24 Hours</option>
                                                <option value="7d" selected>Last 7 Days</option>
                                                <option value="30d">Last 30 Days</option>
                                                <option value="all">All Time</option>
                                            </select>
                                            <button class="btn btn-secondary btn-sm" id="clearFiltersBtn">
                                                <i class="fas fa-times me-1"></i>Clear Filters
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Mail Table -->
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Created At</th>
                                                    <th>Recipient</th>
                                                    <th>Subject</th>
                                                    <th>Sent At</th>
                                                </tr>
                                            </thead>
                                            <tbody id="mailsTableBody">
                                                <!-- Mails will be loaded here via JavaScript -->
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- Pagination -->
                                    <nav aria-label="Mails pagination" class="mt-4">
                                        <ul class="pagination justify-content-center" id="mailsPagination">
                                            <!-- Pagination will be loaded here via JavaScript -->
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Contact Modal -->
<div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addContactModalLabel">Add New Contact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addContactForm" onsubmit="addContact(event)">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">Phone</label>
                        <input type="tel" class="form-control" id="phone" name="phone">
                    </div>
                    <div class="mb-3">
                        <label for="company" class="form-label">Company</label>
                        <input type="text" class="form-control" id="company" name="company">
                    </div>
                    <div class="mb-3">
                        <label for="position" class="form-label">Position</label>
                        <input type="text" class="form-control" id="position" name="position">
                    </div>
                    <div class="mb-3">
                        <label for="role" class="form-label">Role</label>
                        <select class="form-select" id="role" name="role" required>
                            <option value="user">Standard User</option>
                            <option value="manager">Manager</option>
                            <option value="admin">Administrator</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add Contact</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Edit Contact Modal -->
<div class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editContactModalLabel">Edit Contact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editContactForm" onsubmit="updateContact(event)">
                    <input type="hidden" id="edit-contact-id" name="id">
                    <div class="mb-3">
                        <label for="edit-name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="edit-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="edit-email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit-phone" class="form-label">Phone</label>
                        <input type="tel" class="form-control" id="edit-phone" name="phone">
                    </div>
                    <div class="mb-3">
                        <label for="edit-company" class="form-label">Company</label>
                        <input type="text" class="form-control" id="edit-company" name="company">
                    </div>
                    <div class="mb-3">
                        <label for="edit-position" class="form-label">Position</label>
                        <input type="text" class="form-control" id="edit-position" name="position">
                    </div>
                    <div class="mb-3">
                        <label for="edit-role" class="form-label">Role</label>
                        <select class="form-select" id="edit-role" name="role" required>
                            <option value="user">Standard User</option>
                            <option value="manager">Manager</option>
                            <option value="admin">Administrator</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="edit-status" class="form-label">Status</label>
                        <select class="form-select" id="edit-status" name="status">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Contact Modal -->
<div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteContactModalLabel">Delete Contact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this contact? This action cannot be undone.</p>
                <div class="text-end">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Log Details Modal -->
<div class="modal fade" id="logDetailsModal" tabindex="-1" aria-labelledby="logDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logDetailsModalLabel">Log Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="logDetailsContent">
                <!-- Log details will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Mail Details Modal -->
<div class="modal fade" id="mailDetailsModal" tabindex="-1" aria-labelledby="mailDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mailDetailsModalLabel">Mail Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="mailDetailsContent">
                <!-- Mail details will be loaded here -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Pass instance data to JavaScript
window.instanceData = {
    id: {{ instance.id }},
    main_url: "{{ instance.main_url }}",
    connection_token: "{{ instance.connection_token or '' }}",
    company: "{{ instance.company or '' }}",
    status: "{{ instance.status or '' }}",
    status_details: "{{ instance.status_details or '' }}",
    portainer_stack_name: "{{ instance.portainer_stack_name or '' }}",
    portainer_stack_id: "{{ instance.portainer_stack_id or '' }}",
    deployed_version: "{{ instance.deployed_version or '' }}",
    deployed_branch: "{{ instance.deployed_branch or '' }}"
};
</script>
<script src="{{ url_for('static', filename='js/instance_detail.js') }}?v={{ 'js/instance_detail.js'|asset_version }}"></script>
{% endblock %}