import CodeBlock from "@/src/components/twui/elements/CodeBlock";
import Tag from "@/src/components/twui/elements/Tag";
import type {
    FirewallRuleKind,
    FirewallRuleInfo,
} from "@/src/functions/backend/firewall/grab-firewall-status";
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 type { TWUIButtonColorType } from "@/src/components/twui/layout/Button";
import {
    ShieldAlert,
    ShieldCheck,
    ShieldX,
    type LucideIcon,
} from "lucide-react";

const KIND_META: Record<
    FirewallRuleKind,
    {
        label: string;
        color: TWUIButtonColorType;
        icon: LucideIcon;
        text_class: string;
    }
> = {
    required: {
        label: `Active`,
        color: `success`,
        icon: ShieldCheck,
        text_class: `text-success`,
    },
    temporary: {
        label: `Temporary`,
        color: `warning`,
        icon: ShieldAlert,
        text_class: `text-warning`,
    },
    orphaned: {
        label: `Orphaned`,
        color: `error`,
        icon: ShieldX,
        text_class: `text-error`,
    },
    other: {
        label: `Unmanaged`,
        color: `gray`,
        icon: ShieldCheck,
        text_class: `text-foreground-light/45 dark:text-foreground-dark/45`,
    },
};

type Props = {
    rule: FirewallRuleInfo;
};

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

    return (
        <Stack className="w-full items-stretch gap-2.5 rounded-lg bg-background-light dark:bg-[#0e0e10] border border-slate-200 dark:border-white/10 p-3">
            <Row className="w-full items-start justify-between gap-3 flex-wrap">
                <Row className="gap-2.5 items-start min-w-0">
                    <Icon
                        size={15}
                        className={`mt-0.5 shrink-0 ${meta.text_class}`}
                    />
                    <Span className="text-[12.5px] leading-5 min-w-0">
                        {rule.description}
                    </Span>
                </Row>
                <Tag
                    variant="outlined"
                    color={meta.color}
                    className="shrink-0"
                >
                    {meta.label}
                </Tag>
            </Row>

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