'use client';

import { ReactNode } from 'react';
import LogoutButton from '@/components/LogoutButton';
import packageJson from '@/package.json';

interface Tab {
  label: string;
  index: number;
}

/** Tab-Index der Einstellungen (0/1 sind die Ausgaben-Typen Haushalt/Privat). */
export const SETTINGS_TAB = 2;

interface TabLayoutProps {
  children: ReactNode;
  activeTab: number;
  onTabChange: (index: number) => void;
}

const TABS: Tab[] = [
  { label: 'Haushalt', index: 0 },
  { label: 'Privat', index: 1 },
  { label: 'Einstellungen', index: SETTINGS_TAB },
];

export default function TabLayout({ children, activeTab, onTabChange }: TabLayoutProps) {
  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">
      {/* Outer wrapper with border */}
      <div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">

        {/* Page title */}
        <h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Ausgaben - Log</h1>

        {/* Inner content */}
        <div className="max-w-6xl mx-auto">

          {/* Tab bar */}
          <div className="flex justify-between items-end">
            <div className="flex">
              {TABS.map(tab => {
                const isActive = activeTab === tab.index;
                return (
                  <button
                    key={tab.index}
                    onClick={() => onTabChange(tab.index)}
                    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}
                  </button>
                );
              })}
            </div>
            <div className="pb-1">
              <LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg shadow-md" />
            </div>
          </div>

          {/* Content panel */}
          <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>
  );
}