// ─────────────────────────────────────────────────────────────
// Alternate navigation chromes (Settings → Darstellung → Bedienung).
// All wrap the SAME screens/state — only the navigation shell changes.
//   command  — Befehlsleiste: central search/command field + quick + button
//   launcher — Springboard: one action button opens a full grid launcher
//   rail     — Daumen-Rail: vertical glass rail on the right edge
// 'classic' keeps the original bottom InteractiveTabBar (handled in App).
// ─────────────────────────────────────────────────────────────

const NAV_TABS = [
  { id: 'home', label: 'Start',     d: 'M3 12L12 3l9 9M5 10v10h14V10' },
  { id: 'cal',  label: 'Kalender',  d: icons.cal },
  { id: 'eq',   label: 'Equipment', d: 'M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10' },
  { id: 'eur',  label: 'Finanzen',  d: icons.euro },
  { id: 'doc',  label: 'Akten',     d: icons.doc },
];
const NAV_SETTINGS = { id: 'settings', label: 'Einstellungen', d: 'M12 9a3 3 0 100 6 3 3 0 000-6zM19 12a7 7 0 00-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 00-2-1.2l-.4-2.6H10l-.4 2.6a7 7 0 00-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 005 12a7 7 0 00.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 002 1.2l.4 2.6h4l.4-2.6a7 7 0 002-1.2l2.4 1 2-3.4-2-1.6A7 7 0 0019 12z' };

function AltNav({ layout, active, dark, theme, onTab, onNew, onSearch, onSettings }) {
  const t = theme || useTheme();
  const [open, setOpen] = React.useState(false);

  const ACTIONS = [
    { id: 'new', label: 'Neue Miete',  d: icons.plus, run: () => { setOpen(false); onNew && onNew(); }, primary: true },
    { id: 'cal', label: 'Kalender',    d: icons.cal,  run: () => { setOpen(false); onTab('cal'); } },
    { id: 'eq',  label: 'Verfügbarkeit', d: NAV_TABS[2].d, run: () => { setOpen(false); onTab('eq'); } },
  ];
  const wrap = { position: 'fixed', zIndex: 30, bottom: 'calc(env(safe-area-inset-bottom, 0px) + 14px)', left: 12, right: 12 };

  // ── COMMAND: a single bar centred on a search/command field ─────────
  if (layout === 'command') {
    return (
      <div style={wrap}>
        <Glass dark={dark} radius={26} padding="7px 7px" tint={t.glass ? t.card : undefined}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            {/* compact section switcher */}
            <div style={{ display: 'flex', gap: 1, padding: 2, borderRadius: 13, background: t.chip }}>
              {NAV_TABS.map((tab) => {
                const on = tab.id === active;
                return (
                  <Pressable key={tab.id} onClick={() => onTab(tab.id)} scale={0.86}>
                    <div style={{ width: 34, height: 34, borderRadius: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? t.card : 'transparent', boxShadow: on ? t.shadowCard : 'none' }}>
                      <Icon d={tab.d} color={on ? t.accent : t.textSec} size={18} sw={on ? 2.3 : 1.9} />
                    </div>
                  </Pressable>);
              })}
            </div>
            {/* the command field */}
            <Pressable onClick={() => onSearch && onSearch()} scale={0.98} style={{ flex: 1 }}>
              <div style={{ height: 40, borderRadius: 13, background: t.inputBg, border: `0.5px solid ${t.inputBorder}`, display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px' }}>
                <Icon d={icons.search || 'M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.3-4.3'} color={t.textTer} size={16} sw={2} />
                <span style={{ fontSize: 13.5, color: t.textTer, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Suchen oder Befehl …</span>
              </div>
            </Pressable>
            <Pressable onClick={() => onNew && onNew()} scale={0.9}>
              <div style={{ width: 40, height: 40, borderRadius: 13, background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 4px 14px ${t.accent}55` }}>
                <Icon d={icons.plus} color="#fff" size={22} sw={2.6} />
              </div>
            </Pressable>
          </div>
        </Glass>
      </div>);
  }

  // ── LAUNCHER: one button opens a full springboard of sections+actions ─
  if (layout === 'launcher') {
    const TILES = [
      ...ACTIONS.map((a) => ({ ...a, kind: 'action' })),
      ...NAV_TABS.map((s) => ({ id: s.id, label: s.label, d: s.d, run: () => { setOpen(false); onTab(s.id); }, kind: 'section' })),
      { id: 'settings', label: NAV_SETTINGS.label, d: NAV_SETTINGS.d, run: () => { setOpen(false); onSettings && onSettings(); }, kind: 'section' },
    ];
    return (
      <>
        {open &&
        <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40, background: t.scrim, backdropFilter: 'blur(18px) saturate(160%)', WebkitBackdropFilter: 'blur(18px) saturate(160%)', animation: 'rfFade 0.2s ease', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '0 18px calc(env(safe-area-inset-bottom,0px) + 110px)' }}>
          <div onClick={(e) => e.stopPropagation()}>
            <div style={{ fontSize: 12, fontWeight: 700, color: dark ? 'rgba(255,255,255,0.7)' : t.textSec, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 10, paddingLeft: 4 }}>Schnellaktionen</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 18 }}>
              {TILES.filter((x) => x.kind === 'action').map((x, i) => (
                <Pressable key={x.id} onClick={x.run} scale={0.95}>
                  <div style={{ aspectRatio: '1', borderRadius: 20, background: x.primary ? t.accent : t.card, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, boxShadow: t.shadowCard, animation: `rfPop 0.28s cubic-bezier(0.2,0.9,0.3,1.3) ${i * 0.03}s both` }}>
                    <Icon d={x.d} color={x.primary ? '#fff' : t.accent} size={26} sw={2.1} />
                    <span style={{ fontSize: 12, fontWeight: 600, color: x.primary ? '#fff' : t.text, textAlign: 'center', padding: '0 4px' }}>{x.label}</span>
                  </div>
                </Pressable>))}
            </div>
            <div style={{ fontSize: 12, fontWeight: 700, color: dark ? 'rgba(255,255,255,0.7)' : t.textSec, textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 10, paddingLeft: 4 }}>Bereiche</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
              {TILES.filter((x) => x.kind === 'section').map((x, i) => {
                const on = x.id === active;
                return (
                  <Pressable key={x.id} onClick={x.run} scale={0.95}>
                    <div style={{ borderRadius: 18, padding: '16px 6px', background: on ? t.accentSoft : t.card, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, boxShadow: t.shadowCard, animation: `rfPop 0.28s cubic-bezier(0.2,0.9,0.3,1.3) ${0.06 + i * 0.03}s both` }}>
                      <Icon d={x.d} color={on ? t.accent : t.text} size={24} sw={1.9} />
                      <span style={{ fontSize: 11.5, fontWeight: 600, color: on ? t.accent : t.text }}>{x.label}</span>
                    </div>
                  </Pressable>);
              })}
            </div>
          </div>
        </div>}
        {/* the launcher button + a tiny "where am I" label */}
        <div style={{ position: 'fixed', zIndex: 41, bottom: 'calc(env(safe-area-inset-bottom, 0px) + 22px)', left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
          <Pressable onClick={() => setOpen((v) => !v)} scale={0.9}>
            <div style={{ height: 60, minWidth: 60, padding: '0 22px', borderRadius: 30, background: t.accent, display: 'flex', alignItems: 'center', gap: 10, boxShadow: `0 8px 26px ${t.accent}66`, transition: 'transform 0.25s', transform: open ? 'scale(1.04)' : 'none' }}>
              <div style={{ transition: 'transform 0.25s', transform: open ? 'rotate(45deg)' : 'none' }}>
                <Icon d={open ? icons.plus : 'M4 6h16M4 12h16M4 18h16'} color="#fff" size={24} sw={2.5} />
              </div>
              {!open && <span style={{ fontSize: 15, fontWeight: 700, color: '#fff' }}>{(NAV_TABS.find((s) => s.id === active) || {}).label || 'Menü'}</span>}
            </div>
          </Pressable>
        </div>
      </>);
  }

  // ── RAIL: vertical glass rail hugging the right edge (thumb zone) ────
  if (layout === 'rail') {
    const items = NAV_TABS;
    return (
      <div style={{ position: 'fixed', zIndex: 30, right: 12, top: '50%', transform: 'translateY(-50%)' }}>
        <Glass dark={dark} radius={28} padding="8px 6px" tint={t.glass ? t.card : undefined}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <Pressable onClick={() => onNew && onNew()} scale={0.88}>
              <div style={{ width: 46, height: 46, borderRadius: 23, background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 4px 14px ${t.accent}55`, marginBottom: 4 }}>
                <Icon d={icons.plus} color="#fff" size={24} sw={2.6} />
              </div>
            </Pressable>
            {items.map((tab) => {
              const on = tab.id === active;
              return (
                <Pressable key={tab.id} onClick={() => onTab(tab.id)} scale={0.85}>
                  <div style={{ width: 46, height: 46, borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? t.accentSoft : 'transparent' }}>
                    <Icon d={tab.d} color={on ? t.accent : t.textSec} size={21} sw={on ? 2.3 : 1.9} />
                  </div>
                </Pressable>);
            })}
            <div style={{ width: 26, height: 0.5, background: t.sep, margin: '2px 0' }} />
            <Pressable onClick={() => onSearch && onSearch()} scale={0.85}>
              <div style={{ width: 46, height: 46, borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={icons.search || 'M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.3-4.3'} color={t.textSec} size={20} sw={1.9} />
              </div>
            </Pressable>
          </div>
        </Glass>
      </div>);
  }

  return null;
}

(function ensureNavAnims() {
  if (document.getElementById('rf-nav-anims')) return;
  const s = document.createElement('style');
  s.id = 'rf-nav-anims';
  s.textContent = '@keyframes rfFade{from{opacity:0}to{opacity:1}}@keyframes rfRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rfPop{from{opacity:0;transform:scale(0.82) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}';
  document.head.appendChild(s);
})();

Object.assign(window, { AltNav });