{% extends "layouts/mobile_base.twig" %}
{% set active_nav = 'tasks' %}

{% block title %}{{ translations.task ?? 'Task' }}{% endblock %}
{% block page_title %}{{ translations.task ?? 'Task' }}{% endblock %}
{% block page_subtitle %}
    {{ translations.task_details ?? 'Details & completion' }}
{% endblock %}

{% block head %}
    <style>
        /* (Twoje style zostawiam bez zmian) */
        .card{ border-radius:18px; border:1px solid rgba(0,0,0,.06); }
        .soft{ background: rgba(255,255,255,.92); }
        .hero{ border-radius:22px; border:1px solid rgba(0,0,0,.06); background: linear-gradient(135deg, rgba(67,94,190,.12), rgba(255,255,255,1) 55%); overflow:hidden; }
        .hero-top{ padding:14px 14px 10px; }
        .task-title{ margin:0; font-weight:950; letter-spacing:-0.02em; font-size:1.1rem; line-height:1.2; color:#2f3a73; }
        .task-path{ margin-top:8px; display:flex; flex-wrap:wrap; gap:8px; color:#6c757d; font-size:.82rem; }
        .pill{ display:inline-flex; align-items:center; gap:6px; padding:.28rem .55rem; border-radius:999px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.92); font-weight:900; font-size:.72rem; color:#495057; white-space:nowrap; }
        .pill-prio{ border-color: rgba(220,53,69,.25); background: rgba(220,53,69,.08); color:#842029; }
        .pill-mand{ border-color: rgba(255,193,7,.35); background: rgba(255,193,7,.14); color:#6c4b00; }
        .pill-photo{ border-color: rgba(13,202,240,.30); background: rgba(13,202,240,.10); color:#055160; }
        .section-title{ font-weight:950; letter-spacing:-0.02em; font-size:1.02rem; margin: 14px 0 10px; }
        .desc{ color:#495057; font-size:.95rem; line-height:1.45; white-space:pre-line; }
        .meta-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
        .meta-item{ border-radius:16px; border:1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.96); padding:10px 10px; }
        .meta-label{ color:#6c757d; font-size:.78rem; font-weight:800; }
        .meta-value{ margin-top:3px; font-weight:950; font-size:.95rem; color:#212529; }
        .helper{ display:flex; gap:10px; align-items:flex-start; padding:.7rem .75rem; border-radius:16px; border:1px solid rgba(67,94,190,.18); background: rgba(67,94,190,.08); color:#2f3a73; font-size:.88rem; font-weight:700; }
        .helper i{ font-size:1.05rem; margin-top:1px; }
        .btn-primary{ border-radius:14px; padding:.95rem 1rem; font-weight:950; }
        .btn-soft{ border-radius:14px; padding:.85rem .95rem; font-weight:900; border:1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.9); }
        .sticky-actions{ position: sticky; bottom: 0; padding-top: 12px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 35%); }

        .photo-preview{ width:100%; border-radius:16px; border:1px solid rgba(0,0,0,.08); overflow:hidden; background:#fff; display:none; }
        .photo-preview img{ width:100%; height:auto; display:block; }
        .req{ color:#842029; font-weight:900; }

        .mini-note{ color:#6c757d; font-size:.82rem; margin-top:6px; }
    </style>
{% endblock %}

{% block content %}

    {% set prio = task.getPriority()|default(0) %}
    {% set freq = task.getFrequency()|default('') %}
    {% set mand = task.getIsMandatory() ? 1 : 0 %}
    {% set isPhotoReq = task.getRequiresPhoto() ? 1 : 0 %}

    {# Wybór daty wykonania (ważne dla API) #}
    {% set scheduled_for_date = selected_date|default("now"|date("Y-m-d")) %}
    {# Godzina (jeśli task ma execution_time) #}
    {% set scheduled_time = task.getExecutionTime() ? task.getExecutionTime() : '00:00:00' %}

    {# HERO #}
    <div class="hero mb-3">
        <div class="hero-top">
            <h2 class="task-title">{{ task.getName() }}</h2>

            <div class="task-path">
                {% if task.getSectionName() %}<span class="pill"><i class="bi bi-diagram-3"></i>{{ task.getSectionName() }}</span>{% endif %}
                {% if task.getCategoryName() %}<span class="pill"><i class="bi bi-collection"></i>{{ task.getCategoryName() }}</span>{% endif %}
                {% if task.getSubcategoryName() %}<span class="pill"><i class="bi bi-tag"></i>{{ task.getSubcategoryName() }}</span>{% endif %}

                {% if prio %}<span class="pill pill-prio"><i class="bi bi-flag"></i>P{{ prio }}</span>{% endif %}
                {% if mand %}<span class="pill pill-mand"><i class="bi bi-exclamation-triangle"></i>{{ translations.mandatory ?? 'Mandatory' }}</span>{% endif %}
                {% if isPhotoReq %}<span class="pill pill-photo"><i class="bi bi-camera"></i>{{ translations.photo_required ?? 'Photo required' }}</span>{% endif %}
            </div>

            <div class="mini-note">
                <i class="bi bi-calendar3 me-1"></i>
                {{ translations.scheduled_for ?? 'Scheduled for' }}: <strong>{{ scheduled_for_date }}</strong>
                {% if scheduled_time and scheduled_time != '00:00:00' %}
                    • <i class="bi bi-clock ms-1 me-1"></i><strong>{{ scheduled_time|slice(0,5) }}</strong>
                {% endif %}
            </div>
        </div>
    </div>

    {# DETAILS #}
    <div class="card soft mb-3">
        <div class="card-body">
            <div class="section-title">{{ translations.details ?? 'Details' }}</div>

            {% if task.getDescription() %}
                <div class="desc">{{ task.getDescription() }}</div>
            {% else %}
                <div class="text-muted">{{ translations.no_description ?? 'No description.' }}</div>
            {% endif %}

            <div class="section-title mt-3">{{ translations.metadata ?? 'Info' }}</div>

            <div class="meta-grid">
                <div class="meta-item">
                    <div class="meta-label">{{ translations.frequency ?? 'Frequency' }}</div>
                    <div class="meta-value">{{ freq ?: '-' }}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">{{ translations.execution_time ?? 'Execution time' }}</div>
                    <div class="meta-value">
                        {% if task.getExecutionTime() %}{{ task.getExecutionTime()|slice(0,5) }}{% else %}-{% endif %}
                    </div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">{{ translations.day_of_week ?? 'Day' }}</div>
                    <div class="meta-value">{{ task.getDayOfWeek() ?: '-' }}</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">{{ translations.priority ?? 'Priority' }}</div>
                    <div class="meta-value">{{ prio ?: '-' }}</div>
                </div>
            </div>
        </div>
    </div>

    {# COMPLETION #}
    <div class="card soft mb-4">
        <div class="card-body">
            <div class="section-title">{{ translations.complete_task ?? 'Complete task' }}</div>

            {% if isPhotoReq %}
                <div class="helper mb-3">
                    <i class="bi bi-camera"></i>
                    <div>
                        {{ translations.photo_required_hint ?? 'This task requires a photo as proof.' }}
                        <div class="text-muted small mt-1">
                            <span class="req">*</span> {{ translations.photo_required_before_done ?? 'You cannot mark it done without a photo.' }}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if errors.photo_upload is defined %}
                <div class="alert alert-danger" style="border-radius:16px;">
                    {{ errors.photo_upload }}
                </div>
            {% endif %}

            {# UWAGA: endpoint w kontrolerze to POST /tasks/{id} #}
            <form method="POST"
                  action="{{ ROOT }}/tasks/{{ task.getId() }}"
                  enctype="multipart/form-data"
                  id="completeForm">

                {# wymagane przez API #}
                <input type="hidden" name="task_id" value="{{ task.getId() }}">
                <input type="hidden" name="scheduled_for_date" value="{{ scheduled_for_date }}">
                <input type="hidden" name="scheduled_time" value="{{ scheduled_time }}">
                <input type="hidden" name="status" value="DONE">

                <div class="mb-3">
                    <label class="form-label fw-bold">{{ translations.note ?? 'Note' }}</label>
                    <textarea class="form-control"
                              name="note"
                              rows="4"
                              placeholder="{{ translations.note_placeholder ?? 'Add a short note (optional)…' }}">{{ old('note') }}</textarea>
                </div>

                {# Foto UI (dopóki API nie przyjmie pliku, backend aplikacji musi to ogarnąć osobno) #}
                <div class="mb-3">
                    <label class="form-label fw-bold">
                        {{ translations.photo ?? 'Photo' }}
                        {% if isPhotoReq %}<span class="req">*</span>{% endif %}
                    </label>

                    <input type="file"
                           class="form-control"
                           name="photo"
                           id="photoInput"
                           accept="image/*"
                           capture="environment">
                    <div class="alert alert-danger mt-2" id="photoError" style="display:none; border-radius:16px;">
                        <strong>{{ translations.photo_upload_error ?? 'Photo problem' }}:</strong>
                        <span id="photoErrorMsg"></span>
                    </div>

                    <div class="d-flex gap-2 mt-2">
                        <button class="btn btn-soft w-100" type="button" id="openCameraBtn">
                            <i class="bi bi-camera-video me-1"></i>{{ translations.open_camera ?? 'Open camera' }}
                        </button>
                        <button class="btn btn-soft w-100" type="button" id="clearPhotoBtn">
                            <i class="bi bi-trash me-1"></i>{{ translations.clear ?? 'Clear' }}
                        </button>
                    </div>

                    {# Live camera area #}
                    <div class="mt-2" id="cameraWrap" style="display:none;">
                        <div class="photo-preview" style="display:block;">
                            <video id="cameraVideo" playsinline autoplay style="width:100%; height:auto; display:block;"></video>
                        </div>

                        <div class="d-flex gap-2 mt-2">
                            <button class="btn btn-primary w-100" type="button" id="takePhotoBtn">
                                <i class="bi bi-camera me-1"></i>{{ translations.take_photo ?? 'Take photo' }}
                            </button>
                            <button class="btn btn-soft w-100" type="button" id="closeCameraBtn">
                                <i class="bi bi-x-circle me-1"></i>{{ translations.close ?? 'Close' }}
                            </button>
                        </div>

                        <canvas id="photoCanvas" style="display:none;"></canvas>
                    </div>

                    {# Preview selected / captured photo #}
                    <div class="photo-preview mt-2" id="photoPreview">
                        <img alt="{{ translations.preview ?? 'Preview' }}" id="photoPreviewImg">
                    </div>

                    <div class="mini-note">
                        {{ translations.photo_hint ?? 'You can use file picker or open live camera.' }}
                    </div>
                </div>

                <div class="sticky-actions">
                    <button class="btn btn-primary w-100" type="submit" id="doneBtn"
                            {% if isPhotoReq %}disabled{% endif %}>
                        <i class="bi bi-check2-circle me-1"></i>{{ translations.mark_done ?? 'Mark as done' }}
                    </button>

                    <a href="{{ ROOT }}/tasks" class="btn btn-soft w-100 mt-2">
                        <i class="bi bi-arrow-left me-1"></i>{{ translations.back_to_tasks ?? 'Back to tasks' }}
                    </a>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script>
        (function(){
            const photoReq = {{ task.getRequiresPhoto() ? 1 : 0 }};
            const MAX_MB = 10;
            const MAX_BYTES = MAX_MB * 1024 * 1024;

            const form = document.getElementById('completeForm');
            const input = document.getElementById('photoInput');
            const preview = document.getElementById('photoPreview');
            const img = document.getElementById('photoPreviewImg');
            const btn = document.getElementById('doneBtn');

            const openCameraBtn = document.getElementById('openCameraBtn');
            const closeCameraBtn = document.getElementById('closeCameraBtn');
            const takePhotoBtn = document.getElementById('takePhotoBtn');
            const clearPhotoBtn = document.getElementById('clearPhotoBtn');

            const cameraWrap = document.getElementById('cameraWrap');
            const video = document.getElementById('cameraVideo');
            const canvas = document.getElementById('photoCanvas');

            const errBox = document.getElementById('photoError');
            const errMsg = document.getElementById('photoErrorMsg');

            let stream = null;

            if(!input || !btn) return;

            function showError(message){
                if(errMsg) errMsg.textContent = message;
                if(errBox) errBox.style.display = 'block';
            }

            function clearError(){
                if(errBox) errBox.style.display = 'none';
                if(errMsg) errMsg.textContent = '';
            }

            function formatBytes(bytes){
                const mb = bytes / (1024*1024);
                return mb.toFixed(2) + ' MB';
            }

            function validateFileSize(file){
                if(!file) return true;

                if(file.size > MAX_BYTES){
                    showError(`{{ translations.photo_too_large ?? 'Photo is too large' }} (${formatBytes(file.size)}). ` +
                        `{{ translations.max_size_is ?? 'Max size is' }} ${MAX_MB}MB.`);
                    return false;
                }

                return true;
            }

            function updateBtnState(){
                if(!photoReq) return;

                const file = input.files && input.files[0] ? input.files[0] : null;
                const ok = !!file && validateFileSize(file);
                btn.disabled = !ok;
            }

            function showPreviewFromFile(file){
                if(file){
                    const url = URL.createObjectURL(file);
                    img.src = url;
                    preview.style.display = 'block';
                } else {
                    preview.style.display = 'none';
                    img.removeAttribute('src');
                }
            }

            function stopCamera(){
                if(stream){
                    stream.getTracks().forEach(t => t.stop());
                    stream = null;
                }
                if(video) video.srcObject = null;
                if(cameraWrap) cameraWrap.style.display = 'none';
            }

            async function openCamera(){
                clearError();

                if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
                    input.click();
                    return;
                }

                try{
                    stream = await navigator.mediaDevices.getUserMedia({
                        video: { facingMode: { ideal: "environment" } },
                        audio: false
                    });

                    video.srcObject = stream;
                    cameraWrap.style.display = 'block';
                } catch(e){
                    input.click();
                }
            }

            function setInputFile(file){
                const dt = new DataTransfer();
                dt.items.add(file);
                input.files = dt.files;
                input.dispatchEvent(new Event('change', { bubbles: true }));
            }

            function takePhoto(){
                clearError();
                if(!stream) return;

                const w = video.videoWidth;
                const h = video.videoHeight;
                if(!w || !h) return;

                canvas.width = w;
                canvas.height = h;

                const ctx = canvas.getContext('2d', { alpha: false });
                ctx.drawImage(video, 0, 0, w, h);

                canvas.toBlob((blob) => {
                    if(!blob) return;

                    const file = new File([blob], `task_photo_${Date.now()}.jpg`, { type: 'image/jpeg' });

                    // jeśli zdjęcie z kamery wyszło zbyt duże (raczej rzadkie), zablokuj
                    if(!validateFileSize(file)){
                        stopCamera();
                        return;
                    }

                    setInputFile(file);
                    stopCamera();
                }, 'image/jpeg', 0.9);
            }

            function clearPhoto(){
                input.value = '';
                showPreviewFromFile(null);
                clearError();
                updateBtnState();
                stopCamera();
            }

            // INPUT FILE
            input.addEventListener('change', () => {
                clearError();

                const file = input.files && input.files[0] ? input.files[0] : null;

                if(file && !validateFileSize(file)){
                    // wyczyść plik i preview
                    input.value = '';
                    showPreviewFromFile(null);
                    updateBtnState();
                    return;
                }

                showPreviewFromFile(file);
                updateBtnState();
            });

            // SUBMIT safety: blokuj wysyłkę jeśli > limit
            if(form){
                form.addEventListener('submit', (e) => {
                    if(!photoReq) return;

                    const file = input.files && input.files[0] ? input.files[0] : null;
                    if(!file){
                        showError(`{{ translations.photo_required_before_done ?? 'You cannot mark it done without a photo.' }}`);
                        e.preventDefault();
                        return;
                    }
                    if(!validateFileSize(file)){
                        e.preventDefault();
                    }
                });
            }

            // BUTTONS
            if(openCameraBtn) openCameraBtn.addEventListener('click', openCamera);
            if(closeCameraBtn) closeCameraBtn.addEventListener('click', stopCamera);
            if(takePhotoBtn) takePhotoBtn.addEventListener('click', takePhoto);
            if(clearPhotoBtn) clearPhotoBtn.addEventListener('click', clearPhoto);

            // init
            preview.style.display = 'none';
            updateBtnState();

            document.addEventListener('visibilitychange', () => {
                if(document.hidden) stopCamera();
            });
        })();
    </script>
{% endblock %}