import React from 'react';
import { Dialog } from '@headlessui/react';
import tw from 'twin.macro';
import { XIcon } from './firewallIcons';

const DOCS: { title: string; body: string }[] = [
    {
        title: 'Live bar (top right)',
        body: 'Real-time snapshot from the last few seconds — packets/sec, blocked/sec, block rate, and connections. Refreshes automatically while the tab is visible.',
    },
    {
        title: 'Total traffic',
        body: 'All inbound packets the firewall saw in the selected time range. The sparkline shows how volume changed across that window.',
    },
    {
        title: 'Total blocked',
        body: 'Packets dropped or rejected by your rules. A rising trend may mean an attack or a rule that is too strict.',
    },
    {
        title: 'Total passed',
        body: 'Packets that cleared your rules and reached the server. This is legitimate traffic that was allowed through.',
    },
    {
        title: 'Avg packet size',
        body: 'Average bytes per packet (total bytes ÷ total packets). Useful for spotting unusual payload sizes.',
    },
    {
        title: 'Avg drop / pass rate',
        body: 'Share of traffic blocked vs allowed as a percentage of total packets in the window.',
    },
    {
        title: 'Trend (↑ ↓ Stable)',
        body: 'Compares the second half of the selected time range to the first half. Green ↑ with the percentage means the metric rose by more than about 2%; red ↓ means it fell by more than about 2%; Stable means the change stayed within that band. On each main stat card, the same value is shown in the top-right corner inside the mini sparkline panel so it stays clear of the chart line.',
    },
    {
        title: 'Peak rate',
        body: 'Highest packets-per-second recorded in the window, with when it happened.',
    },
    {
        title: 'New connections',
        body: 'Count of new connection attempts observed — useful for SYN floods or join spikes.',
    },
    {
        title: 'Unique sources',
        body: 'How many different source IPs sent traffic. A sudden jump can indicate distributed traffic.',
    },
    {
        title: 'Active rules',
        body: 'Number of enabled firewall rules on this server, including rules with no matches yet.',
    },
    {
        title: 'Top Active Ports',
        body: 'Firewall-protected ports ranked by traffic. Percentages show each port’s share of total packets.',
    },
    {
        title: 'Protocol dist.',
        body: 'Split of traffic by TCP, UDP, and ICMP. Helps spot protocol-specific floods.',
    },
    {
        title: 'Traffic over time',
        body: 'Chart of inbound, passed, and blocked packets per second across the selected range.',
    },
    {
        title: 'Per-rule breakdown',
        body: 'Which rules matched packets and how much. Idle rules still appear if they are enabled.',
    },
    {
        title: 'Top sources',
        body: 'IPs sending the most traffic. Requires conntrack on the node; may be empty if unavailable.',
    },
];

type Props = {
    onClose: () => void;
};

export default function FirewallAnalyticsDocsPopup({ onClose }: Props) {
    return (
        <Dialog open onClose={onClose} className="relative z-50">
            <div className="fixed inset-0 bg-black/60" aria-hidden="true" />
            <div className="fixed inset-0 overflow-y-auto">
                <div className="flex min-h-full items-center justify-center p-4">
                    <Dialog.Panel
                        css={tw`relative rounded-lg shadow-xl w-full flex flex-col`}
                        style={{
                            maxWidth: '520px',
                            maxHeight: 'min(85vh, 640px)',
                            background: 'var(--pageSecondary, hsl(209, 20%, 25%))',
                        }}
                    >
                        <div css={tw`flex items-center justify-between px-5 py-4 border-b border-neutral-600 flex-none`}>
                            <Dialog.Title css={tw`text-base font-semibold text-neutral-100`}>
                                Analytics guide
                            </Dialog.Title>
                            <button type="button" onClick={onClose} css={tw`text-neutral-400 hover:text-neutral-200`} aria-label="Close">
                                <XIcon size={18} />
                            </button>
                        </div>
                        <div css={tw`overflow-y-auto px-5 py-4 flex flex-col gap-4`}>
                            <p css={tw`text-sm text-neutral-400`}>
                                Short explanations for each metric on this dashboard. All numbers reflect the time range you pick (1m, 1h, etc.).
                            </p>
                            {DOCS.map((item) => (
                                <div key={item.title}>
                                    <p css={tw`text-sm font-medium text-neutral-200 mb-0.5`}>{item.title}</p>
                                    <p css={tw`text-sm text-neutral-400 leading-relaxed`}>{item.body}</p>
                                </div>
                            ))}
                        </div>
                    </Dialog.Panel>
                </div>
            </div>
        </Dialog>
    );
}