{% extends "base.html" %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">{{ _('User Report') }}</h1>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6">
    <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
        <div>
            <label for="user_id" class="form-label">
                <i class="fas fa-user mr-1"></i>User
            </label>
            <select name="user_id" id="user_id" class="form-input">
                <option value="">All Users</option>
                {% for user in users %}
                <option value="{{ user.id }}" {% if selected_user == user.id %}selected{% endif %}>{{ user.display_name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="project_id" class="form-label">
                <i class="fas fa-project-diagram mr-1"></i>Project
            </label>
            <select name="project_id" id="project_id" class="form-input">
                <option value="">All Projects</option>
                {% for project in projects %}
                <option value="{{ project.id }}" {% if selected_project == project.id %}selected{% endif %}>{{ project.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="start_date" class="form-label">
                <i class="fas fa-calendar mr-1"></i>Start Date
            </label>
            <input type="date" name="start_date" id="start_date" value="{{ start_date }}" class="form-input user-date-input">
        </div>
        <div>
            <label for="end_date" class="form-label">
                <i class="fas fa-calendar mr-1"></i>End Date
            </label>
            <input type="date" name="end_date" id="end_date" value="{{ end_date }}" class="form-input user-date-input">
        </div>
        <div class="self-end">
            <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition">
                <i class="fas fa-filter mr-2"></i>Filter
            </button>
        </div>
    </form>
    
    <!-- Export Buttons -->
    <div class="mt-4 flex flex-col gap-3">
        <div class="flex gap-2">
        <a href="{{ url_for('reports.export_user_excel', user_id=selected_user or '', project_id=selected_project or '', start_date=start_date, end_date=end_date) }}" 
           class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 inline-flex items-center">
            <i class="fas fa-file-excel mr-2"></i>{{ _('Export to Excel') }}
        </a>
        </div>

        <!-- Detailed export: one row per time entry (Issue #483) -->
        <form method="GET" action="{{ url_for('reports.export_user_entries_excel') }}" class="p-4 rounded-lg border border-border-light dark:border-border-dark bg-background-light/50 dark:bg-background-dark/30">
            <input type="hidden" name="user_id" value="{{ selected_user or '' }}">
            <input type="hidden" name="project_id" value="{{ selected_project or '' }}">
            <input type="hidden" name="start_date" value="{{ start_date }}">
            <input type="hidden" name="end_date" value="{{ end_date }}">

            <div class="flex flex-col gap-3">
                <div class="text-sm font-medium text-text-light dark:text-text-dark">
                    {{ _('Export entries (Excel)') }}
                    <span class="text-xs text-text-muted-light dark:text-text-muted-dark ml-2">{{ _('Select columns:') }}</span>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="date" checked> {{ _('Date') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="user" checked> {{ _('User') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="project" checked> {{ _('Project') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="task" checked> {{ _('Task') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="duration_hours" checked> {{ _('Duration (hours)') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="notes" checked> {{ _('Notes') }}</label>

                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="client"> {{ _('Client') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="tags"> {{ _('Tags') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="billable"> {{ _('Billable') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="source"> {{ _('Source') }}</label>

                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="start_time"> {{ _('Start Time') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="end_time"> {{ _('End Time') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="duration_formatted"> {{ _('Duration (formatted)') }}</label>
                    <label class="inline-flex items-center gap-2"><input type="checkbox" class="form-checkbox" name="columns" value="created_at"> {{ _('Created At') }}</label>
                </div>

                <div>
                    <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 inline-flex items-center">
                        <i class="fas fa-file-excel mr-2"></i>{{ _('Export entries (Excel)') }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
    <table class="w-full text-left responsive-cards">
        <thead>
            <tr>
                <th class="p-2">User</th>
                <th class="p-2">Total Hours</th>
                <th class="p-2">Regular Hours</th>
                <th class="p-2">Overtime Hours</th>
                <th class="p-2">Undertime Hours</th>
                <th class="p-2">Billable Hours</th>
                <th class="p-2">Days with Overtime</th>
            </tr>
        </thead>
        <tbody>
            {% for username, totals in user_totals.items() %}
            <tr class="border-b border-border-light dark:border-border-dark">
                <td class="p-2" data-label="User">{{ username }}</td>
                <td class="p-2 font-semibold" data-label="Total Hours">{{ "%.2f"|format(totals.hours) }}</td>
                <td class="p-2 text-green-600 dark:text-green-400" data-label="Regular Hours">
                    {{ "%.2f"|format(totals.regular_hours) if totals.regular_hours is defined else "%.2f"|format(totals.hours) }}
                </td>
                <td class="p-2" data-label="Overtime Hours">
                    {% if totals.overtime_hours is defined and totals.overtime_hours > 0 %}
                        <span class="text-orange-600 dark:text-orange-400 font-semibold">
                            <i class="fas fa-business-time mr-1"></i>{{ "%.2f"|format(totals.overtime_hours) }}
                        </span>
                    {% else %}
                        <span class="text-gray-400">0.00</span>
                    {% endif %}
                </td>
                <td class="p-2" data-label="Undertime Hours">
                    {% if totals.undertime_hours is defined and totals.undertime_hours > 0 %}
                        <span class="text-amber-600 dark:text-amber-400 font-medium">{{ "%.2f"|format(totals.undertime_hours) }}</span>
                    {% else %}
                        <span class="text-gray-400">0.00</span>
                    {% endif %}
                </td>
                <td class="p-2" data-label="Billable Hours">{{ "%.2f"|format(totals.billable_hours) }}</td>
                <td class="p-2 text-center" data-label="Days with Overtime">
                    {% if totals.days_with_overtime is defined and totals.days_with_overtime > 0 %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                            {{ totals.days_with_overtime }}
                        </span>
                    {% else %}
                        <span class="text-gray-400">-</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="7" class="p-8">
                    <div class="flex flex-col items-center justify-center text-center">
                        <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-gray-100 dark:bg-gray-800 mb-2">
                            <i class="fas fa-users text-xl text-text-muted-light dark:text-text-muted-dark"></i>
                        </div>
                        <p class="text-text-muted-light dark:text-text-muted-dark font-medium">{{ _('No data for the selected period.') }}</p>
                        <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">{{ _('Try a different date range or ensure time has been logged.') }}</p>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <!-- Overtime Summary -->
    {% if user_totals %}
    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-md">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">{{ _('About Overtime Tracking') }}</h3>
                <p class="text-xs text-blue-700 dark:text-blue-300 mt-1">
                    Overtime is calculated based on each user's standard working hours per day setting. 
                    Hours worked beyond the standard are counted as overtime. Users can configure their 
                    standard hours in <a href="{{ url_for('user.settings') }}" class="underline hover:text-blue-900 dark:hover:text-blue-100">Settings</a>.
                </p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}