import { h, onMounted, onUnmounted, ref } from 'vue';
import { fetchStatus } from '../api.js';

export const StatusPoller = {
    props: ['store'],
    setup(props) {
        const timer = ref(null);

        async function poll() {
            try {
                const status = await fetchStatus(props.store.credentials);
                props.store.synthesisStatus = status;
                if (status.frozen) return;
            } catch (_) {
                // transient — keep polling
            }
            timer.value = setTimeout(poll, 2000);
        }

        onMounted(() => { poll(); });
        onUnmounted(() => { if (timer.value) clearTimeout(timer.value); });

        return () => {
            const s = props.store.synthesisStatus;
            if (!s) return h('div', { class: 'se-status' }, 'Polling…');

            const total = s.notes_in_total ?? 0;
            const done  = s.currently_rendered_notes ?? 0;
            const pct   = total > 0 ? Math.min(100, Math.round(done / total * 100)) : 0;

            let label;
            if (s.frozen) {
                label = s.errors ? `Error: ${s.errors}` : 'Done';
            } else {
                label = s.remaining_time ?? `Synthesizing… ${pct}%`;
            }

            return h('div', { class: 'se-status' }, [
                h('span', null, label),
                h('div', { class: 'se-status-progress' }, [
                    h('div', { class: 'se-status-bar', style: { width: `${pct}%` } }),
                ]),
            ]);
        };
    },
};