{% extends "base.html" %}

{% block styles %}
<style>
    .activity-log-container {
        max-height: 300px;
        overflow-y: auto;
    }

    .activity-item {
        border-left: 3px solid #667eea;
        padding-left: 1rem;
        margin-bottom: 1rem;
    }

    .activity-item.create {
        border-left-color: #28a745;
    }

    .activity-item.edit {
        border-left-color: #ffc107;
    }

    .activity-item.activate {
        border-left-color: #17a2b8;
    }

    .activity-item.delete {
        border-left-color: #dc3545;
    }

    .collapse-btn {
        transition: transform 0.2s ease;
    }

    .collapse-btn.collapsed i {
        transform: rotate(-90deg);
    }

    .tab-content-scroll {
        max-height: 400px;
        overflow-y: auto;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 fw-bold text-dark">{{ strategy.name }}</h1>
            <p class="text-muted mb-0">Strategy Overview & Performance</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editStrategyModal">
                <i class="bi bi-pencil-square me-1"></i>Edit Strategy
            </button>
            <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteStrategyModal">
                <i class="bi bi-trash me-1"></i>Delete
            </button>
            <span class="badge bg-primary fs-6 align-self-center ms-2">Active</span>
        </div>
    </div>

    <!-- Hypothesis -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <h5 class="fw-bold text-secondary text-uppercase small mb-3">Hypothesis</h5>
            <p class="fs-5 mb-0 font-monospace text-muted">{{ strategy.hypothesis or 'No hypothesis defined' }}</p>
        </div>
    </div>

    {% if case_study %}
    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white fw-bold">Period Configuration</div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Benchmark</span>
                        <span class="fw-medium">{{ case_study.benchmark_start_date }} <i
                                class="bi bi-arrow-right mx-1"></i> {{ case_study.benchmark_end_date }}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Post-Launch</span>
                        <span class="fw-medium text-primary">{{ case_study.post_start_date }} <i
                                class="bi bi-arrow-right mx-1"></i> {{ case_study.post_end_date }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white fw-bold">Integrations</div>
                <div class="card-body">
                    <div class="mb-2"><i class="bi bi-google me-2"></i> GA4: {{ case_study.ga4_property_id or 'Not
                        configured' }}</div>
                    <div><i class="bi bi-search me-2"></i> GSC: {{ case_study.gsc_site_url or 'Not configured' }}</div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Strategy Details -->
    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white fw-bold">Details</div>
                <div class="card-body">
                    <div class="mb-3">
                        <span class="text-muted small text-uppercase">Owners</span>
                        <p class="mb-0 fw-medium">{{ strategy.owners or 'Not assigned' }}</p>
                    </div>
                    <div class="mb-3">
                        <span class="text-muted small text-uppercase">Tags</span>
                        <p class="mb-0">
                            {% if strategy.tags %}
                            {% for tag in strategy.tags.split(',') %}
                            <span class="badge bg-light text-dark me-1">{{ tag.strip() }}</span>
                            {% endfor %}
                            {% else %}
                            <span class="text-muted">No tags</span>
                            {% endif %}
                        </p>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase">Created</span>
                        <p class="mb-0 fw-medium">{{ strategy.created_at.strftime('%Y-%m-%d %H:%M') if
                            strategy.created_at else 'Unknown' }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white fw-bold">Implementation Notes</div>
                <div class="card-body">
                    <p class="mb-0 text-muted">{{ strategy.implementation_notes or 'No implementation notes yet. Click
                        Edit to add notes.' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section (Placeholder) -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-5 text-center">
            <i class="bi bi-bar-chart-line display-1 text-light mb-3"></i>
            <h3 class="h5 fw-bold text-secondary">Performance Data</h3>
            <p class="text-muted">Data visualization will appear here once the background job completes.</p>
        </div>
    </div>

    <!-- Activity Log Tab Box -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white p-0">
            <ul class="nav nav-tabs" id="activityTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active fw-bold" id="activity-tab" data-bs-toggle="tab"
                        data-bs-target="#activity-content" type="button" role="tab" aria-controls="activity-content"
                        aria-selected="true">
                        <i class="bi bi-clock-history me-2"></i>Activity Log
                        {% if activity_logs %}
                        <span class="badge bg-primary ms-2">{{ activity_logs|length }}</span>
                        {% endif %}
                    </button>
                </li>
            </ul>
        </div>
        <div class="tab-content" id="activityTabContent">
            <div class="tab-pane fade show active" id="activity-content" role="tabpanel" aria-labelledby="activity-tab">
                <div class="card-body tab-content-scroll">
                    {% if activity_logs %}
                    {% for log in activity_logs %}
                    <div class="activity-item {{ log.action }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <span
                                    class="badge bg-{{ 'success' if log.action == 'create' else ('warning text-dark' if log.action == 'edit' else ('info' if log.action == 'activate' else 'secondary')) }} mb-1">
                                    {{ log.action|upper }}
                                </span>
                                <p class="mb-1 fw-medium">{{ log.details }}</p>
                                <small class="text-muted">
                                    <i class="bi bi-person me-1"></i>{{ log.user_email }}
                                </small>
                            </div>
                            <small class="text-muted text-nowrap">
                                <i class="bi bi-calendar me-1"></i>{{ log.created_at.strftime('%Y-%m-%d %H:%M') }}
                            </small>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                        No activity recorded yet.
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Strategy Modal -->
<div class="modal fade" id="editStrategyModal" tabindex="-1" aria-labelledby="editStrategyModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ url_for('reports.edit_strategy', id=strategy.id) }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold" id="editStrategyModalLabel">
                        <i class="bi bi-pencil-square text-primary me-2"></i>Edit Strategy
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <label class="form-label fw-bold">Strategy Name</label>
                        <input type="text" name="name" class="form-control form-control-lg" value="{{ strategy.name }}"
                            required>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">Hypothesis</label>
                        <textarea name="hypothesis" class="form-control" rows="3"
                            placeholder="What do we expect to happen?">{{ strategy.hypothesis or '' }}</textarea>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Owners</label>
                            <input type="text" name="owners" class="form-control" value="{{ strategy.owners or '' }}"
                                placeholder="Who is responsible?">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Tags</label>
                            <input type="text" name="tags" class="form-control" value="{{ strategy.tags or '' }}"
                                placeholder="Comma-separated tags">
                        </div>
                    </div>

                    <div class="mt-4">
                        <label class="form-label fw-bold">Implementation Notes</label>
                        <textarea name="implementation_notes" class="form-control" rows="4"
                            placeholder="Notes about implementation, learnings, etc.">{{ strategy.implementation_notes or '' }}</textarea>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-check-lg me-1"></i>Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Strategy Modal -->
<div class="modal fade" id="deleteStrategyModal" tabindex="-1" aria-labelledby="deleteStrategyModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ url_for('reports.delete_strategy', id=strategy.id) }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="modal-header border-0 bg-danger bg-opacity-10">
                    <h5 class="modal-title fw-bold text-danger" id="deleteStrategyModalLabel">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>Delete Strategy
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Are you sure you want to delete <strong>"{{ strategy.name }}"</strong>?</p>
                    <div class="alert alert-danger border-0">
                        <i class="bi bi-exclamation-circle me-2"></i>
                        <strong>Warning:</strong> This action cannot be undone. All associated data including:
                        <ul class="mb-0 mt-2">
                            <li>Case studies</li>
                            <li>KPIs and metrics</li>
                            <li>Reports and snapshots</li>
                            <li>Activity logs</li>
                        </ul>
                        will be permanently deleted.
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger px-4">
                        <i class="bi bi-trash me-1"></i>Delete Permanently
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}