Speisekarte/app/page.tsx

import Link from "next/link";
import { query } from "@/lib/db";
import { loadMenuEntries } from "@/lib/db/menu-entries";
import { getSettings } from "@/lib/db/settings";
import {
  addDays,
  dishCodes,
  entriesFor,
  formatDateLong,
  formatPrice,
  mondayOf,
  todayISO,
} from "@/lib/menu";
import { getDictionary, getLocale } from "@/lib/i18n";
import { localized, logoUrl, SITE_TITLE } from "@/lib/types";
import type { CodeItem, Section } from "@/lib/types";
import PublicMobileMenu from "@/components/PublicMobileMenu";
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";

export default async function Home({
  searchParams,
}: {
  searchParams: Promise<{ woche?: string }>;
}) {
  const { woche } = await searchParams;
  const monday = mondayOf(woche);
  const friday = addDays(monday, 4);
  const currentWeek = mondayOf(todayISO());
  const locale = await getLocale();
  const dict = getDictionary(locale);
  const days = dict.weekdays.long.map((weekday, i) => ({
    weekday,
    iso: addDays(monday, i),
  }));

  const [sections, entries, allergens, additives, settings] = await Promise.all([
    query<Section>("select * from sections order by sort"),
    loadMenuEntries(monday, friday),
    query<CodeItem>("select * from allergens order by sort"),
    query<CodeItem>("select * from additives order by sort"),
    getSettings(),
  ]);

  const logo = logoUrl(settings?.logo_path);

  return (
    <div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
      {/* Kopfbereich: Sprache + Login-Link eigene Zeile, Logo zentriert
          darunter. Kein absolutes Positionieren mehr – ein breites Logo
          (z. B. ein Banner-Format) konnte sonst mit dem Login-Link
          kollidieren. */}
      <header className="mb-6">
        <div className="flex justify-end items-center gap-3 mb-2">
          {/* Auf Mobilgeräten übernimmt PublicMobileMenu den
              Sprachumschalter, hier würde er sonst doppelt erscheinen. */}
          <div className="hidden sm:block">
            <LanguageSwitcher variant="light" />
          </div>
          <Link
            href="/login"
            className="text-sm text-gray-500 hover:text-[var(--c-primary)]"
          >
            {dict.common.login}
          </Link>
        </div>
        <div className="flex justify-center">
          {logo ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={logo}
              alt="Logo"
              className="h-20 max-w-full object-contain"
            />
          ) : (
            <h1 className="text-4xl font-extrabold tracking-tight text-[var(--c-primary)]">
              {SITE_TITLE}
            </h1>
          )}
        </div>
      </header>

      {/* Mobil: Tag (Standard) oder Woche umschaltbar */}
      <PublicMobileMenu monday={monday} sections={sections} entries={entries} />

      {/* Ab "sm": klassische Wochentabelle */}
      <div className="hidden sm:block">
        <div className="flex flex-wrap items-center gap-3 mb-4">
          <Link href={`/?woche=${addDays(monday, -7)}`} className="btn btn-add">
            {dict.publicMenu.prevWeek}
          </Link>
          <Link href={`/?woche=${currentWeek}`} className="btn btn-primary">
            {dict.publicMenu.today}
          </Link>
          <Link href={`/?woche=${addDays(monday, 7)}`} className="btn btn-add">
            {dict.publicMenu.nextWeek}
          </Link>
          <Link href="/vorschlag" className="btn btn-neutral ml-auto">
            {dict.publicMenu.suggestDish}
          </Link>
        </div>

        <div className="overflow-x-auto">
          <table className="menu-table">
            <thead>
              <tr>
                <th className="section-head w-56" aria-hidden />
                {days.map((d) => (
                  <th key={d.iso} className="day-head">
                    <span className="font-bold">{d.weekday}</span>
                    <br />
                    {formatDateLong(d.iso, dict.dateLocale)}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {sections.map((s) => (
                <tr key={s.key}>
                  <th className="section-head">
                    <div>{localized(s, locale)}</div>
                    <div className="time">{s.time_range}</div>
                  </th>
                  {days.map((d) => (
                    <td key={d.iso} className="cell">
                      {entriesFor(entries, d.iso, s.key).map((e) => {
                        const codes = dishCodes(e.dish);
                        return (
                          <div key={e.id} className="dish">
                            <span className="font-bold">
                              {localized(e.dish, locale)}
                            </span>
                            {codes && <sup className="dish-codes">{codes}</sup>}
                            {" – "}
                            {formatPrice(e.dish.price)}
                          </div>
                        );
                      })}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
      <section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
        <div>
          <h2 className="font-bold text-[var(--c-primary)] mb-2">
            {dict.publicMenu.allergens}
          </h2>
          <ul className="space-y-0.5">
            {allergens.map((a) => (
              <li key={a.code}>
                <span className="font-semibold">{a.code}</span> –{" "}
                {localized(a, locale)}
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h2 className="font-bold text-[var(--c-primary)] mb-2">
            {dict.publicMenu.additives}
          </h2>
          <ul className="space-y-0.5">
            {additives.map((a) => (
              <li key={a.code}>
                <span className="font-semibold">{a.code}</span> –{" "}
                {localized(a, locale)}
              </li>
            ))}
          </ul>
        </div>
      </section>
    </div>
  );
}