"use client";
import React, { useState } from "react";
import TextField from "@/app/components/fields/textfield";
import TopHeader from "@/app/components/topHeader/TopHeader";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import globalStyle from "../../globalStyle.module.css";
import createAgentStyle from "./styles.module.css";
import Prompts from "@/app/components/prompts/Prompts";
import useAgentForm from "@/app/hooks/useAgentForm";
import Alert from "@/app/components/alerts/Alert";

const AddAgentPage = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (e) => {
    setIsChecked(e.target.checked);
  };
  const {
    register,
    handleSubmit,
    errors,
    onSubmit,
    triggerAlert,
    setTriggerAlert,
  } = useAgentForm();

  return (
    <div className={globalStyle.section}>
      {triggerAlert && (
        <Alert
          setTriggerAlert={setTriggerAlert}
          onClick={() => setEditState(true)}
          title="Create New Agent"
        />
      )}
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Create New Agent"
            state="add"
            requiredButtons={["title", "save"]}
          />
          {/* Create agent Container */}
          <div className={createAgentStyle.createAgentContainer}>
            <TopToolTip />
            <form
              className={createAgentStyle.inputMainContainer}
              id="form"
              onSubmit={handleSubmit(onSubmit)}
            >
              {/* Header */}
              <div className={createAgentStyle.headerContainer}>
                <div className={createAgentStyle.headerTxt}>
                  <p>Agent Details</p>
                </div>
              </div>
              {/* Agent name input */}
              <div className={createAgentStyle.inputContainer}>
                {/* Label */}
                <div className={createAgentStyle.labelContainer}>
                  <p>Agent Name</p>
                  <p className={createAgentStyle.required}>*</p>
                </div>
                {/* Input Field */}
                <TextField
                  placeHolder="Enter agent name"
                  {...register("agentName", { required: true })}
                  hasError={!!errors.agentName}
                />
                <Prompts show={false} />
              </div>
              {/* Kubernetes API input */}
              <div className={createAgentStyle.inputContainer}>
                {/* Label */}
                <div className={createAgentStyle.labelContainer}>
                  <p>Kubernetes API Proxy Name</p>
                  <p className={createAgentStyle.required}>*</p>
                </div>
                {/* Input Field */}
                <TextField
                  placeHolder="Enter proxy name"
                  {...register("proxyName", { required: true })}
                  hasError={!!errors.proxyName}
                />
                <Prompts show={false} />
              </div>
              {/* Checkbox */}
              <div className={createAgentStyle.checkboxMainContainer}>
                <div className={createAgentStyle.checkboxContainer}>
                  <div className={createAgentStyle.checkbox}>
                    {/* Checkbox */}
                    <div className={createAgentStyle.check}>
                      <input
                        type="checkbox"
                        checked={isChecked}
                        onChange={handleCheckboxChange}
                        className={createAgentStyle.hiddenCheckbox}
                      />
                    </div>
                    {/* List */}
                    <div className={createAgentStyle.list}>
                      <p className={createAgentStyle.placeholderTxt}>
                        Use Tailscale VPN
                      </p>
                      <p className={createAgentStyle.secondaryTxt}>
                        Enable Tailscale for secure private networking. When
                        enabled, <br /> the endpoint will be automatically
                        resolved from Tailscale.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              {/* Agent endpoint */}
              <div className={createAgentStyle.inputContainer}>
                {/* Label */}
                <div className={createAgentStyle.labelContainer}>
                  <p>Agent Endpoint</p>
                  <p className={createAgentStyle.required}>*</p>
                </div>
                {/* Input Field */}
                <TextField
                  placeHolder="e.g., http://agent-01.example.com:8080"
                  {...register("agentEndpoint", { required: true })}
                  hasError={!!errors.agentEndpoint}
                />
                <Prompts show={false} />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddAgentPage;