export class StreakTracker {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.STORAGE_KEY = 'hydroflux_streak';
        this.quotes = [
            "The only easy day was yesterday.",
            "Discipline is doing what needs to be done, even if you don't want to.",
            "Your future self is watching you right now through memories.",
            "Pain is temporary. Quitting lasts forever.",
            "Suffering is the currency of success.",
            "Don't stop when you're tired. Stop when you're done.",
            "You are stronger than your urges.",
            "Focus on the goal, not the obstacle."
        ];

        this.loadState();
        this.render();
        this.startTimer();
    }

    loadState() {
        const saved = localStorage.getItem(this.STORAGE_KEY);
        if (saved) {
            this.startDate = new Date(parseInt(saved));
        } else {
            this.startDate = new Date();
            this.saveState();
        }
    }

    saveState() {
        localStorage.setItem(this.STORAGE_KEY, this.startDate.getTime().toString());
    }

    resetStreak() {
        if (confirm("Are you sure you want to reset your streak?")) {
            this.startDate = new Date();
            this.saveState();
            this.updateUI();

            // Haptic Bad Feedback
            if (navigator.vibrate) navigator.vibrate([100, 50, 100]);
        }
    }

    getDuration() {
        const now = new Date();
        const diff = now - this.startDate;

        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

        return { days, hours, minutes };
    }

    updateUI() {
        const { days, hours, minutes } = this.getDuration();

        const daysEl = this.container.querySelector('.streak-days');
        const detailEl = this.container.querySelector('.streak-detail');

        if (daysEl) daysEl.textContent = days;
        if (detailEl) detailEl.textContent = `${hours}h ${minutes}m`;
    }

    startTimer() {
        setInterval(() => this.updateUI(), 60000); // Update every minute
    }

    getRandomQuote() {
        return this.quotes[Math.floor(Math.random() * this.quotes.length)];
    }

    render() {
        this.container.innerHTML = `
            <div class="streak-container">
                <h2 class="section-title">ABSTINENCE STREAK</h2>
                
                <div class="streak-counter">
                    <div class="streak-days glow-text">0</div>
                    <div class="streak-label">DAYS</div>
                    <div class="streak-detail">${0}h ${0}m</div>
                </div>

                <div class="quote-card">
                    "${this.getRandomQuote()}"
                </div>

                <button id="reset-streak-btn" class="danger-btn">
                    RESET STREAK
                </button>
            </div>
        `;

        this.updateUI();

        this.container.querySelector('#reset-streak-btn').addEventListener('click', () => {
            this.resetStreak();
        });
    }
}
