import { useContext } from "react";
import { AppContext } from "@/src/pages/_app";
import Stack from "@/twui/components/layout/Stack";
import H2 from "@/twui/components/layout/H2";
import Span from "@/twui/components/layout/Span";
import RemoteCodeBlock from "@/twui/components/elements/RemoteCodeBlock";
import SingleLineCodeBlock from "@/twui/components/elements/SingleLineCodeBlock";
import TurboCICodeBlock from "@/src/components/general/code-block";
import H3 from "@/twui/components/layout/H3";
import Button from "@/twui/components/layout/Button";
import LucideIcon from "@/twui/components/elements/lucide-icon";
import DownloadPrivateSSHKeyButton from "../(partials)/download-private-ssh-key";

export default function SSHConnection() {
    const { pageProps } = useContext(AppContext);
    const { deployment_user, deployment } = pageProps;

    if (!deployment_user?.id) {
        return null;
    }

    const is_super_admin = Boolean(deployment_user.is_super_admin);

    return (
        <>
            <Stack className="grid-cell-content">
                <H2>Connection</H2>
                <Span>
                    Use these information to connect this user to the Relay
                    server
                </Span>
            </Stack>
            <hr />
            <Stack className="nested-grid-frame grid-cols-2">
                <Stack className="grid-cell">
                    <Stack className="grid-cell-content">
                        <Stack className="gap-1">
                            <H3>Admin Port Forwarding</H3>

                            <Span>
                                Use these information to connect this user to
                                the Relay server
                            </Span>
                        </Stack>
                        <TurboCICodeBlock
                            content={`ssh -N -L 3773:localhost:80 -i /path/to/ssh/key ${deployment_user.username}@${deployment?.relay_server_ip}`}
                            mode="sh"
                        />
                    </Stack>
                </Stack>
                <Stack className="grid-cell">
                    <Stack className="grid-cell-content">
                        <Stack className="gap-1">
                            <H3>Download Private Key</H3>
                            <Span>
                                Download the private SSH key for{" "}
                                <code>{deployment_user.username}</code>
                            </Span>
                        </Stack>
                        <DownloadPrivateSSHKeyButton />
                    </Stack>
                </Stack>
            </Stack>
            <hr />
        </>
    );
}
