<script lang="ts">
    import Icon from "@iconify/svelte";
    import { fade, scale } from "svelte/transition";

    interface Report {
        company_name: string;
        year: string | number;
        sector: string;
        greenwashing_score: number | string;
        filename: string;
        title?: string;
        snippet?: string;
    }

    let { report, onclose }: { report: Report; onclose: () => void } = $props();
</script>

<div
    class="fixed inset-0 bg-black/80 backdrop-blur-md z-1000 flex justify-center items-center p-5 outline-none"
    onclick={onclose}
    onkeydown={(e) => e.key === "Escape" && onclose()}
    transition:fade={{ duration: 200 }}
    role="button"
    tabindex="0"
    aria-label="Close modal"
>
    <div
        class="bg-slate-900 border border-slate-700 rounded-3xl w-full max-w-5xl h-[90vh] flex flex-col shadow-[0_24px_64px_rgba(0,0,0,0.5)] overflow-hidden outline-none"
        onclick={(e) => e.stopPropagation()}
        onkeydown={(e) => e.stopPropagation()}
        transition:scale={{ duration: 300, start: 0.95 }}
        role="dialog"
        aria-modal="true"
        tabindex="-1"
    >
        <div
            class="px-6 py-5 bg-slate-800 border-b border-slate-700 flex justify-between items-center shrink-0"
        >
            <div class="modal-title-group">
                <h2 class="m-0 text-white text-xl font-bold">
                    {report.company_name}
                </h2>
                <span class="block mt-1 text-slate-400 text-sm"
                    >{report.title || report.filename}</span
                >
            </div>
            <button
                class="bg-transparent border-none text-slate-400 cursor-pointer p-1 flex transition-colors duration-200 hover:text-white"
                onclick={onclose}
            >
                <Icon icon="ri:close-line" width="24" />
            </button>
        </div>

        <div class="flex-1 relative overflow-hidden bg-black flex flex-col">
            {#if report.filename
                .toLowerCase()
                .endsWith(".pdf") || report.filename
                    .toLowerCase()
                    .endsWith(".txt")}
                <iframe
                    src="/api/reports/view/{report.filename}"
                    class="w-full h-full border-none"
                    title="Report Viewer"
                ></iframe>
            {:else}
                <div
                    class="flex-1 flex flex-col items-center justify-center text-slate-400 gap-5"
                >
                    <Icon
                        icon="ri:file-warning-line"
                        width="64"
                        class="text-slate-500"
                    />
                    <p>Preview not available for this file type.</p>
                    <a
                        href="/api/reports/view/{report.filename}"
                        download
                        class="bg-emerald-400 text-slate-900 px-6 py-3 rounded-full no-underline font-bold transition-transform hover:scale-105"
                    >
                        Download File
                    </a>
                </div>
            {/if}
        </div>
    </div>
</div>
