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

{% block title %}{{ 'title'|trans({}, 'Tracker') }} — Shamra Academia{% endblock %}

{% block og_title %}{{ 'title'|trans({}, 'Tracker') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'page_description'|trans({}, 'Tracker') }}{% endblock %}
{% block metaDescription %}{{ 'page_description'|trans({}, 'Tracker') }}{% endblock %}
{% block metaKeywords %}research tracker, thesis progress, متابعة البحث, تقدم الرسالة, Shamra Academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --tracker-primary: #7c3aed;
            --tracker-primary-light: #8b5cf6;
            --tracker-primary-dark: #6d28d9;
            --tracker-success: #10b981;
            --tracker-warning: #f59e0b;
            --tracker-error: #ef4444;
            --tracker-bg: #f8f5ff;
            --tracker-border: #e9e0ff;
        }

        .tracker-page {
            max-width: 900px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* Header Section */
        .tracker-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .tracker-header h1 {
            font-size: 2rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 8px;
        }
        .tracker-header .tracker-subtitle {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

        /* Progress Section */
        .tracker-progress {
            background: linear-gradient(135deg, #f8f5ff, #eff6ff);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 30px;
        }
        .progress-bar-container {
            background: #e0d6f7;
            border-radius: 10px;
            height: 20px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        .progress-bar {
            background: linear-gradient(90deg, var(--tracker-primary), var(--tracker-primary-light));
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        .progress-stats {
            display: flex;
            justify-content: space-between;
            font-size: 0.95rem;
            color: #444;
        }
        .progress-percentage {
            font-weight: 700;
            color: var(--tracker-primary);
            font-size: 1.3rem;
        }

        /* Days Remaining Badge */
        .days-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }
        .days-badge.safe { background: #d1fae5; color: #065f46; }
        .days-badge.warning { background: #fef3c7; color: #92400e; }
        .days-badge.danger { background: #fee2e2; color: #991b1b; }

        /* Milestones List */
        .milestones-section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .milestone-card {
            background: #fff;
            border: 1px solid var(--tracker-border);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: all 0.2s;
        }
        .milestone-card:hover {
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
        }
        .milestone-card.completed {
            background: #f0fdf4;
            border-color: #bbf7d0;
        }
        .milestone-card.in-progress {
            background: #fffbeb;
            border-color: #fde68a;
        }

        .milestone-status-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid #ccc;
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .milestone-status-btn:hover {
            border-color: var(--tracker-primary);
        }
        .milestone-status-btn.completed {
            background: var(--tracker-success);
            border-color: var(--tracker-success);
            color: #fff;
        }
        .milestone-status-btn.in-progress {
            border-color: var(--tracker-warning);
            background: #fef3c7;
        }

        .milestone-content {
            flex: 1;
            min-width: 0;
        }
        .milestone-title {
            font-size: 1.05rem;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 4px;
        }
        .milestone-meta {
            font-size: 0.85rem;
            color: #666;
        }
        .milestone-notes {
            margin-top: 8px;
            padding: 10px;
            background: #f9f9fb;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #555;
        }

        .milestone-actions {
            display: flex;
            gap: 8px;
        }
        .milestone-btn {
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid var(--tracker-border);
            background: #fff;
            color: #666;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .milestone-btn:hover {
            background: var(--tracker-bg);
            color: var(--tracker-primary);
        }
        .milestone-btn.ai-btn {
            background: linear-gradient(135deg, var(--tracker-primary), var(--tracker-primary-light));
            color: #fff;
            border: none;
        }
        .milestone-btn.ai-btn:hover {
            opacity: 0.9;
        }

        /* Subtasks */
        .subtask-list {
            margin-top: 12px;
            padding-left: 20px;
        }
        .subtask-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            font-size: 0.9rem;
            color: #444;
        }
        .subtask-item.done {
            text-decoration: line-through;
            color: #999;
        }
        .subtask-checkbox {
            cursor: pointer;
        }

        /* Linked Resources */
        .resources-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }
        .resource-card {
            background: #fff;
            border: 1px solid var(--tracker-border);
            border-radius: 10px;
            padding: 16px;
            text-align: center;
        }
        .resource-card i {
            font-size: 1.8rem;
            color: var(--tracker-primary);
            margin-bottom: 8px;
        }
        .resource-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a1a2e;
        }
        .resource-label {
            font-size: 0.85rem;
            color: #666;
        }

        /* Deadlines Section */
        .deadlines-section {
            margin-top: 30px;
        }
        .deadline-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: #fff;
            border: 1px solid var(--tracker-border);
            border-radius: 10px;
            margin-bottom: 10px;
        }
        .deadline-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .deadline-date {
            font-weight: 600;
            color: var(--tracker-primary);
        }

        /* Add Custom Milestone */
        .add-milestone-btn {
            width: 100%;
            padding: 14px;
            border: 2px dashed var(--tracker-border);
            border-radius: 12px;
            background: transparent;
            color: #888;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .add-milestone-btn:hover {
            border-color: var(--tracker-primary);
            color: var(--tracker-primary);
        }

        /* Viability Score */
        .viability-section {
            background: #fff;
            border: 1px solid var(--tracker-border);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
        }
        .viability-score {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .viability-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--tracker-primary);
        }
        .viability-label {
            font-size: 1rem;
            color: #666;
        }
        .viability-bar {
            flex: 1;
            height: 8px;
            background: #e0d6f7;
            border-radius: 4px;
            overflow: hidden;
        }
        .viability-fill {
            height: 100%;
            background: var(--tracker-primary);
            border-radius: 4px;
        }

        /* Responsive */
        @media (max-width: 640px) {
            .progress-stats {
                flex-direction: column;
                gap: 8px;
            }
            .resources-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .milestone-actions {
                flex-direction: column;
            }
        }

        /* RTL Support */
        [dir="rtl"] .milestone-card {
            flex-direction: row-reverse;
        }
        [dir="rtl"] .subtask-list {
            padding-left: 0;
            padding-right: 20px;
        }
    </style>
{% endblock %}

{% block body %}
<div class="tracker-page" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
    <!-- Header -->
    <div class="tracker-header">
        <h1>
            <i class="fas fa-tasks"></i> 
            {{ tracker.title }}
        </h1>
        <div class="tracker-subtitle">
            {{ ('type.' ~ tracker.type)|trans({}, 'Tracker') }}
            {% if tracker.field %}
                · {{ app.request.locale == 'ar' ? tracker.field.arabicFullName : tracker.field.englishFullName }}
            {% endif %}
        </div>
        {% if stats.daysRemaining is not null %}
            <span class="days-badge {{ stats.daysRemaining > 30 ? 'safe' : (stats.daysRemaining > 7 ? 'warning' : 'danger') }}">
                <i class="fas fa-calendar-alt"></i>
                {% if stats.daysRemaining >= 0 %}
                    {{ 'days_remaining'|trans({'%days%': stats.daysRemaining}, 'Tracker') }}
                {% else %}
                    {{ 'days_overdue'|trans({'%days%': stats.daysRemaining|abs}, 'Tracker') }}
                {% endif %}
            </span>
        {% endif %}
    </div>

    <!-- Progress Bar -->
    <div class="tracker-progress">
        <div class="progress-bar-container">
            <div class="progress-bar" style="width: {{ stats.progressPercentage }}%"></div>
        </div>
        <div class="progress-stats">
            <span class="progress-percentage">{{ stats.progressPercentage }}%</span>
            <span>{{ 'milestones_completed'|trans({'%completed%': stats.completedMilestones, '%total%': stats.totalMilestones}, 'Tracker') }}</span>
            <span>{{ 'days_since_start'|trans({'%days%': stats.daysSinceStart}, 'Tracker') }}</span>
        </div>
    </div>

    <!-- Milestones -->
    <div class="milestones-section">
        <div class="section-title">
            <i class="fas fa-list-check"></i>
            {{ 'milestones'|trans({}, 'Tracker') }}
        </div>

        {% for milestone in tracker.milestones %}
            <div class="milestone-card {{ milestone.status }}" data-milestone-id="{{ milestone.id }}">
                <button class="milestone-status-btn {{ milestone.status }}" 
                        data-action="toggle-status"
                        title="{{ ('status.' ~ milestone.status)|trans({}, 'Tracker') }}">
                    {% if milestone.status == 'completed' %}
                        <i class="fas fa-check"></i>
                    {% elseif milestone.status == 'in_progress' %}
                        <i class="fas fa-spinner"></i>
                    {% endif %}
                </button>
                
                <div class="milestone-content">
                    <div class="milestone-title">
                        {{ app.request.locale == 'ar' ? milestone.titleAr : milestone.titleEn }}
                    </div>
                    <div class="milestone-meta">
                        {% if milestone.completedAt %}
                            {{ 'completed_on'|trans({'%date%': milestone.completedAt|date('Y-m-d')}, 'Tracker') }}
                        {% else %}
                            {{ ('status.' ~ milestone.status)|trans({}, 'Tracker') }}
                        {% endif %}
                    </div>

                    {% if milestone.notes %}
                        <div class="milestone-notes">{{ milestone.notes|nl2br }}</div>
                    {% endif %}

                    {% if milestone.hasSubtasks and milestone.subtasksJson %}
                        <div class="subtask-list">
                            {% for index, subtask in milestone.subtasksJson %}
                                <div class="subtask-item {{ subtask.done ? 'done' : '' }}">
                                    <input type="checkbox" class="subtask-checkbox" 
                                           data-milestone-id="{{ milestone.id }}"
                                           data-subtask-index="{{ index }}"
                                           {{ subtask.done ? 'checked' : '' }}>
                                    <span>{{ app.request.locale == 'ar' ? (subtask.titleAr ?? subtask.title) : subtask.title }}</span>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if milestone.linkedPapers|length > 0 %}
                        <div class="milestone-meta" style="margin-top: 8px;">
                            <i class="fas fa-paperclip"></i> 
                            {{ 'linked_papers'|trans({'%count%': milestone.linkedPapers|length}, 'Tracker') }}
                        </div>
                    {% endif %}
                </div>

                <div class="milestone-actions">
                    <button class="milestone-btn" data-action="edit-notes" data-milestone-id="{{ milestone.id }}">
                        <i class="fas fa-edit"></i>
                    </button>
                    {% if milestone.allowExperiments %}
                        <button class="milestone-btn" data-action="add-experiment" data-milestone-id="{{ milestone.id }}">
                            <i class="fas fa-flask"></i>
                        </button>
                    {% endif %}
                    <button class="milestone-btn ai-btn" data-action="ask-ai" data-milestone-id="{{ milestone.id }}">
                        <i class="fas fa-robot"></i>
                    </button>
                    {% if milestone.isCustom %}
                        <button class="milestone-btn" data-action="delete-milestone" data-milestone-id="{{ milestone.id }}">
                            <i class="fas fa-trash"></i>
                        </button>
                    {% endif %}
                </div>
            </div>
        {% endfor %}

        <button class="add-milestone-btn" data-action="add-milestone">
            <i class="fas fa-plus"></i> {{ 'add_milestone'|trans({}, 'Tracker') }}
        </button>
    </div>

    <!-- Linked Resources -->
    <div class="section-title">
        <i class="fas fa-link"></i>
        {{ 'linked_resources'|trans({}, 'Tracker') }}
    </div>
    <div class="resources-grid">
        <div class="resource-card">
            <i class="fas fa-book-reader"></i>
            <div class="resource-value">{{ stats.papersRead }}</div>
            <div class="resource-label">{{ 'papers_read'|trans({}, 'Tracker') }}</div>
        </div>
        <div class="resource-card">
            <i class="fas fa-folder"></i>
            <div class="resource-value">{{ stats.referencesSaved }}</div>
            <div class="resource-label">{{ 'references_saved'|trans({}, 'Tracker') }}</div>
        </div>
        <div class="resource-card">
            <i class="fas fa-pen-fancy"></i>
            <div class="resource-value">{{ stats.wordCount|number_format }}</div>
            <div class="resource-label">{{ 'words_written'|trans({}, 'Tracker') }}</div>
        </div>
        <div class="resource-card">
            <i class="fas fa-robot"></i>
            <div class="resource-value">{{ stats.aiSessions }}</div>
            <div class="resource-label">{{ 'ai_sessions'|trans({}, 'Tracker') }}</div>
        </div>
    </div>

    {% if stats.linkedListProgress %}
        <div class="resource-card" style="margin-top: 16px;">
            <i class="fas fa-book"></i>
            <div class="resource-value">{{ stats.linkedListProgress.read }}/{{ stats.linkedListProgress.total }}</div>
            <div class="resource-label">{{ 'reading_list_progress'|trans({}, 'Tracker') }}</div>
        </div>
    {% endif %}

    <!-- Viability Score -->
    {% if stats.viabilityScore is not null %}
        <div class="viability-section">
            <div class="section-title" style="margin-bottom: 16px;">
                <i class="fas fa-chart-line"></i>
                {{ 'viability_score'|trans({}, 'Tracker') }}
            </div>
            <div class="viability-score">
                <div class="viability-number">{{ stats.viabilityScore }}/5</div>
                <div style="flex: 1;">
                    <div class="viability-bar">
                        <div class="viability-fill" style="width: {{ (stats.viabilityScore / 5) * 100 }}%"></div>
                    </div>
                    <div class="viability-label">
                        {% if stats.viabilityScore >= 4 %}
                            {{ 'viability_excellent'|trans({}, 'Tracker') }}
                        {% elseif stats.viabilityScore >= 3 %}
                            {{ 'viability_good'|trans({}, 'Tracker') }}
                        {% else %}
                            {{ 'viability_consider_refining'|trans({}, 'Tracker') }}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <!-- Deadlines -->
    {% if stats.upcomingDeadlines|length > 0 %}
        <div class="deadlines-section">
            <div class="section-title">
                <i class="fas fa-clock"></i>
                {{ 'upcoming_deadlines'|trans({}, 'Tracker') }}
            </div>
            {% for deadline in stats.upcomingDeadlines %}
                <div class="deadline-item">
                    <div class="deadline-info">
                        <i class="fas fa-bell"></i>
                        <span>{{ deadline.title }}</span>
                    </div>
                    <div>
                        <span class="deadline-date">{{ deadline.deadlineDate|date('Y-m-d') }}</span>
                        <span class="days-badge {{ deadline.daysRemaining > 14 ? 'safe' : (deadline.daysRemaining > 3 ? 'warning' : 'danger') }}">
                            {{ deadline.daysRemaining }} {{ 'days'|trans({}, 'Tracker') }}
                        </span>
                        <button class="milestone-btn" data-action="delete-deadline" data-deadline-id="{{ deadline.id }}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <div style="margin-top: 20px;">
        <button class="milestone-btn" data-action="add-deadline">
            <i class="fas fa-calendar-plus"></i> {{ 'add_deadline'|trans({}, 'Tracker') }}
        </button>
    </div>

    <!-- Settings/Delete -->
    <div style="margin-top: 40px; text-align: center; border-top: 1px solid var(--tracker-border); padding-top: 20px;">
        <button class="milestone-btn" data-action="delete-tracker" style="color: var(--tracker-error);">
            <i class="fas fa-trash-alt"></i> {{ 'delete_tracker'|trans({}, 'Tracker') }}
        </button>
    </div>
</div>

<!-- Modals will be injected here by JS -->
<div id="tracker-modals"></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/tracker.js') }}" defer></script>
    <script>
        window.TRACKER_CONFIG = {
            locale: '{{ app.request.locale }}',
            trackerId: {{ tracker.id }},
            translations: {
                notesPlaceholder: '{{ "tracker.notes_placeholder"|trans({}, "Tracker")|e("js") }}',
                confirmDelete: '{{ "tracker.confirm_delete"|trans({}, "Tracker")|e("js") }}',
                confirmDeleteMilestone: '{{ "tracker.confirm_delete_milestone"|trans({}, "Tracker")|e("js") }}',
                milestoneTitleAr: '{{ "tracker.milestone_title_ar"|trans({}, "Tracker")|e("js") }}',
                milestoneTitleEn: '{{ "tracker.milestone_title_en"|trans({}, "Tracker")|e("js") }}',
                deadlineTitle: '{{ "tracker.deadline_title"|trans({}, "Tracker")|e("js") }}',
                deadlineDate: '{{ "tracker.deadline_date"|trans({}, "Tracker")|e("js") }}',
                experimentTitle: '{{ "tracker.experiment_title"|trans({}, "Tracker")|e("js") }}',
                save: '{{ "tracker.save"|trans({}, "Tracker")|e("js") }}',
                cancel: '{{ "tracker.cancel"|trans({}, "Tracker")|e("js") }}'
            },
            urls: {
                milestoneStatus: '{{ path("research_tracker_milestone_status", {id: "__ID__"}) }}',
                milestoneNotes: '{{ path("research_tracker_milestone_notes", {id: "__ID__"}) }}',
                milestoneSubtask: '{{ path("research_tracker_milestone_subtask", {id: "__ID__", index: "__INDEX__"}) }}',
                milestoneAdd: '{{ path("research_tracker_milestone_add") }}',
                milestoneRemove: '{{ path("research_tracker_milestone_remove", {id: "__ID__"}) }}',
                deadlineAdd: '{{ path("research_tracker_deadline_add") }}',
                deadlineRemove: '{{ path("research_tracker_deadline_remove", {id: "__ID__"}) }}',
                experimentAdd: '{{ path("research_tracker_experiment_add", {id: "__ID__"}) }}',
                deleteTracker: '{{ path("research_tracker_delete") }}'
            }
        };
    </script>
{% endblock %}