{% extends 'layout.html.twig' %}

{% block title %}{{ project.name }} - Honeyguide M&E{% endblock %}

{% block page_title %}{{ project.name }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-sm">
        <a href="{{ path('app_projects') }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Projects</a>
        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <span class="text-gray-900 dark:text-white">{{ project.name }}</span>
    </nav>

    <!-- Project Header -->
    <div class="dashboard-card">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div class="flex-1">
                <div class="flex items-center gap-3 mb-2">
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ project.name }}</h1>
                    <span class="badge {{ project.status == 'active' ? 'badge-success' : (project.status == 'completed' ? 'badge-info' : 'badge-warning') }}">
                        {{ project.status }}
                    </span>
                </div>
                <p class="text-gray-600 dark:text-gray-400">{{ project.description ?? 'No description provided' }}</p>
            </div>
            <div class="flex gap-2">
                <button class="btn-secondary">Edit</button>
                <button class="btn-primary">Add Indicator</button>
            </div>
        </div>

        <!-- Progress -->
        <div class="mt-6">
            <div class="flex items-center justify-between text-sm mb-2">
                <span class="text-gray-600 dark:text-gray-400">Overall Progress</span>
                <span class="font-semibold text-gray-900 dark:text-white">{{ project.progressPercentage|number_format(1) }}%</span>
            </div>
            <div class="w-full h-3 bg-gray-200 dark:bg-gray-700 rounded-full">
                <div class="h-3 rounded-full transition-all {{ project.progressPercentage >= 75 ? 'bg-green-500' : (project.progressPercentage >= 50 ? 'bg-blue-500' : (project.progressPercentage >= 25 ? 'bg-yellow-500' : 'bg-red-500')) }}" style="width: {{ project.progressPercentage }}%"></div>
            </div>
        </div>

        <!-- Meta info -->
        <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Start Date</p>
                <p class="font-medium text-gray-900 dark:text-white">{{ project.startDate|date('M d, Y') }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">End Date</p>
                <p class="font-medium text-gray-900 dark:text-white">{{ project.endDate ? project.endDate|date('M d, Y') : 'Ongoing' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Budget</p>
                <p class="font-medium text-gray-900 dark:text-white">${{ project.budget|number_format(0) }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Locations</p>
                <p class="font-medium text-gray-900 dark:text-white">{{ project.locations|length }} sites</p>
            </div>
        </div>
    </div>

    <!-- Indicators -->
    <div class="dashboard-card">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Indicators</h2>
            <button class="btn-secondary text-sm">Add Indicator</button>
        </div>

        {% if project.indicators|length > 0 %}
        <div class="space-y-4">
            {% for indicator in project.indicators %}
            <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <h3 class="font-medium text-gray-900 dark:text-white">{{ indicator.name }}</h3>
                            <span class="badge badge-info">{{ indicator.category }}</span>
                        </div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ indicator.description }}</p>
                    </div>
                    <div class="flex items-center gap-6">
                        <div class="text-center">
                            <p class="text-xs text-gray-500 dark:text-gray-400">Baseline</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ indicator.baselineValue }} {{ indicator.unit }}</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs text-gray-500 dark:text-gray-400">Current</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ indicator.currentValue ?? '-' }} {{ indicator.unit }}</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs text-gray-500 dark:text-gray-400">Target</p>
                            <p class="font-semibold text-gray-900 dark:text-white">{{ indicator.targetValue }} {{ indicator.unit }}</p>
                        </div>
                        <div class="w-24">
                            <div class="flex items-center justify-between text-xs mb-1">
                                <span class="text-gray-500 dark:text-gray-400">Progress</span>
                                <span class="font-medium text-gray-900 dark:text-white">{{ indicator.progressPercentage|number_format(0) }}%</span>
                            </div>
                            <div class="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-full">
                                <div class="h-2 rounded-full {{ indicator.progressPercentage >= 75 ? 'bg-green-500' : (indicator.progressPercentage >= 50 ? 'bg-blue-500' : (indicator.progressPercentage >= 25 ? 'bg-yellow-500' : 'bg-red-500')) }}" style="width: {{ indicator.progressPercentage }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500 dark:text-gray-400 text-center py-8">No indicators defined for this project</p>
        {% endif %}
    </div>

    <!-- Activities -->
    <div class="dashboard-card">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Activities</h2>
            <button class="btn-secondary text-sm">Add Activity</button>
        </div>

        {% if project.activities|length > 0 %}
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Activity</th>
                        <th>Category</th>
                        <th>Planned Date</th>
                        <th>Participants</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for activity in project.activities %}
                    <tr>
                        <td>
                            <div class="font-medium text-gray-900 dark:text-white">{{ activity.name }}</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ activity.description|default('-')|slice(0, 50) }}...</div>
                        </td>
                        <td><span class="badge badge-info">{{ activity.category }}</span></td>
                        <td>{{ activity.plannedDate|date('M d, Y') }}</td>
                        <td>{{ activity.participantCount ?? '-' }}</td>
                        <td>
                            <span class="badge {{ activity.status == 'completed' ? 'badge-success' : (activity.status == 'in_progress' ? 'badge-info' : (activity.isOverdue ? 'badge-danger' : 'badge-warning')) }}">
                                {{ activity.isOverdue and activity.status != 'completed' ? 'Overdue' : activity.status }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-gray-500 dark:text-gray-400 text-center py-8">No activities planned for this project</p>
        {% endif %}
    </div>
</div>
{% endblock %}