{% extends "base.html" %}

{% 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">Dashboard</h1>
            <p class="text-muted">Welcome back, {{ current_user.company_name or 'User' }}</p>
        </div>
        <a href="{{ url_for('wizard.new') }}" class="btn btn-primary btn-lg shadow-sm">
            <i class="bi bi-plus-lg me-2"></i>New Strategy
        </a>
    </div>

    <!-- Stats Cards -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm gradient-bg overflow-hidden h-100">
                <div class="card-body p-4 text-white">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="mb-1 opacity-75 fw-medium">Active Strategies</p>
                            <h3 class="fw-bold mb-0">{{ stats.active_strategies }}</h3>
                        </div>
                        <div class="bg-white bg-opacity-25 rounded p-2">
                            <i class="bi bi-lightning-charge fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-1 fw-medium">Reports Generated</p>
                            <h3 class="fw-bold text-dark mb-0">{{ stats.total_reports }}</h3>
                        </div>
                        <div class="bg-light rounded p-2 text-primary">
                            <i class="bi bi-file-earmark-bar-graph fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <p class="text-muted mb-1 fw-medium">Data Points</p>
                            <h3 class="fw-bold text-dark mb-0">{{ stats.data_points }}</h3>
                        </div>
                        <div class="bg-light rounded p-2 text-success">
                            <i class="bi bi-database fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Strategies -->
    <h3 class="h5 fw-bold text-secondary mb-3">Recent Strategies</h3>
    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="border-0 ps-4 py-3 text-secondary small text-uppercase">Strategy Name</th>
                        <th class="border-0 py-3 text-secondary small text-uppercase">Status</th>
                        <th class="border-0 py-3 text-secondary small text-uppercase">Created</th>
                        <th class="border-0 py-3 text-secondary small text-uppercase">Owners</th>
                        <th class="border-0 py-3 text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for strategy in strategies %}
                    <tr>
                        <td class="ps-4 fw-medium text-dark">
                            <a href="{{ url_for('reports.view_strategy', id=strategy.id) }}"
                                class="text-decoration-none text-dark">
                                {{ strategy.name }}
                            </a>
                        </td>
                        <td>
                            <span class="badge bg-light text-primary border border-primary-subtle rounded-pill px-3">
                                Active
                            </span>
                        </td>
                        <td class="text-muted small">{{ strategy.created_at.strftime('%Y-%m-%d') }}</td>
                        <td class="text-muted small">{{ strategy.owners or '-' }}</td>
                        <td class="text-end pe-4">
                            <a href="{{ url_for('reports.view_strategy', id=strategy.id) }}"
                                class="btn btn-sm btn-light me-1">
                                View
                            </a>
                            <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                data-bs-target="#deleteModal{{ strategy.id }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                            No strategies found. Click "New Strategy" to get started.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Delete Modals -->
{% for strategy in strategies %}
<div class="modal fade" id="deleteModal{{ strategy.id }}" tabindex="-1" 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">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>Delete Strategy
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Are you sure you want to delete <strong>"{{ strategy.name }}"</strong>?</p>
                    <p class="small text-danger mb-0">
                        <i class="bi bi-exclamation-circle me-1"></i>
                        This action cannot be undone. All associated data will be permanently deleted.
                    </p>
                </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">
                        <i class="bi bi-trash me-1"></i>Delete
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}