import { Metadata } from "next";
import { cookies } from "next/headers";

import { retrieveUserSession } from "@/lib/user-session";
import Footer from "@/components/common/footer";
import NavbarVisibilityController from "@/components/common/navbar-visibility-controller";
import UnderMaintenanceMode from "@/components/pages/under-maintenance/under-maintenance";
import UnderMaintenanceBanner from "@/components/pages/participant/under-maintenance-banner";
import { COOKIE_UNDER_MAINTENANCE_BANNER } from "@/constants/cookie-mapping";

export const metadata: Metadata = {
  title: {
    template: "%s | People for Research",
    default: "Get paid for surveys & research studies | People for Research",
  },
  description:
    "Join People for Research to participate in paid surveys, focus groups, product testing, and market research studies in the UK. Start earning money today by sharing your opinions!",
  openGraph: {
    title: "Get paid for surveys & research studies | People for Research",
    description:
      "Join People for Research to participate in paid surveys, focus groups, product testing, and market research studies in the UK. Start earning money today by sharing your opinions!",
    url: "https://peopleforresearch.co.uk/participant",
    type: "website",
    locale: "en_GB",
    siteName: "People for Research",
    images: [
      {
        url: "/global-assets/pfr-logo-og-participant.svg",
        alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
        width: 200,
        height: 150,
      },
    ],
  },
  twitter: {
    title: "Get paid for surveys & research studies | People for Research",
    card: "summary_large_image",
    images: "/global-assets/pfr-logo-og-participant.svg",
  },
};

export default async function ParticipantRootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const isInMaintenance =
    process.env.UNDER_MAINTENANCE_ALLOW_CLIENT_WEBSITE === "true";

  if (isInMaintenance) {
    return <UnderMaintenanceMode />;
  }

  const { firstName, lastName, email, isLoggedIn } =
    (await retrieveUserSession()) || {};
  const userInitials = `${firstName?.charAt(0)}${lastName?.charAt(0)}` || "";

  const startDate = process.env.UNDER_MAINTENANCE_BANNER_START_DATE;
  const endDate = process.env.UNDER_MAINTENANCE_BANNER_END_DATE;

  const isMaintenanceWindow = (() => {
    if (!startDate || !endDate) return false;
    const now = new Date();
    return now >= new Date(startDate) && now <= new Date(endDate);
  })();

  const cookieStore = cookies();
  const dismissed = cookieStore.get(COOKIE_UNDER_MAINTENANCE_BANNER)?.value;
  const showBanner = isMaintenanceWindow && dismissed !== endDate;

  const formattedDate = endDate
    ? new Date(endDate).toLocaleDateString("en-GB", {
        weekday: "long",
        day: "numeric",
        month: "long",
      })
    : "";

  const formattedTime = endDate
    ? new Date(endDate).toLocaleTimeString("en-GB", {
        hour: "numeric",
        minute: "2-digit",
        hour12: true,
      })
    : "";

  return (
    <div className="flex flex-col min-h-screen">
      {showBanner && (
        <UnderMaintenanceBanner
          endDate={endDate!}
          formattedDate={formattedDate}
          formattedTime={formattedTime}
        />
      )}
      <NavbarVisibilityController
        email={email}
        firstName={firstName}
        isLoggedIn={isLoggedIn}
        lastName={lastName}
        userInitials={userInitials}
      />
      <main className="flex-grow" id="main-content">
        {children}
      </main>
      <Footer source="participant" />
    </div>
  );
}