import { Toolbar } from "@/app/components/building-passport/Toolbar";
import { getPropertyMeta, getDocument } from "./utils";
import BackToPortfolioButton from "@/app/components/building-passport/BackToPortfolioButton";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
// import "@tremor/react/dist/esm/tremor.css";

function EstimatedDataNotification() {
  return (
    <div className="flex items-center text-brandmidblue mt-4">
      <ExclamationCircleIcon className="h-5 w-5 mr-2" />
      <div>Data for this property has been estimated based on nearby homes</div>
    </div>
  );
}

export default async function DashboardLayout(props: {
  children: React.ReactNode;
  params: Promise<{ slug: string; propertyId: string }>;
}) {
  const params = await props.params;

  const {
    // will be a page or nested layout
    children,
  } = props;

  const propertyId = params.propertyId ?? "";
  const portfolioId = params.slug ?? "";

  // The layout is a server component by default so we can fetch meta data here
  const propertyMeta = await getPropertyMeta(params.propertyId);
  // We check if we have an uploaded condition report and if so, we show the condition tab. Otherwise, we
  // don't show it
  const decentHomes = await getDocument({
    uprn: String(propertyMeta.uprn),
    documentType: "DECENT_HOMES_SUMMARY",
  });

  if (!propertyId && propertyId !== "0") {
    throw Error("Invalid propertyId");
  }

  if (!portfolioId && portfolioId !== "0") {
    throw Error("Invalid portfolioId");
  }

  return (
    <section>
      <div className="mx-auto w-full max-w-6xl mb-10">
        <div className="flex justify-start items-end pr-8 py-8">
          <div className="mr-2">
            <BackToPortfolioButton portfolioId={portfolioId} />
          </div>

          <h1 className="text-3xl font-bold mr-3 text-gray-900">
            {propertyMeta.address}
          </h1>
          <p className="text-xl text-gray-700">{propertyMeta.postcode}</p>
        </div>
        <div className="col-span-12 justify-center bg-white/70 backdrop-blur-md border border-gray-100 shadow-sm py-1.5 rounded-xl">
          <Toolbar
            propertyId={propertyId}
            portfolioId={portfolioId}
            propertyMeta={propertyMeta}
            decentHomes={decentHomes}
          />
        </div>
        {propertyMeta.detailsEpc?.estimated && <EstimatedDataNotification />}
        {children}
      </div>
    </section>
  );
}
