import { useMemo } from 'react';
import { User, Lock, Globe, ListChecks } from 'lucide-react';
import type { LayoutNode, PanelComponents } from '@/components/Workspace';
import { WorkspaceLayout } from '@/components/Workspace';

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

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: 'tasks', icon: ListChecks, title: 'Task Defaults', description: 'Default model for tasks', content: <TaskDefaults /> },
  { key: 'languages', icon: Globe, title: 'Languages', description: 'Spoken, default, and translation', content: <Languages /> },
];

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>
  );
};