import React from 'react';
import {Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/Components/ui/card";
import { SecuritySummaryReportResultType } from "@/types/security-summary";

export default function ServicesPortExposureCard({ reportData }: { reportData: SecuritySummaryReportResultType }) {

    const portData = Object.entries(reportData.n_port).map(([port, data]) => ({
        name: `Port ${port}`,
        value: data.n
    }));

    return (
        <Card>
            <CardHeader>
                <CardTitle>Port Exposure Analysis</CardTitle>
                <CardDescription>Distribution of exposed ports</CardDescription>
            </CardHeader>
            <CardContent className="pl-2">
                <div className="h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                        <BarChart data={portData}>
                            <XAxis
                                dataKey="name"
                                stroke="#888888"
                                fontSize={12}
                                tickLine={false}
                                axisLine={false}
                            />
                            <YAxis
                                stroke="#888888"
                                fontSize={12}
                                tickLine={false}
                                axisLine={false}
                            />
                            <Bar
                                dataKey="value"
                                fill="currentColor"
                                radius={[4, 4, 0, 0]}
                                className="fill-primary"
                            />
                            <Tooltip
                                cursor={{
                                    fill: 'rgba(0, 0, 0, 0.1)',
                                }}
                                content={({active, payload}) => {
                                    if (active && payload && payload.length) {
                                        return (
                                            <div
                                                className="rounded-lg border bg-background p-2 shadow-sm">
                                                <div className="grid grid-cols-2 gap-2">
                                                    <div className="flex flex-col">
                                                                        <span
                                                                            className="text-[0.70rem] uppercase text-muted-foreground">
                                                                            Port
                                                                        </span>
                                                        <span className="font-bold">
                                                                            {payload[0].payload.name}
                                                                        </span>
                                                    </div>
                                                    <div className="flex flex-col">
                                                                        <span
                                                                            className="text-[0.70rem] uppercase text-muted-foreground">
                                                                            Count
                                                                        </span>
                                                        <span className="font-bold">
                                                                            {payload[0].value}
                                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    }
                                    return null
                                }}
                            />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </CardContent>
        </Card>
    );
}