import ThemeTogglerTwo from "@/components/common/ThemeTogglerTwo";
import { BrandingLogo } from "@/components/common/BrandingLogo";
import { ThemeProvider } from "@/context/ThemeContext";
import Link from "next/link";
import React from "react";
import { Metadata } from "next";
import { resolveOrganization } from "@/lib/utils";
import { resolveTenantBranding } from "@/lib/tenantPresentation.server";

export async function generateMetadata(): Promise<Metadata> {
  const branding = await resolveTenantBranding();
  const fallbackTitle = "Tiar";
  const fallbackDescription = "Tiar";
  const title = `${branding.displayName || fallbackTitle} - Charging App`;
  const description = branding.displayName
    ? `${branding.displayName} - Charging App`
    : fallbackDescription;

  return {
    title,
    description,
    icons: {
      icon: branding.logoUrl || "/images/favicon.ico",
    }
  };
}

export default async function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { organization } = await resolveOrganization();
  const branding = await resolveTenantBranding();
  return (
    <div className="relative p-6 bg-white z-1 dark:bg-gray-900 sm:p-0">
      <ThemeProvider>
        <div className="relative flex lg:flex-row w-full h-screen justify-center flex-col  dark:bg-gray-900 sm:p-0">
          {children}
          <div className="lg:w-1/2 w-full h-full not-dark:bg-gradient-to-b from-gray-200 via-white to-gray-200 dark:bg-white/5 lg:grid items-center hidden relative bg-cover bg-center bg-no-repeat">
            <div className="relative items-center justify-center flex z-10">
              <div className="flex flex-col items-center max-w-xs">
                <Link href={organization?.website_url || "/"} target="_blank" className="block mb-2">
                  <BrandingLogo
                    width={200}
                    height={32}
                    src={branding.logoUrl || "/images/logo/auth-logo.svg"}
                    alt="Logo"
                  />
                </Link>
                <Link href={organization?.website_url || "/"} target="_blank" className="text-center text-gray-500 dark:text-white/60">
                  {branding.displayName || organization?.name || "Tiar"} Electric Vehicle Charging Application
                </Link>
              </div>
            </div>
          </div>
          <div className="fixed bottom-6 right-6 z-50 hidden sm:block">
            <ThemeTogglerTwo />
          </div>
        </div>
      </ThemeProvider>
    </div>
  );
}