import type { ReactNode } from "react";
import { HeaderAvatar } from "./AppHeader.js";
import { Icon, type IconName } from "./Icon.js";
import { Window } from "./Window.js";

export interface FeatureSettingsSection<T extends string = string> {
  id: T;
  label: ReactNode;
  group?: string;
  icon?: IconName;
  disabled?: boolean;
}

export interface FeatureSettingsWindowProps<T extends string = string> {
  open: boolean;
  title: ReactNode;
  subtitle?: ReactNode;
  identity: {
    title: ReactNode;
    subtitle?: ReactNode;
    avatarLabel: string;
    avatarUrl?: string;
  };
  sections: readonly FeatureSettingsSection<T>[];
  activeSection: T;
  onSectionChange: (section: T) => void;
  onClose: () => void;
  children: ReactNode;
  footer?: ReactNode;
}

export function FeatureSettingsWindow<T extends string>({
  open,
  title,
  subtitle,
  identity,
  sections,
  activeSection,
  onSectionChange,
  onClose,
  children,
  footer,
}: FeatureSettingsWindowProps<T>) {
  return (
    <Window
      open={open}
      title={title}
      subtitle={subtitle}
      size="lg"
      className="nodedc-feature-settings-window"
      footer={footer}
      closeOnBackdrop={false}
      onClose={onClose}
    >
      <div className="nodedc-feature-settings">
        <aside className="nodedc-feature-settings__navigation" aria-label="Разделы настроек">
          <div className="nodedc-feature-settings__identity">
            <HeaderAvatar label={identity.avatarLabel} imageUrl={identity.avatarUrl} />
            <span><strong>{identity.title}</strong>{identity.subtitle ? <small>{identity.subtitle}</small> : null}</span>
          </div>
          <nav>
            {sections.map((section, index) => {
              const showGroup = section.group && section.group !== sections[index - 1]?.group;
              return (
                <div key={section.id} className="nodedc-feature-settings__navigation-entry">
                  {showGroup ? <span className="nodedc-feature-settings__group">{section.group}</span> : null}
                  <button
                    type="button"
                    className="nodedc-feature-settings__section"
                    data-active={section.id === activeSection ? "true" : undefined}
                    disabled={section.disabled}
                    onClick={() => onSectionChange(section.id)}
                  >
                    {section.icon ? <Icon name={section.icon} size={16} /> : null}
                    <span>{section.label}</span>
                  </button>
                </div>
              );
            })}
          </nav>
        </aside>
        <section className="nodedc-feature-settings__content">{children}</section>
      </div>
    </Window>
  );
}
