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

    interface Incident {
        _id: string;
        product_name: string;
        detected_brand: string;
        user_description?: string;
        created_at: string;
        image_base64?: string;
        analysis: {
            verdict: string;
            confidence: string;
            severity: string;
            reasoning: string;
            is_greenwashing: boolean;
            key_claims?: string[];
            red_flags?: string[];
            recommendations?: string;
        };
    }

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

<div
    class="fixed inset-0 bg-black/50 backdrop-blur-lg z-1000 flex justify-center items-center p-6 outline-none"
    onclick={onclose}
    onkeydown={(e) => e.key === "Escape" && onclose()}
    transition:fade={{ duration: 200 }}
    role="button"
    tabindex="0"
    aria-label="Close modal"
>
    
    
    <div
        class="max-w-3xl max-h-[88vh] w-full overflow-y-auto bg-white/8 backdrop-blur-2xl border border-white/20 rounded-4xl flex flex-col shadow-2xl shadow-black/60 scrollbar-hide outline-none"
        onclick={(e) => e.stopPropagation()}
        onkeydown={(e) => e.stopPropagation()}
        transition:scale={{ duration: 300, start: 0.95 }}
        role="document"
        tabindex="0"
    >
        <div
            class="px-10 lg:px-12 py-8 bg-white/5 border-b border-red-500/25 flex justify-between items-center shrink-0"
        >
            <div class="flex flex-col gap-2">
                <div class="flex items-center gap-3">
                    <Icon
                        icon="ri:alert-fill"
                        width="30"
                        class="text-red-400"
                    />
                    <h2
                        class="m-0 text-white text-[28px] lg:text-[32px] font-extrabold"
                    >
                        {incident.product_name}
                    </h2>
                </div>
                {#if incident.detected_brand && incident.detected_brand !== "Unknown"}
                    <span class="text-white/60 text-sm lg:text-base font-medium"
                        >Brand: {incident.detected_brand}</span
                    >
                {/if}
            </div>
            <button
                class="bg-white/5 border border-white/10 text-white w-11 h-11 rounded-xl flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/15 hover:rotate-90 hover:border-white/20"
                onclick={onclose}
            >
                <Icon icon="ri:close-line" width="28" />
            </button>
        </div>

        <div class="p-10 lg:p-12 flex flex-col gap-8">
            
            {#if incident.image_base64}
                <div
                    class="w-full bg-black/20 rounded-3xl overflow-hidden border border-white/10 relative group"
                >
                    <img
                        src="data:image/jpeg;base64,{incident.image_base64}"
                        alt="Evidence"
                        class="w-full max-h-[400px] object-contain bg-black/40"
                    />
                    <div
                        class="absolute top-4 left-4 bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full flex items-center gap-2 border border-white/10"
                    >
                        <Icon
                            icon="ri:camera-fill"
                            width="16"
                            class="text-white/80"
                        />
                        <span
                            class="text-xs font-bold text-white uppercase tracking-wider"
                            >Evidence of Greenwashing</span
                        >
                    </div>
                </div>
            {/if}
            
            <div class="flex flex-wrap gap-3.5">
                <span
                    class="flex items-center gap-2 px-5 py-3 rounded-[14px] text-[11px] lg:text-[12px] font-extrabold tracking-wider backdrop-blur-sm
					{incident.analysis?.severity === 'high'
                        ? 'bg-red-500/25 text-red-300 border border-red-500/40'
                        : incident.analysis?.severity === 'medium'
                          ? 'bg-amber-500/25 text-amber-300 border border-amber-500/40'
                          : 'bg-emerald-500/25 text-emerald-300 border border-emerald-500/40'} uppercase"
                >
                    <Icon icon="ri:error-warning-fill" width="18" />
                    {incident.analysis?.severity || "UNKNOWN"} SEVERITY
                </span>
                <span
                    class="flex items-center gap-2 px-5 py-3 rounded-[14px] text-[11px] lg:text-[12px] font-extrabold tracking-wider bg-indigo-500/25 text-indigo-300 border border-indigo-500/40 uppercase backdrop-blur-sm"
                >
                    <Icon icon="ri:shield-check-fill" width="18" />
                    {incident.analysis?.confidence || "UNKNOWN"} CONFIDENCE
                </span>
                <span
                    class="flex items-center gap-2 px-5 py-3 rounded-[14px] text-[11px] lg:text-[12px] font-extrabold tracking-wider bg-white/10 text-white/80 border border-white/20 uppercase backdrop-blur-sm"
                >
                    <Icon icon="ri:calendar-check-fill" width="18" />
                    {new Date(incident.created_at).toLocaleDateString()}
                </span>
            </div>

            
            <div
                class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-[20px] p-7"
            >
                <h3
                    class="flex items-center gap-2.5 text-white text-base lg:text-lg font-bold mb-4"
                >
                    <Icon icon="ri:scales-3-fill" width="22" />
                    Verdict
                </h3>
                <p
                    class="text-amber-300 text-[18px] lg:text-[19px] font-semibold m-0 leading-normal"
                >
                    {incident.analysis?.verdict || "Greenwashing detected"}
                </p>
            </div>

            
            <div
                class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-[20px] p-7"
            >
                <h3
                    class="flex items-center gap-2.5 text-white text-base lg:text-lg font-bold mb-4"
                >
                    <Icon icon="ri:file-text-fill" width="22" />
                    Detailed Analysis
                </h3>
                <p
                    class="text-white/85 text-[15px] lg:text-base leading-[1.7] m-0"
                >
                    {incident.analysis?.reasoning ||
                        "No detailed analysis available."}
                </p>
            </div>

            
            {#if incident.analysis?.red_flags && incident.analysis.red_flags.length > 0}
                <div
                    class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-[20px] p-7"
                >
                    <h3
                        class="flex items-center gap-2.5 text-red-300 text-base lg:text-lg font-bold mb-4"
                    >
                        <Icon icon="ri:flag-fill" width="22" />
                        Red Flags Identified
                    </h3>
                    <ul class="list-none p-0 m-0 flex flex-col gap-3.5">
                        {#each incident.analysis.red_flags as flag}
                            <li
                                class="flex items-start gap-3 text-red-200/80 text-sm lg:text-base leading-[1.6]"
                            >
                                <Icon
                                    icon="ri:error-warning-line"
                                    width="16"
                                    class="mt-0.5 shrink-0"
                                />
                                {flag}
                            </li>
                        {/each}
                    </ul>
                </div>
            {/if}

            
            {#if incident.analysis?.key_claims && incident.analysis.key_claims.length > 0}
                <div
                    class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-[20px] p-7"
                >
                    <h3
                        class="flex items-center gap-2.5 text-white text-base lg:text-lg font-bold mb-4"
                    >
                        <Icon icon="ri:chat-quote-fill" width="22" />
                        Environmental Claims Made
                    </h3>
                    <ul class="list-none p-0 m-0 flex flex-col gap-3.5">
                        {#each incident.analysis.key_claims as claim}
                            <li
                                class="flex items-start gap-3 text-white/75 text-sm lg:text-base italic leading-[1.6]"
                            >
                                <Icon
                                    icon="ri:double-quotes-l"
                                    width="16"
                                    class="mt-0.5 shrink-0"
                                />
                                {claim}
                            </li>
                        {/each}
                    </ul>
                </div>
            {/if}

            
            {#if incident.analysis?.recommendations}
                <div
                    class="bg-emerald-500/12 backdrop-blur-sm border border-emerald-500/30 rounded-[20px] p-7"
                >
                    <h3
                        class="flex items-center gap-2.5 text-emerald-300 text-base lg:text-lg font-bold mb-4"
                    >
                        <Icon icon="ri:lightbulb-fill" width="22" />
                        Consumer Recommendations
                    </h3>
                    <p
                        class="text-emerald-200 text-[15px] lg:text-base leading-[1.6] m-0"
                    >
                        {incident.analysis.recommendations}
                    </p>
                </div>
            {/if}

            
            {#if incident.user_description}
                <div
                    class="bg-indigo-500/12 backdrop-blur-sm border border-indigo-500/30 rounded-[20px] p-7"
                >
                    <h3
                        class="flex items-center gap-2.5 text-indigo-300 text-base lg:text-lg font-bold mb-4"
                    >
                        <Icon icon="ri:user-voice-fill" width="22" />
                        Original User Report
                    </h3>
                    <p
                        class="text-indigo-200 text-[15px] lg:text-base italic leading-[1.6] m-0"
                    >
                        "{incident.user_description}"
                    </p>
                </div>
            {/if}
        </div>
    </div>
</div>

<style>
    
    .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
</style>
