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

    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;
        };
    }

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

<button
    class="flex items-center gap-6 lg:gap-8 p-7 lg:p-8 bg-black/60 backdrop-blur-2xl border border-red-500/30 rounded-3xl transition-all duration-300 shadow-2xl shadow-black/50 w-full text-left cursor-pointer hover:bg-black/70 hover:border-red-500/60 hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0_24px_72px_rgba(0,0,0,0.7)] outline-none group"
    {onclick}
>
    {#if incident.image_base64}
        <div
            class="w-16 h-16 lg:w-20 lg:h-20 shrink-0 rounded-2xl overflow-hidden border border-white/10 group-hover:border-white/20 transition-colors"
        >
            <img
                src="data:image/jpeg;base64,{incident.image_base64}"
                alt={incident.product_name}
                class="w-full h-full object-cover"
            />
        </div>
    {:else}
        <div
            class="w-14 h-14 lg:w-16 lg:h-16 rounded-xe flex items-center justify-center shrink-0 rounded-2xl transition-transform
            {incident.analysis?.severity === 'high'
                ? 'bg-red-500/20 text-red-500'
                : 'bg-amber-500/20 text-amber-500'}"
        >
            <Icon icon="ri:alert-fill" width="32" class="lg:w-9" />
        </div>
    {/if}

    <div class="flex-1 min-w-0">
        <div class="flex items-center gap-3 mb-2">
            <h3
                class="text-white text-[19px] lg:text-[20px] font-bold m-0 italic"
            >
                {incident.product_name}
            </h3>
            {#if incident.detected_brand && incident.detected_brand !== "Unknown"}
                <span
                    class="bg-white/10 backdrop-blur-sm text-white/80 px-3 py-1 rounded-full text-[12px] lg:text-[13px] font-semibold"
                    >{incident.detected_brand}</span
                >
            {/if}
        </div>

        <p
            class="text-white/70 text-sm lg:text-base m-0 mb-3 leading-tight italic"
        >
            {incident.analysis?.verdict || "Greenwashing detected"}
        </p>

        <div class="flex flex-wrap gap-2.5">
            <span
                class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11px] lg:text-[12px] font-semibold capitalize backdrop-blur-sm
				{incident.analysis?.severity === 'high'
                    ? 'bg-red-500/20 text-red-400'
                    : incident.analysis?.severity === 'medium'
                      ? 'bg-amber-500/20 text-amber-400'
                      : 'bg-emerald-500/20 text-emerald-400'}"
            >
                <Icon icon="ri:error-warning-fill" width="15" />
                {incident.analysis?.severity || "unknown"} severity
            </span>
            <span
                class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11px] lg:text-[12px] font-semibold bg-indigo-500/20 text-indigo-300 backdrop-blur-sm"
            >
                <Icon icon="ri:shield-check-fill" width="15" />
                {incident.analysis?.confidence || "unknown"} confidence
            </span>
            <span
                class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11px] lg:text-[12px] font-semibold bg-white/10 text-white/70 backdrop-blur-sm"
            >
                <Icon icon="ri:calendar-line" width="15" />
                {new Date(incident.created_at).toLocaleDateString()}
            </span>
        </div>
    </div>

    <div
        class="flex flex-col items-center gap-1.5 text-[11px] lg:text-[12px] font-bold uppercase text-red-400"
    >
        <Icon icon="ri:spam-2-fill" width="26" class="text-red-400 lg:w-7" />
        <span>Confirmed</span>
    </div>
</button>
