"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";

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

  const handleCheckboxChange = (e) => {
    setIsChecked(e.target.checked);
  };

  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Save"
            cancelButtonText="Cancel"
            topbarTitle="Update Agent"
            state="add"
          />
          {/* Create agent Container */}
          <div className={createAgentStyle.createAgentContainer}>
            <TopToolTip />
            <div className={createAgentStyle.inputMainContainer}>
              {/* 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" />
                <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" />
                <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" />
                <Prompts show={false} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Page;