import { FaUser, FaPlusCircle, FaTruck, FaUndo, FaKey, FaUsers, FaAddressBook } from 'react-icons/fa';

const baseNavItems = [
  { icon: <FaUser />, label: 'Account', view: 'account' },
  { icon: <FaPlusCircle />, label: 'Neuer Vorgang', view: 'vorgang' },
  { icon: <FaTruck />, label: 'Lieferungen', view: 'lieferungen' },
  { icon: <FaUndo />, label: 'Rücknahmen', view: 'ruecknahmen' },
];

import { useState } from 'react';

export default function TopNav({ activeView, setActiveView, isAdmin }) {
  const navItems = isAdmin
    ? [...baseNavItems, { icon: <FaKey />, label: 'Admin', view: 'admin' }]
    : baseNavItems;
  const adminMenuItems = isAdmin
    ? [
        { icon: <FaUsers />, label: 'Mitarbeiter', view: 'mitarbeiter' },
        { icon: <FaAddressBook />, label: 'Kunden', view: 'kunden' },
        { icon: <FaKey />, label: 'Admin', view: 'admin' },
        { icon: <FaUser />, label: 'Account', view: 'account' },
      ]
    : [{ icon: <FaUser />, label: 'Account', view: 'account' }];
  const [menuOpen, setMenuOpen] = useState(false);
  const handleMenuClick = () => setMenuOpen(open => !open);
  const handleMenuSelect = (view) => {
    setActiveView(view);
    setMenuOpen(false);
  };

  return (
    <header style={{
      background: '#fff', boxShadow: '0 4px 18px #0002', padding: 0, position: 'sticky', top: 0, zIndex: 100,
      borderBottomLeftRadius: 20, borderBottomRightRadius: 20, marginBottom: 12
    }}>
      <div style={{
        fontFamily: 'DM Sans, Work Sans, Arial, sans-serif',
        fontWeight: 700, fontSize: 32, letterSpacing: 0.5, color: '#222',
        textAlign: 'center', padding: '18px 0 6px 0',
        textShadow: '0 2px 8px #0001'
      }}>
        Pfandsystem
      </div>
      <nav style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 8, padding: '0 0 8px 0',
        maxWidth: 480, margin: '0 auto',
      }}>
        {/* Hamburger-Menü für Account/Admin auf Mobil, Platzhalter-Logik */}
        <div style={{ display: 'flex', flex: 1 }}>
          {navItems.filter(item => item.view !== 'account' && item.view !== 'admin').map(item => (
            <button
              key={item.label}
              onClick={() => setActiveView(item.view)}
              style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                background: activeView === item.view ? '#eaf3ff' : 'none',
                border: 'none', borderRadius: 12, padding: '7px 7px', cursor: 'pointer',
                color: activeView === item.view ? '#1976d2' : '#444', fontWeight: 600, fontSize: 13,
                minWidth: 54, boxShadow: activeView === item.view ? '0 2px 12px #1976d222' : '0 1px 4px #0001',
                transition: 'all 0.18s', margin: '0 2px'
              }}
            >
              <span style={{ fontSize: 19, marginBottom: 1 }}>{item.icon}</span>
              <span style={{ fontSize: 12 }}>{item.label}</span>
            </button>
          ))}
        </div>
        {/* Hamburger-Menü (Platzhalter, öffnet Account/Admin) */}
        <div style={{ position: 'relative', marginLeft: 4 }}>
          <button onClick={handleMenuClick} style={{ background: 'none', border: 'none', padding: 7, borderRadius: 10, cursor: 'pointer', fontSize: 20 }}>
            <span style={{ fontSize: 22 }}>☰</span>
          </button>
          {menuOpen && (
            <div style={{ position: 'absolute', right: 0, top: 36, background: '#fff', borderRadius: 10, boxShadow: '0 2px 12px #0002', minWidth: 140, zIndex: 20 }}>
              {adminMenuItems.map(item => (
                <button
                  key={item.label}
                  onClick={() => handleMenuSelect(item.view)}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 8, width: '100%',
                    background: 'none', border: 'none', padding: '10px 14px', cursor: 'pointer',
                    color: activeView === item.view ? '#1976d2' : '#444', fontWeight: 600, fontSize: 14,
                    borderBottom: '1px solid #eee',
                  }}
                >
                  <span style={{ fontSize: 18 }}>{item.icon}</span> {item.label}
                </button>
              ))}
            </div>
          )}
        </div>
      </nav>
    </header>
  );
}