import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "./cn.js";
import { Icon, type IconName } from "./Icon.js";

export interface ApplicationShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
  header: ReactNode;
  stage: ReactNode;
  navigation?: ReactNode;
  content?: ReactNode;
  navigationOpen?: boolean;
  contentOpen?: boolean;
  contentExpanded?: boolean;
}

export function ApplicationShell({
  header,
  stage,
  navigation,
  content,
  navigationOpen = false,
  contentOpen = false,
  contentExpanded = false,
  className,
  ...props
}: ApplicationShellProps) {
  return (
    <div
      className={cn("nodedc-app-shell", className)}
      data-navigation-open={navigationOpen ? "true" : undefined}
      data-content-open={contentOpen ? "true" : undefined}
      data-content-expanded={contentOpen && contentExpanded ? "true" : undefined}
      {...props}
    >
      {header}
      <main className="nodedc-app-shell__main">
        <div className="nodedc-app-shell__stage">{stage}</div>
        {navigationOpen && navigation ? <div className="nodedc-app-shell__navigation">{navigation}</div> : null}
        {contentOpen && content ? <div className="nodedc-app-shell__content">{content}</div> : null}
      </main>
    </div>
  );
}

export interface ApplicationPanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  eyebrow?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
  expanded?: boolean;
  expandLabel?: string;
  closeLabel?: string;
  onExpandedChange?: (expanded: boolean) => void;
  /** Persistent custom controls rendered before utility icon actions. */
  headerTools?: ReactNode;
  /** Persistent utility actions rendered before expand/close in the panel header. */
  utilityActions?: ApplicationPanelUtilityAction[];
  onClose: () => void;
  children: ReactNode;
}

export interface ApplicationPanelUtilityAction {
  label: string;
  icon: IconName;
  onClick: () => void;
  disabled?: boolean;
}

export function ApplicationPanel({
  eyebrow,
  title,
  description,
  expanded = false,
  expandLabel = "Развернуть окно",
  closeLabel = "Закрыть окно",
  onExpandedChange,
  headerTools,
  utilityActions = [],
  onClose,
  children,
  className,
  ...props
}: ApplicationPanelProps) {
  return (
    <section className={cn("nodedc-application-panel", className)} data-expanded={expanded ? "true" : undefined} {...props}>
      <header className="nodedc-application-panel__head">
        <div className="nodedc-application-panel__titles">
          {eyebrow ? <span>{eyebrow}</span> : null}
          <h1>{title}</h1>
          {description ? <p>{description}</p> : null}
        </div>
        <div className="nodedc-application-panel__actions">
          {headerTools ? <div className="nodedc-application-panel__tools">{headerTools}</div> : null}
          {utilityActions.map((action) => (
            <button
              key={action.label}
              type="button"
              className="nodedc-application-panel__action"
              data-action="utility"
              aria-label={action.label}
              disabled={action.disabled}
              onClick={action.onClick}
            >
              <Icon name={action.icon} size={16} strokeWidth={1.6} />
            </button>
          ))}
          {onExpandedChange ? (
            <button
              type="button"
              className="nodedc-application-panel__action"
              data-action="expand"
              data-active={expanded ? "true" : undefined}
              aria-label={expanded ? "Свернуть окно" : expandLabel}
              onClick={() => onExpandedChange(!expanded)}
            >
              <Icon name={expanded ? "minimize" : "expand"} size={16} strokeWidth={1.6} />
            </button>
          ) : null}
          <button type="button" className="nodedc-application-panel__action" data-action="close" aria-label={closeLabel} onClick={onClose}>
            <Icon name="close" size={16} strokeWidth={1.6} />
          </button>
        </div>
      </header>
      <div className="nodedc-application-panel__body">{children}</div>
    </section>
  );
}
