/**
 * Shared page layout wrapper matching the Angular `page-layout` component.
 *
 * Produces the same DOM structure and CSS class names so global SCSS
 * styles apply identically. Includes breadcrumbs, feedback button,
 * and scroll-up button from the Angular app.
 */

import type { ReactNode, FC } from "react";
import { Breadcrumbs, type BreadcrumbItem } from "./Breadcrumbs.js";
import { FeedbackButton } from "./FeedbackButton.js";
import { ScrollUpButton } from "./ScrollUpButton.js";
import "./PageLayout.scss";

export interface PageLayoutProps {
  /** Content rendered in the header left column (e.g. page tabs). */
  headerLeft?: ReactNode;
  /** Page title rendered in the header right column. */
  title?: ReactNode;
  /** Content in the left column of the main content area (e.g. filter). */
  contentLeft?: ReactNode;
  /** Sticky content in the right column above main children. */
  stickyContent?: ReactNode;
  /** Main content rendered in the right column. */
  children?: ReactNode;
  /** Breadcrumb trail items (beyond the default "Главная" root). */
  breadcrumbs?: BreadcrumbItem[];
}

export const PageLayout: FC<PageLayoutProps> = ({
  headerLeft,
  title,
  contentLeft,
  stickyContent,
  children,
  breadcrumbs,
}) => {
  return (
    <div className="page-layout">
      <div className="page-layout__row page-layout__header">
        <aside className="page-layout__column-left page-layout__header-left">
          {headerLeft}
        </aside>
        <div className="page-layout__column-right page-layout__header-right">
          {breadcrumbs && <Breadcrumbs items={breadcrumbs} />}
          <div className="page-layout__title-row">
            <div className="page-layout__title">
              {title}
            </div>
            {/* FeedbackButton hidden: Angular has it behind FEEDBACK_BUTTON_AVAILABLE feature flag (off by default) */}
          </div>
        </div>
      </div>
      <div className="page-layout__row page-layout__content">
        <aside className="page-layout__column-left">
          {contentLeft}
        </aside>
        <main className="page-layout__column-right">
          {stickyContent && (
            <div className="page-layout__sticky-content">
              {stickyContent}
            </div>
          )}
          {children}
        </main>
      </div>
      <ScrollUpButton />
    </div>
  );
};
