import type { Metadata } from 'next';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'aos/dist/aos.css';
import '@/styles/global/style.css';
import '@/styles/global/cmo-spotlight.css';
import '@/styles/global/footer.css';
import '@/styles/global/header.css';
import '@/styles/global/header-footer-style.css';
import '@/styles/global/home.css';
import '@/styles/global/insight-details.css';
import '@/styles/global/insights.css';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import AnalyticsScripts from '@/components/providers/AnalyticsScripts';
import SiteScripts from '@/components/providers/SiteScripts';
import { unstable_rethrow } from 'next/navigation';
import { getSiteSettings } from '@/lib/api/services/site';
import { getPublicSiteSettings } from '@/lib/public/site-settings';

export async function generateMetadata(): Promise<Metadata> {
  try {
    const settings = await getPublicSiteSettings();
    return {
      robots:
        settings.maintenanceMode || !settings.allowSearchIndexing
          ? { index: false, follow: false }
          : { index: true, follow: true },
      openGraph: { type: 'website', siteName: settings.siteName || 'CMORoom' },
    };
  } catch {
    return {
      robots: { index: true, follow: true },
      openGraph: { type: 'website', siteName: 'CMORoom' },
    };
  }
}

const ARIAL_FONTS_URL =
  'https://fonts.cdnfonts.com/css/arial?styles=48878,48885,51076,48879,48880,48886,48889,49054,51911,51915,51914';

export default async function PublicLayout({ children }: { children: React.ReactNode }) {
  let maintenanceMode = false;
  let siteName = 'CMORoom';
  let gaId = '';
  let facebookPixelId = '';
  try {
    const settings = await getSiteSettings();
    maintenanceMode = settings.maintenanceMode;
    siteName = settings.siteName || siteName;
    gaId = settings.gaId;
    facebookPixelId = settings.facebookPixelId;
  } catch (error) {
    unstable_rethrow(error);
    /* keep the public site up if settings cannot be read */
  }

  return (
    <>
      <link rel="preconnect" href="https://fonts.cdnfonts.com" />
      <link rel="stylesheet" href={ARIAL_FONTS_URL} />
      {maintenanceMode ? (
        <div className="wrapper bg-color-black d-flex align-items-center justify-content-center" style={{ minHeight: '100vh' }}>
          <div className="text-center px-3">
            <h1 className="color-white mb-3">{siteName}</h1>
            <p className="color-content mb-0">We&rsquo;re down for maintenance and will be back shortly.</p>
          </div>
        </div>
      ) : (
        <div className="wrapper bg-color-black">
          <Header />
          {children}
          <Footer />
        </div>
      )}
      <SiteScripts />
      <AnalyticsScripts gaId={gaId} facebookPixelId={facebookPixelId} />
    </>
  );
}