<script lang="ts">
    import type { SpamAssassinResult } from "$lib/api/types.gen";
    import { getScoreColorClass } from "$lib/score";
    import { theme } from "$lib/stores/theme";
    import GradeDisplay from "./GradeDisplay.svelte";

    interface Props {
        spamassassin: SpamAssassinResult;
    }

    let { spamassassin }: Props = $props();
</script>

<div class="card shadow-sm" id="spam-details">
    <div class="card-header {$theme === 'light' ? 'bg-white' : 'bg-dark'}">
        <h4 class="mb-0 d-flex justify-content-between align-items-center">
            <span>
                <i class="bi bi-bug me-2"></i>
                SpamAssassin Analysis
            </span>
            <span>
                {#if spamassassin.deliverability_score !== undefined}
                    <span class="badge bg-{getScoreColorClass(spamassassin.deliverability_score)}">
                        {spamassassin.deliverability_score}%
                    </span>
                {/if}
                {#if spamassassin.deliverability_grade !== undefined}
                    <GradeDisplay grade={spamassassin.deliverability_grade} size="small" />
                {/if}
            </span>
        </h4>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <strong>Score:</strong>
                <span class={spamassassin.is_spam ? "text-danger" : "text-success"}>
                    {spamassassin.score.toFixed(2)} / {spamassassin.required_score.toFixed(1)}
                </span>
            </div>
            <div class="col-md-6">
                <strong>Classified as:</strong>
                <span class="badge {spamassassin.is_spam ? 'bg-danger' : 'bg-success'} ms-2">
                    {spamassassin.is_spam ? "SPAM" : "HAM"}
                </span>
            </div>
        </div>

        {#if spamassassin.test_details && Object.keys(spamassassin.test_details).length > 0}
            <div class="mb-3">
                <div class="table-responsive mt-2">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>Test Name</th>
                                <th class="text-end">Score</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            {#each Object.entries(spamassassin.test_details) as [testName, detail]}
                                <tr
                                    class={detail.score > 0
                                        ? "table-warning"
                                        : detail.score < 0
                                          ? "table-success"
                                          : ""}
                                >
                                    <td class="font-monospace">{testName}</td>
                                    <td class="text-end">
                                        <span
                                            class={detail.score > 0
                                                ? "text-danger fw-bold"
                                                : detail.score < 0
                                                  ? "text-success fw-bold"
                                                  : "text-muted"}
                                        >
                                            {detail.score > 0 ? "+" : ""}{detail.score.toFixed(1)}
                                        </span>
                                    </td>
                                    <td class="small">{detail.description || ""}</td>
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </div>
            </div>
        {:else if spamassassin.tests && spamassassin.tests.length > 0}
            <div class="mb-2">
                <strong>Tests Triggered:</strong>
                <div class="mt-2">
                    {#each spamassassin.tests as test}
                        <span
                            class="badge {$theme === 'light'
                                ? 'bg-light text-dark'
                                : 'bg-secondary'} me-1 mb-1">{test}</span
                        >
                    {/each}
                </div>
            </div>
        {/if}

        {#if spamassassin.report}
            <details class="mt-3">
                <summary class="cursor-pointer fw-bold">Raw Report</summary>
                <pre
                    class="mt-2 small {$theme === 'light'
                        ? 'bg-light'
                        : 'bg-secondary'} p-3 rounded">{spamassassin.report}</pre>
            </details>
        {/if}
    </div>
</div>

<style>
    .cursor-pointer {
        cursor: pointer;
    }

    details summary {
        user-select: none;
    }

    details summary:hover {
        color: var(--bs-primary);
    }

    /* Darker table colors in dark mode */
    :global([data-bs-theme="dark"]) .table-warning {
        --bs-table-bg: rgba(255, 193, 7, 0.2);
        --bs-table-border-color: rgba(255, 193, 7, 0.3);
    }

    :global([data-bs-theme="dark"]) .table-success {
        --bs-table-bg: rgba(25, 135, 84, 0.2);
        --bs-table-border-color: rgba(25, 135, 84, 0.3);
    }
</style>
