kita-planer/src/components/dashboard/dashboard-shell.tsx

"use client";

import React, { useState } from "react";
import { LogOut, Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { SidebarNav } from "./sidebar-nav";
import { UserRole } from "@prisma/client";

type DashboardShellProps = {
  kitaName: string;
  userName: string;
  userRole: UserRole;
  children: React.ReactNode;
  signOutAction: () => void | Promise<void>;
};

export function DashboardShell({
  kitaName,
  userName,
  userRole,
  children,
  signOutAction,
}: DashboardShellProps) {
  const [isOpen, setIsOpen] = useState(false);

  const displayName = userName;
  const initials = getInitials(displayName);

  return (
    <div className="grid min-h-screen grid-cols-[256px_minmax(0,1fr)] bg-[var(--bg)] max-[760px]:grid-cols-1">
      {/* ── Desktop Sidebar ── */}
      <aside className="print:hidden sticky top-0 flex h-screen shrink-0 flex-col border-r border-[var(--hairline)] bg-[var(--surface)] max-[760px]:hidden">
        {/* Logo / Kita-Name */}
        <div className="flex h-[82px] items-center gap-3 border-b border-[var(--hairline-soft)] px-5">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-deep)] text-[13px] font-bold text-white">
            {kitaName.slice(0, 1).toUpperCase()}
          </div>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
              {kitaName}
            </p>
            <p className="mt-1 text-xs text-[var(--ink-soft)]">Kita-Planer</p>
          </div>
        </div>

        {/* Navigation */}
        <div className="flex-1 overflow-y-auto py-6">
          <SidebarNav role={userRole} />
        </div>

        {/* Footer: User-Info + Abmelden */}
        <div className="border-t border-[var(--hairline-soft)] p-4">
          <div className="mb-3 flex items-center gap-2.5 px-1">
            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
              {initials}
            </div>
            <div className="min-w-0">
              <p className="truncate text-xs font-semibold text-[var(--ink)]">
                {displayName}
              </p>
              <p className="truncate text-[11px] font-semibold uppercase text-[var(--ink-muted)]">
                {userRole}
              </p>
            </div>
          </div>
          <form action={signOutAction}>
            <Button
              type="submit"
              variant="ghost"
              size="sm"
              className="w-full justify-start text-[var(--ink-soft)] hover:text-[var(--danger)]"
            >
              <LogOut className="h-4 w-4" />
              Abmelden
            </Button>
          </form>
        </div>
      </aside>

      {/* ── Mobile Top Header Bar ── */}
      <header className="print:hidden hidden max-[760px]:flex sticky top-0 z-40 h-16 items-center justify-between border-b border-[var(--hairline)] bg-[var(--surface)] px-5">
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-deep)] text-[13px] font-bold text-white">
            {kitaName.slice(0, 1).toUpperCase()}
          </div>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
              {kitaName}
            </p>
          </div>
        </div>

        <Button
          variant="ghost"
          size="icon"
          onClick={() => setIsOpen(!isOpen)}
          aria-label={isOpen ? "Menü schließen" : "Menü öffnen"}
        >
          {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </Button>
      </header>

      {/* ── Mobile Sidebar Drawer/Overlay ── */}
      {isOpen && (
        <div className="print:hidden fixed inset-0 z-30 hidden max-[760px]:block">
          {/* Backdrop */}
          <div
            className="fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity"
            onClick={() => setIsOpen(false)}
          />
          {/* Drawer content */}
          <aside className="fixed bottom-0 top-16 left-0 flex w-[280px] max-w-[85vw] flex-col border-r border-[var(--hairline)] bg-[var(--surface)] shadow-2xl transition-transform">
            <div className="flex-1 overflow-y-auto py-6" onClick={() => setIsOpen(false)}>
              <SidebarNav role={userRole} />
            </div>

            {/* Footer */}
            <div className="border-t border-[var(--hairline-soft)] p-4">
              <div className="mb-3 flex items-center gap-2.5 px-1">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
                  {initials}
                </div>
                <div className="min-w-0">
                  <p className="truncate text-xs font-semibold text-[var(--ink)]">
                    {displayName}
                  </p>
                  <p className="truncate text-[11px] font-semibold uppercase text-[var(--ink-muted)]">
                    {userRole}
                  </p>
                </div>
              </div>
              <form action={signOutAction}>
                <Button
                  type="submit"
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start text-[var(--ink-soft)] hover:text-[var(--danger)]"
                >
                  <LogOut className="h-4 w-4" />
                  Abmelden
                </Button>
              </form>
            </div>
          </aside>
        </div>
      )}

      {/* ── Main Content Area ── */}
      <main className="min-w-0 overflow-y-auto max-[760px]:pt-0">
        {children}
      </main>
    </div>
  );
}

function getInitials(value: string) {
  const parts = value.trim().split(/\s+/).filter(Boolean);
  if (parts.length >= 2) {
    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
  }
  return value.slice(0, 2).toUpperCase();
}