import { useState, type ComponentProps } from "react";
import Button from "../twui/layout/Button";
import useStatus from "../twui/hooks/useStatus";
import fetchApi from "../twui/utils/fetch/fetchApi";
import type { ApiReqParams } from "@/src/types";
import Row from "../twui/layout/Row";
import Stack from "../twui/layout/Stack";
import { CircleCheck, TriangleAlert } from "lucide-react";
import Span from "../twui/layout/Span";
import Tag from "../twui/elements/Tag";
import { AppData } from "@/src/data/app-data";
import type { APIResponseObject } from "@moduletrace/bunext/types";
import HostWgIpField, { type HostWgIpFieldStatus } from "./host-wg-ip-field";
import GrabNextSubnetButton from "./grab-next-subnet-button";

type Props = {
    button_props?: Omit<ComponentProps<typeof Button>, "title">;
};

export default function SetupMainHostButton({ button_props }: Props) {
    const { loading, setLoading, status, setStatus } = useStatus();

    const [wgIP, setWgIP] = useState<string>(AppData["DefaultPrivateIP"]);
    const [ipStatus, setIpStatus] = useState<HostWgIpFieldStatus>("checking");

    return (
        <Stack className="w-full items-stretch gap-3">
            {/* <HostWgIpField
                value={wgIP}
                onChange={setWgIP}
                onStatus={setIpStatus}
                autoFocus
            /> */}

            {status?.error && status.msg ? (
                <Tag
                    variant="outlined"
                    color="error"
                    className="w-full py-1.5 outline-error/50 bg-error/5!"
                >
                    <Row>
                        <TriangleAlert size={15} />
                        <Span>{status.msg}</Span>
                    </Row>
                </Tag>
            ) : null}
            {status?.success && status.msg ? (
                <Tag
                    variant="outlined"
                    color="success"
                    className="w-full py-1.5 outline-success/50 bg-success/5!"
                >
                    <Row>
                        <CircleCheck size={15} />
                        <Span>{status.msg}</Span>
                    </Row>
                </Tag>
            ) : null}

            <Row className="w-full items-center gap-2">
                <GrabNextSubnetButton onGrab={setWgIP} />

                <Button
                    title="Setup Main Host"
                    {...button_props}
                    disabled={ipStatus !== "available"}
                    loading={loading}
                    onClick={() => {
                        setLoading(true);
                        setStatus(undefined);

                        fetchApi<ApiReqParams, APIResponseObject>(
                            `/api/admin/setup-main-host`,
                            {
                                method: "POST",
                                body: { ip_address: wgIP },
                            },
                        )
                            .then((res) => {
                                if (res.success) {
                                    window.location.reload();
                                }

                                setStatus({
                                    success: res.success,
                                    error: !res.success,
                                    msg: res.msg,
                                });
                            })
                            .finally(() => {
                                setLoading(false);
                            });
                    }}
                >
                    Setup Main Host
                </Button>
            </Row>
        </Stack>
    );
}