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, title: 'Profile', description: 'Avatar, name, and email', content: <UserData /> },
  {
    key: 'change-password',
    icon: Lock,
    title: 'Change Password',
    description: 'Update your password',
    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,
    title: 'API keys',
    description: 'Per-app keys that sign in as you, revocable one at a time',
    content: <ApiKeys />,
  },
  {
    key: 'languages',
    icon: Globe,
    title: 'Languages',
    description: 'Spoken, default, and translation',
    content: <Languages />,
  },
  {
    key: 'voice',
    icon: Volume2,
    title: 'Voice',
    description: 'Text-to-speech voice preference',
    content: <VoicePreference />,
  },
  {
    key: 'dock',
    icon: LayoutGrid,
    title: 'Dock',
    description: 'Choose and reorder dock items',
    content: <DockSettings />,
  },
];

const { Sidebar, Content } = createSettingsPanelComponents({
  basePath: BASE_PATH,
  sidebarIcon: User,
  sidebarLabel: '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>
  );
};