'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import LogoutButton from '@/components/LogoutButton';
import packageJson from '@/package.json';

interface AppLayoutProps {
  children: React.ReactNode;
}

export default function AppLayout({ children }: AppLayoutProps) {
  const pathname = usePathname();
  const version = packageJson.version;
  const [buildDate] = useState(() => 
    process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
  );

  return (
    <div className="app-wrapper">
      <div className="app-container">

        {/* Seitentitel */}
        <h1 className="app-title">Tabletten-Check</h1>

        <div className="app-inner">

          {/* Einstellungen und Logout oben rechts */}
          <div className="app-logout-bar">
            {pathname !== '/einstellungen' && (
              <Link href="/einstellungen" className="btn-settings">
                Einstellungen
              </Link>
            )}
            <LogoutButton className="btn-logout" />
          </div>

          {/* Inhaltsbereich */}
          <main className="app-main">
            {children}
          </main>

          <footer className="app-footer">
            <a href="mailto:rxf@gmx.de">
              mailto:rxf@gmx.de
            </a>
            <div>Version {version} – {buildDate}</div>
          </footer>

        </div>
      </div>
    </div>
  );
}