"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { useSession } from "next-auth/react";
import { AtlasChat } from "@/components/AtlasChat";
import { OrchestratorChat } from "@/components/OrchestratorChat";
import { Loader2 } from "lucide-react";

interface Project {
  id: string;
  productName: string;
  stage?: "discovery" | "architecture" | "building" | "active";
}

export default function ProjectOverviewPage() {
  const params = useParams();
  const projectId = params.projectId as string;
  const { status: authStatus } = useSession();
  const [project, setProject] = useState<Project | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (authStatus !== "authenticated") {
      if (authStatus === "unauthenticated") setLoading(false);
      return;
    }
    fetch(`/api/projects/${projectId}`)
      .then((r) => r.json())
      .then((d) => setProject(d.project))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [authStatus, projectId]);

  if (loading) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
        <Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
      </div>
    );
  }

  if (!project) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90", fontSize: "0.88rem" }}>
        Project not found.
      </div>
    );
  }

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
      {(!project.stage || project.stage === "discovery") ? (
        <AtlasChat
          projectId={projectId}
          projectName={project.productName}
        />
      ) : (
        <OrchestratorChat
          projectId={projectId}
          projectName={project.productName}
        />
      )}
    </div>
  );
}