"use client";

import React from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import { useRouter } from "next/navigation";
import ActionButton from "../components/actionButton/ActionButton";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card";
import SearchIcon from "../components/icons/search";
import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";

const AgentsPage = () => {
  const router = useRouter();

  const sampleData = [
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
    {
      name: "DOKS OneCB Dev",
      endPoint: "http://100.64.1.9:6969",
      type: "Tailscale",
      proxyName: "doks-onecbdev-kube-apiserver-proxy",
      dateCreated: "2/11/2026",
    },
  ];
  const isMobile = useIsMobile();
  return (
    <div className={globalStyle.section}>
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Add Agents"
            topbarTitle="Agents"
            requiredButtons={["title", "add", "search"]}
          />

          <div className={styles.cardContainer}>
            <MobileSearchBar />
            {isMobile &&
              sampleData.map((data, key) => {
                return <Card data={data} key={key} />;
              })}
          </div>

          <div className={styles.tableContainer}>
            <table className={styles.table}>
              <thead>
                <tr>
                  <th width="25%">Name</th>
                  <th>Endpoint</th>
                  <th>Type</th>
                  <th>Proxy Name</th>
                  <th>Date Created</th>

                  <th width="10%"></th>
                </tr>
              </thead>

              <tbody>
                {!isMobile &&
                  sampleData.map((org, index) => {
                    return (
                      <tr
                        key={index}
                        onClick={() => router.push(`/agents/${org.name}`)}
                      >
                        <td>{org.name}</td>
                        <td>{org.endPoint}</td>
                        <td>
                          <div className={styles.type}>{org.type}</div>
                        </td>
                        <td>{org.proxyName}</td>
                        <td>{org.dateCreated}</td>
                        <td>
                          <div className={styles.actions}>
                            <div>
                              <ActionButton icon={<ViewIcon />} />
                            </div>
                            <div>
                              <ActionButton icon={<DeleteIcon />} />
                            </div>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AgentsPage;