// Request Menu Admin — dedicated page for managing request-menu.html content.
// Editor components (RequestMenuHeroSection, etc.) are defined in Content.jsx,
// which loads before this file, so they are available in the global scope.

const RM_NAV = [
  { id: 'hero',     label: 'Hero'      },
  { id: 'services', label: 'Services'  },
  { id: 'process',  label: 'Process'   },
  { id: 'notes',    label: 'Notes'     },
  { id: 'cta',      label: 'CTA'       },
];

function RequestMenuAdminPage({ content, handlers, lang, setLang }) {
  const [section, setSection] = React.useState('hero');

  const renderSection = () => {
    switch (section) {
      case 'hero':
        return (
          <RequestMenuHeroSection
            hero={content.request_menu_hero}
            onUpdate={handlers.updateRequestMenuHero}
            lang={lang}
          />
        );
      case 'services':
        return (
          <RequestMenuServicesSection
            services={content.request_menu_services || []}
            handlers={handlers.request_menu_services}
            lang={lang}
          />
        );
      case 'process':
        return (
          <RequestMenuProcessSection
            process={content.request_menu_process || []}
            handlers={handlers.request_menu_process}
            lang={lang}
          />
        );
      case 'notes':
        return (
          <RequestMenuGoodToKnowSection
            data={content.request_menu_good_to_know}
            onUpdate={handlers.updateRequestMenuGoodToKnow}
            lang={lang}
          />
        );
      case 'cta':
        return (
          <RequestMenuCtaSection
            data={content.request_menu_cta}
            onUpdate={handlers.updateRequestMenuCta}
            lang={lang}
          />
        );
      default:
        return null;
    }
  };

  return (
    <div>
      {/* Page header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-6)' }}>
        <div>
          <h1 className="page-title">Request Menu</h1>
          <p className="page-subtitle" style={{ marginBottom: 0 }}>
            Manage the client-facing list of services, deliverables, timelines, and request flow.
          </p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
          <span style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--fg-secondary)', fontWeight: 'var(--fw-medium)' }}>
            Editing in:
          </span>
          <LangTabs lang={lang} onChange={setLang} />
        </div>
      </div>

      {/* Live page link */}
      <div style={{ marginBottom: 'var(--space-5)', display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
        <a
          href="https://wablan.com/request-menu.html"
          target="_blank"
          rel="noopener noreferrer"
          style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--fg-accent)', display: 'inline-flex', alignItems: 'center', gap: 'var(--space-2)' }}
        >
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 2H2a1 1 0 00-1 1v7a1 1 0 001 1h7a1 1 0 001-1V7"/>
            <path d="M8 1h3v3M11 1L5.5 6.5"/>
          </svg>
          View live page
        </a>
        <span style={{ fontSize: 'var(--fs-caption)', color: 'var(--fg-secondary)' }}>
          wablan.com/request-menu.html
        </span>
      </div>

      {/* Content layout — left nav + right editor */}
      <div className="content-layout">
        <nav className="content-nav">
          {RM_NAV.map(({ id, label }) => (
            <button
              key={id}
              className={`content-nav__item${section === id ? ' active' : ''}`}
              onClick={() => setSection(id)}
            >
              {label}
            </button>
          ))}
        </nav>

        <div className="content-section">
          {renderSection()}
        </div>
      </div>
    </div>
  );
}