<div
    x-data="{
        seconds: 0,
        units: @entangle('wipUnits'),
        manualOverride: false,
        isPaused: false,
        isTabHidden: false,
        interval: null,

        start() {
            this.interval = setInterval(() => {
                this.isTabHidden = document.hidden;

                if (!this.isPaused && !this.isTabHidden) {
                    this.seconds++;

                    $wire.set('wipSeconds', this.seconds, false);

                    if (!this.manualOverride) {
                        this.units = Math.max(1, Math.ceil(this.seconds / 360));
                        $wire.set('wipUnits', this.units, false);
                    }
                }
            }, 1000);
        },

        overrideUnits() {
            this.manualOverride = true;

            if (!this.units || this.units < 1) {
                this.units = 1;
            }

            $wire.set('wipUnits', this.units, false);
        },

        resetOverride() {
            this.manualOverride = false;
            this.units = Math.max(1, Math.ceil(this.seconds / 360));
            $wire.set('wipUnits', this.units, false);
        },

        togglePause() {
            this.isPaused = !this.isPaused;
        },

        formattedTime() {
            let mins = Math.floor(this.seconds / 60);
            let secs = this.seconds % 60;

            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
    }"
    x-init="
        start();

        document.addEventListener('visibilitychange', () => {
            isTabHidden = document.hidden;
        });
    "
    class="border rounded bg-white p-3"
>
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <div class="fw-bold">WIP Timer</div>
            <small class="text-muted">Time spent on this activity</small>
        </div>

        <button
            type="button"
            class="btn btn-sm"
            :class="isPaused ? 'btn-success' : 'btn-outline-secondary'"
            x-on:click="togglePause"
        >
            <span x-text="isPaused ? 'Resume' : 'Pause'"></span>
        </button>

        <div class="text-end">
            <div class="fw-bold fs-5" x-text="formattedTime()"></div>
            <small class="text-muted">elapsed</small>
        </div>
    </div>

    <template x-if="isPaused">
        <div class="alert alert-warning mt-3 mb-0 py-2">
            Timer paused manually.
        </div>
    </template>

    <template x-if="isTabHidden">
        <div class="alert alert-info mt-3 mb-0 py-2">
            Timer paused because this tab is inactive.
        </div>
    </template>

    <template x-if="manualOverride">
        <div class="alert alert-info mt-3 mb-0 py-2 d-flex justify-content-between align-items-center">
            <span>WIP units have been manually overridden.</span>

            <button
                type="button"
                class="btn btn-sm btn-outline-secondary"
                x-on:click="resetOverride"
            >
                Auto calculate
            </button>
        </div>
    </template>

    <hr>

    <label class="form-label">WIP Units</label>
    <input
        type="number"
        min="1"
        class="form-control"
        x-model.number="units"
        x-on:input="overrideUnits"
    >

    <small class="text-muted">1 unit = 6 minutes. You can manually override this.</small>

    <label class="form-label mt-3">WIP Description</label>
    <input
        type="text"
        class="form-control"
        wire:model.defer="wipDescription"
        placeholder="e.g. Added client note"
    >
</div>