import { useMemo } from 'react';
import { Bot, Hammer, Mail, ScanText, Settings, Volume2 } from 'lucide-react';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { WorkspaceLayout } from 'officerdev';

import { SettingsRoute, createSettingsPanelComponents, type SettingsSectionGroup } from './SettingsPanel';
import { SMTPSection } from './ServerSettings/SMTPSection';
import { MaintenanceSection } from './ServerSettings/MaintenanceSection';
import { TTSSection } from './ServerSettings/TTSSection';
import { OCRSection } from './ServerSettings/OCRSection';

const groups: SettingsSectionGroup[] = [
  {
    labelKey: 'settings.groups.ai',
    icon: Bot,
    sections: [
      {
        key: 'tts',
        icon: Volume2,
        titleKey: 'settings.sections.tts.label',
        descriptionKey: 'settings.sections.tts.description',
        content: <TTSSection />,
      },
      {
        key: 'ocr',
        icon: ScanText,
        titleKey: 'settings.sections.ocr.label',
        descriptionKey: 'settings.sections.ocr.description',
        content: <OCRSection />,
      },
    ],
  },
  {
    labelKey: 'settings.groups.maintenance',
    icon: Hammer,
    sections: [
      {
        key: 'maintenance',
        icon: Hammer,
        titleKey: 'settings.sections.maintenance.label',
        descriptionKey: 'settings.sections.maintenance.description',
        content: <MaintenanceSection />,
      },
    ],
  },
  {
    labelKey: 'settings.groups.email',
    icon: Mail,
    sections: [
      {
        key: 'smtp',
        icon: Mail,
        titleKey: 'settings.sections.smtp.label',
        descriptionKey: 'settings.sections.smtp.description',
        content: <SMTPSection />,
      },
    ],
  },
];

const BASE_PATH = '/settings/system';

const { Sidebar, Content, allSections } = createSettingsPanelComponents({
  basePath: BASE_PATH,
  sidebarIcon: Settings,
  sidebarLabelKey: 'settings.nav.system',
  groups,
});

// There used to be a second layout here that split a terminal in below the settings content, driven by a
// `system-settings:run-command` channel: a section asked for a sudo command, this screen grew a pane, ran
// it, and invalidated the queries the section named. Its only writer was the AI harness installer, and
// that moved server-side to `POST /server-settings/chat-providers/install` — leaving a channel whose two
// remaining writes were both `setState(null)`, a pane nothing could ever open, and a layout nothing could
// ever select. Removed rather than rewired; the install path it existed for no longer wants a terminal.
const baseLayout: LayoutNode = {
  type: 'group',
  id: 'system-root',
  direction: 'horizontal',
  children: [
    { node: { type: 'panel', id: 'system-left', appType: null }, size: 20 },
    { node: { type: 'panel', id: 'system-right', appType: null }, size: 80 },
  ],
};

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

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