<script lang="ts">
    import Icon from "@iconify/svelte";

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

    let {
        report,
        openReport,
        searchQuery,
    }: {
        report: Report;
        openReport: (r: Report) => void;
        searchQuery: string;
    } = $props();

    function getFileDetails(filename: string) {
        const ext = filename.split(".").pop()?.toLowerCase();
        if (ext === "pdf")
            return { type: "PDF Document", icon: "ri:file-pdf-2-line" };
        if (ext === "xlsx" || ext === "csv")
            return { type: "Data Spreadsheet", icon: "ri:file-excel-2-line" };
        if (ext === "txt")
            return { type: "Text Report", icon: "ri:file-text-line" };
        return { type: "Impact Report", icon: "ri:file-info-line" };
    }

    function getScoreColor(score: string | number) {
        const s = Number(score);
        if (s >= 80) return "bg-emerald-500";
        if (s >= 50) return "bg-amber-500";
        return "bg-red-500";
    }

    const fileDetails = $derived(getFileDetails(report.filename));
</script>

<button
    class="group flex items-center gap-6 lg:gap-8 bg-black/40 backdrop-blur-2xl border border-white/10 rounded-3xl p-7 lg:p-8 w-full text-left cursor-pointer transition-all duration-300 hover:bg-black/50 hover:border-emerald-500/40 hover:-translate-y-1 hover:scale-[1.005] hover:shadow-xl hover:shadow-black/30 relative overflow-hidden outline-none"
    onclick={() => openReport(report)}
>
    <div
        class="w-16 h-16 lg:w-[4.375rem] lg:h-[4.375rem] bg-emerald-500/10 backdrop-blur-sm rounded-[1.125rem] flex items-center justify-center shrink-0 transition-all duration-300 group-hover:bg-emerald-500 group-hover:-rotate-3 group-hover:scale-105 border border-white/5 group-hover:border-emerald-400/50"
    >
        <Icon
            icon={fileDetails.icon}
            width="32"
            class="text-emerald-100 group-hover:text-white transition-colors"
        />
    </div>

    <div class="flex-1 min-w-0">
        <div class="flex items-center gap-3 mb-2.5">
            <h3
                class="text-white text-xl lg:text-[22px] font-bold m-0 tracking-tight"
            >
                {report.company_name}
            </h3>
            <span
                class="text-emerald-300 bg-emerald-500/15 backdrop-blur-sm px-3 py-1 rounded-lg text-[12px] lg:text-[13px] font-bold border border-emerald-500/10"
                >{report.year}</span
            >
        </div>

        {#if report.snippet}
            <p
                class="text-white/80 text-sm lg:text-base leading-relaxed mb-4 line-clamp-2 m-0 font-medium"
            >
                {@html report.snippet.replace(
                    new RegExp(searchQuery || "", "gi"),
                    (match) =>
                        `<span class="text-emerald-200 bg-emerald-500/30 px-1 rounded font-bold">${match}</span>`,
                )}
            </p>
        {:else}
            <p class="text-white/60 text-sm lg:text-base mb-4 m-0 font-medium">
                {report.sector} Sector • Impact Report
            </p>
        {/if}

        <div class="flex flex-wrap gap-2.5">
            <span
                class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] lg:text-[12px] font-bold tracking-tight bg-white/5 backdrop-blur-sm text-white/70 max-w-xs truncate border border-white/5"
                title={report.filename}
            >
                <Icon icon={fileDetails.icon} width="15" />
                {fileDetails.type}
            </span>
            <span
                class="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] lg:text-[12px] font-bold tracking-tight bg-emerald-500/10 backdrop-blur-sm text-emerald-300 border border-emerald-500/10"
            >
                <Icon
                    icon="ri:checkbox-circle-fill"
                    width="14"
                    class="text-emerald-400"
                />
                Analyzed
            </span>
        </div>
    </div>

    {#if report.greenwashing_score}
        <div
            class="text-center ml-5 lg:ml-6 group-hover:translate-x-1 transition-transform duration-300"
        >
            <div
                class="w-14 h-14 lg:w-[3.875rem] lg:h-[3.875rem] rounded-xe flex items-center justify-center mb-2 rounded-2xl shadow-lg {getScoreColor(
                    report.greenwashing_score,
                )} ring-4 ring-black/20"
            >
                <span
                    class="text-emerald-950 text-[19px] lg:text-[21px] font-black"
                    >{Math.round(Number(report.greenwashing_score))}</span
                >
            </div>
            <span
                class="text-white/60 text-[10px] lg:text-[11px] font-bold uppercase tracking-widest"
                >Trust Score</span
            >
        </div>
    {/if}
</button>
