// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
// SPDX-License-Identifier: MIT

import Image from 'next/image'
import { SarifApiResponse } from '../lib/apiClient'
import { cn } from '../lib/utils'
import ResultTable from './ResultTable'
import { config } from '../config'

interface Props {
    currentScan: SarifApiResponse | null
}

export default function ResultGrid({ currentScan }: Props) {
    return (
        <div className="py-10">
            {currentScan && (
                <div className="container mx-auto">
                    <div className="mx-auto max-w-7xl px-6 lg:px-8">
                        <div className="mb-8">
                            <h2 className="mb-1 text-2xl font-semibold">
                                Displaying results for:
                            </h2>
                            <a
                                target="_blank"
                                className="text-lg font-medium text-blue-500"
                                href={
                                    currentScan?.runs[0].properties
                                        .testedRepository
                                }
                                rel="noreferrer"
                            >
                                {
                                    currentScan?.runs[0].properties
                                        .testedRepository
                                }
                            </a>
                        </div>
                        <div className="-mx-6 grid grid-cols-2 gap-0.5 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-3">
                            {currentScan.runs[0].properties.testedRepository &&
                                currentScan?.runs[0].properties.badges
                                    .sort((a, b) =>
                                        a.badgeId.localeCompare(b.badgeId),
                                    )
                                    .map((badge) => (
                                        <div
                                            className="overflow-hidden bg-gray-400/10 p-10"
                                            key={`${badge.badgeId}-${badge.badgeLevel}`}
                                        >
                                            <div className="relative aspect-square">
                                                {!badge.badgeGranted && (
                                                    <div className="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 rotate-45 bg-red-600 px-10 py-2 font-bold text-white">
                                                        Not granted
                                                    </div>
                                                )}
                                                <Image
                                                    className={cn(
                                                        'h-40 w-full object-contain',
                                                        !badge.badgeGranted &&
                                                            'opacity-50',
                                                    )}
                                                    src={
                                                        config.API_BASE_URL.replace(
                                                            '/api/v1',
                                                            '',
                                                        ) + badge.badgeUrl
                                                    }
                                                    fill
                                                    alt={badge.badgeId}
                                                />
                                            </div>
                                            <p
                                                className={cn(
                                                    'text-sm',
                                                    !badge.badgeGranted &&
                                                        'opacity-50',
                                                )}
                                            >
                                                {badge.badgeDescription}
                                            </p>
                                        </div>
                                    ))}
                        </div>
                        <div className="mt-12">
                            <ResultTable currentScan={currentScan} />
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}