import CodeBlock from "@/src/components/twui/elements/CodeBlock";
import Row from "@/src/components/twui/layout/Row";
import Span from "@/src/components/twui/layout/Span";
import Stack from "@/src/components/twui/layout/Stack";
import StatusDot, { type StatusTone } from "@/src/components/general/status-dot";
import type {
    FirewallRuleKind,
    FirewallRuleInfo,
} from "@/src/functions/backend/firewall/grab-firewall-status";

const KIND_META: Record<FirewallRuleKind, { label: string; tone: StatusTone }> = {
    required: { label: "Active", tone: "success" },
    temporary: { label: "Temporary", tone: "warning" },
    orphaned: { label: "Orphaned", tone: "error" },
    other: { label: "Unmanaged", tone: "neutral" },
};

type Props = {
    rule: FirewallRuleInfo;
};

export default function FirewallRuleRow({ rule }: Props) {
    const meta = KIND_META[rule.kind];

    return (
        <Stack className="w-full items-stretch gap-2.5 px-4 py-3 border-t border-line first:border-t-0">
            <Row className="w-full items-start justify-between gap-3 flex-nowrap">
                <Span className="text-[15px] leading-5 min-w-0">{rule.description}</Span>
                <StatusDot tone={meta.tone} label={meta.label} className="shrink-0 mt-0.5" />
            </Row>

            {rule.delete_command ? (
                <CodeBlock
                    singleBlock
                    language="shell"
                    wrapperProps={{ className: "max-w-full!" }}
                >
                    {`# remove rule\n${rule.delete_command}`}
                </CodeBlock>
            ) : null}
        </Stack>
    );
}