"use client";
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./project-card/Card";
const ProjectsPage = () => {
  const router = useRouter();
  const isMobile = useIsMobile();
  const sampleData = [
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
    {
      name: "DOKS One Cooperative Bank Backend Develop",
      version: "v1",
      cpuUsed: "250",
      cpuLimit: "5000",
      memoryUsed: "13500",
      memoryLimit: "20000",
      storageUsed: "10000",
      storageLimit: "100000",
      dateCreated: "2025-11-07 01:43:18.313 +0000 UTC",
    },
  ];

  return (
    <div className={globalStyle.section}>
      <SuccessToast message="New Project added successfully!" />
      <div className={globalStyle.mainContainer}>
        <div className={globalStyle.container}>
          <TopHeader
            buttonText="Create Project"
            topbarTitle="Project"
            requiredButtons={["title", "add", "search"]}
          />
          {isMobile ? (
            <div className={styles.cardContainer}>
              <Card />
              <Card />
              <Card />
              <Card />
            </div>
          ) : (
            <div className={styles.tableContainer}>
              <table className={styles.table}>
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Version</th>
                    <th>CPU Used/Limit</th>
                    <th>Memory Used/Limit</th>
                    <th>Storage Used/Limit</th>
                    <th>Date Created</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {sampleData.map((project, index) => {
                    return (
                      <tr
                        key={index}
                        onClick={() => router.push("/projects/view")}
                      >
                        <td>{project.name}</td>
                        <td style={{ textAlign: "center" }}>
                          {project.version}
                        </td>
                        <td>
                          <span className={styles.used}>{project.cpuUsed}</span>{" "}
                          /{" "}
                          <span className={styles.limit}>
                            {project.cpuLimit}
                          </span>
                        </td>
                        <td>
                          <span className={styles.used}>
                            {project.memoryUsed}
                          </span>{" "}
                          /{" "}
                          <span className={styles.limit}>
                            {project.memoryLimit}
                          </span>
                        </td>
                        <td>
                          <span className={styles.used}>
                            {project.storageUsed}
                          </span>{" "}
                          /{" "}
                          <span className={styles.limit}>
                            {project.storageLimit}
                          </span>
                        </td>
                        <td>{project.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 ProjectsPage;