import { useState } from "react";
import { Folder, LayoutDashboard, Mail } from "lucide-react";
import NavigationPreferenceEditor from "../src/components/NavigationPreferenceEditor";
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
import IconRail from "../src/layout/IconRail";
import type { NavigationPreferences, PlatformNavItem, ProductAreaContribution } from "../src/types";
import type { NavigationPreferenceScope } from "../src/components/navigationPreferenceLayout";

const items: PlatformNavItem[] = [
  { to: "/dashboard", label: "Dashboard", surfaceId: "dashboard", navigationId: "dashboard", icon: LayoutDashboard, navigationLocked: true, navigationLayers: { module: { order: 0, visible: true, locked: false }, system: { order: 0, visible: true, locked: true }, tenant: { order: 0, visible: true, locked: true } } },
  { to: "/files", label: "Files", surfaceId: "files", navigationId: "files", icon: Folder, order: 1 },
  { to: "/mail", label: "Mail", surfaceId: "mail", navigationId: "mail", icon: Mail, order: 2 }
];
const areas: ProductAreaContribution[] = [
  { id: "content", moduleId: "files", label: "Documents", iconName: "files", surfaceIds: ["files"], order: 1 },
  { id: "communication", moduleId: "mail", label: "Communication", iconName: "mail", surfaceIds: ["mail"], order: 2 }
];

export default function NavigationLayoutScenario({ scope = "user", disabled = false, language = "en" }: { scope?: NavigationPreferenceScope; disabled?: boolean; language?: string }) {
  const [value, setValue] = useState<NavigationPreferences | null>(() => new URLSearchParams(window.location.search).has("unavailable") ? {
    contract_version: "1", order: ["dashboard", "optional.navigation.absent", "files", "mail"], hidden: [], separators: []
  } : null);
  return <PlatformLanguageProvider preferredLanguageCode={language}>
    <div style={{ display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", minWidth: 0 }}>
      <IconRail navItems={items} productAreas={areas} presentation={{ navigation: value }} />
      <main style={{ minWidth: 0, padding: 16 }}>
        <h1>Navigation editor fixture</h1>
        <NavigationPreferenceEditor items={items} productAreas={areas} value={value} onChange={setValue} scope={scope} disabled={disabled} />
        <output data-testid="navigation-draft" style={{ display: "none" }}>{JSON.stringify(value)}</output>
      </main>
    </div>
  </PlatformLanguageProvider>;
}