import { useMemo } from 'react';
import { User, Lock, Globe, KeyRound, LayoutGrid, Volume2 } from 'lucide-react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';

import { SettingsRoute, createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
import { UserData } from './UserData';
import { ChangePassword } from './ChangePassword';
import { ApiKeys } from './ApiKeys';
import { Languages } from './Languages';
import { DockSettings } from './DockSettings';
import { VoicePreference } from './VoicePreference';

const BASE_PATH = '/settings/profile';

const sections: SettingsSection[] = [
  {
    key: 'profile',
    icon: User,
    titleKey: 'settings.sections.profile.label',
    descriptionKey: 'settings.sections.profile.description',
    content: <UserData />,
  },
  {
    key: 'change-password',
    icon: Lock,
    titleKey: 'settings.sections.changePassword.label',
    descriptionKey: 'settings.sections.changePassword.description',
    content: <ChangePassword />,
  },
  // Beside the password rather than under Integrations, where it was until 2026-08-21. A key is not an
  // integration with anything — it is a second way to present the authority this account already has, and
  // the permission registry says so: `/api-keys` is `core`, sitting with `/user` and `/dock`. Somebody
  // looking for it went to user management and then to profile, which is where it should have been.
  {
    key: 'api-keys',
    icon: KeyRound,
    titleKey: 'settings.sections.apiKeys.label',
    descriptionKey: 'settings.sections.apiKeys.description',
    content: <ApiKeys />,
  },
  {
    key: 'languages',
    icon: Globe,
    titleKey: 'settings.sections.languages.label',
    descriptionKey: 'settings.sections.languages.description',
    content: <Languages />,
  },
  {
    key: 'voice',
    icon: Volume2,
    titleKey: 'settings.sections.voice.label',
    descriptionKey: 'settings.sections.voice.description',
    content: <VoicePreference />,
  },
  {
    key: 'dock',
    icon: LayoutGrid,
    titleKey: 'settings.sections.dock.label',
    descriptionKey: 'settings.sections.dock.description',
    content: <DockSettings />,
  },
];

const { Sidebar, Content } = createSettingsPanelComponents({
  basePath: BASE_PATH,
  sidebarIcon: User,
  sidebarLabelKey: 'settings.nav.profile',
  sections,
});

const layout: LayoutNode = {
  type: 'group',
  id: 'profile-root',
  direction: 'horizontal',
  children: [
    { node: { type: 'panel', id: 'profile-left', appType: null }, size: 20 },
    { node: { type: 'panel', id: 'profile-right', appType: null }, size: 80 },
  ],
};

export const ProfileSettings = () => {
  const panelComponents: PanelComponents = useMemo(
    () => ({
      'profile-left': Sidebar,
      'profile-right': Content,
    }),
    [],
  );

  return (
    <SettingsRoute basePath={BASE_PATH} sections={sections}>
      <div className="h-full w-full pt-2">
        <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
      </div>
    </SettingsRoute>
  );
};