import React, { useState } from 'react';
import { t } from '../../i18n';
import '../../styles/tokens.css';
import './admin-shell.css';
import './wrap.css';

export type NavItem = {
  key?: string;
  label: React.ReactNode;
  active?: boolean;
  expanded?: boolean;
  href?: string;
  icon?: React.ReactNode;
  indent?: boolean;
  collapsible?: boolean;
  onClick?: (event?: React.MouseEvent) => void;
};

type AdminShellProps = {
  title: string;
  nav: NavItem[];
  children: React.ReactNode;
  header?: React.ReactNode;
  brandMark?: React.ReactNode;
  brandName?: React.ReactNode;
  overlay?: boolean;
};

/**
 * Wiederverwendbares Admin-Layout mit Sidebar + Header.
 * WP-spezifische Selektoren liegen in der CSS-Datei, damit andere Umgebungen
 * nicht beeinflusst werden.
 */
export const AdminShell: React.FC<AdminShellProps> = ({ title, nav, header, children, brandMark, brandName, overlay }) => {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);

  const closeMobile = () => setMobileNavOpen(false);

  return (
    <div className={`ips-admin-shell${overlay ? ' ips-admin-shell--overlay' : ''}`}>
      <aside className={`ips-admin-shell__sidebar${mobileNavOpen ? ' is-open' : ''}`}>
        <div className="ips-brand">
          <div className="ips-brand__mark">{brandMark ?? 'IPSOrder'}</div>
          <div className="ips-brand__name">{brandName ?? 'Wishlist'}</div>
        </div>
        <nav className="ips-nav">
          {nav.map((item) => (
            <a
              key={item.key ?? String(item.label)}
              href={item.href || '#'}
              className={`ips-nav__item${item.active ? ' is-active' : ''}${item.expanded ? ' is-expanded' : ''}${item.indent ? ' indent' : ''}${item.collapsible ? ' is-collapsible' : ''}`}
              aria-expanded={item.collapsible ? Boolean(item.expanded) : undefined}
              onClick={(e) => {
                item.onClick?.(e);
                // Sidebar nur schließen, wenn es kein reiner Toggle/Collapsible-Header ist.
                if ( ! item.collapsible ) {
                  closeMobile();
                }
              }}
            >
              {item.icon && <span>{item.icon}</span>}
              {item.label}
            </a>
          ))}
        </nav>
        <div className="ips-help">
          <div className="ips-help__title">{t('Need help?')}</div>
          <div className="ips-help__subtitle">{t('Please check our docs.')}</div>
          <a className="ips-help__link" href="https://wooorder.com/plugins/" target="_blank" rel="noreferrer">
            {t('Documentation')}
          </a>
        </div>
      </aside>
      <main className="ips-admin-shell__content">
        <div className="ips-mobile-toggle">
          <button
            type="button"
            className="ips-mobile-toggle__btn"
            aria-expanded={mobileNavOpen}
            onClick={() => setMobileNavOpen((open) => !open)}
          >
            ☰ {t('Menu')}
          </button>
        </div>
        {header}
        <div className="ips-page-body">{children}</div>
      </main>
      {mobileNavOpen && <div className="ips-admin-shell__overlay-bg" onClick={closeMobile} aria-hidden="true" />}
    </div>
  );
};