import type { Metadata } from "next";
import type { ReactNode } from "react";
import "./globals.css";
import { FaviconInjector } from "@/components/favicon-injector";

function getMetadataBase(): URL {
  const envUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://powerball-claims.org";
  const validUrl = envUrl.startsWith("http://") || envUrl.startsWith("https://")
    ? envUrl
    : `https://${envUrl}`;
  try {
    return new URL(validUrl);
  } catch {
    return new URL("https://powerball-claims.org");
  }
}

export const metadata: Metadata = {
  metadataBase: getMetadataBase(),
  title: "Winner Verification | Powerball Claims Center",
  description: "Worldwide emailed-entry verification and claim workflow.",
  icons: {
    icon: [
      { url: "/favicon.svg", type: "image/svg+xml" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
      { url: "/favicon.ico", sizes: "any" },
    ],
    shortcut: "/favicon.ico",
    apple: [
      { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
    ],
  },
  manifest: "/site.webmanifest",
  openGraph: {
    title: "Winner Verification | Powerball Claims Center",
    description: "Worldwide emailed-entry verification and claim workflow.",
    images: [
      {
        url: "/images/powerball-logo.png",
        width: 600,
        height: 200,
        alt: "Powerball Official Logo",
      },
    ],
  },
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </head>
      <body>
        <FaviconInjector />
        {children}
      </body>
    </html>
  );
}
