<script lang="ts">
    import type { CrawlerStatus } from '$lib/api/admin';
    import ProgressBar from './ProgressBar.svelte';

    let { status }: { status: CrawlerStatus } = $props();

    function chapterPercent(c: { pages_done: number; pages_total: number | null }): number | null {
        return c.pages_total && c.pages_total > 0
            ? Math.min(100, (c.pages_done / c.pages_total) * 100)
            : null;
    }
</script>

<section class="grid2">
    <article>
        <h2>Queue</h2>
        <dl>
            <dt>Pending</dt>
            <dd>{status.queue.pending}</dd>
            <dt>Running</dt>
            <dd>{status.queue.running}</dd>
            <dt>Dead</dt>
            <dd>{status.queue.dead}</dd>
            <dt>Covers queued</dt>
            <dd>{status.covers_queued}</dd>
        </dl>
    </article>
    <article>
        <h2>Active chapters ({status.active_chapters.length}/{status.worker_count})</h2>
        {#if status.active_chapters.length === 0}
            <p class="muted">idle — no chapters downloading</p>
        {:else}
            <table class="active">
                <tbody>
                    {#each status.active_chapters as c (c.chapter_id)}
                        <tr>
                            <td>{c.manga_title} · ch.{c.chapter_number}</td>
                            <td class="pagecount" data-testid="active-pages">
                                {c.pages_done}/{c.pages_total ?? '?'}
                            </td>
                            <td class="pagebar">
                                {#if chapterPercent(c) !== null}
                                    <ProgressBar percent={chapterPercent(c) ?? 0} />
                                {/if}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        {/if}
    </article>
</section>

<style>
    h2 {
        margin: 0 0 var(--space-3) 0;
        font-size: var(--font-sm);
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .grid2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }
    article {
        padding: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
    }
    dl {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: var(--space-1) var(--space-3);
        margin: 0;
        font-size: var(--font-sm);
    }
    dt {
        color: var(--text-muted);
    }
    dd {
        margin: 0;
        font-family: var(--font-mono, monospace);
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td {
        padding: var(--space-2);
        text-align: left;
        border-bottom: 1px solid var(--border);
        font-size: var(--font-sm);
    }
    .muted {
        color: var(--text-muted);
    }
    .pagecount {
        font-family: var(--font-mono, monospace);
        font-size: var(--font-xs);
        white-space: nowrap;
    }
    .pagebar {
        width: 8rem;
    }
    table.active td {
        vertical-align: middle;
    }
</style>
