{% extends "base.html" %}
{% block title %}Pomodoro Timer - EveryTools{% endblock %}
{% block top_title %}Pomodoro Timer{% endblock %}

{% block content %}
<div class="client-tool" style="max-width:420px;text-align:center">
    <div class="tool-header">
        <h1>Pomodoro Timer</h1>
        <p>Stay focused with timed work and break intervals</p>
    </div>

    <div style="display:flex;gap:.3rem;margin-bottom:1.5rem;justify-content:center">
        <button class="btn" id="tab-work" onclick="setTab('work')" style="background:var(--primary);color:#fff">Work</button>
        <button class="btn" id="tab-short" onclick="setTab('short')" style="background:var(--bg)">Short Break</button>
        <button class="btn" id="tab-long" onclick="setTab('long')" style="background:var(--bg)">Long Break</button>
    </div>

    <div class="calc-display" style="padding:2rem">
        <div class="calc-result" id="pom-display" style="font-size:4rem;font-weight:300;letter-spacing:.05em">25:00</div>
        <div id="pom-label" style="font-size:.9rem;color:var(--text-light);margin-top:.3rem">Work Session</div>
    </div>

    <div style="display:flex;gap:.6rem;justify-content:center;margin-bottom:1.5rem">
        <button class="btn btn-primary" id="pom-start" onclick="toggleTimer()" style="min-width:100px">
            <i class="bi bi-play-fill"></i> Start
        </button>
        <button class="btn btn-small" onclick="resetTimer()"><i class="bi bi-arrow-counterclockwise"></i> Reset</button>
    </div>

    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap">
        <div class="form-group" style="margin-bottom:0;width:100px">
            <label>Work (min)</label>
            <input type="number" id="pom-work-min" value="25" min="1" max="120" onchange="updateDurations()">
        </div>
        <div class="form-group" style="margin-bottom:0;width:100px">
            <label>Short (min)</label>
            <input type="number" id="pom-short-min" value="5" min="1" max="30" onchange="updateDurations()">
        </div>
        <div class="form-group" style="margin-bottom:0;width:100px">
            <label>Long (min)</label>
            <input type="number" id="pom-long-min" value="15" min="1" max="60" onchange="updateDurations()">
        </div>
    </div>

    <div style="margin-top:1.5rem">
        <span style="font-size:.85rem;color:var(--text-light)">Sessions completed: </span>
        <span id="pom-sessions" style="font-weight:600;color:var(--primary)">0</span>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let durations = { work: 25*60, short: 5*60, long: 15*60 };
let currentTab = "work";
let timeLeft = durations.work;
let running = false;
let interval = null;
let sessions = 0;

function setTab(tab) {
    currentTab = tab;
    stopTimer();
    timeLeft = durations[tab];
    updateDisplay();
    ["work","short","long"].forEach(t => {
        document.getElementById("tab-" + t).style.background = t === tab ? "var(--primary)" : "var(--bg)";
        document.getElementById("tab-" + t).style.color = t === tab ? "#fff" : "var(--text)";
    });
    const labels = { work: "Work Session", short: "Short Break", long: "Long Break" };
    document.getElementById("pom-label").textContent = labels[tab];
}

function updateDisplay() {
    const m = Math.floor(timeLeft / 60);
    const s = timeLeft % 60;
    document.getElementById("pom-display").textContent =
        String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
}

function toggleTimer() {
    if (running) stopTimer();
    else startTimer();
}

function startTimer() {
    running = true;
    document.getElementById("pom-start").innerHTML = '<i class="bi bi-pause-fill"></i> Pause';
    interval = setInterval(() => {
        timeLeft--;
        if (timeLeft <= 0) {
            stopTimer();
            if (currentTab === "work") {
                sessions++;
                document.getElementById("pom-sessions").textContent = sessions;
                try { new Audio("data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1idH2Mem1naXaAg3x0cHZ/g4F8eHl6fn98enl4eXx+fn18fHx8fn5+fX19fX5+fn19fX1+fn59fX19fn5+fX19fX5+fn19fX1+fn59fX19fn5+").play(); } catch(e){}
                // Auto-switch to break
                if (sessions % 4 === 0) setTab("long");
                else setTab("short");
            } else {
                setTab("work");
            }
            timeLeft = durations[currentTab];
            updateDisplay();
        }
        updateDisplay();
    }, 1000);
}

function stopTimer() {
    running = false;
    clearInterval(interval);
    document.getElementById("pom-start").innerHTML = '<i class="bi bi-play-fill"></i> Start';
}

function resetTimer() {
    stopTimer();
    timeLeft = durations[currentTab];
    updateDisplay();
}

function updateDurations() {
    durations.work = (parseInt(document.getElementById("pom-work-min").value) || 25) * 60;
    durations.short = (parseInt(document.getElementById("pom-short-min").value) || 5) * 60;
    durations.long = (parseInt(document.getElementById("pom-long-min").value) || 15) * 60;
    if (!running) {
        timeLeft = durations[currentTab];
        updateDisplay();
    }
}

updateDisplay();
</script>
{% endblock %}