logbuch/app/MainClient.tsx

'use client';

import { useState } from 'react';
import { KUPPELN } from '@/types/logbuch';
import type { Kuppel, LogbuchEintrag } from '@/types/logbuch';
import LogbuchForm from '@/components/LogbuchForm';
import LogbuchList from '@/components/LogbuchList';
import packageJson from '@/package.json';

interface Props {
  kuerzel: string;
  beoId: number;
  beoName: string;
}

export default function MainClient({ kuerzel, beoId, beoName }: Props) {
  const [activeKuppel, setActiveKuppel] = useState<Kuppel>('West');
  const [activeTab, setActiveTab] = useState<'eingabe' | 'liste'>('eingabe');
  const [refreshKey, setRefreshKey] = useState(0);
  const [editEntry, setEditEntry] = useState<LogbuchEintrag | null>(null);

  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' });

  const currentUserBeo = { ID: beoId, Kuerzel: kuerzel, Name: beoName };

  function handleSaved() {
    setRefreshKey((k) => k + 1);
    setEditEntry(null);
  }

  function handleEdit(entry: LogbuchEintrag) {
    setEditEntry(entry);
    setActiveTab('eingabe');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  async function handleLogout() {
    await fetch('/api/logout', { method: 'POST' });
    window.location.href = '/login';
  }

  return (
    <div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4">
      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#FFFFDD]">

        {/* Header */}
        <div className="flex justify-between items-start sm:items-center mb-4 gap-2">
          <h1 className="text-xl sm:text-3xl font-bold leading-tight">
            Logbuch<span className="hidden sm:inline"> — Sternwarte Welzheim</span>
          </h1>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-xs sm:text-sm text-gray-600 hidden sm:inline">
              {kuerzel} — {beoName}
            </span>
            <span className="text-xs text-gray-600 sm:hidden">{kuerzel}</span>
            <button
              onClick={handleLogout}
              className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
            >
              Abmelden
            </button>
          </div>
        </div>

        {/* Kuppel-Tabs */}
        <div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
          {KUPPELN.map((k) => (
            <button
              key={k}
              onClick={() => { setActiveKuppel(k); setEditEntry(null); }}
              className={`px-3 sm:px-5 py-2 text-sm font-medium rounded-t-lg transition-colors whitespace-nowrap ${
                activeKuppel === k
                  ? 'bg-[#85B7D7] text-black border-2 border-b-0 border-gray-300'
                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              <span className="sm:hidden">{k}</span>
              <span className="hidden sm:inline">{k}-Kuppel</span>
            </button>
          ))}
        </div>

        {/* Eingabe/Liste-Tabs */}
        <div className="flex gap-1 mb-4 border-b border-gray-200">
          {(['eingabe', 'liste'] as const).map((tab) => (
            <button
              key={tab}
              onClick={() => { setActiveTab(tab); if (tab === 'eingabe') setEditEntry(null); }}
              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
                activeTab === tab
                  ? 'border-[#85B7D7] text-gray-900'
                  : 'border-transparent text-gray-500 hover:text-gray-700'
              }`}
            >
              {tab === 'eingabe' ? 'Eingabe' : 'Liste'}
            </button>
          ))}
        </div>

        {/* Eingabe-Tab: Formular + kompakte Vorschau-Liste (nur Desktop) */}
        {activeTab === 'eingabe' && (
          <>
            {editEntry && (
              <div className="mb-3 text-sm text-amber-700 bg-amber-50 border border-amber-300 rounded-lg px-3 py-2">
                Eintrag bearbeiten (ID {editEntry.ID})
              </div>
            )}
            <LogbuchForm
              key={`${activeKuppel}-${editEntry?.ID ?? 'new'}`}
              kuppel={activeKuppel}
              currentUserBeo={currentUserBeo}
              editEntry={editEntry}
              onSaved={handleSaved}
            />

            {/* Kompakte Liste — nur auf Desktop sichtbar */}
            <div className="hidden lg:block mt-5 border-t-2 border-gray-300 pt-4">
              <div className="flex justify-between items-center mb-2">
                <h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
                <button
                  onClick={() => setActiveTab('liste')}
                  className="text-xs text-blue-600 hover:underline"
                >
                  Alle anzeigen →
                </button>
              </div>
              <LogbuchList
                kuppel={activeKuppel}
                refreshKey={refreshKey}
                onEdit={handleEdit}
                limit={5}
                compact
              />
            </div>
          </>
        )}

        {/* Liste-Tab: vollständige Liste */}
        {activeTab === 'liste' && (
          <LogbuchList
            kuppel={activeKuppel}
            refreshKey={refreshKey}
            onEdit={handleEdit}
            limit={20}
          />
        )}

        <footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
          <div>
            <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
              rxf@gmx.de
            </a>
          </div>
          <div className="text-right">
            v{version} — {buildDate}
          </div>
        </footer>
      </main>
    </div>
  );
}