import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import styles from './AdminLayout.module.css';

const tabs = [
  { to: '/admin/users', label: 'Benutzer' },
  { to: '/admin/sso', label: 'SSO-Konfiguration' },
  { to: '/admin/external-links', label: 'Externe Links' },
  { to: '/admin/customize', label: 'Anpassungen' },
  { to: '/admin/company', label: 'Firmendaten' },
  { to: '/admin/events', label: 'Events' },
  { to: '/admin/ssl', label: 'SSL / Domain' },
  { to: '/admin/profile-access', label: 'Profilzugriff' },
  { to: '/admin/crm-settings', label: 'CRM Sichtbarkeit' },
  { to: '/admin/master-data', label: 'Stammdaten' },
];

export function AdminLayout() {
  const navigate = useNavigate();

  return (
    <div>
      {/* Header mit Zurück-Button und Tabs */}
      <div className={styles.header}>
        <div className={styles.headerTop}>
          <button
            className={styles.backButton}
            onClick={() => navigate('/')}
          >
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M10 12L6 8l4-4" />
            </svg>
            Zurück zum Dashboard
          </button>
          <h1 className={styles.title}>Administration</h1>
        </div>

        <nav className={styles.tabs}>
          {tabs.map((tab) => (
            <NavLink
              key={tab.to}
              to={tab.to}
              className={({ isActive }) =>
                `${styles.tab} ${isActive ? styles.tabActive : ''}`
              }
            >
              {tab.label}
            </NavLink>
          ))}
        </nav>
      </div>

      {/* Content */}
      <div className={styles.content}>
        <Outlet />
      </div>
    </div>
  );
}