import React, { useState, useMemo } from 'react';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/Components/ui/card";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/Components/ui/select";
import {SecuritySummaryReportResultType} from "@/types/security-summary";
import VulnerabilityPieChart from "@/Components/VulnerabilityPieChart";

export default function VulnerabilitiesActiveCard({reportData}: { reportData: SecuritySummaryReportResultType }) {
    const vulnerabilityData = useMemo(() => [
        { name: 'Critical', value: reportData.n_vulns.active.critical, fill: 'hsl(var(--chart-1))' },
        { name: 'High', value: reportData.n_vulns.active.high, fill: 'hsl(var(--chart-2))' },
        { name: 'Medium', value: reportData.n_vulns.active.medium, fill: 'hsl(var(--chart-3))' },
    ], [reportData]);

    const [activeMetric, setActiveMetric] = useState(vulnerabilityData[0].name);

    const activeIndex = useMemo(
        () => vulnerabilityData.findIndex((item) => item.name === activeMetric),
        [activeMetric, vulnerabilityData]
    );

    const metrics = useMemo(() => vulnerabilityData.map((item) => item.name), [vulnerabilityData]);

    const chartConfig: any = {
        'Critical': {
            label: "Critical",
            color: 'hsl(var(--chart-1))'
        },
        'High': {
            label: "High",
            color: 'hsl(var(--chart-2))'
        },
        'Medium': {
            label: "Medium",
            color: 'hsl(var(--chart-3))'
        },
    };

    return (
        <Card>
            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-0">
                <div className="grid gap-1">
                    <CardTitle>Active Vulnerabilities</CardTitle>
                    <CardDescription>Number of Active Vulnerabilities</CardDescription>
                </div>
                <Select value={activeMetric} onValueChange={setActiveMetric}>
                    <SelectTrigger
                        className="ml-auto h-8 w-[180px] rounded-lg"
                        aria-label="Select security metric"
                    >
                        <SelectValue placeholder="Select metric" />
                    </SelectTrigger>
                    <SelectContent align="end" className="rounded-lg">
                        {metrics.map((metric) => (
                            <SelectItem
                                key={metric}
                                value={metric}
                                className="rounded-lg [&_span]:flex"
                            >
                                <div className="flex items-center gap-2 text-xs">
                                    <span
                                        className="h-3 w-3 rounded-sm"
                                        style={{
                                            backgroundColor: chartConfig[metric]?.color
                                        }}
                                    />
                                    {chartConfig[metric].label}
                                </div>
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            </CardHeader>
            <CardContent className="flex flex-1 justify-center pb-0">
                <VulnerabilityPieChart vulnerabilityData={vulnerabilityData} activeIndex={activeIndex} />
            </CardContent>
        </Card>
    );
}