import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
import { applyNodedcTheme, type NodedcTheme, type RgbTuple } from "@nodedc/ui-core";
import {
  AdminNavigationPanel,
  AppHeader,
  ApplicationPanel,
  ApplicationShell,
  Button,
  Checker,
  ColorField,
  ConfirmationModal,
  ControlRow,
  Dropdown,
  FieldFrame,
  GlassSurface,
  HeaderAvatar,
  HeaderNavigation,
  HeaderProfile,
  HeaderProfileButton,
  HeaderWorkspace,
  Icon,
  IconButton,
  Inspector,
  MediaSourceField,
  RangeControl,
  Select,
  SettingsCard,
  StatusBadge,
  Switch,
  TextAreaField,
  TextField,
  useApplicationWorkspace,
  Window,
  WindowFooterActions,
  type IconName,
} from "@nodedc/ui-react";

type CatalogSection = "foundation" | "controls" | "media" | "windows" | "modals" | "inspector" | "icons";

const engineAccentStyle = {
  "--nodedc-accent-rgb": "148 123 219",
  "--nodedc-on-accent-rgb": "247 248 244",
} as CSSProperties;

const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [
  { label: "Hub", value: [195, 255, 102], hex: "#c3ff66" },
  { label: "Engine", value: [148, 123, 219], hex: "#947bdb" },
  { label: "BIM", value: [78, 164, 255], hex: "#4ea4ff" },
  { label: "SEO", value: [32, 32, 34], hex: "#202022" },
];

const selectOptions = [
  { value: "active", label: "Активен", description: "Сервис доступен пользователям" },
  { value: "maintenance", label: "Техработы", description: "Временно недоступен" },
  { value: "disabled", label: "Отключён", description: "Запуск запрещён" },
] as const;

const sectionDefinitions: Record<CatalogSection, { eyebrow: string; title: string; description: string; icon: IconName }> = {
  foundation: {
    eyebrow: "01 / FOUNDATION",
    title: "Основа",
    description: "Тема, акцент, стекло и неизменяемая геометрия приложения.",
    icon: "panel",
  },
  controls: {
    eyebrow: "02 / CONTROLS",
    title: "Контролы",
    description: "Кнопки, поля, selection, Engine-настройки и понятные статусы операций.",
    icon: "sliders",
  },
  media: {
    eyebrow: "03 / MEDIA & SETTINGS",
    title: "Медиа и настройки",
    description: "Общий CMS/Launcher-контракт файла, URL, превью и нейтральных карточек настроек.",
    icon: "image",
  },
  windows: {
    eyebrow: "04 / WINDOWS",
    title: "Окна",
    description: "Обычные окна и modeless-панели с единым portal- и focus-контрактом.",
    icon: "apps",
  },
  modals: {
    eyebrow: "05 / MODALS",
    title: "Модалки",
    description: "Создание, подтверждение и разрушительные действия в адаптивном формате.",
    icon: "clipboard",
  },
  inspector: {
    eyebrow: "06 / INSPECTOR",
    title: "Инспектор",
    description: "Точный новый Engine Environment Settings без legacy-инспекторов.",
    icon: "settings",
  },
  icons: {
    eyebrow: "07 / ICONS",
    title: "Иконки",
    description: "Канонический общий набор по Launcher, SEO, BIM Viewer и новым участкам Engine.",
    icon: "grid",
  },
};

const iconGroups: Array<{ title: string; note: string; icons: IconName[] }> = [
  {
    title: "Окно и слой",
    note: "Launcher / Hub",
    icons: ["close", "plus", "expand", "minimize", "refresh", "panel", "apps"],
  },
  {
    title: "Навигация",
    note: "Launcher / Engine / BIM",
    icons: ["chevron-left", "chevron-right", "chevron-down", "grid", "list", "sliders", "search"],
  },
  {
    title: "Редактирование",
    note: "Launcher / SEO",
    icons: ["save", "edit", "trash", "copy", "upload", "download", "external"],
  },
  {
    title: "Состояние и доступ",
    note: "Вся платформа",
    icons: ["check", "alert", "activity", "lock", "key", "shield", "circle"],
  },
  {
    title: "Сущности",
    note: "Общий словарь",
    icons: ["profile", "users", "building", "globe", "database", "network", "inbox", "mail"],
  },
  {
    title: "Контент",
    note: "SEO / BIM / Engine",
    icons: ["image", "video", "file", "folder", "clipboard", "settings"],
  },
];

const iconLabels: Record<IconName, string> = {
  activity: "Активность",
  alert: "Предупреждение",
  apps: "Приложения",
  building: "Компания",
  check: "Готово",
  "chevron-down": "Раскрыть",
  "chevron-left": "Назад",
  "chevron-right": "Вперёд",
  circle: "Маркер",
  clipboard: "Список",
  close: "Закрыть",
  copy: "Копировать",
  database: "База данных",
  download: "Скачать",
  edit: "Редактировать",
  expand: "Развернуть",
  external: "Открыть снаружи",
  file: "Файл",
  folder: "Папка",
  globe: "Публичный контур",
  grid: "Обзор",
  image: "Изображение",
  inbox: "Уведомления",
  key: "Ключ",
  list: "Список задач",
  lock: "Закрыто",
  mail: "Приглашение",
  minimize: "Свернуть",
  network: "Связи",
  panel: "Панель",
  plus: "Добавить",
  profile: "Профиль",
  refresh: "Обновить",
  save: "Сохранить",
  search: "Поиск",
  settings: "Настройки",
  shield: "Доступ",
  sliders: "Параметры",
  trash: "Удалить",
  upload: "Загрузить",
  users: "Участники",
  video: "Видео",
};

function rgbFromHex(hex: string): RgbTuple | null {
  const normalized = hex.trim().replace(/^#/, "");
  if (!/^[0-9a-f]{6}$/i.test(normalized)) return null;
  return [
    Number.parseInt(normalized.slice(0, 2), 16),
    Number.parseInt(normalized.slice(2, 4), 16),
    Number.parseInt(normalized.slice(4, 6), 16),
  ];
}

function Preview({ title, note, children, className }: {
  title: string;
  note?: string;
  children: ReactNode;
  className?: string;
}) {
  return (
    <GlassSurface className={`catalog-preview ${className ?? ""}`} padding="lg">
      <div className="catalog-preview__head">
        <strong>{title}</strong>
        {note ? <span>{note}</span> : null}
      </div>
      <div className="catalog-preview__body">{children}</div>
    </GlassSurface>
  );
}

export function CatalogApp() {
  const [theme, setTheme] = useState<NodedcTheme>("dark");
  const [accentHex, setAccentHex] = useState("#c3ff66");
  const workspace = useApplicationWorkspace<CatalogSection>();
  const { navigationOpen: guidelineOpen, activeView: activeSection, contentExpanded: panelExpanded } = workspace;
  const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
  const [checker, setChecker] = useState(true);
  const [brightness, setBrightness] = useState(49);
  const [glowDistance, setGlowDistance] = useState(105);
  const [usePortColors, setUsePortColors] = useState(false);
  const [connectionType, setConnectionType] = useState("spline");
  const [lightColor, setLightColor] = useState("#7a3cff");
  const [connectionColor, setConnectionColor] = useState("#404040");
  const [fillColor, setFillColor] = useState("#8f83ff");
  const [strokeColor, setStrokeColor] = useState("#2b2b36");
  const [windowOpen, setWindowOpen] = useState(false);
  const [inspectorOpen, setInspectorOpen] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [projectName, setProjectName] = useState("NODE.DC Platform");
  const [notes, setNotes] = useState("Общий контракт компонентов без доменной логики приложения.");
  const [mediaSource, setMediaSource] = useState<"file" | "url">("file");
  const [mediaUrl, setMediaUrl] = useState("");
  const [mediaFileName, setMediaFileName] = useState("hub_vitrina-mqv7yd7k.mov");
  const [mediaVisible, setMediaVisible] = useState(true);

  const accent = useMemo(() => rgbFromHex(accentHex) ?? accents[0].value, [accentHex]);

  useEffect(() => {
    applyNodedcTheme(document.documentElement, { theme, accent });
  }, [accent, theme]);

  const openSection = (next: string) => {
    workspace.openView(next as CatalogSection);
  };

  const closeGuideline = workspace.closeNavigation;

  const inspectorSections = [
    {
      id: "illumination",
      label: "Подсветка",
      tone: "accent" as const,
      content: (
        <>
          <ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
          <RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
          <RangeControl label="Дистанция свечения" value={glowDistance} min={0} max={200} formatValue={(value) => `${value}%`} onChange={setGlowDistance} />
        </>
      ),
    },
    {
      id: "connections",
      label: "Связи",
      tone: "accent" as const,
      content: (
        <>
          <ControlRow label="Связи по умолчанию" layout="stack">
            <Select
              variant="split"
              label="Тип связи"
              value={connectionType}
              options={[
                { value: "spline", label: "Сплайн" },
                { value: "straight", label: "Прямая" },
                { value: "step", label: "Ступенчатая" },
              ]}
              onChange={setConnectionType}
            />
          </ControlRow>
          <Checker checked={usePortColors} label="Использовать цвет портов" onChange={setUsePortColors} />
          <ControlRow label="Цвет связей по умолчанию"><ColorField value={connectionColor} onChange={setConnectionColor} /></ControlRow>
          <ControlRow label="Применить ко всем"><Button variant="accent" shape="pill" width="full">Применить</Button></ControlRow>
        </>
      ),
    },
    {
      id: "ports",
      label: "Порты",
      tone: "accent" as const,
      content: (
        <>
          <ControlRow label="Заливка"><ColorField value={fillColor} onChange={setFillColor} /></ControlRow>
          <RangeControl label="Прозрачность" value={100} min={0} max={100} formatValue={(value) => `${value}%`} onChange={() => undefined} />
          <ControlRow label="Обводка"><ColorField value={strokeColor} onChange={setStrokeColor} /></ControlRow>
          <RangeControl label="Прозрачность" value={100} min={0} max={100} formatValue={(value) => `${value}%`} onChange={() => undefined} />
        </>
      ),
    },
  ];

  const renderSectionContent = () => {
    switch (activeSection) {
      case "foundation":
        return (
          <div className="catalog-grid catalog-grid--foundation">
            <Preview title="Тема приложения" note={theme === "dark" ? "dark glass" : "light glass"}>
              <div className="catalog-theme-row">
                <Button variant={theme === "dark" ? "accent" : "secondary"} shape="pill" onClick={() => setTheme("dark")}>Dark</Button>
                <Button variant={theme === "light" ? "accent" : "secondary"} shape="pill" onClick={() => setTheme("light")}>Light</Button>
              </div>
              <div className="catalog-swatches">
                {accents.map((item) => (
                  <button
                    key={item.label}
                    type="button"
                    className="catalog-swatch"
                    data-active={item.hex.toLowerCase() === accentHex.toLowerCase() ? "true" : undefined}
                    style={{ "--swatch": item.hex } as CSSProperties}
                    onClick={() => setAccentHex(item.hex)}
                  >
                    <span />{item.label}
                  </button>
                ))}
              </div>
              <ColorField label="Свой accent" value={accentHex} onChange={setAccentHex} />
            </Preview>
            <Preview title="Иерархия стекла" note="default / strong / soft">
              <div className="catalog-surface-stack">
                <GlassSurface padding="md">Default surface</GlassSurface>
                <GlassSurface tone="strong" padding="md">Strong floating surface</GlassSurface>
                <GlassSurface tone="soft" padding="md">Soft nested surface</GlassSurface>
              </div>
            </Preview>
            <Preview title="Каркас Launcher" note="fixed header / stage / panels" className="catalog-preview--wide">
              <div className="catalog-shell-diagram" aria-label="Схема каркаса приложения">
                <span className="catalog-shell-diagram__header">Header</span>
                <span className="catalog-shell-diagram__nav">Navigation</span>
                <span className="catalog-shell-diagram__content">Content window</span>
                <span className="catalog-shell-diagram__stage">Stage</span>
              </div>
            </Preview>
          </div>
        );
      case "controls":
        return (
          <div className="catalog-grid">
            <Preview title="Действия" note="общая геометрия">
              <div className="catalog-inline catalog-inline--wrap">
                <Button variant="accent" shape="pill" icon={<Icon name="save" />}>Сохранить</Button>
                <Button icon={<Icon name="refresh" />}>Обновить</Button>
                <Button variant="ghost" icon={<Icon name="external" />}>Открыть</Button>
                <Button variant="danger" icon={<Icon name="trash" />}>Удалить</Button>
                <IconButton label="Добавить"><Icon name="plus" /></IconButton>
              </div>
            </Preview>
            <Preview title="Поля" note="label / hint / control">
              <div className="catalog-form">
                <TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
                <TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
              </div>
            </Preview>
            <Preview title="Selection" note="integrated / split">
              <div className="catalog-form">
                <FieldFrame label="Hub / integrated select">
                  <Select label="Статус" value={selectedStatus} options={[...selectOptions]} searchable onChange={setSelectedStatus} />
                </FieldFrame>
                <FieldFrame label="Engine / split select">
                  <div style={engineAccentStyle}>
                    <Select
                      variant="split"
                      label="Тип связи"
                      value={connectionType}
                      options={[
                        { value: "spline", label: "Сплайн" },
                        { value: "straight", label: "Прямая" },
                        { value: "step", label: "Ступенчатая" },
                      ]}
                      onChange={setConnectionType}
                    />
                  </div>
                </FieldFrame>
                <Dropdown
                  trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
                    <Button ref={setTriggerRef} aria-expanded={open} aria-controls={surfaceId} icon={<Icon name="chevron-down" />} onClick={toggle}>Действия</Button>
                  )}
                >
                  {({ close }) => (
                    <>
                      <button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><Icon name="edit" /><span className="nodedc-dropdown-option__label">Переименовать</span></button>
                      <button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><Icon name="copy" /><span className="nodedc-dropdown-option__label">Дублировать</span></button>
                      <button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><Icon name="folder" /><span className="nodedc-dropdown-option__label">Архивировать</span></button>
                    </>
                  )}
                </Dropdown>
              </div>
            </Preview>
            <Preview title="Environment controls" note="точная геометрия Engine">
              <div className="catalog-engine-control-stack" style={engineAccentStyle}>
                <ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
                <RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
                <Checker checked={checker} label="Использовать цвет портов" onChange={setChecker} />
                <ControlRow label="Применить ко всем"><Button variant="accent" shape="pill" width="full">Применить</Button></ControlRow>
              </div>
            </Preview>
            <Preview title="Статусы операций" note="не цвет приложения" className="catalog-preview--wide">
              <p className="catalog-preview__explanation">Статус сообщает результат операции: нейтрально, успешно, требуется внимание или ошибка. Акцент приложения для этого не переиспользуется.</p>
              <div className="catalog-inline catalog-inline--wrap">
                <StatusBadge>Черновик</StatusBadge>
                <StatusBadge tone="success">Синхронизировано</StatusBadge>
                <StatusBadge tone="warning">Нужна проверка</StatusBadge>
                <StatusBadge tone="danger">Ошибка</StatusBadge>
              </div>
            </Preview>
          </div>
        );
      case "media":
        return (
          <div className="catalog-grid catalog-grid--single">
            <SettingsCard
              eyebrow="CONTENT"
              title="Видео-окно"
              description="Окно демо-видео и подключённый медиа-файл. Хранилище и загрузка остаются в приложении; геометрия и переключение источника — в библиотеке."
              actions={<Switch checked={mediaVisible} label="Показать" onChange={setMediaVisible} />}
            >
              <MediaSourceField
                label="Видео / картинка"
                source={mediaSource}
                url={mediaUrl}
                fileName={mediaFileName}
                previewSrc={mediaSource === "url" && mediaUrl ? mediaUrl : "/launcher-stage-poster.png"}
                previewKind={mediaSource === "file" ? "image" : undefined}
                path="content.videoSrc → assets/uploads/media/component-library"
                hint="Адаптер приложения сохраняет файл и возвращает URL; компонент не знает API storage."
                onSourceChange={setMediaSource}
                onUrlChange={setMediaUrl}
                onFileChange={(file) => {
                  if (file) setMediaFileName(file.name);
                }}
              />
            </SettingsCard>
            <Preview title="Граница ответственности" note="component / adapter" className="catalog-preview--wide">
              <p className="catalog-preview__explanation">
                `MediaSourceField` владеет пикселями, доступностью и состояниями file/URL. Конкретный проект передаёт upload-обработчик, storage-path и результат валидации — поэтому компонент можно подключить к CMS, Launcher или будущему приложению без копирования его вёрстки.
              </p>
            </Preview>
          </div>
        );
      case "windows":
        return (
          <div className="catalog-grid catalog-grid--single">
            <Preview title="Управляемые окна" note="center / modeless end">
              <p className="catalog-preview__explanation">Обычное окно блокирует фон и удерживает фокус. Правый инспектор не затемняет, не блокирует stage и не превращается в modal.</p>
              <div className="catalog-inline catalog-inline--wrap">
                <Button variant="accent" shape="pill" icon={<Icon name="apps" />} onClick={() => setWindowOpen(true)}>Открыть окно</Button>
                <Button shape="pill" icon={<Icon name="panel" />} onClick={() => setInspectorOpen(true)}>Открыть инспектор</Button>
              </div>
            </Preview>
            <Preview title="Оконные действия" note="круг `46 px`">
              <div className="catalog-window-actions-demo">
                <Button shape="pill" icon={<Icon name="refresh" />}>Обновить источник</Button>
                <IconButton label="Добавить"><Icon name="plus" /></IconButton>
                <IconButton label="Развернуть"><Icon name="expand" /></IconButton>
                <IconButton label="Закрыть"><Icon name="close" /></IconButton>
              </div>
            </Preview>
          </div>
        );
      case "modals":
        return (
          <div className="catalog-grid">
            <Preview title="Создание" note="форма адаптируется по ширине">
              <p className="catalog-preview__explanation">Поля переходят в одну колонку на узком viewport; footer остаётся видимым, прокручивается только тело окна.</p>
              <Button variant="accent" shape="pill" icon={<Icon name="plus" />} onClick={() => setCreateModalOpen(true)}>Создать проект</Button>
            </Preview>
            <Preview title="Подтверждение удаления" note="async-safe">
              <p className="catalog-preview__explanation">Destructive-цвет появляется у подтверждения, а не окрашивает всё окно заранее.</p>
              <Button variant="danger" shape="pill" icon={<Icon name="trash" />} onClick={() => setConfirmOpen(true)}>Проверить удаление</Button>
            </Preview>
          </div>
        );
      case "inspector":
        return (
          <div className="catalog-inspector-stage">
            <GlassSurface tone="strong" radius="panel" className="catalog-inspector-card" style={engineAccentStyle}>
              <div className="catalog-inspector-title"><strong>Настройки окружения</strong><span>ENGINE / новый канон</span></div>
              <Inspector sections={inspectorSections} defaultOpen={["illumination", "connections", "ports"]} />
            </GlassSurface>
          </div>
        );
      case "icons":
        return (
          <div className="catalog-icon-catalog">
            <Preview title="Размеры и поверхности" note="16 / 18 / 20 px" className="catalog-preview--wide">
              <div className="catalog-window-actions-demo">
                <IconButton label="Добавить"><Icon name="plus" size={16} /></IconButton>
                <IconButton label="Обновить"><Icon name="refresh" size={18} /></IconButton>
                <IconButton label="Развернуть"><Icon name="expand" size={20} /></IconButton>
                <IconButton label="Закрыть"><Icon name="close" size={18} /></IconButton>
              </div>
              <p className="catalog-preview__explanation">Иконка наследует `currentColor`; фон, размер кнопки и active-state задаёт компонент поверхности, а не SVG.</p>
            </Preview>
            {iconGroups.map((group) => (
              <section className="catalog-icon-group" key={group.title}>
                <header><strong>{group.title}</strong><span>{group.note}</span></header>
                <div className="catalog-icon-grid">
                  {group.icons.map((name) => (
                    <div className="catalog-icon-tile" key={name}>
                      <span className="catalog-icon-tile__surface"><Icon name={name} size={20} /></span>
                      <span><strong>{iconLabels[name]}</strong><code>{name}</code></span>
                    </div>
                  ))}
                </div>
              </section>
            ))}
          </div>
        );
      default:
        return null;
    }
  };

  const activeDefinition = activeSection ? sectionDefinitions[activeSection] : null;

  return (
    <>
    <ApplicationShell
      className="catalog-app nodedc-ui-root"
      style={{ "--catalog-accent": accentHex } as CSSProperties}
      navigationOpen={guidelineOpen}
      contentOpen={workspace.contentOpen}
      contentExpanded={panelExpanded}
      header={
        <AppHeader
          brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
          brandHref="/"
          center={
            <>
              <HeaderWorkspace kind="mark" label="NODE.DC Design" imageUrl="/nodedc-mark.svg" />
              <HeaderNavigation
                label="Навигация приложения"
                value={guidelineOpen ? "guideline" : undefined}
                items={[{ value: "guideline", label: "Guideline" }]}
                onChange={() => guidelineOpen ? closeGuideline() : workspace.openNavigation()}
              />
            </>
          }
          right={
            <HeaderProfile>
              <IconButton label="Уведомления"><Icon name="inbox" size={20} /></IconButton>
              <HeaderProfileButton>Профиль</HeaderProfileButton>
              <HeaderAvatar label="DC" />
            </HeaderProfile>
          }
        />
      }
      stage={
        <section className="catalog-launcher-stage">
          <video className="catalog-launcher-stage__media" autoPlay muted loop playsInline poster="/launcher-stage-poster.png" aria-hidden="true">
            <source src="/launcher-stage.mp4" type="video/mp4" />
          </video>
          <div className="catalog-launcher-stage__shade" />
          <div className="catalog-launcher-stage__title">
            <span>NODE.DC</span>
            <strong>DESIGN<br />GUIDELINE</strong>
            <p>Общий форм-фактор приложений, компоненты и оконная механика платформы.</p>
          </div>
        </section>
      }
      navigation={
        <AdminNavigationPanel
          eyebrow="NODE.DC"
          title="Visual Guideline"
          closeLabel="Закрыть Guideline"
          navigationLabel="Разделы Guideline"
          onClose={closeGuideline}
          items={(Object.entries(sectionDefinitions) as Array<[CatalogSection, (typeof sectionDefinitions)[CatalogSection]]>).map(([id, item]) => ({
            id,
            label: item.title,
            icon: <Icon name={item.icon} />,
          }))}
          activeId={activeSection ?? undefined}
          onItemChange={openSection}
          footer={
            <>
              <span className="nodedc-admin-panel__nav-icon" aria-hidden="true"><Icon name="shield" /></span>
              <span>Design System 0.4</span>
            </>
          }
        />
      }
      content={activeDefinition ? (
        <ApplicationPanel
          key={activeSection}
          eyebrow={activeDefinition.eyebrow}
          title={activeDefinition.title}
          description={activeDefinition.description}
          expanded={panelExpanded}
          onExpandedChange={workspace.setContentExpanded}
          onClose={workspace.closeView}
        >
          <div className="catalog-panel-content">{renderSectionContent()}</div>
        </ApplicationPanel>
      ) : null}
    />

    <Window
      open={windowOpen}
      title="Настройки сервиса"
      subtitle="Launcher / CMS / SEO"
      onClose={() => setWindowOpen(false)}
      footer={
        <>
          <Button variant="ghost" onClick={() => setWindowOpen(false)}>Отмена</Button>
          <WindowFooterActions><Button variant="accent" shape="pill" onClick={() => setWindowOpen(false)}>Сохранить</Button></WindowFooterActions>
        </>
      }
    >
      <div className="catalog-form">
        <TextField label="Название" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
        <FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
        <Checker checked={checker} label="Сервис активен" onChange={setChecker} />
      </div>
    </Window>

    <Window
      open={inspectorOpen}
      title="Настройки окружения"
      subtitle="ENGINE / новый канон"
      placement="end"
      style={engineAccentStyle}
      onClose={() => setInspectorOpen(false)}
    >
      <Inspector sections={inspectorSections} defaultOpen={["illumination", "connections", "ports"]} />
    </Window>

    <Window
      open={createModalOpen}
      title="Создать проект"
      subtitle="Адаптивная форма"
      size="sm"
      onClose={() => setCreateModalOpen(false)}
      footer={
        <>
          <Button variant="ghost" onClick={() => setCreateModalOpen(false)}>Отмена</Button>
          <WindowFooterActions><Button variant="accent" shape="pill" icon={<Icon name="plus" />} onClick={() => setCreateModalOpen(false)}>Создать</Button></WindowFooterActions>
        </>
      }
    >
      <div className="catalog-form">
        <TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
        <TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
        <FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
      </div>
    </Window>

    <ConfirmationModal
      open={confirmOpen}
      title="Удалить конфигурацию?"
      description={<>Конфигурация будет удалена. Это действие нельзя отменить.</>}
      confirmLabel="Удалить"
      danger
      onClose={() => setConfirmOpen(false)}
      onConfirm={() => setConfirmOpen(false)}
    />
    </>
  );
}