import type { BunextPageModuleMeta } from "@moduletrace/bunext/types";
import { useContext } from "react";
import AdminHero from "@/src/components/general/admin-hero";
import DeleteHostButton from "@/src/components/general/delete-host-button";
import { SiteData } from "@/src/data/site-data";
import Button from "@/src/components/twui/layout/Button";
import Divider from "@/src/components/twui/layout/Divider";
import EmptyContent from "@/src/components/twui/elements/EmptyContent";
import Stack from "@/src/components/twui/layout/Stack";
import { AppContext } from "@/src/pages/__root";
import MainHostStatusSection from "../(sections)/main-host-status-section";
import HostPublicIpSection from "../(sections)/host-public-ip-section";
import InterfaceConfigSection from "../(sections)/interface-config-section";

export default function AdminSingleHostPage() {
    const { pageProps, query } = useContext(AppContext);

    const host_id = Number(query?.host_id || pageProps?.host?.id || 0);

    const host = pageProps?.host || undefined;
    const clients = pageProps?.clients || [];

    if (!pageProps?.host && host_id != 0) {
        return (
            <>
                <AdminHero
                    title="Host"
                    description="WireGuard server configuration and interface details"
                />
                <Divider className="mb-6" />
                <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
                    <EmptyContent title="Host not found" />
                </Stack>
            </>
        );
    }

    const title = host_id == 0 ? "Main Host" : `Host #${host_id}`;

    return (
        <>
            <AdminHero
                title={host ? title : "Host"}
                description="WireGuard server configuration and interface details"
                buttons={
                    <>
                        <Button
                            title="Edit Host"
                            size="small"
                            variant="outlined"
                            href={`/admin/hosts/${host_id}/edit`}
                        >
                            Edit Host
                        </Button>
                        <Button
                            title="View Clients"
                            size="small"
                            variant="outlined"
                            color="primary"
                            href={`/admin/hosts/${host_id}/clients`}
                        >
                            View Clients
                        </Button>
                        <Button
                            title="Add Client"
                            size="small"
                            href={`/admin/hosts/${host_id}/clients/add-client`}
                        >
                            Add Client
                        </Button>
                        <DeleteHostButton host_id={host_id} />
                    </>
                }
            />

            <Divider className="mb-6" />

            <Stack className="w-full px-6 pb-8 gap-5 items-stretch">
                <MainHostStatusSection host={host} clients={clients} />
                <HostPublicIpSection
                    host_id={host_id}
                    current_ip={host?.public_ip_address || ""}
                />
                <InterfaceConfigSection host={host} clients={clients} />
            </Stack>
        </>
    );
}

export const meta: BunextPageModuleMeta = {
    title: `Host | ${SiteData["SiteName"]}`,
    description: `WireGuard host page`,
};