"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { Badge, Button, WorkInProgress, LoadingSpinner } from "ikoncomponents";

import { CustomTabs } from "ikoncomponents";

import { getProjectByIdentifierApi } from "@/app/utils/api/projectApi";
import { Project } from "../types/project";
import SummaryTab from "./component/summaryTab";
import RiskComponent from "./component/riskTab";
import ExpenseTab from "./component/expenseTab";
import { getProductsApi } from "@/app/utils/api/productOfProjectApi";
import { ProductOfProject } from "@/app/utils/interface/productOfProject";
import IssueComponent from "./component/issueTab";
import MomTab from "./component/momTab";
import ScheduleTab from "./component/scheduleTab";
import ResourcesTab from "./component/resourceTab";

export default function ProjectDetailsPage() {
  const { projectIdentifier } = useParams();

  const [project, setProject] = useState<Project | null>(null);
  const [product, setProduct] = useState<ProductOfProject | null>(null);
  const [projectLoading, setProjectLoading] = useState(true);
  const [productLoading, setProductLoading] = useState(true);

  useEffect(() => {
    const loadProject = async () => {
      try {
        const data = await getProjectByIdentifierApi(
          projectIdentifier as string
        );
        setProject(data);
      } finally {
        setProjectLoading(false);
      }
    };

    loadProject();
  }, [projectIdentifier]);

  useEffect(() => {
    const loadProductDetails = async () => {
      try {
        const data = await getProductsApi(
          projectIdentifier as string
        );
        setProduct(Array.isArray(data) ? (data[0] ?? null) : null);
      } finally {
        setProductLoading(false);
      }
    };

    loadProductDetails();
  }, [projectIdentifier]);

  if (projectLoading || productLoading)
    return (
      <div className="flex h-[60vh] w-full items-center justify-center">
        <LoadingSpinner />
      </div>
    );
  if (!project) return <div className="text-sm">Project not found</div>;

  return (
    <div className="grid gap-6">
      {/* Header */}

      {/* CustomTabs */}
      <CustomTabs
        tabArray={[
          {
            tabName: "Summary",
            tabId: "summary",
            default: true,
            tabContent: <SummaryTab project={project} />,
          },
          {
            tabName: "Schedule",
            tabId: "schedule",
            default: false,
            tabContent: (
              <ScheduleTab projectIdentifier={projectIdentifier as string} />
            ),
          },
          {
            tabName: "Resources",
            tabId: "resources",
            default: false,
            tabContent: <ResourcesTab project={product} />,
          },
          {
            tabName: "Expenses",
            tabId: "expenses",
            default: false,
            tabContent: <ExpenseTab productData={product} />,
          },
          // {
          //   tabName: "VOs",
          //   tabId: "vos",
          //   default: false,
          //   tabContent: <WorkInProgress />,
          // },
          {
            tabName: "Risks",
            tabId: "risks",
            default: false,
            tabContent: projectIdentifier ? (
              <RiskComponent projectIdentifier={projectIdentifier as string} />
            ) : null,
          },
          {
            tabName: "Issues",
            tabId: "issues",
            default: false,
            tabContent: (
              <IssueComponent projectIdentifier={projectIdentifier as string} />
            ),
          },
          {
            tabName: "MOM",
            tabId: "Moms",
            default: false,
            tabContent: (
              <MomTab
                projectIdentifier={projectIdentifier as string}
                projectName={project.projectName}
              />
            ),
          },
          // {
          //   tabName: "Settings",
          //   tabId: "settings",
          //   default: false,
          //   tabContent: <WorkInProgress />,
          // },
        ]}
      />
    </div>
  );
}