<script lang="ts">
    /**
     * Analysis-coverage badge: `analyzed/total` colored by state —
     * green Full, amber Partial, grey None. Reused for manga and chapter
     * rows in the admin Analysis section.
     */
    let {
        analyzed,
        total,
        testid
    }: { analyzed: number; total: number; testid?: string } = $props();

    const state = $derived(
        total === 0 || analyzed === 0
            ? 'none'
            : analyzed >= total
              ? 'full'
              : 'partial'
    );
    const word = $derived(
        state === 'full' ? 'Full' : state === 'partial' ? 'Partial' : 'None'
    );
</script>

<span class="badge {state}" data-testid={testid} data-state={state}>
    {word} {analyzed}/{total}
</span>

<style>
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--font-xs);
        font-weight: var(--weight-semibold);
        padding: 1px var(--space-2);
        border-radius: var(--radius-pill);
        border: 1px solid transparent;
        white-space: nowrap;
    }
    .full {
        background: color-mix(in srgb, #2e7d32 16%, transparent);
        color: #2e7d32;
        border-color: color-mix(in srgb, #2e7d32 40%, transparent);
    }
    .partial {
        background: color-mix(in srgb, #d4762a 16%, transparent);
        color: #b85e1a;
        border-color: color-mix(in srgb, #d4762a 40%, transparent);
    }
    .none {
        background: var(--surface-elevated);
        color: var(--text-muted);
        border-color: var(--border);
    }
</style>
