'use client';

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

interface TabLayoutProps {
  children: React.ReactNode;
  onPrint?: () => void;
}

const TABS = [
  { href: '/', label: 'Termine' },
  { href: '/liste', label: 'Liste' },
];

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

  return (
    <div className="min-h-screen py-8 px-4">
      {/* Äußerer Rahmen */}
      <div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
        {/* Seitentitel */}
        <h1 className="text-4xl font-bold text-center mb-6 tracking-tight">
          Arzt-Termine
        </h1>

        {/* Innerer Inhalt */}
        <div className="max-w-6xl mx-auto">
          {/* Tab-Leiste */}
          <div className="flex justify-between items-end">
            <div className="flex">
              {TABS.map((tab) => {
                const isActive = pathname === tab.href;
                return (
                  <Link
                    key={tab.href}
                    href={tab.href}
                    className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1 transition-colors"
                    style={
                      isActive
                        ? {
                            backgroundColor: '#FFFFDD',
                            color: '#000000',
                            borderColor: '#000000',
                            borderBottom: '2px solid #FFFFDD',
                            marginBottom: '-2px',
                            position: 'relative',
                            zIndex: 10,
                          }
                        : {
                            backgroundColor: '#85B7D7',
                            color: '#374151',
                            borderColor: '#000000',
                          }
                    }
                  >
                    {tab.label}
                  </Link>
                );
              })}
            </div>
            {onPrint && (
              <div className="pb-1">
                <button
                  onClick={onPrint}
                  className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
                >
                  🖨️ Aktuelle Termine drucken
                </button>
              </div>
            )}
          </div>

          {/* Inhaltsbereich */}
          <main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
            {children}
          </main>

          <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
            <a href="mailto:rxf@gmx.de" className="hover:underline">
              mailto:rxf@gmx.de
            </a>
            <div>
              Version {version} - {buildDate}
            </div>
          </footer>
        </div>
      </div>
    </div>
  );
}