import { useEffect, useRef, useState } from "react";
import type { EnvironmentSettings } from "@nodedc/ui-core";
import { Button, EnvironmentSettingsWindow, LandingStage, UserProfileMenu } from "@nodedc/ui-react";

const initial: EnvironmentSettings = { revision: 0, pages: { home: {
  headerLabel: "Продукт", eyebrow: "NODE.DC / ГЛАВНАЯ", title: "Главная продукта",
  description: "Общая композиция страницы и настроек окружения.", primaryWorkspaceId: null, secondaryWorkspaceId: null,
  background: { enabled: false, imageDurationSeconds: 10, items: [] },
} } };

export function EnvironmentCatalogDemo() {
  const [open, setOpen] = useState(false);
  const [settings, setSettings] = useState(initial);
  const urls = useRef<string[]>([]);
  useEffect(() => () => urls.current.forEach(url => URL.revokeObjectURL(url)), []);
  return <>
    <div className="catalog-environment-actions">
      <UserProfileMenu displayName="DC" subtitle="Каталог компонентов" triggerLabel={null}
        actions={[{ id: "settings", label: "Настройки", icon: "settings", onSelect: () => setOpen(true) }]} />
      <Button variant="primary" tone="neutral" onClick={() => setOpen(true)}>Настройки окружения</Button>
      <Button variant="primary" tone="neutral" disabled>Неактивное действие</Button>
    </div>
    <div className="catalog-environment-stage"><LandingStage page={settings.pages.home} /></div>
    <EnvironmentSettingsWindow open={open} onClose={() => setOpen(false)} productName="Продукт"
      surfaces={[{ id: "home", home: true, description: "Главная страница продукта", actions: [] }]}
      settings={settings} state="ready" error={null}
      onSave={async draft => { const next = { ...draft, revision: draft.revision + 1 }; setSettings(next); return next; }}
      onUpload={async (_surface, _item, file) => {
        const url = URL.createObjectURL(file); urls.current.push(url);
        return { url, fileName: file.name, mediaKind: file.type.startsWith("video/") ? "video" : "image" };
      }} />
  </>;
}