import React, { useState, useEffect, useCallback, useRef, Suspense, lazy } from "react";
import { STORAGE_KEY, NAV_ITEMS, defaultData } from "./constants.js";
import { migrateDashboardLayout, verifyPassword, withHashedPassword, stripCredentials } from "./utils.js";
import Login from "./views/Login.jsx";
import Setup from "./views/Setup.jsx";
import MigrationScreen from "./views/MigrationScreen.jsx";
import UpdateNotifier from "./components/UpdateNotifier.jsx";

// Code-split: each view loads on demand to keep the initial bundle small.
const Dashboard      = lazy(() => import("./views/Dashboard.jsx"));
const Projects       = lazy(() => import("./views/Projects.jsx").then(m => ({ default: m.Projects })));
const ProjectDetail  = lazy(() => import("./views/Projects.jsx").then(m => ({ default: m.ProjectDetail })));
const Time           = lazy(() => import("./views/Time.jsx"));
const Expenses       = lazy(() => import("./views/Expenses.jsx").then(m => ({ default: m.Expenses })));
const InternalExpenses = lazy(() => import("./views/Expenses.jsx").then(m => ({ default: m.InternalExpenses })));
const Protocols      = lazy(() => import("./views/Protocols.jsx"));
const DeliveryNotes  = lazy(() => import("./views/DeliveryNotes.jsx"));
const Accounting     = lazy(() => import("./views/Accounting.jsx"));
const Invoices       = lazy(() => import("./views/Invoices.jsx"));
const Quotes         = lazy(() => import("./views/Quotes.jsx"));
const Persons        = lazy(() => import("./views/Persons.jsx"));
const Letters        = lazy(() => import("./views/Letters.jsx"));
const Settings       = lazy(() => import("./views/Settings.jsx"));
const StudioBudget   = lazy(() => import("./views/StudioBudget.jsx"));
const Payroll        = lazy(() => import("./views/Payroll.jsx"));
const Employees      = lazy(() => import("./views/Employees.jsx"));
const Pinboard       = lazy(() => import("./views/Pinboard.jsx"));
const Documents      = lazy(() => import("./views/Documents.jsx"));
const PrintView      = lazy(() => import("./print/PrintComponents.jsx").then(m => ({ default: m.PrintView })));

function ViewFallback() {
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "calc(100vh - 60px)" }}>
      <style>{`
        @keyframes vf-spin { to { transform: rotate(360deg); } }
        .vf-spinner {
          width: 40px; height: 40px; border-radius: 50%;
          border: 2px solid rgba(0,0,0,0.08);
          border-top-color: rgba(0,0,0,0.45);
          animation: vf-spin 0.9s linear infinite;
        }
      `}</style>
      <div className="vf-spinner" />
    </div>
  );
}

export default function App() {
  const [data, setData] = useState(() => {
    try {
      const stored = localStorage.getItem(STORAGE_KEY);
      if (stored) {
        const parsed = JSON.parse(stored);
        let merged = { ...defaultData, ...parsed, settings: { ...defaultData.settings, ...parsed.settings } };

        // Migrate: clients[] + contacts[] → persons[]
        if (!merged.persons && (merged.clients?.length || merged.contacts?.length)) {
          const idMap = {};
          const persons = [];
          const usedContactIds = new Set();
          for (const c of merged.clients || []) {
            const linked = (merged.contacts || []).find(ct => ct.id === c.linkedContactId);
            persons.push({
              ...c,
              isAuftraggeber: true,
              isPartner: !!linked,
              type: c.type || linked?.type || "",
              note: c.note || linked?.note || "",
              honorarOffers: c.honorarOffers || linked?.honorarOffers || [],
              contacts: c.contacts?.length ? c.contacts : (linked?.contacts || []),
              linkedContactId: undefined,
              linkedClientId: undefined,
            });
            if (linked) { usedContactIds.add(linked.id); idMap[linked.id] = c.id; }
          }
          for (const ct of merged.contacts || []) {
            if (usedContactIds.has(ct.id)) continue;
            persons.push({ ...ct, isAuftraggeber: false, isPartner: true, linkedClientId: undefined });
          }
          const remapProjects = (merged.projects || []).map(p => ({
            ...p,
            projectContacts: (p.projectContacts || []).map(pc => ({ ...pc, contactId: idMap[pc.contactId] || pc.contactId })),
          }));
          const remapProtocols = (merged.protocols || []).map(p => ({
            ...p,
            entries: (p.entries || []).map(e => ({ ...e, assignee: e.assignee ? (idMap[e.assignee] || e.assignee) : e.assignee })),
          }));
          merged = { ...merged, persons, projects: remapProjects, protocols: remapProtocols, clients: undefined, contacts: undefined };
        }

        // Migrate: projects linked to SIA/manual quotes should be pauschal (not stundensatz)
        const allQuotes = merged.quotes || [];
        const projects = (merged.projects || []).map(p => {
          if ((p.billingType || p.type || "stundensatz") === "stundensatz" && (p.linkedQuotes || []).length > 0) {
            const linkedQs = (p.linkedQuotes || []).map(lq => allQuotes.find(q => q.id === lq.quoteId)).filter(Boolean);
            if (linkedQs.some(q => q.mode === "sia" || q.mode === "manual")) {
              return { ...p, billingType: "pauschal", budget: p.budget || p.budgetAmount || 0 };
            }
          }
          return p;
        });
        // Migrate: add r-projektleiter if missing, seed dashboardTemplateId from defaultData
        const roleDefMap = (defaultData.appRoles || []).reduce((acc, r) => { acc[r.id] = r; return acc; }, {});
        const roles = (merged.appRoles || defaultData.appRoles).map(r => ({
          ...r,
          dashboardTemplateId: r.dashboardTemplateId || roleDefMap[r.id]?.dashboardTemplateId || null,
          permissions: (() => {
            let perms = r.permissions;
            if (perms && r.id === "r-projektleiter" && !perms.includes("mitarbeiter")) perms = [...perms, "mitarbeiter"];
            if (perms && !perms.includes("settings")) perms = [...perms, "settings"];
            return perms;
          })(),
        }));
        if (!roles.find(r => r.id === "r-projektleiter") && roleDefMap["r-projektleiter"]) {
          const adminIdx = roles.findIndex(r => r.id === "r-admin");
          roles.splice(adminIdx + 1, 0, roleDefMap["r-projektleiter"]);
        }
        // Migrate user-level dashboardWidgets to Row[] format
        const users = (merged.users || []).map(u => ({
          ...u,
          dashboardWidgets: u.dashboardWidgets ? migrateDashboardLayout(u.dashboardWidgets) : undefined,
        }));
        // Ensure dashboardTemplates exist (old data won't have them)
        const dashboardTemplates = merged.dashboardTemplates?.length ? merged.dashboardTemplates : defaultData.dashboardTemplates;
        return { ...merged, projects, appRoles: roles, users, dashboardTemplates };
      }
    } catch {}
    return defaultData;
  });
  const [isNewInstall] = useState(() => !localStorage.getItem(STORAGE_KEY));
  const [currentUser, setCurrentUser] = useState(() => {
    try { return JSON.parse(sessionStorage.getItem("rapport_user")) || null; } catch { return null; }
  });
  const handleLogin = (user) => {
    const safe = stripCredentials(user);
    sessionStorage.setItem("rapport_user", JSON.stringify(safe));
    setCurrentUser(safe);
  };
  // Used by the Login screen — never exposes the user list (with passwords) to the view.
  // Async because PBKDF2 hashing happens off the main event loop via WebCrypto.
  // Legacy plaintext passwords are accepted ONCE and transparently upgraded to
  // PBKDF2 hashes on first successful login.
  const verifyLogin = async (username, password) => {
    const u = (data.users || []).find(x => x.username === username);
    if (!u) return null;
    const ok = await verifyPassword(password, u);
    if (!ok) return null;
    if (u.password && !u.passwordHash) {
      try {
        const upgraded = await withHashedPassword(u, password);
        save({ ...data, users: (data.users || []).map(x => x.id === u.id ? upgraded : x) });
        handleLogin(upgraded);
        return upgraded;
      } catch (e) {
        console.error("Passwort-Migration fehlgeschlagen:", e);
        // fall through — still let the user in with legacy plaintext
      }
    }
    handleLogin(u);
    return u;
  };
  const handleLogout = () => {
    sessionStorage.removeItem("rapport_user");
    setCurrentUser(null);
  };
  const handleSetupComplete = (newData) => {
    localStorage.setItem("rapport_v0_5_migrated", "1");
    save(newData);
    const adminUser = (newData.users || []).find(u => u.role === "admin");
    if (adminUser) handleLogin(adminUser);
  };
  const userPermissions = (() => {
    if (!currentUser || currentUser.role === "admin") return null;
    const role = (data.appRoles || []).find(r => r.id === currentUser.appRoleId);
    if (role) return role.permissions; // null = alle
    return currentUser.permissions || null; // Fallback für alte Einträge ohne Rolle
  })();
  const currentUserRecord = (data.users || []).find(u => u.id === currentUser?.id);
  const userInitials = (() => {
    const parts = ((currentUser?.displayName || currentUser?.username) || "").trim().split(/\s+/).filter(Boolean);
    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    return (parts[0] || "?")[0].toUpperCase();
  })();
  const visibleNavItems = userPermissions === null ? NAV_ITEMS : NAV_ITEMS.map(item => {
    if (item.children) {
      const ch = item.children.filter(c => userPermissions.includes(c.id));
      return ch.length > 0 ? { ...item, children: ch } : null;
    }
    return userPermissions.includes(item.id) ? item : null;
  }).filter(Boolean);
  const allAccessibleViews = visibleNavItems.flatMap(item => item.children ? item.children.map(c => c.id) : [item.id]);
  const [view, setView] = useState(() => {
    if (!userPermissions) return "dashboard";
    return userPermissions.includes("dashboard") ? "dashboard" : (userPermissions[0] || "dashboard");
  });
  const navHistRef = useRef([view]);
  const navPosRef  = useRef(0);
  const [navCanBack,    setNavCanBack]    = useState(false);
  const [navCanForward, setNavCanForward] = useState(false);

  const navigate = (newView) => {
    const pos = navPosRef.current;
    const hist = navHistRef.current;
    if (hist[pos] === newView) return;
    const trimmed = [...hist.slice(0, pos + 1), newView];
    navHistRef.current = trimmed;
    navPosRef.current  = trimmed.length - 1;
    setView(newView);
    setNavCanBack(true);
    setNavCanForward(false);
  };
  const goBack = () => {
    const pos = navPosRef.current;
    if (pos <= 0) return;
    navPosRef.current = pos - 1;
    setView(navHistRef.current[pos - 1]);
    setNavCanBack(pos - 1 > 0);
    setNavCanForward(true);
  };
  const goForward = () => {
    const pos = navPosRef.current;
    const hist = navHistRef.current;
    if (pos >= hist.length - 1) return;
    navPosRef.current = pos + 1;
    setView(hist[pos + 1]);
    setNavCanBack(true);
    setNavCanForward(pos + 1 < hist.length - 1);
  };

  const [selectedProjectId, setSelectedProjectId] = useState(null);
  const [modal, setModal] = useState(null);
  const [printContent, setPrintContent] = useState(null);
  const [darkMode, setDarkMode] = useState(() => localStorage.getItem("rapport_dark") === "1");
  const [showChangelog, setShowChangelog] = useState(() => localStorage.getItem("rapport_changelog_seen") !== "0.7");
  const [changelogVersion, setChangelogVersion] = useState("0.7");
  const [showAbout, setShowAbout] = useState(false);
  const [navOpen, setNavOpen] = useState(false);
  const [expandedNav, setExpandedNav] = useState(new Set(["buchhaltung"]));
  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => localStorage.getItem("rapport_sidebar_collapsed") === "1");
  const [isMobile, setIsMobile] = useState(() => window.matchMedia("(max-width: 768px)").matches);
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 768px)");
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, []);
  const collapsed = sidebarCollapsed && !isMobile;
  const [uiZoom, setUiZoom] = useState(() => parseFloat(localStorage.getItem("rapport_zoom") || "1"));

  // Persist dark mode
  useEffect(() => { localStorage.setItem("rapport_dark", darkMode ? "1" : "0"); }, [darkMode]);
  useEffect(() => { localStorage.setItem("rapport_sidebar_collapsed", sidebarCollapsed ? "1" : "0"); }, [sidebarCollapsed]);

  // UI-Zoom: nur main-content, Sidebar bleibt unberührt
  useEffect(() => {
    localStorage.setItem("rapport_zoom", String(uiZoom));
    // Tauri: native WebView-Zoom entfernen falls gesetzt (Sidebar-Problem)
    if (window.__TAURI_INTERNALS__) {
      import("@tauri-apps/api/webviewWindow")
        .then(({ getCurrentWebviewWindow }) => getCurrentWebviewWindow().setZoom(1))
        .catch(() => {});
    }
  }, [uiZoom]);

  const zoomStep = 0.05;
  const zoomIn  = () => setUiZoom(z => Math.min(1.5, Math.round((z + zoomStep) * 100) / 100));
  const zoomOut = () => setUiZoom(z => Math.max(0.5, Math.round((z - zoomStep) * 100) / 100));


  // Navigation zu Protokoll von Projekt aus
  useEffect(() => {
    const handler = (e) => {
      navigate("protokolle");
      window.__openProtokoll = e.detail?.id || null;
    };
    window.addEventListener("openProtokoll", handler);
    return () => window.removeEventListener("openProtokoll", handler);
  }, []);

  // Tray-Menü: „Zeiterfassung", „Projekte" usw. springen zur passenden View
  useEffect(() => {
    if (!window.__TAURI_INTERNALS__) return;
    let unlisten = null;
    import("@tauri-apps/api/event").then(({ listen }) => {
      listen("rapport:navigate", (event) => {
        const target = event.payload;
        if (typeof target === "string") {
          navigate(target);
          setSelectedProjectId(null);
        }
      }).then((fn) => { unlisten = fn; });
    });
    return () => { if (unlisten) unlisten(); };
  }, []);

  // Auto-expand parent when navigating to a child
  useEffect(() => {
    NAV_ITEMS.forEach(item => {
      if (item.children?.some(c => c.id === view)) {
        setExpandedNav(prev => { const next = new Set(prev); next.add(item.id); return next; });
      }
    });
  }, [view]);

  const save = useCallback((newData) => {
    setData(newData);
    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(newData)); } catch {}
  }, []);

  const update = useCallback((key, value) => {
    save({ ...data, [key]: value });
  }, [data, save]);

  // Auto-überfällig: einmal pro Tag prüfen (verhindert Endlos-Loop, da save() data ändert).
  const lastOverdueCheck = useRef(null);
  useEffect(() => {
    const today = new Date().toISOString().slice(0, 10);
    if (lastOverdueCheck.current === today) return;
    lastOverdueCheck.current = today;
    const updated = data.invoices.map(inv =>
      inv.status === "gesendet" && inv.dueDate && inv.dueDate < today
        ? { ...inv, status: "überfällig" } : inv
    );
    if (updated.some((inv, i) => inv.status !== data.invoices[i].status))
      save({ ...data, invoices: updated });
  }, [data, save]);

  if (isNewInstall && !data.settings.setupCompleted) {
    return <Setup onComplete={handleSetupComplete} />;
  }

  if (!localStorage.getItem("rapport_v0_5_migrated")) {
    return <MigrationScreen data={data} onComplete={handleSetupComplete} />;
  }

  if (!currentUser) {
    return <Login verifyLogin={verifyLogin} settings={data.settings} version="0.7" />;
  }

  if (printContent) {
    return (
      <Suspense fallback={<ViewFallback />}>
        <PrintView content={printContent} onClose={() => setPrintContent(null)} settings={data.settings} />
      </Suspense>
    );
  }

  return (
    <div className="app-wrapper" data-theme={darkMode ? "dark" : "light"} style={{ display: "flex", height: "100%", overflow: "hidden", background: "var(--bg)", fontFamily: "'DM Mono', 'Courier New', monospace", color: "var(--text)" }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&family=Playfair+Display:wght@400;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
        .msr { font-family: 'Material Symbols Rounded'; font-weight: 300; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

        :root, [data-theme=light] {
          --bg: #ebe7e1;
          --bg2: #e3dfd9;
          --surface: #fdfcfa;
          --surface2: #f7f4f0;
          --surface3: #f0ece4;
          --border: #ddd8d0;
          --border2: #e6e1da;
          --border3: #d8d2ca;
          --text: #1a1a18;
          --text2: #4a4844;
          --text3: #6a6660;
          --text4: #8c8880;
          --text5: #b0aca4;
          --input-bg: #fdfcfa;
          --input-border: #c4bbb0;
          --scrollbar-track: #e3dfd9;
          --scrollbar-thumb: #b4aca0;
          --accent: #b07848;
          color-scheme: light;
        }
        [data-theme=dark] {
          --bg: #161614;
          --bg2: #1e1e1a;
          --surface: #222220;
          --surface2: #292924;
          --surface3: #2e2e28;
          --border: #38382e;
          --border2: #2e2e28;
          --border3: #333328;
          --text: #e8e5df;
          --text2: #b0aca4;
          --text3: #9a968e;
          --text4: #7a7670;
          --text5: #565450;
          --input-bg: #1e1e1a;
          --input-border: #3a3a30;
          --scrollbar-track: #1e1e1a;
          --scrollbar-thumb: #3a3a30;
          --accent: #e8e5df;
          color-scheme: dark;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { width: 100%; height: 100%; margin: 0; padding: 0; background: #1a1a18; }
        body, #root { width: 100%; height: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); }
        #root h1, #root h2, #root h3 { color: var(--text); -webkit-text-fill-color: var(--text); }
        #root > div { width: 100% !important; max-width: 100% !important; }
        #root, #root div, #root h1, #root h2, #root h3, #root p, #root label, #root span, #root nav, #root section, #root article, #root main, #root aside, #root header, #root footer { text-align: left; }
        ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
        ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
        input, select, textarea, button { font-family: inherit; font-size: 13px; line-height: 1.4; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; }
        input, select, textarea { background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: 20px; padding: 8px 14px; color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; height: 36px; }
        textarea { height: auto; min-height: 38px; line-height: 1.5; border-radius: 16px; padding: 10px 14px; }
        select { padding-right: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
        input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: auto; height: auto; }
        input[type="date"] { min-height: 36px; }
        input:focus, select:focus, textarea:focus { border-color: #9a7858; box-shadow: 0 0 0 3px rgba(154,120,88,0.14); }
        button { cursor: pointer; border: none; line-height: 1.4; }
        .btn { padding: 0 20px; height: 36px; border-radius: 20px; font-weight: 600; font-size: 12px; letter-spacing: 0.02em; transition: all 0.18s; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; gap: 6px; }
        .btn-primary { background: #252520; color: #f0ede8; box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12); }
        .btn-primary:hover { background: #363630; box-shadow: 0 2px 8px rgba(0,0,0,0.28); }
        .btn-danger { background: #8a1a1a; color: #fff; border-radius: 20px; }
        .btn-danger:hover { background: #a02020; box-shadow: 0 2px 8px rgba(138,26,26,0.25); }
        .btn-ghost { background: var(--surface); color: var(--text2); border: 1.5px solid var(--border3); border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); }
        .btn-ghost:hover { border-color: var(--text2); color: var(--text2); background: var(--surface2); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
        .filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
        .filter-label { font-size: 11px; color: var(--text4); letter-spacing: 0.06em; white-space: nowrap; font-weight: 500; }
        .pill { border-radius: 20px !important; border: 1.5px solid var(--border3); font-size: 12px; height: 32px; white-space: nowrap; transition: all 0.15s; box-sizing: border-box; }
        button.pill { background: var(--surface); color: var(--text3); cursor: pointer; font-family: inherit; padding: 0 14px; display: inline-flex; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); }
        button.pill:hover { border-color: var(--text2); color: var(--text2); background: var(--surface2); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
        button.pill.active { background: var(--text); color: var(--bg); border-color: var(--text); }
        input.pill, select.pill { width: auto; min-width: 100px; padding: 0 14px; }
        select.pill { padding-right: 28px; }
        .btn-sm { height: 28px !important; padding: 0 10px !important; font-size: 12px !important; }

        .section-label { font-size: 11px; letter-spacing: 0.1em; color: var(--text4); font-weight: 500; text-transform: uppercase; margin-bottom: 12px; display: block; }
        .panel-label { padding: 12px 16px; border-bottom: 1px solid var(--border2); font-size: 11px; letter-spacing: 0.1em; color: var(--text4); font-weight: 500; text-transform: uppercase; }
        .section-divider { margin: 14px 0 10px; padding-top: 12px; border-top: 1px solid var(--border2); font-size: 11px; letter-spacing: 0.08em; color: var(--text4); text-transform: uppercase; display: block; }
        .empty-state { text-align: center; color: var(--text4); padding: 32px !important; font-size: 13px; }
        .card { background: var(--surface); border-radius: 16px; border: 1px solid var(--border2); padding: 22px 24px; overflow-x: auto; box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 20px rgba(0,0,0,0.06); }
        .tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; }
        table { width: 100%; border-collapse: collapse; }
        th { text-align: left; font-size: 10px; letter-spacing: 0.1em; color: var(--text4); font-weight: 500; padding: 10px 16px; border-bottom: 1px solid var(--border); text-transform: uppercase; }
        td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border2); color: var(--text); }
        tr:last-child td { border-bottom: none; }
        tr:hover td { background: var(--surface2); transition: background 0.12s; }
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; backdrop-filter: blur(4px); }
        .modal { background: var(--surface); border-radius: 24px; padding: 32px 36px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border2); box-shadow: 0 8px 48px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08); }
        .form-row { display: flex; gap: 14px; margin-bottom: 16px; }
        .form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; }
        label { font-size: 10px; letter-spacing: 0.09em; color: var(--text4); font-weight: 500; text-transform: uppercase; }
        @media print { body { background: white !important; } .no-print { display: none !important; } }
        .mobile-header { display: none; background: #1a1a18; padding: 14px 18px; position: sticky; top: 0; z-index: 150; align-items: center; gap: 12px; }
        .sidebar-logo-btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
        .sidebar-logo-btn:hover .sidebar-logo-text { opacity: 0.6; }
        .sidebar-logo-text { transition: opacity 0.15s; }
        .nav-btn { transition: all 0.15s; }
        .nav-btn:hover { background: rgba(240,237,232,0.06) !important; }
        .nav-pill { margin: 2px 8px; border-radius: 28px !important; width: calc(100% - 16px) !important; }
        .nav-pill-active { background: #2e2e28 !important; }
        .nav-pill:hover { background: rgba(240,237,232,0.08) !important; }
        .mobile-col-toggle { display: none; }
        @media (max-width: 768px) {
          .sidebar { display: none !important; }
          .sidebar.open { display: flex !important; position: fixed; inset: 0; z-index: 200; width: 100% !important; height: 100vh; overflow-y: auto; }
          .sidebar-logo-btn { pointer-events: none !important; }
          .main-content { padding: 16px !important; }
          .mobile-header { display: flex !important; }
          .mobile-close { display: block !important; }
          .mobile-col-toggle { display: inline-flex !important; }
          .app-wrapper { flex-direction: column !important; }
          .form-row { flex-direction: column !important; }
          .card { padding: 14px !important; }
          .modal { padding: 18px !important; margin: 10px; }
          .responsive-grid-2 { grid-template-columns: 1fr !important; }
          .responsive-grid-4 { grid-template-columns: 1fr 1fr !important; }
          .dashboard-grid > * { grid-column: span 12 !important; }
          h1 { font-size: 26px !important; }
          table { min-width: 500px; }
          .hide-mobile { display: none !important; }
          .hide-compact { display: none !important; }
        }
      `}</style>

      {/* Mobile Header */}
      <div className="mobile-header">
        <button onClick={() => setNavOpen(o => !o)} style={{ background: "none", border: "none", color: "#aaa", fontSize: 22, padding: 0, lineHeight: 1 }}>☰</button>
        <div style={{ fontFamily: "Krungthep, 'Archivo Black', sans-serif", fontSize: 24, color: "#f0ede8", letterSpacing: "-0.02em", lineHeight: 1 }}>RAPPORT</div>
      </div>

      {/* Sidebar */}
      <div className={`sidebar${navOpen ? " open" : ""}`} style={{ width: collapsed ? 56 : 210, background: "#1a1a18", display: "flex", flexDirection: "column", padding: "33px 0", alignSelf: "stretch", margin: "15px 15px 15px 0", flexShrink: 0, overflowY: "auto", borderRadius: "0 16px 16px 0", border: "1px solid #3a3a34", boxShadow: "6px 0 20px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.12), 0 -6px 16px rgba(0,0,0,0.12)", clipPath: "inset(-14px -100px -14px 0)", transition: "width 0.2s ease", overflow: "hidden" }}>
        <div style={{ padding: collapsed ? "0 0 28px" : "0 22px 28px", borderBottom: "1px solid #2d2d28", display: "flex", alignItems: "center", justifyContent: collapsed ? "center" : "space-between", transition: "padding 0.2s" }}>
          {collapsed ? (
            <button className="sidebar-logo-btn" onClick={() => setSidebarCollapsed(false)} title="Sidebar ausklappen">
              <div className="sidebar-logo-text" style={{ fontFamily: "Krungthep, 'Archivo Black', sans-serif", fontSize: 22, color: "#f0ede8", lineHeight: 1, letterSpacing: "-0.02em" }}>R</div>
            </button>
          ) : (
            <>
              <button className="sidebar-logo-btn" onClick={() => setSidebarCollapsed(true)} title="Sidebar einklappen">
                <div className="sidebar-logo-text">
                  <div style={{ fontFamily: "Krungthep, 'Archivo Black', sans-serif", fontSize: 28, color: "#f0ede8", lineHeight: 0.95, letterSpacing: "-0.02em" }}>RAPPORT</div>
                  <div style={{ fontSize: 9, color: "#4a4840", marginTop: 8, letterSpacing: "0.15em", fontWeight: 500 }}>{(data.settings.name || "STUDIO ADMINISTRATION").toUpperCase()}</div>
                </div>
              </button>
              <button onClick={() => setNavOpen(false)} style={{ background: "none", border: "none", color: "#555", fontSize: 20, padding: 0, lineHeight: 1, display: "none" }} className="mobile-close"><span className="material-icons" style={{fontSize:16,verticalAlign:"middle"}}>close</span></button>
            </>
          )}
        </div>
        <nav style={{ flex: 1, padding: "18px 0" }}>
          {visibleNavItems.map(item => {
            const isParentActive = view === item.id || (item.children || []).some(c => c.id === view);
            const isExpanded = expandedNav.has(item.id);
            const toggleExpand = (e) => {
              e.stopPropagation();
              setExpandedNav(prev => {
                const next = new Set(prev);
                next.has(item.id) ? next.delete(item.id) : next.add(item.id);
                return next;
              });
            };
            if (item.children) {
              if (collapsed) {
                return (
                  <button key={item.id} title={item.label} onClick={() => { navigate(item.id); setNavOpen(false); }} style={{
                    display: "flex", alignItems: "center", justifyContent: "center",
                    width: "100%", padding: "11px 0",
                    background: isParentActive ? "#252520" : "transparent",
                    border: "none", cursor: "pointer",
                    color: isParentActive ? "#e8e5df" : "#555", transition: "all 0.15s",
                  }}><span className="msr" style={{ fontSize: 22 }}>{item.icon}</span></button>
                );
              }
              return (
                <div key={item.id} style={{ padding: "2px 8px" }}>
                  <div style={{ display: "flex", alignItems: "center", borderRadius: 28, background: isParentActive ? "#2e2e28" : "transparent", transition: "background 0.15s" }}>
                    <button className="nav-btn" onClick={() => { navigate(item.id); setNavOpen(false); setExpandedNav(prev => { const next = new Set(prev); next.add(item.id); return next; }); }} style={{
                      flex: 1, padding: "10px 0 10px 14px",
                      background: "transparent", border: "none",
                      color: isParentActive ? "#e8e5df" : "#aaa",
                      display: "flex", alignItems: "center", gap: 10,
                      fontSize: 11, textAlign: "left", fontFamily: "inherit", cursor: "pointer",
                      letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 500, borderRadius: "28px 0 0 28px",
                    }}>
                      <span className="msr" style={{ fontSize: 18, flexShrink: 0, opacity: isParentActive ? 1 : 0.6 }}>{item.icon}</span>
                      {item.label}
                    </button>
                    <button className="nav-btn" onClick={toggleExpand} style={{
                      flexShrink: 0, width: 36, alignSelf: "stretch",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      background: "transparent", border: "none", cursor: "pointer",
                      color: isExpanded ? "#bbb" : "#555", fontSize: 8,
                      fontFamily: "inherit", padding: 0, borderRadius: "0 28px 28px 0",
                    }}>
                      <span style={{ display: "inline-block", transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.2s" }}>▶</span>
                    </button>
                  </div>
                  {isExpanded && (
                    <div style={{ paddingTop: 2, paddingBottom: 4 }}>
                      {item.children.map(child => (
                        <button key={child.id} className="nav-btn" onClick={() => { navigate(child.id); setNavOpen(false); }} style={{
                          display: "block", width: "100%", padding: "7px 14px 7px 42px",
                          background: view === child.id ? "#222220" : "transparent",
                          color: view === child.id ? "#d8d5cf" : "#777",
                          fontSize: 10, textAlign: "left", fontFamily: "inherit", cursor: "pointer",
                          border: "none", letterSpacing: "0.07em", textTransform: "uppercase", fontWeight: 500,
                          borderRadius: 20,
                        }}>{child.label}</button>
                      ))}
                    </div>
                  )}
                </div>
              );
            }
            if (collapsed) {
              return (
                <button key={item.id} title={item.label} className="nav-btn" onClick={() => { navigate(item.id); setSelectedProjectId(null); setNavOpen(false); }} style={{
                  display: "flex", alignItems: "center", justifyContent: "center",
                  width: "100%", padding: "11px 0",
                  background: view === item.id ? "#2e2e28" : "transparent",
                  border: "none", cursor: "pointer",
                  color: view === item.id ? "#e8e5df" : "#555",
                }}><span className="msr" style={{ fontSize: 22 }}>{item.icon}</span></button>
              );
            }
            return (
              <button key={item.id} className="nav-btn nav-pill" onClick={() => { navigate(item.id); setSelectedProjectId(null); setNavOpen(false); }} style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "10px 14px",
                background: view === item.id ? "#2e2e28" : "transparent",
                color: view === item.id ? "#e8e5df" : "#aaa",
                border: "none", fontFamily: "inherit", cursor: "pointer",
                letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 500, fontSize: 11,
              }}>
                <span className="msr" style={{ fontSize: 18, flexShrink: 0, opacity: view === item.id ? 1 : 0.6 }}>{item.icon}</span>
                {item.label}
              </button>
            );
          })}
        </nav>
        {/* ── Vor / Zurück ── */}
        <div style={{ borderTop: "1px solid #2d2d28", display: "flex", gap: 2, padding: collapsed ? "8px 0" : "6px 10px", justifyContent: collapsed ? "center" : "flex-start" }}>
          {[["goBack", "‹", goBack, navCanBack, "Zurück"], ["goForward", "›", goForward, navCanForward, "Vorwärts"]].map(([key, ch, fn, enabled, title]) => (
            <button key={key} onClick={enabled ? fn : undefined} title={title} style={{ background: "none", border: "none", color: enabled ? "#888" : "#333", cursor: enabled ? "pointer" : "default", fontSize: 20, lineHeight: 1, padding: "4px 9px", fontFamily: "inherit", borderRadius: 6, transition: "color 0.15s" }}
              onMouseEnter={e => { if (enabled) e.currentTarget.style.color = "#ccc"; }}
              onMouseLeave={e => { e.currentTarget.style.color = enabled ? "#888" : "#333"; }}>
              {ch}
            </button>
          ))}
        </div>

        {!collapsed && <div style={{ padding: "8px 16px", borderTop: "1px solid #2d2d28" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <button onClick={() => setShowAbout(true)} style={{ background: "none", border: "none", padding: 0, color: "#555", fontSize: 10, letterSpacing: "0.08em", cursor: "pointer", fontFamily: "inherit", textAlign: "left" }}
              onMouseEnter={e => e.currentTarget.style.color = "#aaa"} onMouseLeave={e => e.currentTarget.style.color = "#555"}>ÜBER RAPPORT</button>
            <button onClick={() => { setChangelogVersion("0.7"); setShowChangelog(true); }} style={{ background: "none", border: "none", padding: 0, color: "#aaa", fontSize: 10, letterSpacing: "0.08em", cursor: "pointer", fontFamily: "inherit" }}
              onMouseEnter={e => e.currentTarget.style.color = "#f0ede8"} onMouseLeave={e => e.currentTarget.style.color = "#aaa"}>0.7</button>
          </div>
        </div>}

        {/* Benutzer + Logout + Theme */}
        <div style={{ padding: collapsed ? "10px 0" : "10px 16px", borderTop: "1px solid #2d2d28", display: "flex", alignItems: "center", justifyContent: collapsed ? "center" : "space-between", gap: 8 }}>
          {!collapsed && (
            <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
              <div style={{ width: 28, height: 28, borderRadius: "50%", background: "#2e2e28", border: "1.5px solid #3a3a30", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 600, color: "#9a9690", flexShrink: 0, overflow: "hidden", letterSpacing: "0.02em" }}>
                {currentUserRecord?.avatar
                  ? <img src={currentUserRecord.avatar} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  : userInitials}
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 10, color: "#aaa", fontWeight: 500, letterSpacing: "0.04em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  {currentUser.displayName || currentUser.username}
                </div>
                {currentUser.role === "admin" && <div style={{ fontSize: 8, color: "#555", letterSpacing: "0.1em" }}>ADMIN</div>}
              </div>
            </div>
          )}
          <div style={{ display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }}>
            <button onClick={() => setDarkMode(d => !d)} title={darkMode ? "Light Mode" : "Dark Mode"} style={{ background: "none", border: "none", color: "#555", cursor: "pointer", padding: 4, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, transition: "color 0.15s" }}
              onMouseEnter={e => e.currentTarget.style.color = "#ccc"}
              onMouseLeave={e => e.currentTarget.style.color = "#555"}>
              <span className="msr" style={{ fontSize: 18 }}>{darkMode ? "light_mode" : "dark_mode"}</span>
            </button>
            <button onClick={handleLogout} title="Abmelden" style={{ background: "none", border: "none", color: "#555", cursor: "pointer", padding: 4, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, transition: "color 0.15s", flexShrink: 0 }}
              onMouseEnter={e => e.currentTarget.style.color = "#b5621e"}
              onMouseLeave={e => e.currentTarget.style.color = "#555"}>
              <span className="msr" style={{ fontSize: 18 }}>logout</span>
            </button>
          </div>
        </div>
      </div>

      {/* Main */}
      <div className="main-content" style={{ flex: 1, padding: "28px 24px", overflowY: "auto", minWidth: 0, background: "var(--bg)", zoom: uiZoom !== 1 ? uiZoom : undefined }}>
        <Suspense fallback={<ViewFallback />}>
          {view === "dashboard"  && <Dashboard data={data} setView={navigate} currentUser={currentUser} saveAll={save} />}
          {view === "pinnwand"  && <Pinboard  data={data} update={update} currentUser={currentUser} />}
          {view === "projects" && !selectedProjectId && <Projects data={data} update={update} saveAll={save} modal={modal} setModal={setModal} onSelect={setSelectedProjectId} setPrintContent={setPrintContent} currentUser={currentUser} />}
          {view === "projects" && selectedProjectId && <ProjectDetail data={data} update={update} saveAll={save} projectId={selectedProjectId} onBack={() => setSelectedProjectId(null)} setPrintContent={setPrintContent} modal={modal} setModal={setModal} currentUser={currentUser} />}
          {view === "time" && <Time data={data} update={update} currentUser={currentUser} setPrintContent={setPrintContent} />}
          {view === "quotes" && <Quotes data={data} update={update} setData={setData} saveAll={save} modal={modal} setModal={setModal} setPrintContent={setPrintContent} setView={navigate} onSelectProject={setSelectedProjectId} />}
          {view === "dokumente" && <Documents data={data} setView={navigate} />}
          {view === "lieferscheine" && <DeliveryNotes data={data} update={update} saveAll={save} setPrintContent={setPrintContent} />}
          {view === "protokolle" && <Protocols data={data} update={update} saveAll={save} setPrintContent={setPrintContent} />}
          {view === "buchhaltung" && <Accounting data={data} update={update} setView={navigate} setPrintContent={setPrintContent} />}
          {view === "invoices" && <Invoices data={data} update={update} saveAll={save} modal={modal} setModal={setModal} setPrintContent={setPrintContent} setView={navigate} />}
          {view === "loehne" && <Payroll data={data} update={update} saveAll={save} setPrintContent={setPrintContent} setView={navigate} />}
          {view === "expenses" && <Expenses data={data} update={update} saveAll={save} modal={modal} setModal={setModal} standalone setView={navigate} />}
          {view === "internal-expenses" && <InternalExpenses data={data} update={update} setView={navigate} />}
          {view === "personen" && <Persons data={data} update={update} saveAll={save} setView={navigate} />}
          {view === "mitarbeiter" && <Employees data={data} update={update} saveAll={save} setPrintContent={setPrintContent} />}
          {view === "letters" && <Letters data={data} update={update} setPrintContent={setPrintContent} />}
          {view === "settings" && <Settings data={data} update={update} currentUser={currentUser} uiZoom={uiZoom} setUiZoom={setUiZoom} />}
          {view === "studio-budget" && <StudioBudget data={data} update={update} setView={navigate} setPrintContent={setPrintContent} />}
        </Suspense>
      </div>

      <UpdateNotifier />

      {showChangelog && (() => {
        const CHANGELOGS = {
          "0.7": {
            items: [
              ["Automatische Updates", "Rapport prüft beim Start, ob eine neue Version unter git.kgva.ch verfügbar ist, und installiert sie auf Knopfdruck — kein manuelles DMG-Download mehr nötig. Updates lassen sich überspringen oder verschieben; Pakete werden vor der Installation per Signaturprüfung verifiziert."],
              ["System-Tray-Icon", "Rapport läuft im Hintergrund weiter, wenn das Fenster geschlossen wird, und ist über ein Menüleisten-Icon erreichbar. Schnellzugriff auf Dashboard, Zeiterfassung, Projekte und Buchhaltung; Cmd+Q beendet die App vollständig."],
              ["Einstellungen: Updates & Support", "Neuer Tab «Updates & Support» mit manueller Update-Suche, Zeitstempel der letzten Prüfung und Link zur Dokumentation auf rapport.kgva.ch."],
            ],
          },
          "0.6": {
            items: [
              ["Sicherheit: Passwort-Hashing", "Passwörter werden jetzt mit PBKDF2 (SHA-256, 100 000 Iterationen) und einem zufälligen Salt gespeichert. Bestehende Klartext-Passwörter werden beim ersten erfolgreichen Login transparent migriert."],
              ["Login: Brute-Force-Schutz", "Nach 5 Fehlversuchen wird der Login für 60 Sekunden gesperrt — mit sichtbarem Countdown. Passwortvergleich erfolgt in konstanter Zeit, Mindestlänge bei der Einrichtung auf 8 Zeichen erhöht."],
              ["Briefe: HTML-Sanitizer", "Brieftexte werden vor dem Druck durch einen Allowlist-Sanitizer geleitet. Script-Tags, javascript:-URLs und on*-Handler werden entfernt — externe Links bekommen automatisch rel=\"noopener noreferrer\"."],
              ["Datenexport ohne Klartext-Passwörter", "Beim Sichern der Daten werden Legacy-Klartext-Passwörter entfernt; nur die nicht umkehrbaren PBKDF2-Hashes bleiben im Backup."],
              ["Belege direkt in der Zeiterfassung", "Spesenbelege (Bild oder PDF) können jetzt direkt aus der Tagesansicht hochgeladen und angezeigt werden. Bilder werden vor dem Speichern auf 1600 px skaliert und JPEG-komprimiert."],
              ["Avatar-Upload schlanker", "Profilbilder werden auf 256 px skaliert und als JPEG gespeichert — localStorage bleibt klein. Nur Bilddateien werden akzeptiert."],
              ["Schnellerer Start", "Module werden per Code-Splitting nur bei Bedarf geladen — die App startet spürbar schneller und braucht weniger Speicher."],
              ["QR-Rechnung offline", "Die swissqrbill-Bibliothek ist jetzt lokal eingebunden — QR-Einzahlungsscheine funktionieren ohne Internet-Verbindung."],
              ["Stabilere IDs", "Neue Datensätze nutzen kryptografisch zufällige IDs (crypto.randomUUID) statt Math.random."],
              ["Über Rapport & UI-Feinschliff", "Neues «Über Rapport»-Modal mit Lizenzinfo, einheitliche Stift-Icons zum Bearbeiten, Pinnwand-Kategorien als Pills."],
            ],
          },
          "0.5": {
            items: [
              ["Anmeldesystem", "Benutzerverwaltung mit Rollen und Passwörtern. Jeder Mitarbeiter erhält einen eigenen Login. Berechtigungen steuern, welche Module sichtbar sind."],
              ["Migration bestehender Daten", "Beim ersten Start mit einer bestehenden Datenbank erscheint ein Migrations-Assistent: Daten sichern, Admin-Konto einrichten — alle bisherigen Inhalte bleiben erhalten."],
              ["Rechnungstypen: Akonto / Teilrechnung / Schluss", "Klare Trennung der Rechnungsarten mit unterschiedlicher steuerlicher Behandlung. Akonto ist erst bei der Schlussrechnung steuerrelevant; Teilrechnungen sind sofort wirksam."],
              ["Neuer Rechnungsdialog", "Zweistufige Auswahl: zuerst Art der Rechnung (Akonto / Teilrechnung / Schlussrechnung), dann Berechnungsmethode (Stunden / % vom Budget / Fixer Betrag / SIA-Phase)."],
              ["Akonto & Teilrechnung nach SIA-Phase", "Für Pauschal-Projekte können einzelne SIA-Phasen direkt verrechnet werden — bereits verrechnete Phasen werden als solche markiert."],
              ["Aufwandsrechnungen erweitert", "Stundenprojekte unterstützen jetzt Akonto (Stunden bis heute, %, Fixbetrag) und Teilrechnung (Stunden auswählen, %, Fixbetrag, SIA-Phase)."],
              ["Buchhaltung: Akonto-MwSt getrennt", "Akonto-Rechnungen werden in der Buchhaltung separat ausgewiesen — die MwSt wird erst bei der Schlussrechnung als steuerrelevant gezählt."],
              ["Mitarbeiter: Intern & Absenzen", "Umbenennung zu «Intern / Absenzen». Neue Jahresübersicht mit Monatsvergleich und Vorjahr, Absenzkategorien-Matrix, sowie Auswertung interner Stunden ohne Projektbezug."],
            ],
          },
          "0.4": {
            items: [
              ["Material Design 3", "Sidebar mit einklappbarem Icon-Modus und Material Symbols Rounded Icons. Buttons als Pill, Inputs und Cards mit mehr Radius, Tags als Chips, Modals mit Backdrop-Blur."],
              ["Interne Projektbeteiligung", "Mitarbeitende können direkt im Projekt zugewiesen werden. In Protokollen erscheinen unter «Intern» nur noch die zugewiesenen Personen."],
              ["Offerten im Budget", "Neben Rechnungen können jetzt auch Offerten in die Einnahmen-Planung des Bürobudgets einbezogen werden."],
              ["Kategorien direkt auf der Seite", "Spesenarten und Ausgaben-Kategorien werden neu direkt auf der jeweiligen Seite verwaltet, nicht mehr in den Einstellungen."],
            ],
          },
          "0.3": {
            items: [
              ["Visuelles Redesign", "Sidebar schwebt als eigenständiges Panel mit Radius und Schatten. Cards haben mehr Tiefe. Header kompakter, Abstände überarbeitet, Menüpunkte in Kapitälchen. Studio-Name in der Sidebar."],
              ["Zoom", "Der UI-Zoom betrifft nur den Hauptinhalt — die Sidebar bleibt immer gleich gross und unverzerrt."],
            ],
          },
          "0.2": {
            items: [
              ["Neue Module", "Lohnabrechnung, Bürobudget, Protokolle, Lieferscheine und Spesen (Mitarbeiter & intern) hinzugefügt."],
              ["Zeiterfassung Wochenansicht", "Visuelles Zeitraster mit Drag & Drop — Einträge verschieben und skalieren, Wechsel zwischen Tag-, Wochen- und Monatsansicht."],
              ["Ferienplanung", "Ferienanträge stellen, genehmigen und zurückziehen. Absenzverwaltung ausgebaut."],
              ["Teilzeit", "Lohn wird proportional zum Pensum berechnet, pro Monat überschreibbar."],
            ],
          },
          "0.1": {
            items: [
              ["Erster Release", "Projekte, Kunden, Mitarbeiterverwaltung, Zeiterfassung."],
              ["Rechnungen & Offerten", "Rechnungen mit QR-Einzahlungsschein, Offerten nach SIA 102, manuell oder frei — konvertierbar zur Rechnung."],
              ["Einstellungen", "Studio-Stammdaten, Stundensätze, Rollen, MwSt und Projektnummern-Format."],
            ],
          },
        };
        const versions = Object.keys(CHANGELOGS);
        const current = CHANGELOGS[changelogVersion] || CHANGELOGS["0.7"];
        return (
          <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
            <div style={{ background: "#fff", borderRadius: 10, width: "100%", maxWidth: 480, boxShadow: "0 8px 40px rgba(0,0,0,0.18)", overflow: "hidden" }}>
              <div style={{ background: "#1a1a18", padding: "28px 32px 20px" }}>
                <div style={{ fontSize: 10, letterSpacing: "0.18em", color: "#b07848", marginBottom: 8, fontWeight: 600 }}>CHANGELOG</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
                  <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 28, color: "#f0ede8", fontWeight: 400, lineHeight: 1.1 }}>Alpha {changelogVersion}</div>
                </div>
                <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
                  {versions.map(v => (
                    <button key={v} onClick={() => setChangelogVersion(v)} style={{ fontSize: 10, padding: "3px 10px", borderRadius: 20, border: "1px solid", borderColor: v === changelogVersion ? "#b07848" : "#3a3a30", background: v === changelogVersion ? "#b07848" : "transparent", color: v === changelogVersion ? "#1a1a18" : "#888", cursor: "pointer", fontFamily: "inherit", letterSpacing: "0.06em" }}>
                      Alpha {v}
                    </button>
                  ))}
                </div>
              </div>
              <div style={{ padding: "20px 32px 8px", maxHeight: 340, overflowY: "auto" }}>
                {current.items.map(([title, desc]) => (
                  <div key={title} style={{ display: "flex", gap: 14, marginBottom: 14 }}>
                    <div style={{ width: 4, flexShrink: 0, background: "#b07848", borderRadius: 2, marginTop: 2 }} />
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: "#1a1a18", marginBottom: 2 }}>{title}</div>
                      <div style={{ fontSize: 12, color: "#888", lineHeight: 1.5 }}>{desc}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ padding: "12px 32px 24px" }}>
                <button className="btn btn-primary" style={{ width: "100%", fontSize: 13 }} onClick={() => { setShowChangelog(false); localStorage.setItem("rapport_changelog_seen", "0.7"); }}>
                  Schliessen
                </button>
              </div>
            </div>
          </div>
        );
      })()}

      {showAbout && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
          <div style={{ background: "#fff", borderRadius: 10, width: "100%", maxWidth: 480, boxShadow: "0 8px 40px rgba(0,0,0,0.18)", overflow: "hidden" }}>
            <div style={{ background: "#1a1a18", padding: "28px 32px 24px" }}>
              <div style={{ fontSize: 10, letterSpacing: "0.18em", color: "#b07848", marginBottom: 8, fontWeight: 600 }}>ÜBER RAPPORT</div>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 28, color: "#f0ede8", fontWeight: 400, lineHeight: 1.1 }}>Rapport</div>
              <div style={{ fontSize: 11, color: "#888", marginTop: 6, letterSpacing: "0.04em" }}>Alpha 0.7 · Studio-Management für Architekturbüros</div>
            </div>
            <div style={{ padding: "20px 32px 8px" }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "#888", letterSpacing: "0.1em", marginBottom: 12 }}>LIZENZ</div>
              <div style={{ display: "flex", gap: 14, marginBottom: 14 }}>
                <div style={{ width: 4, flexShrink: 0, background: "#b07848", borderRadius: 2 }} />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: "#1a1a18", marginBottom: 2 }}>GNU AGPL-3.0</div>
                  <div style={{ fontSize: 12, color: "#888", lineHeight: 1.5 }}>Rapport ist freie Software. Der Quellcode darf eingesehen, verändert und weitergegeben werden — unter den Bedingungen der AGPL-3.0-Lizenz.</div>
                  <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noreferrer" style={{ fontSize: 11, color: "#b07848", textDecoration: "none", display: "inline-block", marginTop: 4 }}>www.gnu.org/licenses/agpl-3.0 ↗</a>
                </div>
              </div>
              <div style={{ fontSize: 11, fontWeight: 600, color: "#888", letterSpacing: "0.1em", marginBottom: 12, marginTop: 20 }}>TECHNOLOGIEN</div>
              {[
                ["React 19", "UI-Framework"],
                ["Vite", "Build-Tool"],
                ["Tauri", "Desktop-App-Rahmen"],
                ["Material Symbols", "Icons von Google"],
              ].map(([name, desc]) => (
                <div key={name} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid #f0ede8" }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: "#1a1a18" }}>{name}</div>
                  <div style={{ fontSize: 12, color: "#aaa" }}>{desc}</div>
                </div>
              ))}
              <div style={{ marginTop: 20, padding: "12px 14px", background: "#f7f5f2", borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: "#888", lineHeight: 1.6 }}>
                  Entwickelt von <span style={{ color: "#1a1a18", fontWeight: 600 }}>Gabriele Varano</span><br />
                  <a href="https://rapport.gabrielevarano.ch/" target="_blank" rel="noreferrer" style={{ color: "#b07848", textDecoration: "none" }}>rapport.gabrielevarano.ch ↗</a>
                </div>
              </div>
            </div>
            <div style={{ padding: "16px 32px 24px" }}>
              <button className="btn btn-primary" style={{ width: "100%", fontSize: 13 }} onClick={() => setShowAbout(false)}>Schliessen</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}