import type { Metadata } from 'next';
import {
  DiscordLogoIcon,
  InstagramLogoIcon,
  ReaderIcon,
} from '@radix-ui/react-icons';
import { HorizontalNav, VerticalNav } from '../_components/Nav';
import { Toaster } from 'react-hot-toast';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div
      className="hero min-h-screen"
      style={{
        backgroundImage: "url('/bg.png')",
      }}
    >
      <div className="hero-overlay bg-opacity-30"></div>
      <div>
        <Toaster position="top-center" reverseOrder={false} />
      </div>
      {/* Card */}
      <div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-10">
        <div className="card bg-base-100 shadow-2xl w-full min-h-full h-full max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
          {/* Top Navbar */}
          <HorizontalNav />

          {/* Hauptlayout: Sidebar + Content (nimmt Resthöhe ein) */}
          <div className="flex grow overflow-hidden">
            {/* Linke Sidebar */}
            <VerticalNav />

            {/* Scrollbarer Content-Bereich */}
            <div className="grow bg-base-100 p-6 rounded-lg shadow-md ml-4 overflow-auto h-full">
              {children}
            </div>
          </div>

          {/* Footer */}
          <footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
            {/* Left: Impressum & Datenschutz */}
            <div className="flex gap-4 text-sm">
              <a href="/impressum" className="hover:text-primary">
                Impressum
              </a>
              <a href="/datenschutz" className="hover:text-primary">
                Datenschutzerklärung
              </a>
            </div>

            {/* Center: Copyright */}
            <p className="text-sm">
              Copyright © {new Date().getFullYear()} - Virtual Air Rescue
            </p>

            {/* Right: Social Icons */}
            <div className="flex gap-4">
              <div className="tooltip tooltip-top" data-tip="Discord">
                <a
                  href="https://discord.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-primary"
                >
                  <DiscordLogoIcon className="w-5 h-5" />
                </a>
              </div>
              <div className="tooltip tooltip-top" data-tip="Instagram">
                <a
                  href="https://instagram.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-primary"
                >
                  <InstagramLogoIcon className="w-5 h-5" />
                </a>
              </div>
              <div className="tooltip tooltip-top" data-tip="Knowledgebase">
                <a href="/docs" className="hover:text-primary">
                  <ReaderIcon className="w-5 h-5" />
                </a>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  );
}