import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import Link from 'next/link';
import Head from 'next/head';
import AboutButton from './AboutButton';
import BadgeButton from './BadgeButton';
import HeaderButtons from './HeaderButtons';
import MobileNav from './MobileNav';

const inter = Inter({ subsets: ['latin'] });

const blogOwner = process.env.NEXT_PUBLIC_BLOG_OWNER || 'Anonymous';

export const metadata: Metadata = {
  title: `${blogOwner}'s Blog`,
  description: `Ein Blog von ${blogOwner}, gebaut mit Next.js und Markdown`,
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
};

const PersonIcon = (
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
    <circle cx="10" cy="6" r="4" stroke="white" strokeWidth="2" />
    <rect x="3" y="13" width="14" height="5" rx="2.5" stroke="white" strokeWidth="2" />
  </svg>
);

const InfoIcon = (
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
  </svg>
);

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="de" className="h-full">
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <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="manifest" href="/site.webmanifest" />
      </Head>
      <body className={`${inter.className} h-full min-h-screen flex flex-col`}>
        <MobileNav blogOwner={blogOwner} />
        
        <div className="flex-1 flex flex-col">
          <header className="bg-gray-100 p-3 sm:p-4 shadow-sm">
            <div className="container mx-auto">
              <div className="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-between sm:items-center">
                <div className="flex flex-wrap gap-1 sm:gap-2 justify-center sm:justify-start">
                  <img 
                    src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white" 
                    alt="Markdown" 
                    className="h-6 sm:h-8"
                  />
                  <img 
                    src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" 
                    alt="Next.js" 
                    className="h-6 sm:h-8"
                  />
                  <img
                  src="https://img.shields.io/badge/rust-%23000000.svg?style=for-the-badge&logo=rust&logoColor=white"
                  alt="Rust"

                  className="h-6 sm:h-8"
                  />
                  <img 
                    src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" 
                    alt="TypeScript" 
                    className="h-6 sm:h-8"
                  />
                  <img 
                    src="https://img.shields.io/badge/tailwindcss-%2338BDF8.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" 
                    alt="Tailwind CSS" 
                    className="h-6 sm:h-8"
                  />

                </div>
                <div className="hidden sm:flex gap-2 justify-center sm:justify-end">
                  <HeaderButtons />
                </div>
              </div>
            </div>
          </header>
          {children}
        </div>
        <footer className="bg-gray-100 p-3 sm:p-4 mt-auto shadow-inner">
          <div className="container mx-auto">
            <div className="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-between sm:items-center">
              <div className="text-center sm:text-left">
                <span className="text-gray-500 text-sm">
                  &copy; {new Date().getFullYear()} {blogOwner}
                </span>
              </div>
              <div className="hidden sm:flex flex-wrap gap-2 justify-center sm:justify-end">
                {process.env.NEXT_SOCIAL_GITHUB_STATE === "true" && process.env.NEXT_SOCIAL_GITHUB_LINK_IF_TRUE && (
                  <a 
                    href={process.env.NEXT_SOCIAL_GITHUB_LINK_IF_TRUE.replace(/(^\"|\"$)/g, '')} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="h-6 sm:h-8"
                  >
                    <img 
                      src="https://img.shields.io/badge/GitHub-%23121011.svg?style=for-the-badge&logo=GitHub&logoColor=white" 
                      alt="GitHub" 
                      className="h-6 sm:h-8"
                    />
                  </a>
                )}
                {process.env.NEXT_SOCIAL_INSTAGRAM && (
                  <a 
                    href={process.env.NEXT_SOCIAL_INSTAGRAM.replace(/(^\"|\"$)/g, '')} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="h-6 sm:h-8"
                  >
                    <img 
                      src="https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white" 
                      alt="Instagram" 
                      className="h-6 sm:h-8"
                    />
                  </a>
                )}
                {process.env.NEXT_SOCIAL_TWITTER === "true" && process.env.NEXT_SOCIAL_TWITTER_LINK && (
                  <a 
                    href={process.env.NEXT_SOCIAL_TWITTER_LINK.replace(/(^\"|\"$)/g, '')} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="h-6 sm:h-8"
                  >
                    <img 
                      src="https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white" 
                      alt="Twitter" 
                      className="h-6 sm:h-8"
                    />
                  </a>
                )}
                {process.env.NEXT_SOCIAL_BUYMEACOFFEE && (
                  <a 
                    href={process.env.NEXT_SOCIAL_BUYMEACOFFEE.replace(/(^\"|\"$)/g, '')} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="h-6 sm:h-8"
                  >
                    <img 
                      src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" 
                      alt="BuyMeACoffee" 
                      className="h-6 sm:h-8"
                    />
                  </a>
                )}
              </div>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
} 