assessment-model/src/app/components/building-passport/Toolbar.tsx

"use client";

import { useState } from "react";
import {
  Cog6ToothIcon,
  NewspaperIcon,
  HomeModernIcon,
  WrenchScrewdriverIcon,
  SunIcon,
  CircleStackIcon,
  HeartIcon,
  CalendarDaysIcon,
} from "@heroicons/react/24/outline";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuLink,
} from "@/app/shadcn_components/ui/navigation-menu";
import { Button } from "@/app/shadcn_components/ui/button";
import { cva } from "class-variance-authority";
import { getUploadedFile } from "@/app/db/surveyDB/schema/surveyDB";
import BookSurveyModal from "@/app/portfolio/[slug]/components/BookSurveyModal";
import BookingSuccessToast from "@/app/portfolio/[slug]/components/BookingSuccessToast";
import { PropertyMeta } from "@/app/db/schema/property";

interface ToolbarProps {
  propertyId: string;
  portfolioId: string;
  propertyMeta: PropertyMeta;
  decentHomes: getUploadedFile;
}

const navigationMenuTriggerStyle = cva(
  [
    "bg-gray-50",
    "cursor-pointer",
    "group",
    "inline-flex",
    "h-10",
    "w-max",
    "items-center",
    "justify-center",
    "rounded-md",
    "bg-background",
    "px-4",
    "py-2",
    "text-sm",
    "font-medium",
    "transition-colors",
    "hover:bg-gray-200",
    "hover:text-accent-foreground",
    "focus:bg-accent",
    "focus:text-accent-foreground",
    "focus:outline-none",
    "disabled:pointer-events-none",
    "disabled:opacity-50",
    "data-[active]:bg-accent/50",
    "data-[state=open]:bg-gray-200",
    "text-gray-900",
  ].join(" ")
);

export function Toolbar({
  propertyId,
  portfolioId,
  propertyMeta,
  decentHomes,
}: ToolbarProps) {
  const [openModal, setOpenModal] = useState(false);
  const [showToast, setShowToast] = useState(false);

  function handleClickSettings() {
    console.log("Settings were clicked, implement me");
  }

  const preAssessmentReportButton = (
    <NavigationMenuLink
      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/assessment`}
    >
      <NewspaperIcon className="h-4 w-4 mr-2" />
      Data
    </NavigationMenuLink>
  );

  const documentsButton = (
    <NavigationMenuLink
      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/documents`}
    >
      <CircleStackIcon className="h-4 w-4 mr-2" />
      Documents
    </NavigationMenuLink>
  );

  const solarAnalysisButton = (
    <NavigationMenuLink
      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/solar-analysis`}
    >
      <SunIcon className="h-4 w-4 mr-2" />
      Solar
    </NavigationMenuLink>
  );

  const recommendationsButton = (
    <NavigationMenuLink
      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/plans`}
    >
      <WrenchScrewdriverIcon className="h-4 w-4 mr-2" />
      Retrofit Plans
    </NavigationMenuLink>
  );

  const decentHomesButton = (
    <NavigationMenuLink
      className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
      href={`/portfolio/${portfolioId}/building-passport/${propertyId}/decent-homes`}
    >
      <HeartIcon className="h-4 w-4 mr-2" />
      Decent Homes
    </NavigationMenuLink>
  );

  return (
    <>
      <div className="flex items-center justify-between w-full">
        {/* Left side: navigation */}
        <NavigationMenu>
          <NavigationMenuLink
            className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
            href={`/portfolio/${portfolioId}/building-passport/${propertyId}`}
          >
            <HomeModernIcon className="h-4 w-4 mr-2" />
            Summary
          </NavigationMenuLink>

          <NavigationMenuList>
            {preAssessmentReportButton}
            {Object.keys(decentHomes).length > 0 &&
              decentHomes.uprn &&
              decentHomesButton}
            {solarAnalysisButton}
            {recommendationsButton}
            {documentsButton}
            <NavigationMenuItem
              className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
              onClick={handleClickSettings}
            >
              <Cog6ToothIcon className="h-4 w-4 mr-2" />
              Settings
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>

        {/* ✅ Right side: Book a Survey button */}
        <div className="mr-3">
          <Button
            onClick={() => setOpenModal(true)}
            className="bg-brandblue text-white hover:bg-branddarkblue flex items-center"
          >
            Book an On Site Assessment
          </Button>
        </div>
      </div>

      {/* ✅ Modal */}
      {openModal && (
        <BookSurveyModal
          open={openModal}
          onOpenChange={setOpenModal}
          propertyId={BigInt(propertyId)}
          portfolioId={portfolioId}
          propertyMeta={propertyMeta}
          onSuccess={() => setShowToast(true)}
        />
      )}

      {/* ✅ Toast */}
      <BookingSuccessToast
        show={showToast}
        onClose={() => setShowToast(false)}
        message="Survey Request Recieved!"
        subtext="We'll be in contact soon. 🎉"
      />
    </>
  );
}