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

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

const GLOBAL_KEY = 'PROFILE_SETTINGS_SELECTED';

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 /> },
  { key: 'ai-models', icon: Bot, title: 'AI Models', description: 'Default models for chat, projects, and tasks', content: <AIModels /> },
  { 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({
  globalKey: GLOBAL_KEY,
  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 (
    <div className="h-full w-full pt-2">
      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
    </div>
  );
};